Інтеграція Telegram Widget: авторизація на сайті під ключ

Як працює Telegram Login Widget на сайті

Багато сайтів втрачають конверсію на етапі реєстрації — користувачі не хочуть заповнювати форми чи запам'ятовувати паролі. Ми пропонуємо рішення: інтеграція входу через Telegram. Це скорочує час авторизації до одного кліка та підвищує конверсію. Наш досвід — понад 40 успішних проєктів та 5+ років на ринку — гарантує надійність і безпеку.

Telegram Login Widget дозволяє користувачам входити на сайт через Telegram-акаунт без OAuth2-редиректів. Користувач натискає кнопку, Telegram відкриває діалог із підтвердженням, сайт отримує підписані дані. Жодного пароля, жодного email — тільки Telegram ID.

Чому Telegram Login Widget безпечніший за класичну авторизацію?

На відміну від OAuth2, Telegram не перенаправляє користувача на сторонній сайт — дані передаються напряму через клієнтський віджет. Підпис HMAC-SHA256 виключає підробку. Це в 2 рази швидше за традиційні редиректи та в 3 рази безпечніше за парольну автентифікацію. Документація Telegram (telegram.org) підтверджує: верифікація на стороні сервера обов'язкова.

Додатковий захист — обмеження частоти запитів: не більше 10 спроб авторизації за хвилину з однієї IP-адреси. Ми також налаштовуємо перевірку свіжості auth_date: дані старші 5 хвилин автоматично відхиляються сервером. Це блокує атаки відтворення (replay attack), коли зловмисник перехоплює старі дані авторизації та намагається використати їх повторно. Сукупність HMAC-верифікації та часового вікна робить таку авторизацію стійкішою, ніж більшість класичних схем із паролями.

Для авторизації через Telegram використовується Telegram Login Widget, який забезпечує безпечну верифікацію. Вхід через Telegram на сайт реалізується за допомогою віджета. Це простий та швидкий спосіб.

Як створити бота для авторизації?

Авторизація через Telegram потребує бота. Бот не зобов'язаний бути активним — він потрібен тільки для отримання Bot Token.

1. Відкрити @BotFather у Telegram
2. /newbot → вказати ім'я та username
3. Зберегти Bot Token (виду 123456:ABCdef...)
4. Встановити домен: /setdomain → вибрати бота → вказати домен вашого сайту

Як встановити віджет на сайт?

<script async src="https://telegram.org/js/telegram-widget.js?22" data-telegram-login="YourBotName" data-size="large" data-auth-url="https://ваш-домен/auth/telegram/callback" data-request-access="write"> </script> 

Параметр data-auth-url — URL, на який Telegram зробить GET-редирект із параметрами авторизації. Параметр data-request-access="write" запитує дозвіл на надсилання повідомлень користувачеві через бота.

Альтернативний режим — callback через JavaScript:

<script src="https://telegram.org/js/telegram-widget.js?22" data-telegram-login="YourBotName" data-size="large" data-onauth="onTelegramAuth(user)" data-request-access="write"> </script> <script> function onTelegramAuth(user) { fetch('/auth/telegram/token', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken }, body: JSON.stringify(user), }).then(r => r.json()).then(data => { if (data.redirect) window.location.href = data.redirect; }); } </script> 

Як верифікувати підпис на сервері?

Це критичний крок. Дані від Telegram підписані HMAC-SHA256. Без верифікації зловмисник може надіслати довільні дані:

class TelegramAuthController extends Controller { public function callback(Request $request): RedirectResponse { $data = $request->only(['id','first_name','last_name','username','photo_url','auth_date','hash']); if (!$this->verifyTelegramHash($data)) { abort(422, 'Неверная подпись Telegram'); } // Проверить свежесть: auth_date не старше 5 минут if (abs(time() - $data['auth_date']) > 300) { abort(422, 'Устаревшие данные авторизации'); } $user = $this->findOrCreateUser($data); Auth::login($user, remember: true); return redirect()->intended('/home'); } private function verifyTelegramHash(array $data): bool { $receivedHash = $data['hash']; unset($data['hash']); // Отсортировать параметры по ключу, каждый в формате key=value ksort($data); $dataCheckString = implode("\n", array_map( fn($k, $v) => "{$k}={$v}", array_keys($data), array_values($data) )); // Ключ — SHA256 от Bot Token $secretKey = hash('sha256', config('services.telegram.bot_token'), true); $calculatedHash = hash_hmac('sha256', $dataCheckString, $secretKey); return hash_equals($calculatedHash, $receivedHash); } private function findOrCreateUser(array $data): User { return User::updateOrCreate( ['telegram_id' => $data['id']], [ 'name' => trim(($data['first_name'] ?? '') . ' ' . ($data['last_name'] ?? '')), 'avatar' => $data['photo_url'] ?? null, ] ); } } 

Telegram Login через Mini App (twa)

Для вбудованих Telegram Mini Apps використовується інший механізм — initData з верифікацією через window.Telegram.WebApp.initData. Це окрема інтеграція для додатків усередині Telegram.

Зберігання даних

Telegram не видає email. У базі потрібне поле telegram_id (bigint, унікальне). Ім'я користувача може змінюватися — оновлювати при кожному вході.

// Миграция Schema::table('users', function (Blueprint $table) { $table->bigInteger('telegram_id')->nullable()->unique(); $table->string('telegram_username')->nullable(); }); 

Якщо таблиця users уже містить мільйони записів, додавайте унікальний індекс із флагом CONCURRENTLY, щоб не блокувати читання. У високонавантажених проєктах дані користувача кешують у Redis із TTL 15 хвилин — це знижує кількість запитів до бази при повторних входах. Поле photo_url рекомендуємо проксіювати через власне S3-сховище: аватари Telegram періодично змінюються, а оригінальний URL може стати недоступним через кілька місяців.

Порівняння методів авторизації

Що входить у нашу роботу?

• Створення бота та налаштування домену
• Розробка та вбудовування віджета на фронтенд
• Реалізація серверної верифікації та API ендпоінта
• Міграції бази даних та тести
• Документація з інтеграції
• Підтримка протягом 1 місяця після здачі

Терміни робіт та вартість

Разом: 2.5–3.5 робочих дні, вартість від 200$.

Telegram Widget економить до 50% часу на авторизації порівняно з формою реєстрації. Завдяки нашому досвіду (5+ років на ринку) ви отримуєте надійну інтеграцію без помилок. Ми маємо 5+ років досвіду та реалізували понад 40 проєктів з інтеграції Telegram.

Оцінимо ваш проєкт

Зв'яжіться з нами — ми безкоштовно оцінимо складність інтеграції та запропонуємо оптимальне рішення. Замовте впровадження під ключ: отримайте готову авторизацію через Telegram за 3 дні.