Telegram mini app 登录小部件 | 自定义登录按钮

先说我遇到的问题，我按照流程接入了 telegram 登录小部件，在 PC 或者 H5 可以拿到数据（不管是选择回调函数还是回调地址的形式都可以），但是在 telegram mini app 中登录拿不到数据，在 telegram 中 我点击登录的小部件后是在浏览器中打开授权网址，然后授权后回调也是在浏览器中打开一个新标签页，而不是在 telegram 中打开

设置机器人域名

这里我假设你已经有一个机器人了（没有的网上有很多 文章 教怎么创建机器人）,在 @BotFather 中输入 /myapps

点击 Edit Web App Url 后输入你的域名地址（这里也可以输入你的开发地址，以 https 开头，但是不能使用 登录小部件 因为你的网址和 telegram-widget.js 生成的 iframe 域名不一致会导致浏览器安全策略问题）

然后再输入 /setdomain, 同样的选择你的机器人然后输入你的网址

到这一步前置条件已完成。

登录

第一步

设置回调函数

// ...
      <Script
        id="get-telegramAuth"
        dangerouslySetInnerHTML={{
          __html: `
  function onTelegramAuth(user) {
    console.log('user =>>>', user)
    alert('Logged in as ' + user.first_name + ' ' + user.last_name + ' (' + user.id + (user.username ? ', @' + user.username : '') + ')');
  }
`,
        }}
      ></Script>
// ...

第二步

这里我是使用 Next 框架编写的代码，在只需要改一下格式在其他框架中也可以使用。

import Script from 'next/script';
export const TGLogin = () => {
  return <>
  <Script async src='https://telegram.org/js/telegram-widget.js?22' data-telegram-login='<你的机器人用户名>' data-request-access='write' data-size='large' data-radius='10' data-onauth='onTelegramAuth(user)'></Script>
  <div id="my-special-div" onClick={() => {
    window.location.href = 'https://oauth.telegram.org/auth?bot_id=6889929762&origin=https%3A%2F%2Fwww.telegramloveai.com&embed=1&request_access=write&return_to=https%3A%2F%2Fwww.telegramloveai.com%2Fen%2Flogin'
  }}>
    LOGIN
  </div>
  </>;
};

href 中地址是点击登录小部件进入新标签页的地址

机器人用户名不需要 @

Mini Apps 成功示例