Vue Telegram Login
vue-telegram-login is a Vue component for Telegram Login
Installation
Install with yarn:
$ yarn add vue-telegram-loginInstall with npm:
$ npm i vue-telegram-login --saveor if you just want to try it out, unpkg has ready-to-use packages.
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-telegram-login"></script>Usage
Import vue-telegram-login, pass it to the components and use in your template
<template>
<!-- Callback mode -->
<vue-telegram-login
mode="callback"
telegram-login="YourTelegramBot"
@callback="yourCallbackFunction" />
<!-- Redirect mode -->
<vue-telegram-login
mode="redirect"
telegram-login="YourTelegramBot"
redirect-url="https://your-website.io" />
</template>
<script>
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)
}
}
}
</script>Props
You can play around with options on the official widget page
| 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
- You need to set domain to your bot if you want to user Telagram Login (
/setdomaincommand to @BotFather) - 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).
You can find some code samples on this page. - Don't disable third party cookies if you want to use Telegram Login as a User (thanks @robverhoef)