国产欧美日韩中文久久,亚洲成av人片在www色猫咪,精品久久综合1区2区3区激情

在 Telegraf.js 中接收 Telegram Web App 發(fā)送的數(shù)據(jù)

碧海醫(yī)心

發(fā)布： 2025-10-17 13:15:10

原創(chuàng)

483人瀏覽過

在 telegraf.js 中接收 telegram web app 發(fā)送的數(shù)據(jù)

本文詳細(xì)闡述了如何在 Telegraf.js 框架下有效接收來自 Telegram Web App 通過 Telegram.WebApp.sendData() 方法發(fā)送的數(shù)據(jù)。核心機(jī)制在于，sendData() 觸發(fā)的是一個(gè)標(biāo)準(zhǔn)的 Telegram 消息事件，數(shù)據(jù)會封裝在 ctx.message.web_app_data.data 字段中。文章提供了前端 Web App 和后端 Telegraf.js 的示例代碼，并強(qiáng)調(diào)了數(shù)據(jù)解析、錯(cuò)誤處理及安全考量等最佳實(shí)踐。

理解 Telegram Web App 與 Telegraf.js 的數(shù)據(jù)交互

Telegram Web App 允許開發(fā)者在 Telegram 聊天界面內(nèi)嵌入功能豐富的網(wǎng)頁應(yīng)用。當(dāng)用戶在 Web App 中完成特定操作后，通常需要將一些數(shù)據(jù)回傳給機(jī)器人進(jìn)行處理。Telegram.WebApp.sendData(data) 是 Web App 提供的一個(gè)關(guān)鍵方法，用于將數(shù)據(jù)發(fā)送回與之關(guān)聯(lián)的 Telegram 機(jī)器人。

對于 Telegraf.js 這樣的機(jī)器人框架而言，接收這些數(shù)據(jù)的方式與處理普通用戶消息略有不同，但并非完全獨(dú)立。關(guān)鍵在于，sendData() 方法實(shí)際上會觸發(fā)一個(gè)特殊的“消息”事件，該消息的 web_app_data 字段中包含了 Web App 發(fā)送的實(shí)際數(shù)據(jù)。

在 Telegraf.js 中接收 Web App 數(shù)據(jù)

要從 Telegram.WebApp.sendData() 接收數(shù)據(jù)，Telegraf.js 機(jī)器人需要監(jiān)聽常規(guī)的 message 事件。不同于一些開發(fā)者可能預(yù)期的 web_app_data 專用事件，sendData() 產(chǎn)生的數(shù)據(jù)會作為 message 對象的一部分傳遞。

在 message 事件的處理函數(shù)中，你可以通過 ctx.message.web_app_data 屬性來訪問 Web App 發(fā)送的數(shù)據(jù)。這個(gè)屬性本身是一個(gè)對象，其中包含一個(gè) data 字段，即為 Web App 通過 sendData() 發(fā)送的原始字符串。

示例代碼：

DeepSeek App

DeepSeek官方推出的AI對話助手App

查看詳情

首先，在你的前端 Web App 中，你需要使用 Telegram.WebApp.sendData() 發(fā)送數(shù)據(jù)。通常，這些數(shù)據(jù)會被 JSON 字符串化以便于傳輸復(fù)雜結(jié)構(gòu)。

1. 前端 Web App 代碼 (index.html 或 app.js):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web App 數(shù)據(jù)發(fā)送示例</title>
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
        button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>Telegram Web App 數(shù)據(jù)發(fā)送</h1>
    <p>點(diǎn)擊按鈕將數(shù)據(jù)發(fā)送給機(jī)器人。</p>
    <button id="sendDataButton">發(fā)送認(rèn)證數(shù)據(jù)</button>

    <script>
        // 確保 Telegram Web App SDK 已加載并初始化
        if (window.Telegram && window.Telegram.WebApp) {
            window.Telegram.WebApp.ready();

            document.getElementById('sendDataButton').addEventListener('click', () => {
                const dataToSend = {
                    action: 'user_authentication',
                    userId: window.Telegram.WebApp.initDataUnsafe?.user?.id || 'unknown',
                    username: window.Telegram.WebApp.initDataUnsafe?.user?.username || 'unknown_user',
                    timestamp: Date.now()
                };

                // 將數(shù)據(jù) JSON 字符串化后發(fā)送
                window.Telegram.WebApp.sendData(JSON.stringify(dataToSend));

                // 可選：發(fā)送數(shù)據(jù)后關(guān)閉 Web App
                window.Telegram.WebApp.close();
            });
        } else {
            console.error("Telegram Web App SDK 未加載或未初始化。");
            alert("請?jiān)?Telegram 內(nèi)部打開此 Web App。");
        }
    </script>
</body>
</html>

登錄后復(fù)制

2. 后端 Telegraf.js 機(jī)器人代碼 (bot.js):

const { Telegraf, Markup } = require('telegraf');
require('dotenv').config(); // 用于加載 .env 文件中的 BOT_TOKEN

const bot = new Telegraf(process.env.BOT_TOKEN);

// 替換為你的 Web App 的實(shí)際 URL
const WEB_APP_URL = 'https://your-domain.com/your-web-app-path';

