Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/vchaptsev/vue-telegram-login

Vue component for Telegram login
https://github.com/vchaptsev/vue-telegram-login

telegram telegram-login vue vue-component

Last synced: 26 days ago
JSON representation

Vue component for Telegram login

Lists

README 

        
Vue Telegram Login




    

    


    


    

        

    

    

        

    

    

        

    





**vue-telegram-login** is a Vue component for [Telegram Login](https://core.telegram.org/widgets/login)



## Installation



Install with [yarn](https://yarnpkg.com):



  ```bash

  $ yarn add vue-telegram-login

  ```



Install with [npm](https://npmjs.com):



  ```bash

  $ npm i vue-telegram-login --save

  ```



or if you just want to try it out, [unpkg](https://unpkg.com/#/) has ready-to-use packages.



```html



```

## Usage



Import `vue-telegram-login`, pass it to the `components` and use in your template



```html



  

  

  

  

  

  



import {vueTelegramLogin} from 'vue-telegram-login'



export default {

  name: 'your-component',

  components: {vueTelegramLogin},

  methods: {

    yourCallbackFunction (user) {

      // gets user as an input

      // id, first_name, last_name, username,

      // photo_url, auth_date and hash

      console.log(user)

    }

  }

}



```



## Props

You can play around with options on the official [widget page](https://core.telegram.org/widgets/login#widget-configuration)



| Name          | Description                                                                   | Required | Default     |

| ------------- | ----------------------------------------------------------------------------- | -------- | ----------- |

| mode          | 'callback' or 'redirect'                                                      | True     | null        |

| telegramLogin | Your telegram bot name                                                        | True     | null        |

| @callback     | Your callback function, it will be called after success if mode is 'callback' | False    | true        |

| redirectUrl   | Your redirect URL, user will be redirected if mode is 'redirect'              | False    | null        |

| requestAccess | 'write' if you want to get access to send messages from your bot              | False    | 'read'      |

| size          | 'large', 'medium' or 'small'                                                  | False    | 'large'     |

| userpic       | Show user photo, true or false                                                | False    | true        |

| radius        | Button corner radius (default depends on chosen size)                         | False    | 20\14\10    |



## Notes

1. You need to set domain to your bot if you want to user Telagram Login (`/setdomain` command to [@BotFather](https://t.me/botfather))

2. You need to verify the authentication and the integrity of the data received by comparing the received hash parameter with the hexadecimal representation of the HMAC-SHA-256 signature of the data-check-string with the SHA256 hash of the bot's token used as a secret key ([source](https://core.telegram.org/widgets/login#checking-authorization)).


You can find some code samples [on this page](https://gist.github.com/anonymous/6516521b1fb3b464534fbc30ea3573c2).

3. Don't disable third party cookies if you want to use Telegram Login as a User (thanks [@robverhoef](https://github.com/robverhoef))