Проблема: пользователи не любят регистрироваться
Представьте: посетитель заходит на ваш сайт, хочет оставить комментарий или оформить заказ, но видит длинную форму регистрации — имя, 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?
Процесс состоит из трёх шагов:
- Пользователь нажимает «Войти через Google».
- Перенаправление на Google с параметрами client_id, redirect_uri и scope.
- 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-клиента и проверка
- Google Cloud Console → APIs & Services → Credentials.
- Создать OAuth 2.0 Client ID типа Web application.
- Добавить Authorized redirect URIs:
https://example.com/auth/google/callback. - Сохранить Client ID и Client Secret.
- Обязательно добавить 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
| Параметр | Редирект | One Tap |
|---|---|---|
| UX | Переход на страницу Google | Попап без покидания сайта |
| Скорость | 5–8 секунд | 2–3 секунды |
| Конверсия | Базовая | Выше на 20–30% |
| Сложность | Низкая (Socialite) | Средняя (SDK + верификация) |
| Безопасность | Высокая | Высокая (проверка id_token) |
Объём работ и сроки
| Компонент | Срок |
|---|---|
| Стандартный OAuth 2.0 (Socialite) | 1–2 дня |
| + One Tap | +1 день |
| + Объединение аккаунтов | +1 день |
Стоимость интеграции рассчитывается индивидуально, но экономия времени и бюджета за счёт готовых решений составляет до 40%. Оценим задачу за 24 часа — просто напишите.
Типичные ошибки при интеграции
- Несовпадение redirect URI (включая завершающий слеш). - Истекший авторизационный код: обрабатывайте callback сразу. - Неправильная верификация id_token: используйте Google Client Library. - Отсутствие origin для One Tap в Authorized origins.Почему стоит выбрать нас?
Наши инженеры работают с Google OAuth более 6 лет. Реализовали авторизацию для 50+ проектов с аудиторией от 1 000 до 100 000 пользователей. Гарантируем безопасность: используем только проверенные библиотеки и соблюдаем best practices. Под ключ — от регистрации клиента до отладки в продакшене.
Всё прозрачно: вы получаете готовый код, документацию и чек-лист для мониторинга. Свяжитесь, чтобы обсудить ваш проект — мы оценим задачу за 24 часа. Закажите интеграцию Google OAuth у нас — получите консультацию и смету за 24 часа.