Telegram 注册/登录

用户可以通过 Telegram 账号登录/注册系统

接口使用说明

在调用接口之前，请确保您已经认真阅读了相关的接口文档。以下是针对不同登录方式的具体说明：

一、设置 Telegram 登录配置信息

更详细步骤可参考 Telegram 开发文档

Telegram 开发文档：https://core.telegram.org/widgets/login

在使用第三方登录服务之前，您需要先注册相应平台的开发者账号并创建应用。以下是Telegram 的注册步骤：

1. 访问Telegram API文档：

   • 访问Telegram API官方文档了解如何获取API ID和Hash。

2. 创建新应用：

   • 在Telegram中找到@BotFather机器人，并使用它来创建一个新的bot（应用）。

3. 获取API ID和Hash：

   • 通过与@BotFather的对话，获取您的应用的API ID和API Hash。

4. 在白标管理后台配置API ID和API Hash。

二、获取三方登录配置信息

调用获取三方配置接口拿到第一步注册的 Telegram 的 ClientId

请求参数

{
    // 第三方源：支持的第三方登录来源
    // 可选值包括：google, facebook, twitter, telegram, apple, metamask, 多个可用逗号隔开
    "thirdSource": "google,telegram"  // 示例：使用 Google telegram登录
}

返回结构

{
    // 第三方源：支持的第三方登录来源，例如 "google", "facebook", "twitter", "telegram", "apple", "metamask"
    "thirdSource": "telegram",  // 示例：使用 telegram 登录

    // 客户端 ID：第三方应用的唯一标识符
    "clientId": "abcesddff",    // 示例：您的应用在 Twitter 上的客户端 ID

    // 开发者账号：与第三方源关联的开发者邮箱
    "developerAccount": "[email protected]" // 示例：开发者的邮箱地址
}

三、登录代码实现

参考文档：https://core.telegram.org/widgets/login

1. 引入 Telegram JavaScript SDK

在页面中引入Telegram JavaScript SDK，可以通过以下方式：

   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’)
        script.setAttribute('data-onauth', 'window.onTelegramAuth(user)')

        script.onload = function () {
            const iframe: any = 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. 通过按钮发起发起登录授权请求

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

3. Telegram 三方 accessToken 校验

调用 Telegram 三方登录校验接口

请求参数

{
   /**
     * 渠道来源，支持的渠道类型，例如 "h5" 或 "pc"
     */
    channelSource: 'h5', 

    /**
     * 用户授权信息，包含用户的详细信息，以 JSON 字符串形式提供
     */
    userJsonStr: 'userJsonStr',
}

返回结构

{
    // 下一步操作行为：支持的操作类型，如 "login"、"bind"、"register"
    "action": "login",  // 示例：表示用户进行登录操作

    // 三方返回的用户邮箱
    "email": "[email protected]",  

    // 校验失败的原因（如果有）
    "failReason": "Invalid credentials", 

    // 三方返回的用户手机号
    "phone": "[phone]", 

    // 校验结果：表示校验是否成功，true 为成功，false 为失败
    "result": true,  // 示例：表示校验成功

    // 第三方登录源：支持的来源，例如 "google"、"facebook"、"twitter"
    "thirdSource": "apple",  

    // 校验 token：用于身份验证的 token
    "token": "exampleToken123",

    // 第三方用户 ID：用户在第三方平台的唯一标识符
    "userId": "thirdPartyUserId",

    // 第三方授权凭证：用于访问第三方 API 的凭证
    "authToken": "authToken123" 
}

4. 完成登录/注册

根据上一步返回的信息，进行三方登录或注册接口的调用。

const Verify = (data: UserService.LoginVerifyRes) => {
    // 获取操作类型、失败原因和第三方来源
    let { action, failReason, thirdSource } = data;
    
    // 检查是否为 Telegram 登录
    const isTg = thirdSource === 'telegram';

    // 根据操作类型进行不同的处理
    if (action === 'register') {
        // 注册操作
        isTg ? socialRegister(data) : register(data); 注册
    } else if (action === 'login') {
        // 登录操作
        isTg ? socialLogin(data) : login(data); 
    } else if (action === 'bind') {
        // 绑定操作
        isTg ? socialLogin(data) : login(data);
    } else {
        // 操作不符合预期，显示失败原因
        Toast.error(failReason);
    }
};

• 对于 Telegram 登录，请使用三方社交账号登录接口。

通过以上步骤，您可以成功集成 Telegram 登录功能，并获取用户授权的AccessToken。如果在集成过程中遇到问题，请检查网络连接或Telegram 应用的配置，确保所有步骤正确无误。如需更多信息，请参考 Telegram 开发文档。