search

brickspert / blog

个人技术博客，博文写在 Issues 里。
4.06k stars 548 forks source link

Telegram bot 和 mini apps 开发简易教程 #65

Open brickspert opened 8 months ago

brickspert commented 8 months ago

Telegram 是全球顶流的社交软件，目前其提供了机器人 bot 和 mini app，可以非常方便的开发三方服务。 本文通过实现一个 TodoList 服务，以跑通完整的开发流程。

环境准备

建议使用 Test 环境开发，限制条件会少很多。如何打开 Test 环境，参考官方文档，比较简单。 以 MacOS 版本为例：

  1. 点击 10 下设置按钮，打开 Debug 面板
  2. 开启 Debug 模式
  3. ⌘ + click点击添加账号，即可登录测试账号

Bot

机器人注册

  1. 搜索 BotFather 机器人

  2. 输入 /newbot新建机器人，然后根据提示输入即可。第一次输入昵称，第二次输入机器人账号（全平台唯一，且需要以 bot 结尾），至此新建机器人成功，记得保存返回的机器人 Token，开发时需要。

  3. 机器人新建成功，我们可以通过机器人账号「todo_list_demo_bot」搜索到机器人，并与它对话。当然，现在机器人还什么都不会呢。

功能实现

机器人的交互逻辑很简单，用户输入的任意内容，会通知到我们的服务端，服务端根据约定的格式，处理用户请求。 比如我们约定通过 /add 任务的格式来添加任务，那当用户输入 /add 写作业时，服务端会通过文本匹配，来添加一个 写作业的任务。

我们先来实现添加任务的服务端逻辑，极其简单。 这里我们通过 Node.js 语言来写，同时集成了 node-telegram-bot-api 库，只需要几行代码就好了。

const TelegramBot = require('node-telegram-bot-api');

const token = 'your token';

const bot = new TelegramBot(token, { polling: true, testEnvironment: true });

const todos = {};

bot.onText(/\/add (.+)/, (msg, match) => {
  const chatId = msg.chat.id;
  const text = match[1];

  if (!todos[chatId]) {
    todos[chatId] = [];
  }
  todos[chatId].push(text);

  bot.sendMessage(chatId, 'Added "' + text + '" to your to-do list.');
});

上面代码很简单，就是当用户输入的内容是以 /add 开始的话，就给该用户新增一个任务。 启动这个服务，然后我们试一试效果。

现在我们已经可以成功的通过机器人新建一个任务了。

然后我们再加一个 /list命令，列出当前所有的任务

bot.onText(/\/list/, (msg) => {
  const chatId = msg.chat.id;
  const todoList = todos[chatId];

  let message = 'Your to-do items are:\n';
  todoList.forEach((item, index) => {
    message += `${index + 1}. ${item}\n`;
  });
  bot.sendMessage(chatId, message);
});

成功。

接下来我们上点难度，我们希望这样删除任务：

  1. 用户输入 /delete关键字
  2. 用户端显示出所有的任务，并可以点击，用户选择一个任务删除

// 监听 /delete 命令，返回所有的任务
bot.onText(/\/delete/, (msg) => {
  console.log('??delete');
  const chatId = msg.chat.id;
  const todoList = todos[chatId];
  bot.sendMessage(chatId, 'Click an item to delete:', {
    reply_markup: {
      inline_keyboard: todoList.map((item, index) => [
        {
          text: `${index + 1}. ${item}`,
          callback_data: JSON.stringify({ command: 'delete', index })
        },
      ]),
    },
  });
});

// 监听用户点击
bot.on('callback_query', (callbackQuery) => {
  const message = callbackQuery.message;
  const data = JSON.parse(callbackQuery.data);
  const chatId = message.chat.id;

  if (data.command === 'delete') {
    const deleted = todos[chatId].splice(data.index, 1);
    bot.answerCallbackQuery(callbackQuery.id, { text: 'Deleted "' + deleted[0] + '" from your to-do list.' });
  }

});

上面的代码很简单，做了两件事情：

  1. 当用户输入 /delete后，返回所有的任务，注意 inline_keyboard，就是控制在返回消息中添加按钮的。
  2. 监听用户点击任务，监听到之后删除该任务。

通过上述几个步骤，我们实现了一个简单的 TodoList Demo。

