Как сделать аутентификацию на сайте через телеграм?

Привет. Объясняю в чем дело.
Читая подобные статьи "https://codex.so/telegram-auth" везде написано, что для аутентификации на моем сайте нужно использовать некий "виджет"

<script async src="https://telegram.org/js/telegram-widget.js?22" data-telegram-login="samplebot" data-size="large" data-onauth="onTelegramAuth(user)" data-request-access="write"></script> <script type="text/javascript">   function onTelegramAuth(user) {     alert('Logged in as ' + user.first_name + ' ' + user.last_name + ' (' + user.id + (user.username ? ', @' + user.username : '') + ')');   } </script>

Мне не сильно симпатизирует запихивать это в современное react приложение.

Хотелось бы сделать что-то типа обычного редиректа с get параметрами, например как в vk.
Может кто-то, знает какие-то другие способы реализации авторизации, спасибо.

мой стэк:
react
nestjs

Дополнительно:

По большей части задумка в том что бы с клиента перенести всю логику на сервер.

И так, для меня в будущем, и для тех кто это нагуглил:

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

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

import { useEffect } from 'react' import { ITelegramUser } from '../../../../types/telegram/api-telegram-user.ts'  declare global {   interface Window {     onTelegramAuth: (user: ITelegramUser) => void   } }  export const ButtonTelegramAuth = () => {   useEffect(() => {     const button = document.createElement('script')     button.async = true     button.src = 'https://telegram.org/js/telegram-widget.js?22'     button.setAttribute('data-telegram-login', 'name_bot')     button.setAttribute('data-size', 'large')     button.setAttribute('data-radius', '20')     button.setAttribute('data-onauth', 'onTelegramAuth')      document.body.appendChild(button)      window.onTelegramAuth = function (user) {       alert(         'Logged in as ' +           user.first_name +           ' ' +           user.last_name +           ' (' +           user.id +           (user.username ? ', @' + user.username : '') +           ')'       )     }      return () => {       document.body.removeChild(button)     }   }, [])    return <div id="telegram-widget-container"></div> }

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

script.setAttribute('data-auth-url', 'https://site.pw');

и удаляем это:

button.setAttribute('data-onauth', 'onTelegramAuth')  declare global {   interface Window {     onTelegramAuth: (user: ITelegramUser) => void   } }   window.onTelegramAuth = function (user) {       alert(         'Logged in as ' +           user.first_name +           ' ' +           user.last_name +           ' (' +           user.id +           (user.username ? ', @' + user.username : '') +           ')'       )     }

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

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

Ответы:

Здравствуй, Максим!
А чтобы указать домен (/setdomain) в телеграме (@botfather) надо действующий домен указать, да?
На локальном неполучится?
На localhost:8080

проект разрабатываю на Vue3 + TS

выводит ошибку в телеграме Bot domain invalid
Пробовал указызать через 192.168.0.111:8080 но, безтолку.

• отвечу на свой вопрос.
  через ngrok туннель вывел свой домен на внешку и где домен в телеграме указал тот внешний домен который сгенерировал ngrok и все заработало. Ура!!
  Вывод такой, как я понял ошибка неизбежна если будете указать где домен через команду /setdomain localhost:8080 или как там запускаете свой проект, надо именно внешний домен.

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

• Kalys01, я просто купил сервер) первый раз слышу про "ngrok туннель"

Помогите пожалуйста разобраться как его добавить, у меня не чего не отображается , в чем может быть проблема?
import React, { useEffect } from 'react';

const AuthTgButton = () => {
useEffect(() => {
const script = document.createElement('script');
script.async = true;
script.src = 'https://telegram.org/js/telegram-widget.js?22';
script.setAttribute('data-telegram-login', 'casinoSpinSpritAuth_bot');
script.setAttribute('data-size', 'large');
script.setAttribute('data-userpic', 'false');
script.setAttribute('data-auth-url', '13.60.53.138:8080');
script.setAttribute('data-request-access', 'write');

document.body.appendChild(script);

return () => {
document.body.removeChild(script);
};
}, []);

return ;
};

export default AuthTgButton;