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