blog
blog copied to clipboard
brickspert
Telegram bot 和 mini apps 开发简易教程
Telegram 是全球顶流的社交软件，目前其提供了机器人 bot 和 mini app，可以非常方便的开发三方服务。 本文通过实现一个 TodoList 服务，以跑通完整的开发流程。
环境准备
建议使用 Test 环境开发，限制条件会少很多。如何打开 Test 环境，参考官方文档，比较简单。 以 MacOS 版本为例：
- 点击 10 下设置按钮，打开 Debug 面板
- 开启 Debug 模式
-
⌘ + click点击添加账号，即可登录测试账号
Bot
机器人注册
-
搜索 BotFather 机器人
-
输入
/newbot新建机器人，然后根据提示输入即可。第一次输入昵称，第二次输入机器人账号（全平台唯一，且需要以 bot 结尾），至此新建机器人成功，记得保存返回的机器人 Token，开发时需要。
-
机器人新建成功，我们可以通过机器人账号「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);
});
成功。
接下来我们上点难度，我们希望这样删除任务：
- 用户输入
/delete关键字 - 用户端显示出所有的任务，并可以点击，用户选择一个任务删除
// 监听 /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.' });
}
});
上面的代码很简单，做了两件事情：
- 当用户输入
/delete后，返回所有的任务，注意 inline_keyboard，就是控制在返回消息中添加按钮的。 - 监听用户点击任务，监听到之后删除该任务。
通过上述几个步骤，我们实现了一个简单的 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 还有其它更多更强大的功能，可以参见官方文档。这里我简单罗列一些功能。
- 支持给不同的用户组设置不通的命令
- 支持控制多种按钮位置
- 支持在群聊中给机器人发送命令，同时支持如图的内联响应。
- 支持附件菜单，不过只对特定应用开放权限。
使用 Test 环境开发，MacOS ，连续点击设置图标，⌘ + click点击添加账号，即可登录测试账号。
显示出登录页面之后，账号 必须是要新建的吗？ 可以扫码登录吗？这一步一直登录失败。
使用 Test 环境开发，MacOS ，连续点击设置图标，⌘ + click点击添加账号，即可登录测试账号。
显示出登录页面之后，账号 必须是要新建的吗？ 可以扫码登录吗？这一步一直登录失败。
可以用正式版本的手机号登录，手机 app 上同意下就可以。
输入http的链接，提示非法，想问一下这个是怎么解决的
使用 Test 环境开发，MacOS ，连续点击设置图标，⌘ + click点击添加账号，即可登录测试账号。 显示出登录页面之后，账号 必须是要新建的吗？ 可以扫码登录吗？这一步一直登录失败。
可以用正式版本的手机号登录，手机 app 上同意下就可以。
国内手机号是不是收不到验证码呀，我之前登陆是通过手机上下载telegramX才收到的验证码，登录以后电脑上再扫码登陆的，但是电脑上发送的验证码手机上一直收不到 请问你们都是怎么解决的呢
使用 Test 环境开发，MacOS ，连续点击设置图标，⌘ + click点击添加账号，即可登录测试账号。 显示出登录页面之后，账号 必须是要新建的吗？ 可以扫码登录吗？这一步一直登录失败。
可以用正式版本的手机号登录，手机 app 上同意下就可以。
国内手机号是不是收不到验证码呀，我之前登陆是通过手机上下载telegramX才收到的验证码，登录以后电脑上再扫码登陆的，但是电脑上发送的验证码手机上一直收不到 请问你们都是怎么解决的呢
我也是同样的问题，收不到验证码
使用 Test 环境开发，MacOS ，连续点击设置图标，⌘ + click点击添加账号，即可登录测试账号。 显示出登录页面之后，账号 必须是要新建的吗？ 可以扫码登录吗？这一步一直登录失败。
可以用正式版本的手机号登录，手机 app 上同意下就可以。
国内手机号是不是收不到验证码呀，我之前登陆是通过手机上下载telegramX才收到的验证码，登录以后电脑上再扫码登陆的，但是电脑上发送的验证码手机上一直收不到 请问你们都是怎么解决的呢
我也是同样的问题，收不到验证码
一起蹲作者回复吧咱们。。。我加这个作者的微信他也一直没通过，大佬太忙了。。
使用 Test 环境开发，MacOS ，连续点击设置图标，⌘ + click点击添加账号，即可登录测试账号。 显示出登录页面之后，账号 必须是要新建的吗？ 可以扫码登录吗？这一步一直登录失败。
可以用正式版本的手机号登录，手机 app 上同意下就可以。
国内手机号是不是收不到验证码呀，我之前登陆是通过手机上下载telegramX才收到的验证码，登录以后电脑上再扫码登陆的，但是电脑上发送的验证码手机上一直收不到 请问你们都是怎么解决的呢
我也是同样的问题，收不到验证码
一起蹲作者回复吧咱们。。。我加这个作者的微信他也一直没通过，大佬太忙了。。
没注意到，可以再加一次。
这个问题我也碰到过，其实是不用验证码的。
- 手机登录 tg 账号
- 电脑测试环境登录同样的 tg 账号，这时候发送的不是验证码，而是给你的 tg 手机 app 发送的验证。
我之前也是踩了这个坑，一直在等手机验证码，等不到。 其实就没发验证码，而是在手机 app 验证。
使用 Test 环境开发，MacOS ，连续点击设置图标，⌘ + click点击添加账号，即可登录测试账号。 显示出登录页面之后，账号 必须是要新建的吗？ 可以扫码登录吗？这一步一直登录失败。
可以用正式版本的手机号登录，手机 app 上同意下就可以。
国内手机号是不是收不到验证码呀，我之前登陆是通过手机上下载telegramX才收到的验证码，登录以后电脑上再扫码登陆的，但是电脑上发送的验证码手机上一直收不到 请问你们都是怎么解决的呢
我也是同样的问题，收不到验证码
一起蹲作者回复吧咱们。。。我加这个作者的微信他也一直没通过，大佬太忙了。。
没注意到，可以再加一次。
这个问题我也碰到过，其实是不用验证码的。
- 手机登录 tg 账号
- 电脑测试环境登录同样的 tg 账号，这时候发送的不是验证码，而是给你的 tg 手机 app 发送的验证。
我之前也是踩了这个坑，一直在等手机验证码，等不到。 其实就没发验证码，而是在手机 app 验证。
app验证和验证码都没收到呀，请问大佬手机上使用telegramX登陆的吗，手机上的telegram登陆不上，没有登录验证码，所以我用的是telegramX
使用 Test 环境开发，MacOS ，连续点击设置图标，⌘ + click点击添加账号，即可登录测试账号。 显示出登录页面之后，账号 必须是要新建的吗？ 可以扫码登录吗？这一步一直登录失败。
可以用正式版本的手机号登录，手机 app 上同意下就可以。
国内手机号是不是收不到验证码呀，我之前登陆是通过手机上下载telegramX才收到的验证码，登录以后电脑上再扫码登陆的，但是电脑上发送的验证码手机上一直收不到 请问你们都是怎么解决的呢
我也是同样的问题，收不到验证码
一起蹲作者回复吧咱们。。。我加这个作者的微信他也一直没通过，大佬太忙了。。
没注意到，可以再加一次。
这个问题我也碰到过，其实是不用验证码的。
- 手机登录 tg 账号
- 电脑测试环境登录同样的 tg 账号，这时候发送的不是验证码，而是给你的 tg 手机 app 发送的验证。
我之前也是踩了这个坑，一直在等手机验证码，等不到。 其实就没发验证码，而是在手机 app 验证。
我就是按照你的这个步骤在手机的tg上等tg的验证消息，但是没发过来
使用 Test 环境开发，MacOS ，连续点击设置图标，⌘ + click点击添加账号，即可登录测试账号。 显示出登录页面之后，账号 必须是要新建的吗？ 可以扫码登录吗？这一步一直登录失败。
可以用正式版本的手机号登录，手机 app 上同意下就可以。
国内手机号是不是收不到验证码呀，我之前登陆是通过手机上下载telegramX才收到的验证码，登录以后电脑上再扫码登陆的，但是电脑上发送的验证码手机上一直收不到 请问你们都是怎么解决的呢
我也是同样的问题，收不到验证码
一起蹲作者回复吧咱们。。。我加这个作者的微信他也一直没通过，大佬太忙了。。
没注意到，可以再加一次。 这个问题我也碰到过，其实是不用验证码的。
- 手机登录 tg 账号
- 电脑测试环境登录同样的 tg 账号，这时候发送的不是验证码，而是给你的 tg 手机 app 发送的验证。
我之前也是踩了这个坑，一直在等手机验证码，等不到。 其实就没发验证码，而是在手机 app 验证。
我就是按照你的这个步骤在手机的tg上等tg的验证消息，但是没发过来
用这个方式扫码登录，我刚试了下是可以的。
如果是正常模式下添加账号扫码是可以的，如果添加test模式账号，扫码显示二维码不合法
砖家 @.***> 于2024年6月12日周三 14:14写道：
使用 Test 环境开发，MacOS ，连续点击设置图标，⌘ + click点击添加账号，即可登录测试账号。 显示出登录页面之后，账号 必须是要新建的吗？ 可以扫码登录吗？这一步一直登录失败。
可以用正式版本的手机号登录，手机 app 上同意下就可以。
国内手机号是不是收不到验证码呀，我之前登陆是通过手机上下载telegramX才收到的验证码，登录以后电脑上再扫码登陆的，但是电脑上发送的验证码手机上一直收不到 请问你们都是怎么解决的呢
我也是同样的问题，收不到验证码
一起蹲作者回复吧咱们。。。我加这个作者的微信他也一直没通过，大佬太忙了。。
没注意到，可以再加一次。 这个问题我也碰到过，其实是不用验证码的。
- 手机登录 tg 账号
- 电脑测试环境登录同样的 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: @.***>
请问大佬手机上使用telegramX登陆的吗，手机上的telegram登陆不上，没有登录验证码，所以我用的是telegramX
我也遇到这个问题 扫码登录AUTH_TOKEN_INVALID2 然后也接收不到验证码
正式服和测试服的账号数据是不通的，在测试服需要注册新的账号。但是测试服好像不会发送验证码，而是使用特定的账号和特定的验证码。区号必须是 +999 然后手机号码前两位必须是 66，后面5位随意基本格式是
+999 66XYYYY
然后上面这个 X 必须小于等于3，而且这个数字就是验证码要填的数字。例如 +999-6613322，那么验证码就是 11111, 其他同理。
参考链接： https://prog.world/telegram-test-servers
不过目前我遇到的问题，注册成功后，去 BotFathe 那里新建机器人，全都是被 ban 的状态, 一个月内无法创建机器人。试了好多账号都不行，看大家能不能找到解决方法。
正式服和测试服的账号数据是不通的，在测试服需要注册新的账号。但是测试服好像不会发送验证码，而是使用特定的账号和特定的验证码。区号必须是 +999 然后手机号码前两位必须是 66，后面5位随意基本格式是
+999 66XYYYY
然后上面这个 X 必须小于等于3，而且这个数字就是验证码要填的数字。例如 +999-6613322，那么验证码就是 11111, 其他同理。
参考链接： https://prog.world/telegram-test-servers
不过目前我遇到的问题，注册成功后，去 BotFathe 那里新建机器人，全都是被 ban 的状态, 一个月内无法创建机器人。试了好多账号都不行，看大家能不能找到解决方法。
感谢大佬啊 我现在就去试试
正式服和测试服的账号数据是不通的，在测试服需要注册新的账号。但是测试服好像不会发送验证码，而是使用特定的账号和特定的验证码。区号必须是 +999 然后手机号码前两位必须是 66，后面5位随意基本格式是
+999 66XYYYY
然后上面这个 X 必须小于等于3，而且这个数字就是验证码要填的数字。例如 +999-6613322，那么验证码就是 11111, 其他同理。
参考链接： https://prog.world/telegram-test-servers
不过目前我遇到的问题，注册成功后，去 BotFathe 那里新建机器人，全都是被 ban 的状态, 一个月内无法创建机器人。试了好多账号都不行，看大家能不能找到解决方法。
请问解决了嘛 我给客服发了邮件还没回我
正式服和测试服的账号数据是不通的，在测试服需要注册新的账号。但是测试服好像不会发送验证码，而是使用特定的账号和特定的验证码。区号必须是 +999 然后手机号码前两位必须是 66，后面5位随意基本格式是
+999 66XYYYY
然后上面这个 X 必须小于等于3，而且这个数字就是验证码要填的数字。例如 +999-6613322，那么验证码就是 11111, 其他同理。
参考链接： https://prog.world/telegram-test-servers
不过目前我遇到的问题，注册成功后，去 BotFathe 那里新建机器人，全都是被 ban 的状态, 一个月内无法创建机器人。试了好多账号都不行，看大家能不能找到解决方法。
请问解决了嘛 我给客服发了邮件还没回我
测试环境的登录，应该是直接输入手机号登录，手机号就是正式环境那个手机号，然后会在手机 TG APP 上收到一个通知（不是短信）。
我记得就是这样，可能细节上会有出入。但是链路是通的。
正式服和测试服的账号数据是不通的，在测试服需要注册新的账号。但是测试服好像不会发送验证码，而是使用特定的账号和特定的验证码。区号必须是 +999 然后手机号码前两位必须是 66，后面5位随意基本格式是
+999 66XYYYY
然后上面这个 X 必须小于等于3，而且这个数字就是验证码要填的数字。例如 +999-6613322，那么验证码就是 11111, 其他同理。
参考链接： https://prog.world/telegram-test-servers
不过目前我遇到的问题，注册成功后，去 BotFathe 那里新建机器人，全都是被 ban 的状态, 一个月内无法创建机器人。试了好多账号都不行，看大家能不能找到解决方法。
请问解决了嘛 我给客服发了邮件还没回我
测试环境的登录，应该是直接输入手机号登录，手机号就是正式环境那个手机号，然后会在手机 TG APP 上收到一个通知（不是短信）。
我记得就是这样，可能细节上会有出入。但是链路是通的。
我是登录成功之后创建机器人 提示我
不开测试环境下，怎么直接运行到电报上调试他们的api 呢？
嗯...开测试环境看来好麻烦。如果使用真实环境，会有什么影响呢？
我用的真实环境试了一下，自己玩儿应该没啥大问题吧😄
不开测试环境下，怎么直接运行到电报上调试他们的api 呢？
嗯...开测试环境看来好麻烦。如果使用真实环境，会有什么影响呢？
我用的真实环境试了一下，自己玩儿应该没啥大问题吧😄
创了个电报群，一起交流下吧：https://t.me/+cthVYsS4lhwwZDll
输入http的链接，提示非法，想问一下这个是怎么解决的
老铁 你解决了没？
文档里说了 一定是需要安全的https，你可以去腾讯云申请个免费的ca证书换成https协议，也可以在本地用ngrok把端口暴露出去
@scnon @happydongzh @chen99-long tg小程序官网文档有怎么开启测试环境的教程，测试环境的账号只能使用 tg ios端注册，手机号填真实的，需要接收验证码。 https://docs.telegram-mini-apps.com/platform/test-environment
@scnon @happydongzh @chen99-long tg小程序官网文档有怎么开启测试环境的教程，测试环境的账号只能使用 tg ios端注册，手机号填真实的，需要接收验证码。 https://docs.telegram-mini-apps.com/platform/test-environment
是的，但是在安卓上下载Telegram Beta也可以接收验证码，但是这个测试环境依然只能用https的域名