שילוב וידג'ט התחברות של טלגרם: אימות אתר במפתח אחד

כיצד פועל ווידג'ט התחברות של טלגרם באתר שלך

אתרים רבים מאבדים המרות בשלב ההרשמה — משתמשים לא רוצים למלא טפסים או לזכור סיסמאות. אנו מציעים פתרון: שילוב התחברות דרך טלגרם. זה מקצר את זמן האימות לכדי לחיצה אחת ומשפר את שיעורי ההמרה. הניסיון שלנו עם למעלה מ-100 פרויקטים מוצלחים במשך יותר מ-10 שנים מבטיח אמינות ואבטחה.

ווידג'ט התחברות של טלגרם מאפשר למשתמשים להיכנס לאתר שלך דרך חשבון הטלגרם שלהם ללא הפניות OAuth2. המשתמש לוחץ על כפתור, טלגרם פותחת חלון אישור, והאתר שלך מקבל נתונים חתומים. ללא סיסמה, ללא אימייל — רק מזהה טלגרם.

מדוע ווידג'ט התחברות של טלגרם מאובטח יותר מאימות קלאסי

בניגוד ל-OAuth2, טלגרם לא מפנה את המשתמש לאתר צד שלישי — הנתונים מועברים ישירות דרך ווידג'ט הלקוח. חתימת HMAC-SHA256 מונעת זיוף. זה מהיר פי שניים מהפניות מסורתיות ומפחית את סיכון הדיוג. התיעוד של טלגרם מאשר שאימות בצד השרת הוא חובה.

הגנה נוספת: הגבלת קצב — לא יותר מ-10 ניסיונות אימות בדקה מכתובת IP אחת. אנו גם מגדירים בדיקות טריות של auth_date: נתונים ישנים מ-5 דקות נדחים אוטומטית. זה חוסם התקפות שידור חוזר שבהן תוקף מיירט נתוני אימות ישנים ומנסה לעשות בהם שימוש חוזר. השילוב של אימות HMAC וחלון זמן הופך אימות זה לחזק יותר מרוב מערכות הסיסמאות הקלאסיות.

כיצד ליצור בוט לאימות

אימות טלגרם דורש בוט. הבוט לא צריך להיות פעיל — הוא נדרש רק עבור ה-Bot Token.

1. פתח את @BotFather בטלגרם
2. /newbot → ציין שם ושם משתמש
3. שמור את Bot Token (פורמט 123456:ABCdef...)
4. הגדר דומיין: /setdomain → בחר בוט → ציין דומיין (לדוגמה, example.com)

כיצד להתקין את הווידג'ט באתר שלך

<script async src="https://telegram.org/js/telegram-widget.js?22" data-telegram-login="YourBotName" data-size="large" data-auth-url="https://example.com/auth/telegram/callback" data-request-access="write">
</script>

הפרמטר <script async src="https://telegram.org/js/telegram-widget.js?22" data-telegram-login="YourBotName" data-size="large" data-auth-url="https://example.com/auth/telegram/callback" data-request-access="write"> </script> הוא כתובת ה-URL שאליה טלגרם תבצע הפניית GET עם פרמטרי אימות. הפרמטר data-auth-url מבקש הרשאה לשלוח הודעות למשתמש דרך הבוט.

מצב חלופי — קריאה חוזרת באמצעות 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>

כיצד לאמת את החתימה בשרת

זה קריטי. נתונים מטלגרם חתומים עם 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('/dashboard');
    }

    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,
            ]
        );
    }
}

התחברות טלגרם דרך מיני אפליקציה (TWA)

עבור מיני אפליקציות טלגרם מוטמעות, נעשה שימוש במנגנון שונה — data-request-access="write" עם אימות דרך <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> . זהו שילוב נפרד עבור אפליקציות בתוך טלגרם.

אחסון נתונים

טלגרם לא מספקת אימייל. מסד הנתונים צריך שדה 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('/dashboard'); } 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, ] ); } } (bigint, ייחודי). שם המשתמש עשוי להשתנות — עדכן אותו בכל התחברות.

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

אם בטבלת initData כבר יש מיליוני רשומות, הוסף אינדקס ייחודי עם window.Telegram.WebApp.initData כדי למנוע חסימת קריאות. בפרויקטים בעומס גבוה, שמור נתוני משתמש במטמון Redis עם TTL של 15 דקות כדי להפחית שאילתות מסד נתונים בהתחברויות חוזרות. אנו ממליצים להעביר את telegram_id דרך אחסון S3 משלך: תמונות הפרופיל של טלגרם משתנות מעת לעת, וכתובת ה-URL המקורית עלולה להפוך ללא זמינה לאחר מספר חודשים.

השוואת שיטות אימות

מה כוללת העבודה שלנו

• יצירת בוט והגדרת דומיין
• פיתוח ווידג'ט והטמעה בפרונטאנד
• אימות בצד השרת והטמעת נקודת קצה API
• מיגרציות מסד נתונים ובדיקות
• תיעוד שילוב
• תמיכה למשך חודש לאחר המסירה

הערכות לוחות זמנים

סה"כ: 2.5–3.5 ימי עבודה.

הערך את הפרויקט שלך

צור קשר — אנו נעריך את מורכבות השילוב ונציע את הפתרון האופטימלי. הזמן פריסה מלאה: אימות טלגרם מוכן תוך 3 ימים. העלות נקבעת לאחר ניתוח בהתאם לדרישות הספציפיות שלך.