// 處理 /start 命令，提供一個(gè)打開 Web App 的按鈕
bot.start(async (ctx) => {
    ctx.reply('歡迎使用！點(diǎn)擊下方按鈕打開 Web App 進(jìn)行操作：', {
        reply_markup: Markup.inlineKeyboard([
            Markup.button.webApp('打開 Web App', WEB_APP_URL)
        ])
    });
});

// 監(jiān)聽所有消息事件，包括來自 Web App 的數(shù)據(jù)
bot.on('message', async (ctx) => {
    // 檢查消息是否包含 web_app_data
    if (ctx.message && ctx.message.web_app_data) {
        const receivedRawData = ctx.message.web_app_data.data;
        console.log('從 Web App 接收到原始數(shù)據(jù):', receivedRawData);

        try {
            // 嘗試將接收到的數(shù)據(jù)解析為 JSON 對象
            const parsedData = JSON.parse(receivedRawData);

            // 回復(fù)用戶，顯示接收到的數(shù)據(jù)
            await ctx.reply(`已從 Web App 接收到數(shù)據(jù)：\n\`\`\`json\n${JSON.stringify(parsedData, null, 2)}\n\`\`\``, {
                parse_mode: 'MarkdownV2'
            });

            // 根據(jù)接收到的數(shù)據(jù)執(zhí)行業(yè)務(wù)邏輯
            if (parsedData.action === 'user_authentication') {
                console.log(`用戶 ${parsedData.userId} (${parsedData.username}) 已通過 Web App 完成認(rèn)證。`);
                await ctx.reply(`感謝您的認(rèn)證，${parsedData.username}！`);
                // 這里可以進(jìn)行數(shù)據(jù)庫更新、用戶狀態(tài)管理等操作
            } else {
                await ctx.reply('接收到未知類型的 Web App 數(shù)據(jù)。');
            }

        } catch (e) {
            console.error('解析 Web App 數(shù)據(jù)失敗:', e);
            await ctx.reply(`從 Web App 接收到非 JSON 格式數(shù)據(jù)或解析錯(cuò)誤：\`${receivedRawData}\``, {
                parse_mode: 'MarkdownV2'
            });
        }
    } else if (ctx.message && ctx.message.text) {
        // 處理其他類型的文本消息
        await ctx.reply(`我收到了您的消息："${ctx.message.text}"`);
    } else {
        // 處理其他非文本、非 Web App 數(shù)據(jù)的消息類型
        await ctx.reply('我收到了一個(gè)消息，但它不是文本或 Web App 數(shù)據(jù)。');
    }
});

// 啟動機(jī)器人
bot.launch();

// 優(yōu)雅地停止機(jī)器人（處理 SIGINT 和 SIGTERM 信號）
process.once('SIGINT', () => bot.stop('SIGINT'));
process.once('SIGTERM', () => bot.stop('SIGTERM'));

登錄后復(fù)制

注意事項(xiàng)與最佳實(shí)踐

數(shù)據(jù)格式化： Telegram.WebApp.sendData() 接收的是一個(gè)字符串。如果需要發(fā)送復(fù)雜的對象，務(wù)必在前端使用 JSON.stringify() 將其轉(zhuǎn)換為 JSON 字符串，并在后端使用 JSON.parse() 進(jìn)行解析。
錯(cuò)誤處理： 在后端解析數(shù)據(jù)時(shí)，始終使用 try...catch 塊來處理 JSON.parse() 可能拋出的錯(cuò)誤，以應(yīng)對前端發(fā)送了無效 JSON 字符串的情況。
數(shù)據(jù)驗(yàn)證： 從 Web App 接收到的數(shù)據(jù)應(yīng)被視為用戶輸入，必須進(jìn)行嚴(yán)格的驗(yàn)證和清理，以防止安全漏洞（如 SQL 注入、XSS 等）。
用戶反饋： 機(jī)器人接收到數(shù)據(jù)并處理后，應(yīng)及時(shí)給用戶一個(gè)反饋，告知數(shù)據(jù)已收到并處理，提升用戶體驗(yàn)。
Web App URL 配置： 確保 WEB_APP_URL 變量指向你的實(shí)際 Web App 地址，并且該 URL 已在 BotFather 中配置為你的 Web App 域名。
initDataUnsafe 的使用： 在 Web App 中，window.Telegram.WebApp.initDataUnsafe 包含了啟動 Web App 的用戶信息，可以用于在發(fā)送數(shù)據(jù)時(shí)附帶用戶身份信息，方便后端進(jìn)行關(guān)聯(lián)。但請注意，initDataUnsafe 并非完全安全，其數(shù)據(jù)應(yīng)在后端進(jìn)行哈希校驗(yàn)以確保未被篡改。

總結(jié)

通過上述方法，Telegraf.js 開發(fā)者可以有效地從 Telegram Web App 接收數(shù)據(jù)，實(shí)現(xiàn)機(jī)器人與 Web App 之間的雙向通信。核心在于理解 Telegram.WebApp.sendData() 會觸發(fā)一個(gè)帶有 web_app_data 字段的常規(guī) message 事件，并在此事件處理器中正確地解析和處理數(shù)據(jù)。遵循最佳實(shí)踐，可以確保數(shù)據(jù)傳輸?shù)慕研院桶踩浴?/p>

以上就是在 Telegraf.js 中接收 Telegram Web App 發(fā)送的數(shù)據(jù)的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)標(biāo)簽：