vue-telegram-login

Vue component for Telegram login

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-telegram-login
7552.1.04 years ago5 years agoMinified + gzip package size for vue-telegram-login in KB

Readme

Vue Telegram Login

<img src="https://i.imgur.com/ex5hnL3.png" />
<br>
<br>
<a href="https://badge.fury.io/js/vue-telegram-login">
    <img src="https://badge.fury.io/js/vue-telegram-login.svg" />
</a>
<a href="https://www.npmjs.com/package/vue-telegram-login">
    <img src="https://img.shields.io/npm/dm/vue-telegram-login.svg" />
</a>
<a href="https://travis-ci.org/vchaptsev/vue-telegram-login">
    <img src="https://travis-ci.org/vchaptsev/vue-telegram-login.svg?branch=master" />
</a><br>


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

Installation

Install with yarn:
```bash $ yarn add vue-telegram-login ```
Install with npm:
```bash $ 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 |

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.