Вхід через Google з OAuth 2.0: керівництво з налаштування

Проблема: користувачі не люблять реєструватися

Уявіть: відвідувач заходить на ваш сайт, хоче залишити коментар або оформити замовлення, але бачить довгу форму реєстрації — ім'я, email, пароль, підтвердження пароля, капча... 90% йдуть. Google OAuth 2.0 вирішує це: один клік — і користувач всередині. Але між ідеєю та робочою реалізацією — кілька підводних каменів: невірний redirect URI, помилки верифікації токена, плутанина з прив'язкою акаунтів. Ми реалізували цю схему для 50+ проєктів і зібрали робочий рецепт.

На одному з проєктів (SaaS-платформа з 50 000+ користувачів) традиційна реєстрація давала конверсію лише 12%, а після впровадження One Tap вона зросла до 34% — користувачі перестали кидати форму.

Ми використовуємо перевірені інструменти: Laravel Socialite для швидкого старту або Google Identity Services для сучасних сценаріїв. Наші інженери — спеціалісти з досвідом понад 6 років у цій галузі. У цій статті — готовий код, який стане у ваш проєкт.

Як працює OAuth 2.0 з Google?

Процес складається з трьох кроків:

1. Користувач натискає «Увійти через Google».
2. Перенаправлення на Google з параметрами client_id, redirect_uri та scope.
3. Google повертає авторизаційний код, сервер обмінює його на токен і перевіряє.

Помилка №1 — неспівпадіння redirect URI. У Google Cloud Console потрібно вказати точний URL, включаючи протокол і слеш. Інакше Google поверне redirect_uri_mismatch. Помилка №2 — закінчення терміну дії авторизаційного коду: він живе лише кілька хвилин, тому callback має оброблятися без затримок. Помилка №3 — неправильна верифікація id_token: ми використовуємо Google Client Library для перевірки підпису та терміну дії.

Що таке One Tap і як його підключити?

One Tap — це popup-вікно, яке з'являється на сторінці без перезавантаження. Користувач бачить пропозицію увійти через Google і підтверджує одним кліком. Це швидше за редирект у 2 рази (наприклад, для того ж SaaS-проєкту час входу скоротився з 8 до 3 секунд).

Для One Tap використовуємо Google Identity Services SDK. Токен (id_token) приходить у callback, сервер верифікує його через Google Client Library. На клієнті достатньо вставити скрипт і контейнер — код нижче.

Реєстрація OAuth-клієнта та перевірка

1. Google Cloud Console → APIs & Services → Credentials.
2. Створити OAuth 2.0 Client ID типу Web application.
3. Додати Authorized redirect URIs: https://example.com/auth/google/callback.
4. Зберегти Client ID і Client Secret.
5. Обов'язково додати Authorized origins: https://example.com для One Tap.

Як перевірити конфігурацію?

• Переконайтеся, що redirect URI збігається із зазначеним у консолі (включаючи слеш).
• Перевірте, що Client ID і Secret коректно підставлені в .env.
• Протестуйте callback за допомогою інструменту на кшталт Postman, відправивши GET-запит.
• Для One Tap: переконайтеся, що origin сервера додано в Authorized origins.

Код: Laravel Socialite (redirect + callback)

composer require laravel/socialite 

// config/services.php 'google' => [ 'client_id' => env('GOOGLE_CLIENT_ID'), 'client_secret' => env('GOOGLE_CLIENT_SECRET'), 'redirect' => env('GOOGLE_REDIRECT_URI'), ], 

// routes/web.php Route::get('/auth/google', [GoogleAuthController::class, 'redirect']); Route::get('/auth/google/callback', [GoogleAuthController::class, 'callback']); class GoogleAuthController extends Controller { public function redirect(): RedirectResponse { return Socialite::driver('google') ->scopes(['openid', 'profile', 'email']) ->redirect(); } public function callback(): RedirectResponse { $googleUser = Socialite::driver('google')->user(); // Прив'язка до існуючого акаунту за email $user = User::where('google_id', $googleUser->getId())->first(); if (!$user) { $user = User::where('email', $googleUser->getEmail())->first(); if ($user) { $user->update(['google_id' => $googleUser->getId()]); } else { $user = User::create([ 'google_id' => $googleUser->getId(), 'name' => $googleUser->getName(), 'email' => $googleUser->getEmail(), 'email_verified_at' => now(), ]); } } Auth::login($user, remember: true); return redirect()->intended('/dashboard'); } } 

One Tap: клієнтська та серверна частина

<script src="https://accounts.google.com/gsi/client" async defer></script> <div id="g_id_onload" data-client_id="{{ config('services.google.client_id') }}" data-callback="handleGoogleResponse" data-auto_prompt="false"> </div> <div class="g_id_signin" data-type="standard"></div> <script> function handleGoogleResponse(response) { // response.credential — id_token (JWT) fetch('/auth/google/token', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken }, body: JSON.stringify({ credential: response.credential }), }).then(r => r.json()).then(data => { if (data.redirect) window.location.href = data.redirect; }); } </script> 

use Google\Client as GoogleClient; public function handleToken(Request $request): JsonResponse { $client = new GoogleClient(['client_id' => config('services.google.client_id')]); $payload = $client->verifyIdToken($request->credential); if (!$payload) { return response()->json(['error' => 'Invalid token'], 401); } $user = User::updateOrCreate( ['google_id' => $payload['sub']], ['name' => $payload['name'], 'email' => $payload['email']] ); Auth::login($user); return response()->json(['redirect' => '/dashboard']); } 

Порівняння: редирект-потік vs One Tap

Обсяг робіт і терміни

Вартість інтеграції розраховується індивідуально, але економія часу та бюджету за рахунок готових рішень становить до 40%. Оцінимо задачу за 24 години — просто напишіть.

Чому варто обрати нас?

Наші інженери працюють з Google OAuth понад 6 років. Реалізували авторизацію для 50+ проєктів з аудиторією від 1 000 до 100 000 користувачів. Гарантуємо безпеку: використовуємо тільки перевірені бібліотеки та дотримуємося best practices. Під ключ — від реєстрації клієнта до налагодження в продакшені.

Все прозоро: ви отримуєте готовий код, документацію та чек-лист для моніторингу. Зв'яжіться, щоб обговорити ваш проєкт — ми оцінимо задачу за 24 години. Замовте інтеграцію Google OAuth у нас — отримайте консультацію та кошторис за 24 години.