Django集成Telegram登录组件：部分浏览器报postMessage空指针错误

问题诊断 #

你遇到的TypeError: Cannot read properties of null (reading 'postMessage')错误，本质是Telegram授权弹窗无法向父页面发送回调消息——Chrome及移动端浏览器的跨域/安全策略比Firefox更严格，直接导致弹窗被拦截或父窗口引用丢失。

解决方案 #

1. 配置Telegram Bot授权域名 #

在BotFather中给机器人执行/setdomain命令，添加网站完整域名（如example.com），确保Telegram官方认可你的域名作为授权回调来源，这是Chrome下功能正常的核心前提。

2. 调整Telegram Widget脚本属性 #

修改登录页面脚本，优化加载策略并补充必要属性：

<html>
    <body>
        <div>
            <script src="https://telegram.org/js/telegram-widget.js?21"
                    data-telegram-login="NameOfTelegrambot"
                    data-size="medium"
                    data-userpic="false"
                    data-auth-url="https://example.com/accounts/telegram/login/"
                    data-request-access="write">
            </script>
        </div>
    </body>
</html>

• 移除async属性，避免脚本加载时机错位导致父窗口引用失效
• 添加data-request-access="write"，确保获取完整的用户授权信息

3. 修正Django项目及allauth配置 #

在settings.py中补充/完善以下配置：

# 允许访问的域名列表
ALLOWED_HOSTS = ['example.com', 'localhost']

# Chrome严格校验的CSRF信任来源
CSRF_TRUSTED_ORIGINS = ['https://example.com']

# Telegram第三方登录配置
SOCIALACCOUNT_PROVIDERS = {
    'telegram': {
        'TOKEN': os.environ.get('TELEGRAM_BOT_TOKEN')  # 对应.env文件中的令牌
    }
}

4. 处理Chrome安全限制 #

• 强制HTTPS访问：Chrome默认拦截非HTTPS环境下的第三方弹窗和postMessage通信，生产环境必须部署HTTPS；本地测试可使用ngrok映射本地端口到公网HTTPS地址。
• 手动允许弹窗权限：测试时开启网站的弹窗权限，避免Chrome自动拦截Telegram授权弹窗。

5. Docker本地测试注意事项 #

使用提供的docker-compose环境时：

• 确保.env文件中TELEGRAM_BOT_TOKEN配置正确
• 本地测试域名需与BotFather中设置的域名一致，或用ngrok生成公网HTTPS地址进行测试

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