Question

电报网络应用程序的机器人对象不包含用户数据

2022-05-05

6266

telegram telegram-bot

我已经为我的机器人创建了一个 Web 应用程序，并且集成了电报“Web 应用程序脚本”

https://telegram.org/js/telegram-web-app.js

我的 Web 应用程序的代码显示在下面。

我从 window.Telegram.WebApp 收到的唯一数据是：

使用回复标记键盘：

{
  "initData": "",
  "initDataUnsafe": {
    
  },
  "version": "1.0",
  "colorScheme": "dark",
  "themeParams": {
    "bg_color": "#17212b",
    "button_color": "#5288c1",
    "button_text_color": "#ffffff",
    "hint_color": "#708499",
    "link_color": "#6ab3f3",
    "text_color": "#f5f5f5"
  },
  "isExpanded": true,
  "viewportHeight": 621,
  "viewportStableHeight": 621,
  "MainButton": {
    "text": "CONTINUE",
    "color": "#5288c1",
    "textColor": "#ffffff",
    "isVisible": false,
    "isProgressVisible": false,
    "isActive": true
  }
}

使用内联按钮：

{
  "initData": "query_id=AAFdL6MsAAAAA122voywCSO1y&user=%7B%22id%22%3A748891997%2C%22first_name%22%3A%22%F0%9D%97%A6%F0%9D%97%94%F0%9D%97%A0%F0%9D%97%9C%22%2C%22last_name%22%3A%22%22%2C%22username%22%3A%22samyar%22%2C%22language_code%22%3A%22en%22%7D&auth_date=1651749255&hash=34f3a0de3e0dc7b8d5735d0a85b265763c5c490917180fef40e4df61c819949e",
  "initDataUnsafe": {
    "query_id": "AAFdL6MsAAAAAFbvoywCSO1y",
    "user": {
      "id": 748291957,
      "first_name": "𝗦𝗔𝗠𝗜",
      "last_name": "",
      "username": "samyar",
      "language_code": "en"
    },
    "auth_date": "1651749255",
    "hash": "34f3a0de3e0dc7b8d5735d0a85b265265cdc490917280fef40e4df61c819949e"
  },
  "version": "1.0",
  "colorScheme": "dark",
  "themeParams": {
    "bg_color": "#17212b",
    "button_color": "#5288c1",
    "button_text_color": "#ffffff",
    "hint_color": "#708499",
    "link_color": "#6ab3f3",
    "text_color": "#f5f5f5"
  },
  "isExpanded": true,
  "viewportHeight": 621,
  "viewportStableHeight": 621,
  "MainButton": {
    "text": "CONTINUE",
    "color": "#5288c1",
    "textColor": "#ffffff",
    "isVisible": false,
    "isProgressVisible": false,
    "isActive": true
  }
}

我需要访问许多其他选项，但我没有。我只需要用户的个人资料信息。

WebApp :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <title>Web app</title>
  </head>
  <body>
    <div class="user-info">
      <!-- Data -->
      <img id="profile" />
      <h1 id="name"></h1>
      <h3 id="username"></h3>
      <!--  -->
      <p id="test">
        This page is a simple webapp integrated with telegram bot 💥
      </p>
    </div>
    <script>
      const profileEl = document.getElementById("profile");
      const nameEl = document.getElementById("name");
      const usernameEl = document.getElementById("username");
      const test = document.getElementById("test");
      window.Telegram.WebApp.ready();
      test.innerText = `${JSON.stringify(window.Telegram.WebApp)}`;

      const { first_name, last_name, username, photo_url } =
        window.Telegram.WebAppUser;

      // set the profile
      profileEl.src = photo_url;

      nameEl.innerText = `${first_name} ${last_name}`;

      usernameEl.innerText = username;
    </script>
  </body>
</html>

机器人代码：基本上，它只是发送一个回复MarkupKeyboard

@app.on_message(filters.private)
async def hello(client, message):
    # await message.reply("Just a web app integrated withen telegram! 😀",
    #                     reply_markup=InlineKeyboardMarkup(
    #             [
    #                 [
    #                     InlineKeyboardButton(
    #                       "Open Web app 💥",web_app=WebAppInfo(url="https://telegramwebapp.netlify.app"))
    #                 ]
    #             ]
    #         ))
    await message.reply("Just a web app integrated withen telegram! 😀",
                        reply_markup=ReplyKeyboardMarkup(
                [
                    [
                        KeyboardButton(
                          "Open Web app 💥",
                          web_app=WebAppInfo(url="https://telegramwebapp.netlify.app"))
                    ]
                ]
            ))

Answer 1

const { first_name, last_name, username } = window.Telegram.WebApp.initDataUnsafe.user;

对我来说很好用。

Ivan Khoda

2022-06-02

Answer 2

我也遇到了这个问题。就我的情况而言，通过菜单按钮实现 Web 应用是一个不错的决定

https://core.telegram.org/bots/webapps#launching-web-apps-from-the-menu-button

通过这种方法，我获得了完整的用户信息