下载

arrow_down

闪兑

卡片

构建

arrow_down

更多

arrow_down
activityactivityactivityactivity
  • themelight

  • languageIcon

  • menu
Skip to Content
Zh CnDocs
参考
TelegramWebApps

Telegram App 开发说明

Telegram 是一个跨平台即时通讯软件，目前提供Bots和Mini Apps，使开发第三方应用服务变得非常方便。TON 是由社区使用 Telegram 设计的技术创建的去中心化开放互联网。

TG Bot 开发

Telegram Bot 是一个特殊账户，可以在没有电话号码的情况下设置。用户向 Bot 发送的消息或操作通过 Telegram 的中介服务器转发到 Bot 所有者的服务器，Bot 所有者的服务器处理用户的消息输入和操作请求。

Telegram Bot 不是独立的应用程序；它存在于 Telegram 生态系统中。因此，Bot 的”客户端”是 Telegram 提供的 Bot 对话框及其相关组件。

除了 Bot 客户端，我们还需要开发相应的 Bot 服务器。同样，服务器也依赖于 Telegram 提供的基础设施，特别是Telegram Bot API 。

开发 Bot 的简单步骤：

  1. 在 TG 的联系人中搜索 BotFather
  2. 输入/newbot 创建新 bot，然后按照提示输入所需信息。记住保存返回的 Bot Token，因为在开发过程中会需要它。
  3. bot 成功创建后，您可以使用 bot 账户demo_bot搜索并与其聊天。
  4. 功能实现：
const TelegramBot = require('node-telegram-bot-api')
const token = 'your token'
const bot = new TelegramBot(token, { polling: true, testEnvironment: true })
 
bot.onText(/\/add (.+)/, (msg, match) => {
  const chatId = msg.chat.id
  const text = match[1]
 
  bot.sendMessage(chatId, 'balabala...')
})

参考：
Telegram Api 

TG Mini App 开发

将网站域名绑定到我们的 Bot。这个网站将是一个 mini app。

开发 Mini App 的简单步骤：

  1. 在 TG 的联系人中搜索 BotFather。
  2. 输入/newapp 创建新应用，然后按照提示输入所需信息。
  3. URL 绑定完成后，mini app 成功创建。我们可以通过t.me/bot_name/webapp_name访问 mini app。
  4. Mini App 只是一个常规网页。最简单的 Mini App 代码如下：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的标题</title>
  </head>
  <body>
    Hello World
  </body>
</html>

参考：
Testing-mini-apps 

开发方法

如果 MiniApp 开发者希望集成和使用 BitgetWallet，由于 MiniApp 的环境在 TG App 内，他们无法直接使用JS Bridge内的provider调用钱包 API。在这种情况下，他们可以选择HTTP Bridge解决方案，如Wallet Connect或Ton Connect，通过以下方式连接钱包：

  1. 二维码：此方法主要通过中介服务器在 DApp 和钱包之间建立网络连接，从而允许 DApp 调用钱包 API。

  2. 深链接：这主要指手机上应用重定向的技术（例如，在手机上点击链接可以直接跳转到应用内的特定页面）。BitgetWallet 有自己的深链接称为Bitget 深链接，TG 也有自己的深链接（如TG 深链接 和TG MiniApps 链接 ）。

以Ton链上的Ton Connect为例，Http Bridge 如下：

当应用程序初始化连接时，它直接通过二维码或通用链接发送到钱包。

https://<wallet-universal-url>?
                               v=2&
                               id=<to_hex_str(A)>&
                               r=<urlsafe(json.stringify(ConnectRequest))>&
                               ret=back

参数 v 指定协议版本。钱包不会接受不支持的版本。

参数 id 指定应用程序的客户端 ID，以十六进制编码（不带’0x’前缀）。

参数 r 指定 URL 安全的 JSON ConnectRequest。

参数 ret（可选）指定用户签名/拒绝请求后深链接的返回策略。

‘back’（默认）表示返回到发起深链接跳转的应用程序（例如，浏览器、本地应用等），‘none’表示用户操作后不跳转；URL：钱包将在用户操作完成后打开此 URL。请注意，如果您的应用程序是网页，您不应传递应用程序的 URL。此选项适用于本地应用程序，以解决’back’选项可能的 OS 特定问题。ret 参数应支持空深链接——它可能用于指定钱包在确认其他操作（发送交易、签名原始数据等）后的行为。

https://<wallet-universal-url>?ret=back

链接可以嵌入二维码中或直接点击。

初始请求未加密，因为（1）尚未传输个人数据，（2）应用程序甚至不知道钱包的身份。

详情请参见：Http Bridge 

TG MiniApp 与 Bitget Wallet 集成

场景 1：

DApp 在 TG MiniApp 内集成TonConnect以连接到 Bitget Wallet。

集成请参考 Ton Ton Connect。

场景 2：

webapp 希望显示在 BGW 事件页面上，点击时从 webview 打开并重定向到 TG MiniApp。

  1. 集成方需要向相关 BitgetWallet 人员提供 MiniApp 重定向链接（例如，https://t.me/your_bot_name/your_app_path?startapp=xxx）。

  2. BGW 人员配置事件页面链接，其中添加约定参数（utm_source=BitgetWallet）以指示来源。完整路径为：https://t.me/your_bot_name/your_app_path?startapp=xxx&utm_source=BitgetWallet。

  3. 当用户点击重定向到 MiniApp 时，MiniApp 可以识别特殊参数信息。在这里，MiniApp 开发者需要修改钱包连接代码逻辑：原始钱包连接逻辑（例如，用户点击连接按钮连接钱包）应检查是否满足条件utm_source=BitgetWallet并直接连接到 BGW。步骤如下：

a. 移动深链接访问：https://bkcode.vip/ton-connect..重定向到bitkeep://..并跳转到 BGW。

b. PC 二维码扫描/JS 桥接连接方法，打开链接（二维码扫描和重定向）示例：

// 原始数据：
https://bkcode.vip/ton-connect?v=2&id=4d725f278e98c9dfb55bbf83fbd7b565be17176e9f9c6fc75cd0ec700e241021&r={"manifestUrl":"https://app.ston.fi/tonconnect-manifest.json","items":[{"name":"ton_addr"}]}&ret=none

// encodeURIComponent后的参数如下：
https://bkcode.vip/ton-connect?v=2&id=4d725f278e98c9dfb55bbf83fbd7b565be17176e9f9c6fc75cd0ec700e241021&r=%7B%22manifestUrl%22%3A%22https%3A%2F%2Fapp.ston.fi%2Ftonconnect-manifest.json%22%2C%22items%22%3A%5B%7B%22name%22%3A%22ton_addr%22%7D%5D%7D&ret=none

进一步阅读

@tonconnect/ui

*打开特定钱包 本节描述的方法标记为实验性，在未来版本中可能会发生变化。

要为特定钱包打开模态窗口，请使用 openSingleWalletModal()方法。此方法接受钱包 app_name 作为参数（请参考 wallets-list.json）并打开相应的钱包模态框。它返回一个在模态窗口成功打开后解析的 promise。

使用openSingleWalletModal指定连接到 BGW。

await tonConnectUI.openSingleWalletModal('bitgetTonWallet')

参见 https://www.npmjs.com/package/@tonconnect/ui 

Last updated on
TONBitget 深链接