然后我们稍微优化一下，/list和 /delete命令做成直接点击选择的，不需要每次都手动输入。 找到 BotFather 机器人，输入 /setcommands 命令，然后按要求输入我们约定的命令。

这样用户就可以通过我们机器人左下角的菜单按钮，直接快捷选择命令了。

Mini apps

上面的 Bot 还是以文本的形式操作 TodoList，当然没有可视化界面操作着舒服。这一小节我们实现一个集成在 Telegram 中的可视化页面，来管理 TodoList。

APP 注册

注册 APP 说白了，就是给我们的 Bot 机器人，绑定一个网站域名，这个网站就是一个 mini app 了。 老规矩，找到 BotFather，输入 /newapp，告诉它我们要新建一个 app，然后选择需要绑定的 Bot，然后根据提示一步一步输入即可。

这里需要注意的是，Test 环境域名可以绑定 127.0.0.1，开发起来非常方便。 最终 BotFather 会给我们一个 t.me/bot_name/name格式的域名，通过这个域名就可以打开我们的 app 了。

APP 实现

App 就是一个普通的网页，比如我们写一个最简单的 HTML 文件

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
  </head>

  <body>
    Hello Todo List
  </body>

</html>

上面的 HTML 文件，我们启动一个服务，通过 http://127.0.0.1:8000 可以访问到即可。

然后我们在 Telegram 中打开刚才注册 app 给的网址：t.me/todo_list_demo_bot/manager，即可成功访问我们的 app 了，效果如下图。

如果只是一个单纯的网页，肯定不能满足我们的需求。 我们需要拿到 Telegram 的各种状态，比如当前用户信息，用户位置，主题配置等等各种。 同时我们需要能和 Telegram 进行各种交互。

很简单，在我们的 HTML 中集成 telegram-web-app.js即可，然后我们就可以通过 window.Telegram.WebApp变量和 Telegram 进行交互了。

<script src="https://telegram.org/js/telegram-web-app.js"></script>

具体的 API 可以参考官方文档。 具体 TodoList 代码这里就不做实现了。

更多能力

通过上述文档，我们跑通了 Bot 和 APP 的开发流程，使用了一些最基础的功能。 当然 Telegram Bot 和 APP 还有其它更多更强大的功能，可以参见官方文档。这里我简单罗列一些功能。

  1. 支持给不同的用户组设置不通的命令
  2. 支持控制多种按钮位置
  1. 支持在群聊中给机器人发送命令，同时支持如图的内联响应。
  1. 支持附件菜单，不过只对特定应用开放权限。
ccj-csf commented 1 month ago
image

输入http的链接，提示非法，想问一下这个是怎么解决的

Wing-Li commented 1 month ago

使用 Test 环境开发，MacOS ，连续点击设置图标，⌘ + click点击添加账号，即可登录测试账号。

显示出登录页面之后，账号 必须是要新建的吗？ 可以扫码登录吗？这一步一直登录失败。

brickspert commented 4 weeks ago

使用 Test 环境开发，MacOS ，连续点击设置图标，⌘ + click点击添加账号，即可登录测试账号。

显示出登录页面之后，账号 必须是要新建的吗？ 可以扫码登录吗？这一步一直登录失败。

可以用正式版本的手机号登录，手机 app 上同意下就可以。

brickspert commented 4 weeks ago

image 输入http的链接，提示非法，想问一下这个是怎么解决的

你的 tg 是测试环境吗？

chen99-long commented 3 weeks ago

使用 Test 环境开发，MacOS ，连续点击设置图标，⌘ + click点击添加账号，即可登录测试账号。 显示出登录页面之后，账号 必须是要新建的吗？ 可以扫码登录吗？这一步一直登录失败。

可以用正式版本的手机号登录，手机 app 上同意下就可以。

国内手机号是不是收不到验证码呀，我之前登陆是通过手机上下载telegramX才收到的验证码，登录以后电脑上再扫码登陆的，但是电脑上发送的验证码手机上一直收不到 请问你们都是怎么解决的呢

overdosed-22 commented 3 weeks ago

使用 Test 环境开发，MacOS ，连续点击设置图标，⌘ + click点击添加账号，即可登录测试账号。 显示出登录页面之后，账号 必须是要新建的吗？ 可以扫码登录吗？这一步一直登录失败。

