Telegram第三方React登录组件无法接收验证消息问题求助

核心排查方向（优先检查Bot配置） #

• 必须配置Bot域名白名单
  Telegram的OAuth登录要求你在BotFather中为目标Bot设置允许的域名。操作步骤：

  1. 打开Telegram给BotFather发送 /setdomain
  2. 选择你的目标Bot（即代码中的yyybot）
  3. 输入网站的完整域名（例如https://your-production-domain.com）
     注意：本地开发时不能直接用localhost，需要用ngrok之类的工具生成公开隧道域名，再把这个域名添加到白名单。

• 确认Bot用户名完全正确
  代码中data-telegram-login属性的值必须是你的Bot的准确用户名（不带@前缀），如果用户名写错，OAuth流程会直接异常中断。

• 启用data-auth-url回调地址
  代码中你注释掉了data-auth-url，这个属性是必填项——Telegram需要把用户授权后的信息发送到这个后端地址，缺少它会导致验证流程卡在输入手机号后的步骤。确保这个地址是公开可访问的，并且已经加入到Bot的域名白名单中。

代码层面优化建议 #

针对你提供的组件代码，做以下调整可以避免潜在冲突：

import React, { useEffect, useCallback } from 'react';

declare global {
    interface Window {
        onTelegramAuth: (user: any) => void;
    }
}

const TelegramLoginWidgetTest = ({ onAuth }) => {
    // 用useCallback确保回调函数稳定
    const handleTelegramAuth = useCallback((user) => {
        onAuth(user);
    }, [onAuth]);

    useEffect(() => {
        window.onTelegramAuth = handleTelegramAuth;

        const widgetDiv = document.getElementById('telegram-login-widget');
        if (!widgetDiv) return;

        // 先检查是否已存在脚本，避免重复注入
        let script = document.querySelector('script[src="https://telegram.org/js/telegram-widget.js?22"]');
        if (!script) {
            script = document.createElement('script');
            script.async = true;
            script.src = 'https://telegram.org/js/telegram-widget.js?22';
            script.setAttribute('data-telegram-login', 'yyybot');
            script.setAttribute('data-size', 'large');
            script.setAttribute('data-onauth', 'onTelegramAuth(user)');
            // 取消注释并设置正确的回调地址
            script.setAttribute('data-auth-url', 'https://your-domain.com/telegram-callback');
            script.setAttribute('data-request-access', 'write');
            widgetDiv.appendChild(script);
        }

        return () => {
            delete window.onTelegramAuth;
            // 只有自己添加的脚本才删除，避免影响其他组件
            if (script && script.parentElement === widgetDiv) {
                widgetDiv.removeChild(script);
            }
        };
    }, [handleTelegramAuth]);

    return (
        <div>
            <div id="telegram-login-widget"></div>
        </div>
    );
};

export default TelegramLoginWidgetTest;

额外排查点 #

• 检查浏览器控制台是否有报错，比如跨域问题或者脚本加载失败
• 确保你的Telegram账号没有被限制，尝试用其他账号测试
• 确认服务器没有拦截Telegram的请求（比如防火墙、CDN规则）

内容的提问来源于stack exchange，提问作者testing123