Vue component for Telegram login

Vue Telegram Login

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

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

GitHub