可以用正式版本的手机号登录，手机 app 上同意下就可以。

国内手机号是不是收不到验证码呀，我之前登陆是通过手机上下载telegramX才收到的验证码，登录以后电脑上再扫码登陆的，但是电脑上发送的验证码手机上一直收不到 请问你们都是怎么解决的呢

我也是同样的问题，收不到验证码

chen99-long commented 3 weeks ago

使用 Test 环境开发，MacOS ，连续点击设置图标，⌘ + click点击添加账号，即可登录测试账号。 显示出登录页面之后，账号 必须是要新建的吗？ 可以扫码登录吗？这一步一直登录失败。

可以用正式版本的手机号登录，手机 app 上同意下就可以。

国内手机号是不是收不到验证码呀，我之前登陆是通过手机上下载telegramX才收到的验证码，登录以后电脑上再扫码登陆的，但是电脑上发送的验证码手机上一直收不到 请问你们都是怎么解决的呢

我也是同样的问题，收不到验证码

一起蹲作者回复吧咱们。。。我加这个作者的微信他也一直没通过，大佬太忙了。。

brickspert commented 3 weeks ago

使用 Test 环境开发，MacOS ，连续点击设置图标，⌘ + click点击添加账号，即可登录测试账号。 显示出登录页面之后，账号 必须是要新建的吗？ 可以扫码登录吗？这一步一直登录失败。

可以用正式版本的手机号登录，手机 app 上同意下就可以。

国内手机号是不是收不到验证码呀，我之前登陆是通过手机上下载telegramX才收到的验证码，登录以后电脑上再扫码登陆的，但是电脑上发送的验证码手机上一直收不到 请问你们都是怎么解决的呢

我也是同样的问题，收不到验证码

一起蹲作者回复吧咱们。。。我加这个作者的微信他也一直没通过，大佬太忙了。。

没注意到，可以再加一次。

这个问题我也碰到过，其实是不用验证码的。

  1. 手机登录 tg 账号
  2. 电脑测试环境登录同样的 tg 账号，这时候发送的不是验证码，而是给你的 tg 手机 app 发送的验证。

我之前也是踩了这个坑，一直在等手机验证码，等不到。 其实就没发验证码，而是在手机 app 验证。

chen99-long commented 3 weeks ago

使用 Test 环境开发，MacOS ，连续点击设置图标，⌘ + click点击添加账号，即可登录测试账号。 显示出登录页面之后，账号 必须是要新建的吗？ 可以扫码登录吗？这一步一直登录失败。

可以用正式版本的手机号登录，手机 app 上同意下就可以。

国内手机号是不是收不到验证码呀，我之前登陆是通过手机上下载telegramX才收到的验证码，登录以后电脑上再扫码登陆的，但是电脑上发送的验证码手机上一直收不到 请问你们都是怎么解决的呢

我也是同样的问题，收不到验证码

一起蹲作者回复吧咱们。。。我加这个作者的微信他也一直没通过，大佬太忙了。。

没注意到，可以再加一次。

这个问题我也碰到过，其实是不用验证码的。

  1. 手机登录 tg 账号
  2. 电脑测试环境登录同样的 tg 账号，这时候发送的不是验证码，而是给你的 tg 手机 app 发送的验证。

我之前也是踩了这个坑，一直在等手机验证码，等不到。 其实就没发验证码，而是在手机 app 验证。

app验证和验证码都没收到呀，请问大佬手机上使用telegramX登陆的吗，手机上的telegram登陆不上，没有登录验证码，所以我用的是telegramX

overdosed-22 commented 3 weeks ago

使用 Test 环境开发，MacOS ，连续点击设置图标，⌘ + click点击添加账号，即可登录测试账号。 显示出登录页面之后，账号 必须是要新建的吗？ 可以扫码登录吗？这一步一直登录失败。

可以用正式版本的手机号登录，手机 app 上同意下就可以。

国内手机号是不是收不到验证码呀，我之前登陆是通过手机上下载telegramX才收到的验证码，登录以后电脑上再扫码登陆的，但是电脑上发送的验证码手机上一直收不到 请问你们都是怎么解决的呢

我也是同样的问题，收不到验证码

一起蹲作者回复吧咱们。。。我加这个作者的微信他也一直没通过，大佬太忙了。。

没注意到，可以再加一次。

