Вход через 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 часа.