Telegram Sign Up/Log In

Users can log in/register the system through their Telegram account

API Usage Instructions

Before calling the API, please ensure you have thoroughly read the relevant API documentation. Below are specific instructions for different login methods:

一、Setting Up Telegram Login Configuration

For more detailed steps, please refer to the Telegram developer documentation: Telegram Developer Documentation

Before using the third-party login service, you need to register as a developer on the respective platform and create an application. The registration steps for Telegram are as follows:

1. Visit the Telegram API Documentation: Access the official Telegram API documentation to learn how to obtain your API ID and Hash.

2. Create a New Application: Find the @BotFather bot on Telegram and use it to create a new bot (application).

3. Get API ID and Hash: Through your conversation with @BotFather, obtain your application's API ID and API Hash.

4. Configure API ID and API Hash in the White Label Management Backend.

二、Retrieve Third-Party Login Configuration Information

Call the third-party configuration API to obtain the Client ID registered in the first step.

Request Parameters:

{
    // Third-party source: Supported third-party login sources
    // Optional values include: google, facebook, twitter, telegram, apple, metamask, separated by commas
    "thirdSource": "google,telegram"  // Example: using Google and Telegram login
}

Response Structure:

{
    // Third-party source: Supported third-party login sources, e.g., "google", "facebook", "twitter", "telegram", "apple", "metamask"
    "thirdSource": "telegram",  // Example: using Telegram login

    // Client ID: The unique identifier for the third-party application
    "clientId": "abcesddff",    // Example: your application's client ID on Telegram

    // Developer Account: The developer's email associated with the third-party source
    "developerAccount": "[email protected]" // Example: developer's email address
}

三、Login Code Implementation

Refer to the documentation: Telegram Login Widget

1. Include the Telegram JavaScript SDK

Include the Telegram JavaScript SDK on your page as follows:

const script = document.createElement('script');
script.async = true;
script.src = 'https://telegram.org/js/telegram-widget.js?22';
script.setAttribute('data-size', 'large');
script.setAttribute('data-telegram-login', 'clientId'); // Replace with your actual client ID
script.setAttribute('data-onauth', 'window.onTelegramAuth(user)');

script.onload = function () {
    const iframe = document.querySelector('iframe[src*="oauth.telegram.org"]');
    if (iframe) {
        iframe.onload = () => {
            setScriptLoading(false);
        };
    }
};

window.onTelegramAuth = (res) => {
    telegramVerify({
        userJsonStr: JSON.stringify(res),
    });
};

setTimeout(() => {
    telegramButton.current?.appendChild(script);
});

2. Initiate Login Authorization Request via Button:

<button className="telegram-container" ref={telegramButton} />

3. Telegram Access Token Verification

Call the Telegram third-party login verification API.

Request Parameters:

{
    // Channel source: Supported channel types, e.g., "h5" or "pc"
    "channelSource": "h5",

    // User authorization information, provided as a JSON string
    "userJsonStr": "userJsonStr"
}

Response Structure:

{
    // Next operation action: Supported operation types, such as "login", "bind", "register"
    "action": "login",  // Example: indicates the user is performing a login operation

    // User's email returned by the third party
    "email": "[email protected]",

    // Reason for verification failure (if any)
    "failReason": "Invalid credentials",

    // User's phone number returned by the third party
    "phone": "[phone]",

    // Verification result: indicates whether verification was successful, true for success, false for failure
    "result": true,  // Example: indicates verification success

    // Third-party login source: Supported sources, e.g., "google", "facebook", "twitter"
    "thirdSource": "telegram",

    // Verification token: token for identity verification
    "token": "exampleToken123",

    // Third-party user ID: unique identifier for the user on the third-party platform
    "userId": "thirdPartyUserId",

    // Third-party authorization credential: credential for accessing third-party APIs
    "authToken": "authToken123"
}

4. Complete Login/Register

Based on the information returned in the previous step, call the third-party login or registration API.

const verify = (data: UserService.LoginVerifyRes) => {
    // Retrieve action type, failure reason, and third-party source
    let { action, failReason, thirdSource } = data;

    // Check if it's a Telegram login
    const isTg = thirdSource === 'telegram';

    // Handle different processes based on action type
    if (action === 'register') {
        // Registration operation
        isTg ? socialRegister(data) : register(data);
    } else if (action === 'login') {
        // Login operation
        isTg ? socialLogin(data) : login(data);
    } else if (action === 'bind') {
        // Binding operation
        isTg ? socialLogin(data) : login(data);
    } else {
        // Operation is not as expected, show failure reason
        Toast.error(failReason);
    }
};

For Telegram login, please use the third-party social account login interface. Through these steps, you can successfully integrate Telegram login functionality and obtain the user's authorized Access Token. If you encounter issues during integration, please check the network connection or the configuration of your Telegram application to ensure all steps are correctly followed. For more information, please refer to the Telegram developer documentation.