这个问题我也碰到过，其实是不用验证码的。

  1. 手机登录 tg 账号
  2. 电脑测试环境登录同样的 tg 账号，这时候发送的不是验证码，而是给你的 tg 手机 app 发送的验证。

我之前也是踩了这个坑，一直在等手机验证码，等不到。 其实就没发验证码，而是在手机 app 验证。

我就是按照你的这个步骤在手机的tg上等tg的验证消息，但是没发过来

brickspert commented 3 weeks ago

使用 Test 环境开发，MacOS ，连续点击设置图标，⌘ + click点击添加账号，即可登录测试账号。 显示出登录页面之后，账号 必须是要新建的吗？ 可以扫码登录吗？这一步一直登录失败。

可以用正式版本的手机号登录，手机 app 上同意下就可以。

国内手机号是不是收不到验证码呀，我之前登陆是通过手机上下载telegramX才收到的验证码，登录以后电脑上再扫码登陆的，但是电脑上发送的验证码手机上一直收不到 请问你们都是怎么解决的呢

我也是同样的问题，收不到验证码

一起蹲作者回复吧咱们。。。我加这个作者的微信他也一直没通过，大佬太忙了。。

没注意到，可以再加一次。 这个问题我也碰到过，其实是不用验证码的。

  1. 手机登录 tg 账号
  2. 电脑测试环境登录同样的 tg 账号，这时候发送的不是验证码，而是给你的 tg 手机 app 发送的验证。

我之前也是踩了这个坑，一直在等手机验证码，等不到。 其实就没发验证码，而是在手机 app 验证。

我就是按照你的这个步骤在手机的tg上等tg的验证消息，但是没发过来

image

用这个方式扫码登录，我刚试了下是可以的。

overdosed-22 commented 3 weeks ago

如果是正常模式下添加账号扫码是可以的，如果添加test模式账号，扫码显示二维码不合法

砖家 @.***> 于2024年6月12日周三 14:14写道：

使用 Test 环境开发，MacOS ，连续点击设置图标，⌘ + click点击添加账号，即可登录测试账号。 显示出登录页面之后，账号 必须是要新建的吗？ 可以扫码登录吗？这一步一直登录失败。

可以用正式版本的手机号登录，手机 app 上同意下就可以。

国内手机号是不是收不到验证码呀，我之前登陆是通过手机上下载telegramX才收到的验证码，登录以后电脑上再扫码登陆的，但是电脑上发送的验证码手机上一直收不到 请问你们都是怎么解决的呢

我也是同样的问题，收不到验证码

一起蹲作者回复吧咱们。。。我加这个作者的微信他也一直没通过，大佬太忙了。。

没注意到，可以再加一次。 这个问题我也碰到过，其实是不用验证码的。

  1. 手机登录 tg 账号
  2. 电脑测试环境登录同样的 tg 账号，这时候发送的不是验证码，而是给你的 tg 手机 app 发送的验证。

我之前也是踩了这个坑，一直在等手机验证码，等不到。 其实就没发验证码，而是在手机 app 验证。

我就是按照你的这个步骤在手机的tg上等tg的验证消息，但是没发过来

image.png (view on web) https://github.com/brickspert/blog/assets/12526493/d2dc29a4-1af6-4e94-9fae-b6ebed583eda

用这个方式扫码登录，我刚试了下是可以的。

— Reply to this email directly, view it on GitHub https://github.com/brickspert/blog/issues/65#issuecomment-2162185264, or unsubscribe https://github.com/notifications/unsubscribe-auth/AUUTZG6UU6BUDVP6JARXSKDZG7RMTAVCNFSM6AAAAAA5ZS4FM6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNRSGE4DKMRWGQ . You are receiving this because you commented.Message ID: @.***>

CarassiusAuratus commented 2 weeks ago

请问大佬手机上使用telegramX登陆的吗，手机上的telegram登陆不上，没有登录验证码，所以我用的是telegramX

我也遇到这个问题 扫码登录AUTH_TOKEN_INVALID2 然后也接收不到验证码

scnon commented 3 days ago

正式服和测试服的账号数据是不通的，在测试服需要注册新的账号。但是测试服好像不会发送验证码，而是使用特定的账号和特定的验证码。区号必须是 +999 然后手机号码前两位必须是 66，后面5位随意基本格式是

