2.1.0 • Published 6 years ago

vue-telegram-login v2.1.0

Weekly downloads
412
License
MIT
Repository
github
Last release
6 years ago

vue-telegram-login is a Vue component for Telegram Login

Installation

Install with yarn:

$ yarn add vue-telegram-login

Install with npm:

$ npm i vue-telegram-login --save

or 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

NameDescriptionRequiredDefault
mode'callback' or 'redirect'Truenull
telegramLoginYour telegram bot nameTruenull
@callbackYour callback function, it will be called after success if mode is 'callback'Falsetrue
redirectUrlYour redirect URL, user will be redirected if mode is 'redirect'Falsenull
requestAccess'write' if you want to get access to send messages from your botFalse'read'
size'large', 'medium' or 'small'False'large'
userpicShow user photo, true or falseFalsetrue
radiusButton corner radius (default depends on chosen size)False20\14\10

Notes

  1. You need to set domain to your bot if you want to user Telagram Login (/setdomain command to @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). You can find some code samples on this page.