Авторизация Telegram без кнопки по умолчанию - PullRequest
Новая
       69

Авторизация Telegram без кнопки по умолчанию

7 голосов
/ 28 мая 2019

Единственный документированный способ использования авторизации Telegram третьей стороной - это использовать их скрипт, который предоставляется на https://core.telegram.org/widgets/login

Этот скрипт (как я копал) работает довольно странным образом

  1. Отображает кнопку «Войти с Telegram» внутри iframe с еще одним дополнительным script, который загружает некоторые объекты Telegram для работы (например, TWidgetLogin, TSticker (?) , TVideo (??) , TAudio (???) и некоторые другие).
  2. При нажатии на кнопку это iframeоткрывает новое окно, в котором выполняется авторизация.
  3. После завершения авторизации это окно закрывается, и, поскольку оно выполнено, iframe снова проверяет авторизацию.Если все сделано правильно, iframe извлекает всю совместно используемую информацию о пользователе и зависит от типа авторизации, завершает вызовы data-onauth или отправляет запрос на data-auth-url.

Это поведение действительно непригодно дляя, потому что мы также используем Google, Github и Facebook OAuths поблизости, и все они предоставляют нормальный пригодный для использования API, чтобы открывать окна авторизации вручную и перенаправлять на указанный URL.

Я имею в виду, вот как наши,например, авторизация Google работает:

  1. Пользователь нажимает на кнопку, которая создается самостоятельно , настроенную в соответствии со стилем нашего приложения.
  2. При нажатии нашаприложение создает новое окно с URL https://hostname/some/path/to/auth?and_some_params=here
  3. Наш сервер ловит это и перенаправляет на экран согласия Google OAuth.
  4. После завершения авторизации Google он перенаправляет пользователя на другого /some/path/to/completed_authorization
  5. Сервер извлекает всю необходимую информацию и перенаправляет окно на /some/path/to/success_authorization со сценарием с window.postMessage на родительское окно с auИнформация о торизации.
  6. Родительское окно (окно приложения) ловит это сообщение, закрывает окно и заполняет хранилище данными данного пользователя.

И это сделано.Поскольку открытое окно открывается приложением, им можно управлять и закрывать, когда оно не используется (например, когда открывается другое окно аутентификации или когда закрывается вкладка приложения).

Что не подходит вКнопка «Войти с помощью телеграммы»:

  1. Нет возможности стилизовать кнопку под стиль приложения
  2. Нет возможности изменить содержимое кнопки (в нашем случае это необходимо,потому что наше приложение мультиязычное).
  3. Нет возможности контролировать открытое окно (оно открывается, даже если главное окно закрыто)

На данный момент я могу открытьокно с окном Telegram OAuth с использованием 

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

Есть ли способ добиться авторизации Telegram без кнопки «Войти с Telegram»?Любая помощь высоко ценится.

1 Ответ

2 голосов
/ 04 июня 2019

@ Limbo, как я вижу - сгенерированный виджет и код просто создают iframe с контентом, основанным на имени нашего бота и других параметрах.Это каждый раз одно и то же.Например, для (https://oauth.telegram.org/embed/samplebot?origin=https%3A%2F%2Fcore.telegram.org&size=medium&userpic=false), заинтересованная часть в ответе здесь: 

<div class="tgme_widget_login medium nouserpic" id="widget_login"><button class="btn tgme_widget_login_button" onclick="return TWidgetLogin.auth();"><i class="tgme_widget_login_button_icon"></i>Log in with Telegram</button></div>

<script src="//telegram.org/js/widget-frame.js?27"></script>
<script>TWidgetLogin.init('widget_login', 547043436, {"origin":"https:\/\/core.telegram.org"}, false, "en");

И каждый раз она будет одинаковой. Итак, вы просто добавляете этот код на свою страницу, где вы можете настроитьстили кнопок и поместите их в любое место на странице, как вам нужно. Просто позаботьтесь о параметре id и не забудьте добавить прослушиватель событий для onClick, который будет вызывать TWidgetLogin.auth (), когда вы захотите показать всплывающее окно входа в систему.

Функция TWidgetLogin.init принимает пару параметров (target_login_btn_id, bot_id, params, init_auth, lang). Все они описаны само собой.

Интересная часть - о полученииинформация об аутентификации. Если вы проверите этот widget-frame.js, то обнаружите, что после успешной аутентификации он вызывает window.parent.postMessage(JSON.stringify(data), origin || '*'); с пользовательскими данными в параметре данных. В нашем случае (мы работаем без iframe) postMessage будет доставлено в текущее окно ивы сможете поймать его с помощью простого кода 

window.addEventListener("message", function(event) {console.log('get message, evetn)}, false);

И там вы сможете получить все необходимые данные пользователя.

Хинг - источник этого сообщения.Но этот сценарий параметров получает пользовательские данные с серверов телеграмм, поэтому я подозреваю, что он будет содержать источник связанного сайта, и у нас не возникнет никаких проблем с этим.

Удачи в дальнейшем исследовании.

...