跳至主要內容

MiniApp 前端接入:入口按鈕、SDK 與初始化資料

用 sendMessage 傳送 MiniApp 入口按鈕、載入 MPChat WebApp SDK,並正確讀取 initData 與 initDataUnsafe,附目前欄位支援範圍。

前端規則:讀取 initData(原始簽名字串)並發給後端驗證。initDataUnsafe 僅用於 UI 顯示,絕不能作為身分證明。


總覽

選擇 MiniApp 入口

已啟用的 MiniApp 在 MPChat 內開啟後,瀏覽器 SDK 會提供啟動資料。

  • 直連使用 https://mp.net/{botUsername}/{shortName},可帶 ?startapp=。

  • sendMessage 的內嵌 web_app 按鈕通常在私訊開啟目前 Bot 已啟用的 MiniApp。在 Bot 已加入的群組或超級群組分享此 MiniApp 時,鍵盤必須恰好一列、一個按鈕,且該按鈕只含 text 和 web_app。

  • 底部 Reply Keyboard 的 web_app 按鈕用於私訊。聊天選單透過 setChatMenuButton 單獨設定,接受最長 2048 字元的有效 HTTPS 網址。外部選單網址可能沒有 MiniApp 啟動資料。

傳送單一內嵌入口按鈕

使用目前 Bot 已登記的 entryUrl 或完整 MPChat 直連。請求透過 web_app.url 指定 MiniApp。下列按鈕結構也適用於 Bot 已加入的群組。

{
"chat_id": "987654321",
"text": "Open Demo MiniApp",
"reply_markup": {
"inline_keyboard": [[
{ "text": "Open", "web_app": { "url": "https://mp.net/MyBot/demo" } }
]]
}
}

載入瀏覽器 SDK

此指令碼在 MiniApp 頁面執行。Node.js Bot SDK 是伺服端使用的獨立套件,Bot token 只儲存在伺服端。

<script src="https://mp.net/i/mpchat-web-app.js"></script>
const initData = window.MpChat.WebApp.initData;            // 簽名字串 -> 後端
const initDataUnsafe = window.MpChat.WebApp.initDataUnsafe; // 僅 UI,不可信

initData vs initDataUnsafe

資料

能否用於授權?

initData(原始簽名字串)

能——後端驗簽之後。

initDataUnsafe(解析物件)

不能——僅用於 UI 顯示。

欄位支援(目前階段)

  • 簽章啟動資料:initData 使用 query_id、auth_date、chat_type 和 start_param 等欄位名稱。解析後的 initDataUnsafe 可能提供 queryId、authDate、chatType 和 startParam 等駝峰式欄位,供介面顯示。

  • 部分支援:initDataUnsafe 物件結構與 user/chat 子集。

  • 暫不支援:執行時中繼資料、視圖狀態、原生 UI 控件(BackButton/MainButton)、儲存/裝置 API,以及 sendData、openLink、彈窗、掃碼等方法——不要依賴 MiniApp→Bot 的 sendData / web_app_data 回流;訊息按鈕 callback 是另一條已支援的鏈路。

安全必做

  • 絕不把 bot token 寫進前端程式、WebView 儲存、URL、日誌或分析。

  • 把原始 initData 發到後端,驗簽後再信任任何欄位。

相關文章

僅當你的 MPChat 用戶端版本明確聲明支援時,才透過 window.MpChat.WebApp.call(name, params) 呼叫原生方法。

是否回答了您的問題?