跳转到主要内容

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) 调用原生方法。

这是否解答了您的问题?