Telegram authorization without default button

Question

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. 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.

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.

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

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. No possibility to stylize button to match application style
2. No possibility to change content of the button (in our case it is necessary, because our application is multilanguage).
3. No possibility to control opened window (it is being opened even if the main window is closed)

---

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

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.

Answer 1

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

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 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;

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

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 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.