Как реализовать функцию аутентификации на веб-сайте с использованием телеграма?

Как я могу добавить авторизацию через Telegram на мой сайт без использования виджета? Мне не нравится идея вставлять виджет в мое современное react-приложение. Насколько я знаю, вконтакте предоставляет возможность редиректа с использованием get параметров для авторизации. Может быть, кто-то знает другие способы реализации авторизации через Telegram? Я использую стек React и NestJS.
  • 4 февраля 2024 г. 17:08
Ответы на вопрос 2
Для реализации аутентификации на веб-сайте с использованием Telegram без виджета можно использовать OAuth 2.0 и Telegram Bot API. Ваш процесс аутентификации может выглядеть следующим образом:

1. **Создание бота в Telegram**:
   - Используйте BotFather для создания нового бота в Telegram.
   - Получите токен для вашего бота, который будет использоваться для доступа к Telegram Bot API.

2. **Реализация механизма глубокой ссылки (deep linking)**:
   - Создайте уникальную ссылку для аутентификации пользователей через вашего бота в Telegram (например, `https://t.me/your_bot?start=unique_payload`).
   - Пользователь будет переадресован в вашего бота в Telegram с уникальным полезным грузом (`unique_payload`), который идентифицирует сессию аутентификации на вашем сайте.

3. **Отслеживание сообщений пользователя вашему боту**:
   - Используйте Telegram Bot API для отслеживания сообщений от пользователей, которые начинают диалог с вашим ботом.
   - Когда пользователь нажимает на ссылку и начинает диалог с ботом, боту отправляется соответствующий `unique_payload`.

4. **Аутентификация пользователя**:
   - Когда ваш бот получает сообщение с `unique_payload`, он должен отправить пользователю сообщение для подтверждения его идентификации (допустим, "Если вы пытаетесь войти на сайт example.com, пожалуйста, нажмите кнопку подтверждения.").
   - Затем бот может отправлять HTTP-запрос на ваш сайт (endpoint) с использованием `unique_payload` и идентификатором пользователя в Telegram, чтобы подтвердить его идентичность.

5. **Обработка ответа на вашем сайте**:
   - Ваш сервер (в вашем случае, NestJS) должен обработать запрос от бота и установить соответствующий сеанс для пользователя.
   - Если пользователь подтверждён, сервер отправляет ответ обратно в бота, который затем сообщает пользователю об успешной аутентификации.

6. **Установление сессии или токена для пользователя**:
   - Создайте сессию для пользователя на сервере или генерируйте токен аутентификации (например, JWT), чтобы передать его в приложение.
   - Вы можете использовать веб-сокеты или другие способы коммуникации для информирования клиентского приложения о состоянии аутентификации.

7. **На стороне клиента (React приложение)**:
   - После того как пользователь аутентифицирован, обновляйте состояние приложения таким образом, чтобы отразить новый статус аутентификации пользователя (например, с помощью Redux, MobX или другого состояния управления библиотекой).

Этот процесс требует, чтобы у вас были как программно-записанные компоненты взаимодействия с Telegram API на сервере, так и настройки на клиенте для обработки изменения состояния аутентификации. Будьте внимательны к безопасности при проектировании и реализации механизмов аутентификации и проверке подлинности ваших запросов между клиентом, ботом и сервером.
И так, для меня в будущем, и для тех кто это нагуглил: 

Дело в том что без виджета на начало 2024 сделать авторизацию практический не возможно, вот реально правильное решение если у вас похожий стэк, и вы планируете делегировать саму регистрацию на сервер, а не делать все через front.

Интегрируем виджет в приложение react + ts:
(это если вам надо что бы был не редирект, а вызов функции со стороны telegram)

если нужен все таки редирект мы добавляем такое поле:
и удаляем это:

И так объясняю в чем задумка:
В ваше приложение react интегрируется все тот же виджет, но правильным образом. После нажатия на виджет происходит авторизация пользователя (он вводит свои данные / просто нажимает войти). Потом телеграм передает все его данные вам (в функцию - №1 способ / по get параметрам в url). Если вы делегируете
регистрацию на сервер (а так правильно) то выбираете 2 способ. Сервер получает данные валидирует их и заносит в БД, затем делает редирект вашего пользователя к вам обратно на front, и заносит token (или что там еще не разобрался) в HttpOnly Ckookie. Ну а далее в моем случае Guard будет проверять есть этот token или нет, годен он или нет.

Передаю привет Максиму в будущем. Как дела Макс ?
Похожие вопросы