+999 66XYYYY

然后上面这个 X 必须小于等于3，而且这个数字就是验证码要填的数字。例如 +999-6613322，那么验证码就是 11111, 其他同理。

参考链接： https://prog.world/telegram-test-servers

不过目前我遇到的问题，注册成功后，去 BotFathe 那里新建机器人，全都是被 ban 的状态, 一个月内无法创建机器人。试了好多账号都不行，看大家能不能找到解决方法。

chen99-long commented 3 days ago

正式服和测试服的账号数据是不通的，在测试服需要注册新的账号。但是测试服好像不会发送验证码，而是使用特定的账号和特定的验证码。区号必须是 +999 然后手机号码前两位必须是 66，后面5位随意基本格式是

+999 66XYYYY

然后上面这个 X 必须小于等于3，而且这个数字就是验证码要填的数字。例如 +999-6613322，那么验证码就是 11111, 其他同理。

参考链接： https://prog.world/telegram-test-servers

不过目前我遇到的问题，注册成功后，去 BotFathe 那里新建机器人，全都是被 ban 的状态, 一个月内无法创建机器人。试了好多账号都不行，看大家能不能找到解决方法。

感谢大佬啊 我现在就去试试

bird9996 commented 23 hours ago

正式服和测试服的账号数据是不通的，在测试服需要注册新的账号。但是测试服好像不会发送验证码，而是使用特定的账号和特定的验证码。区号必须是 +999 然后手机号码前两位必须是 66，后面5位随意基本格式是

+999 66XYYYY

然后上面这个 X 必须小于等于3，而且这个数字就是验证码要填的数字。例如 +999-6613322，那么验证码就是 11111, 其他同理。

参考链接： https://prog.world/telegram-test-servers

不过目前我遇到的问题，注册成功后，去 BotFathe 那里新建机器人，全都是被 ban 的状态, 一个月内无法创建机器人。试了好多账号都不行，看大家能不能找到解决方法。

请问解决了嘛 我给客服发了邮件还没回我

brickspert commented 23 hours ago

正式服和测试服的账号数据是不通的，在测试服需要注册新的账号。但是测试服好像不会发送验证码，而是使用特定的账号和特定的验证码。区号必须是 +999 然后手机号码前两位必须是 66，后面5位随意基本格式是

+999 66XYYYY

然后上面这个 X 必须小于等于3，而且这个数字就是验证码要填的数字。例如 +999-6613322，那么验证码就是 11111, 其他同理。

参考链接： https://prog.world/telegram-test-servers

不过目前我遇到的问题，注册成功后，去 BotFathe 那里新建机器人，全都是被 ban 的状态, 一个月内无法创建机器人。试了好多账号都不行，看大家能不能找到解决方法。

请问解决了嘛 我给客服发了邮件还没回我

测试环境的登录，应该是直接输入手机号登录，手机号就是正式环境那个手机号，然后会在手机 TG APP 上收到一个通知（不是短信）。

我记得就是这样，可能细节上会有出入。但是链路是通的。

bird9996 commented 22 hours ago

正式服和测试服的账号数据是不通的，在测试服需要注册新的账号。但是测试服好像不会发送验证码，而是使用特定的账号和特定的验证码。区号必须是 +999 然后手机号码前两位必须是 66，后面5位随意基本格式是

+999 66XYYYY

然后上面这个 X 必须小于等于3，而且这个数字就是验证码要填的数字。例如 +999-6613322，那么验证码就是 11111, 其他同理。

参考链接： https://prog.world/telegram-test-servers

不过目前我遇到的问题，注册成功后，去 BotFathe 那里新建机器人，全都是被 ban 的状态, 一个月内无法创建机器人。试了好多账号都不行，看大家能不能找到解决方法。

请问解决了嘛 我给客服发了邮件还没回我

测试环境的登录，应该是直接输入手机号登录，手机号就是正式环境那个手机号，然后会在手机 TG APP 上收到一个通知（不是短信）。

我记得就是这样，可能细节上会有出入。但是链路是通的。

我是登录成功之后创建机器人 提示我 ![Uploading WeChat22c4b5a895a567cf18e42523ba07e8e1.png…]()

bird9996 commented 22 hours ago
WeChat22c4b5a895a567cf18e42523ba07e8e1