Code Monkey home page Code Monkey logo

vue3-telegram-login's Introduction

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

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.
  3. Don't disable third party cookies if you want to use Telegram Login as a User (thanks @robverhoef)

vue3-telegram-login's People

Contributors

qwerzl avatar

Forkers

paveltigiev

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.