没有默认按钮的电报授权 [英] Telegram authorization without default button

问题描述

使用 Telegram 3-rd 方授权的唯一记录方式是使用在 提供的脚本https://core.telegram.org/widgets/login

The only documented way to use Telegram 3-rd party authorization is to use their script that is being provided at https://core.telegram.org/widgets/login

这个脚本(正如我挖掘的那样)以非常奇怪的方式工作

This script (as I digged) works in pretty strange way

1. 它在 iframe 中呈现Log in with Telegram"按钮，并带有另一个额外的 script，用于加载一些 Telegram 实体(例如 TWidgetLogin、TSticker (?)、TVideo (??)、TAudio (???) 和其他一些).
2. 通过单击按钮，此 iframe 将打开正在执行授权的新窗口.
3. 授权完成后，此窗口关闭，完成后，iframe 再次检查授权.如果以正确的方式完成，iframe 将检索所有共享用户信息并根据授权类型调用 data-onauth 或将请求发送到 data-auth-网址.

1. It renders "Log in with Telegram" button inside the iframe with another extra script that loads some Telegram entities to work with (like TWidgetLogin, TSticker (?), TVideo (??), TAudio (???) and some others).
2. By clicking on button, this iframe opens new window that is performing authorization.
3. After authorization is being completed, this window is being closed, and since it's done, the iframe checks the authorization again. If it's done in right way, the iframe retrieves all shared user info and dependent on type of authorization end calls data-onauth or sends request to data-auth-url.

这种行为对我来说真的无法使用，因为我们也在附近使用 Google、Github 和 Facebook OAuths，并且它们都提供了正常可用的 API 来手动打开授权窗口并重定向到指定的 url.

This behaviour is really unusable for me, because we are also using Google , Github and Facebook OAuths nearby, and all of them are providing the normal usable API to open authorization windows manually and do redirects to specified url.

我的意思是，例如我们的 Google 授权就是这样工作的:

I mean, that's how our, for example, Google authorization works:

1. 用户点击我们自己创建的按钮，根据我们的应用程序风格进行定制.
2. 点击后，我们的应用程序会创建一个带有 url https://hostname/some/path/to/auth?and_some_params=here
的新窗口
3. 我们的服务器捕获到此信息并重定向到 Google OAuth 同意屏幕.
4. 谷歌授权完成后，它会将用户重定向到另一个/some/path/to/completed_authorization
5. 服务器检索所有必要的信息，并将窗口重定向到具有带有 window.postMessage 的脚本的 /some/path/to/success_authorization 到带有授权信息的父窗口.
6. 父窗口(应用程序窗口)捕获此消息，关闭窗口并使用给定的用户数据填充存储.

1. User clicks on button that is created on our own, customized to match our application style.
2. On click, our application creates new window with url https://hostname/some/path/to/auth?and_some_params=here
3. Our server catches this and redirects to Google OAuth consent screen.
4. After Google authorization is being completed, it redirects user to another /some/path/to/completed_authorization
5. Server retrieves all necessary information, and redirects window to /some/path/to/success_authorization that has script with window.postMessage to parent window with authorization info.
6. Parent window (application window) catches this message, closes window and fills storage with given user data.

这就完成了.由于打开的窗口是由应用程序打开的，因此可以在不使用时(例如，打开另一个身份验证窗口或关闭应用程序选项卡时)对其进行控制和关闭.

And thats done. Since opened window is being opened by application, it can be controlled and closed when it's not in use (e.g. when another auth window is being opened, or when the application tab is being closed).

电报中用电报登录"按钮不合适的是:

What is unsuitable in telegram "Log in with telegram" button is:

1. 无法将按钮样式化以匹配应用程序风格
2. 无法更改按钮的内容(在我们的例子中是必要的，因为我们的应用程序是多语言的).
3. 无法控制打开的窗口(即使主窗口关闭，它也会被打开)

<小时>

现在我可以使用电报 OAuth 屏幕打开一个窗口

---

For now I can open a window with Telegram OAuth screen using

// some code above
this.popup = window.open("https://oauth.telegram.org/auth?bot_id=<my_bot_id>&origin=http%3A%2F%2F<mydevorigin>&request_access=write, "authWindow", <some window params>)
// some code below

但是由于授权正在完成，我无法设置任何内容来让服务器知道它应该检索用户数据并使用 window.postMessage

But since authorization is being completed, I cannot set anything to let server know that it should retrieve user data and redirect to my page with window.postMessage

有没有办法在没有使用电报登录"按钮的情况下获得电报授权?非常感谢任何帮助.

Is there any way to achieve Telegram authorization without their "Login with Telegram" button? Any help is highly appreciated.

推荐答案

所以有一个更简单的方法来做到这一点，而无需直接监听 postMessages.

So there is an even easier way to do it, without directly listening postMessages.

电报小部件脚本 https://telegram.org/js/telegram-widget.js 向窗口添加Telegram 对象，该对象具有Login 属性，具有auth 功能.

Telegram widget script https://telegram.org/js/telegram-widget.js adds Telegram object to window, this object has Login property, which has auth function.

auth 函数接受 options 和 callback，如下所示:

auth function accepts options and callback, like so:

declare const auth: (options: Options, callback: Callback) => void;

interface Options {
  bot_id: string;
  request_access?: boolean;
  lang?: string;
}

interface Data {
  auth_date: number;
  first_name: string;
  hash: string;
  id: number;
  last_name: string;
  username: string;
  // I think there could be other properties too
}

type Callback = (dataOrFalse: Data | false) => void;

注意如果授权不成功，callback 会以false 布尔值调用.

Pay attention that callback will be called with false boolean if authorization is not successful.

所以你需要做的就是加载小部件脚本(没有数据属性，否则它会用按钮初始化 iframe)，然后在你需要的时候调用这个函数:

So all you need to do is load widget script (without data attributes, because otherwise it will initialise iframe with button), then call this function whenever you need:

window.Telegram.Login.auth(
  { bot_id: 'YOUR_BOT_ID', request_access: true },
  (data) => {
    if (!data) {
      // authorization failed
    }

    // Here you would want to validate data like described there https://core.telegram.org/widgets/login#checking-authorization
    doWhateverYouWantWithData(data);
  }
);

auth 将打开另一个带有 Telegram 授权界面的窗口，并且会自己监听这个窗口发布的消息.当窗口关闭时，您的 callback 将被调用.

auth will open another window with Telegram authorization interface and will listen to this window post messages by itself. When window closes your callback will be called.

这篇关于没有默认按钮的电报授权的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！