如何通过telegraf.js获取Telegram.WebApp.sendData()发送的数据？

问题核心原因 #

你的代码逻辑本身无语法错误，但事件未触发通常是以下两个关键问题导致：

1. 未在BotFather中配置Web App的有效域名
2. 前端未等待Telegram WebApp环境初始化完成就调用sendData

解决方案 #

1. 配置Web App域名（必填步骤）

在BotFather中完成域名绑定：

• 发送/mybots，选择你的目标机器人
• 进入Bot Settings -> Web App -> Set WebApp Domain
• 添加前端的HTTPS根域名（仅需填写https://your-domain.com格式，不能带具体路径）

2. 修正后端监听代码

补全start命令的语法闭合，并确保web_app_data事件监听逻辑正确：

bot.start(async (ctx) => {
    ctx.reply('Hello', {
        reply_markup: {
            inline_keyboard: [
                [{ text: 'Auth', web_app: { url: FRONT_URL } }]
            ]
        }
    });
});

// 监听Web App发送的数据
bot.on('web_app_data', async (ctx) => {
    // 解析JSON格式的传入数据
    const parsedData = JSON.parse(ctx.webAppData.data);
    console.log('收到Web App数据:', parsedData);
    // 回复用户确认接收
    await ctx.reply(`已收到数据：${JSON.stringify(parsedData)}`);
});

3. 修正前端发送逻辑

必须等待Telegram WebApp环境初始化完成后再调用sendData：

// 等待WebApp环境就绪
window.Telegram.WebApp.ready();

// 发送数据
window.Telegram.WebApp.sendData(JSON.stringify({ data: 'test' }));

额外注意事项 #

• 前端必须使用HTTPS协议，Telegram Web App不支持HTTP
• 必须在Telegram客户端（APP/桌面端）内打开Web App，浏览器直接访问无法触发sendData事件
• 单次发送的数据大小不能超过4096字节

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