react-telegram-login

    1.1.2 • Public • Published

    React Telegram Login

    A Telegram OAuth Sign-in / Log-in Component for React

    Code

    Install

    npm install react-telegram-login
    

    or

    yarn add react-telegram-login
    

    How to use

    import React from 'react';
    import ReactDOM from 'react-dom';
    import TelegramLoginButton from 'react-telegram-login';
     
    const handleTelegramResponse = response => {
      console.log(response);
    };
     
    ReactDOM.render(
      <TelegramLoginButton dataOnauth={handleTelegramResponse} botName="OdauBot" />,
      document.getElementById('telegramButton')
    );

    Notes:

    • Login widget will not work on localhost or local-ip-address. Use should create and register your bot domain with BotFather to get that work. You can create your custom domain. For example: yourdomain.local by add new record point to your local ip by edit hosts file.
    • It's only run on port 80. When you use create-react-app. You must run sudo yarn PORT=80 start, or on Windows CMD (not powershell), set PORT=80 && yarn start

    Parameters

    Telegram Scopes List: https://core.telegram.org/widgets/login

    dataOnauth callback

    dataOnauth callback returns a TelegramUser object which provides access to all of the TelegramUser methods listed here: https://core.telegram.org/widgets/login.

    dataAuthUrl redirection url

    dataAuthUrl is a string which corresponds to the url where the user is redirected after a successful authorization. You should either use dataAuthUrl or dataOnauth, not both of them

    Receiving authorization data

    After a successful authorization, the widget can return data in two ways:

    • by redirecting the user to the URL specified in the data-auth-url attribute with the following parameters: id, first_name, last_name, username, photo_url, auth_date, hash and lang;
    • by calling the callback function data-onauth with the JSON-object containing id, first_name, last_name, username, photo_url, auth_date, hash and lang fields.
    <TelegramLoginButton dataOnauth={this.handleUserInfo} botName="OdauBot" />

    Dev Server

    npm run start
    

    You can set IP and PORT in webpack.config.js

    Run Tests

    npm run test:watch
    

    Production Bundle

    npm run bundle
    

    Install

    npm i react-telegram-login

    DownloadsWeekly Downloads

    3,533

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    12.3 kB

    Total Files

    10

    Last publish

    Collaborators

    • phx191