Існує два основних способи входу на сайт через Tel

Існує два основних способи входу на сайт через Telegram: офіційний віджет (користувач натискає кнопку на сайті і підтверджує логін) або через генерацію одноразового коду/QR-коду всередині самого бота.

Найпростіший і найстандартніший варіант детально описаний нижче —офіційний віджет авторизації Telegram (Telegram Login Widget).

Крок 1. Створіть і налаштуйте бота

Для авторизації вам обов 'язково потрібен Telegram-бот, з яким буде пов' язано домен вашого сайту.

  1. Знайти офіційного бота@BotFatherв Telegram і запустити його.

  2. Створіть нового бота за допомогою команди/newbot, дайте йому ім 'я та унікальне ім' я користувача (наприклад,my_site_auth_bot).

  3. Прив 'яжіть домен сайту до бота:

    • Надіслати команду/setdomain.

    • Виберіть бота.

    • Введіть адресу свого веб-сайту (наприклад,https://example.com).

    Примітка: Для локального тестування ви можете вказатиhttps://localhostвід куліhttp://127.0.0.1, але Telegram вимагає HTTPS для основного виробничого домену.

Крок 2. Отримайте код віджета для сайту

Telegram надає готовий конструктор кнопок.

  1. Перейти на офіційну сторінкуВіджет входу в Telegram.

  2. У розділі конфігуратора введіть логін вашого бота (без символу@), виберіть розмір кнопки, відображення аватара та тип авторизації:

    • Запит на зворотний дзві— дані будуть передані в функцію JavaScript безпосередньо на сторінці.

    • Перенаправлення на URL-адресу— після авторизації користувач буде перенаправлений на вказану URL-адресу (наприклад,https://example.com/tg_auth.php), де параметри користувача будуть надіслані за допомогою запиту get.

  3. Скопіюйте створений скрипт і вставте його в HTML-код сторінки входу.

Зразок коду для кнопки переспрямування:

HTML
<'  script асинхронно SRC="https://telegram.org/js/telegram-widget.js?22" 
        data-telegram-login="YOUR_BOT_NAME" 
        розмір даних="великий" 
        data-auth-url="https://example.com/tg_auth.php" 
        data-request-access=write></'  script>

Параметрdata-request-access="запис"необов 'язково, але це дозволяє боту надсилати повідомлення користувачеві в майбутньому).

Крок 3. Обробка даних на сервері (безпека)

Коли користувач натискає кнопку і дозволяє ввійти в систему, Telegram перенаправляє його на ваш скрипт (у прикладі —tg_auth.php) і передає дані профілю в GET-параметрах:id, first_name, userName, photo_url, auth_dateіhash.

Важливо перевірити достовірність цих данихщоб запобігти підробці зловмисникаidі увійдіть в чужий обліковий запис.

Алгоритм перевірки безпеки (на прикладі PHP):

  1. Збираються всі отримані параметри (крімhash), відсортований за алфавітом і склеєний у рядок форматуkey=value, розділені розривом рядка (, n).

  2. Створюється секретний ключ: хеш SHA256 береться з токена вашого бота (який видав @BotFather).

  3. HMAC-SHA256 з склеєного рядка даних обчислюється за допомогою секретного ключа.

  4. Отриманий результат порівнюється з параметромhashнадіслані Telegram. Якщо вони збігаються, дані є справжніми.

PHP
PHPвизначити('BOT_TOKEN', 'YOUR_BOT_TOKEN_HERE'); // Токен вашого бота

$auth_data = $_GET;
$check_hash = $auth_data[hash];
вимкнено($auth_data[hash]);

// 1. Параметри сортування
$data_check_arr = [];
foreach ($auth_data as Key => Value) {
    $data_check_arr[] = Key . '=' . Value;
}
sort($data_check_arr);
$Data_check_STRING= implode(, n, $data_check_arr);

// 2. Створити секретний ключ з токена бота
Secret keyhash'sha256', BOT_TOKEN,TRUE ());

// 3. Обчислити хеш рядка даних
hash= HASH_hmac('sha256', $Data_check_STRING, Secret key);

// 4. Перевірка достовірності та актуальності даних (auth_date не має бути занадто старим)
якщо(strcmp(hash, $check_hash) !== 0) {
    die('Помилка: Дані підроблені!');
}

якщоTIME$auth_data['auth_date']) > 86400) {
    die('Помилка: сесія авторизації закінчилася.');
}

// Дані вірні! Тепер можна авторизувати користувача на сайті
// $tg_id = $auth_data['id'];
// $username = $auth_data['ім' я користувача '];

Ехо; Привіт,. htmlspecialchars($auth_data['first_name']) . "!";
// Тут ви відкриваєте сеанс (session_start()) і записуєте користувача в базу даних
?>

Альтернативний метод (за допомогою коду/посилання)

Якщо стандартний віджет вам не підходить (наприклад, ви хочете, щоб користувач увійшов, відсканувавши QR-код або перейшовши за посиланням Telegram типуt.me/your_bot?start=унікальний_код):

  1. При натисканні на кнопку «Увійти через Telegram» ваш сайт генерує випадковий унікальний токен (токен авторизації) і зберігає його в базі даних зі статусом «на розгляді».

  2. Сайт показує користувачеві посилання на бота формиhttps://t.me/my_bot?start=УНІКАЛЬНИЙ_ТОКЕН.

  3. Користувач переходить до бота та натискаєПочати.

  4. Ваш бекенд бота приймає команду/start UNIQUE_TOKEN, витягуєidкористувача Telegram та оновлює запис у базі даних вашого сайту: пов 'язує цей токен з обліковим записом Telegram та змінює статус на «авторизований».

  5. Сайт (який на даний момент перевіряє статус токена через AJAX/WebSockets) бачить, що статус змінився, і автоматично дозволяє користувачеві увійти в особистий кабінет.