В этом цифровом мире важно, чтобы ваши приложения имели плавный и безопасный процесс аутентификации. Это помогает улучшить пользовательский опыт и общую безопасность ваших приложений.
Аутентификация Google является одним из самых надежных и удобных способов для пользователей войти на сайт, используя свою учетную запись Google. А это значит, что им не нужно запоминать еще одно имя пользователя и пароль.
Интеграция Google OAuth в ваше приложение Laravel упрощает процесс входа, способствует вовлечению пользователей и повышает доверие к вашей платформе. В этом руководстве я расскажу вам о шагах по реализации аутентификации Google в приложении Laravel. Мы пройдем от настройки учетных данных Google API до конфигурации пакета Socialite в Laravel.
Содержание
Предварительные требования
Перед началом убедитесь, что у вас есть следующие предварительные требования:
-
Laravel 11
-
Аккаунт Google Developer.
-
Базовые знания Laravel и аутентификации.
-
Composer для управления пакетами
Как только вы подготовите эти предварительные требования, вы готовы приступить к интеграции Google Authentication в ваше приложение Laravel.
Преимущества использования Google Auth в приложении Laravel
У этой настройки много преимуществ. Вот некоторые из них:
-
Упрощенная интеграция с Socialite
-
Бесшовная аутентификация пользователей
-
Улучшенная безопасность
-
Настраиваемый пользовательский поток
-
Улучшенная масштабируемость
-
Надежная поддержка экосистемы
-
Упрощенное обслуживание
Как настроить вход в Laravel через Google
Независимо от того, работаете ли вы над личным проектом или приложением, готовым к производству, следуя этим шагам, вы сможете без проблем интегрировать аутентификацию Google. Давайте начнем.
Шаг 1: Настройте проект Google Cloud
Чтобы использовать аутентификацию Google в вашем приложении Laravel, сначала вам нужно настроить проект Google Cloud. Следуйте этим шагам для настройки вашего проекта:
-
Посетите консоль Google Cloud и войдите в систему с помощью своей учетной записи Google.
-
Нажмите на выпадающий список “Выбрать проект” в верхней навигационной панели. В всплывающем окне нажмите “Новый проект”, чтобы создать новый проект и введите запрашиваемые данные. Затем нажмите Создать проект.
-
После создания проекта откройте левое меню консоли и выберите API и сервисы > Учетные данные.
-
На странице Учетных данных нажмите Создать учетные данные > Идентификатор клиента OAuth.
-
Если это ваше первое создание идентификатора клиента, вас попросят настроить экран согласия. Вы можете настроить свой экран согласия, нажав Настроить Экран согласия. Если вы уже настроили экран согласия, вы можете пропустить этот шаг.
-
Выберите Внешний, если ваше приложение предназначено для общего использования, или Внутренний, если оно ограничено для пользователей в вашей организации Google Workspace.
-
Заполните необходимые данные, такие как название приложения, адрес электронной почты поддержки пользователей и любую информацию о бренде. Нажмите Сохранить и Продолжить.
-
После настройки экрана согласия вернитесь на страницу Учетные данные и снова выберите Идентификатор клиента OAuth.
-
Выберите Тип приложения как Веб-приложение и укажите имя для учетных данных клиента (например, Laravel Social Login).
-
В разделе Авторизованные URI перенаправления добавьте URL обратного вызова для вашего приложения:
-
Пример:
http://your-app-url.com/callback/google -
Если вы тестируете локально, используйте: http://127.0.0.1:8000/api/auth/google/callback
-
-
Нажмите на кнопку Создать, и Google сгенерирует Идентификатор клиента и Секрет клиента для вашего проекта. Сохраните эти учетные данные, так как они понадобятся на следующих этапах.
Шаг 2: Создайте новый проект Laravel и установите пакет Laravel Socialite
Если у вас его еще нет, вы можете создать новый проект Laravel с помощью следующей команды:
composer create-project --prefer-dist laravel/laravel social-auth-example
Для интеграции аутентификации Google в проект Laravel мы будем использовать Laravel Socialite. Socialite – это пакет Laravel от первого лица, который упрощает аутентификацию OAuth с популярными сервисами, такими как Google, Facebook, Twitter и другими.
Чтобы установить Socialite, откройте терминал в корневом каталоге вашего проекта Laravel и выполните следующую команду:
composer require laravel/socialite
Шаг 3: Настройте переменные среды
На этом шаге мы настроим наше приложение Laravel для использования учетных данных Google OAuth, которые мы получили на Шаге 1.
Найдите файл .env в корневом каталоге вашего проекта и добавьте следующие переменные среды:
GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret
GOOGLE_REDIRECT_URL=http://your-domain.com/auth/google/callback
Замените все заполнители на секреты.
Давайте разберемся с каждой переменной среды по отдельности:
-
GOOGLE_CLIENT_ID: Уникальный идентификатор вашего приложения, предоставленный Google. -
GOOGLE_CLIENT_SECRET: Приватный ключ, используемый вашим приложением для безопасной аутентификации с API Google. -
GOOGLE_REDIRECT_URL: URL, на который Google перенаправляет пользователей после входа в систему. Этот URL должен совпадать с URI перенаправления, который вы указали при создании учетных данных на шаге 1.
Шаг 4: Обновление файлов конфигурации
Чтобы Laravel Socialite мог использовать учетные данные Google OAuth, необходимо сконфигурировать данные провайдера в файле config/services.php.
В файле services.php добавьте следующую конфигурацию для провайдера Google:
'google' => [
'client_id' => env('GOOGLE_CLIENT_ID'), // Ваш идентификатор клиента Google
'client_secret' => env('GOOGLE_CLIENT_SECRET'), // Ваш секретный ключ клиента Google
'redirect' => env('GOOGLE_REDIRECT_URL'), // Ваш URL перенаправления Google
]
Шаг 5: Создание контроллеров и маршрутов для аутентификации.
На этом этапе мы создадим контроллер для обработки перенаправления и обратных вызовов Google OAuth, а также настроим необходимые маршруты для запуска этих методов.
Запустите следующую команду Artisan для создания контроллера GoogleAuthController:
php artisan make:controller GoogleAuthController
Это создаст контроллер в app/Http/Controllers/GoogleAuthController.php.
Замените содержимое нового файла GoogleAuthController.php следующим кодом:
<?php
namespace App\\Http\\Controllers;
use App\\Http\\Controllers\\Controller;
use App\\Models\\User;
use Laravel\\Socialite\\Facades\\Socialite;
use Illuminate\\Support\\Facades\\Auth;
use Illuminate\\Support\\Str;
use Throwable;
class GoogleAuthController extends Controller
{
/**
* Перенаправить пользователя на страницу OAuth Google.
*/
public function redirect()
{
return Socialite::driver('google')->redirect();
}
/**
* Обработать ответ от Google.
*/
public function callback()
{
try {
// Получить информацию о пользователе из Google
$user = Socialite::driver('google')->user();
} catch (Throwable $e) {
return redirect('/')->with('error', 'Google authentication failed.');
}
// Проверить, существует ли пользователь уже в базе данных
$existingUser = User::where('email', $user->email)->first();
if ($existingUser) {
// Войти в систему, если пользователь уже существует
Auth::login($existingUser);
} else {
// В противном случае создать нового пользователя и войти в систему
$newUser = User::updateOrCreate([
'email' => $user->email
], [
'name' => $user->name,
'password' => bcrypt(Str::random(16)), // Установить случайный пароль
'email_verified_at' => now()
]);
Auth::login($newUser);
}
// Перенаправить пользователя на панель управления или другую защищенную страницу
return redirect('/dashboard');
}
}
Этот контроллер содержит две функции:
-
Redirect: Перенаправляет пользователя на страницу OAuth Google.
-
Callback: Обрабатывает ответ от Google и перенаправляет пользователя на панель управления или другую защищенную страницу.
Давайте определим маршруты redirect и callback в файле routes/web.php:
use App\\Http\\Controllers\\GoogleAuthController;
// Маршрут для перенаправления на страницу OAuth Google
Route::get('/auth/google/redirect', [GoogleAuthController::class, 'redirect'])->name('auth.google.redirect');
// Маршрут для обработки ответа от Google
Route::get('/auth/google/callback', [GoogleAuthController::class, 'callback'])->name('auth.google.callback');
Шаг 6: Проверьте аутентификацию Google в Laravel в вашем проекте.
Мы настроили аутентификацию Google, и теперь пришло время протестировать ее, чтобы убедиться, что она работает безупречно. На этом этапе мы будем использовать кнопку входа, которая перенаправляет пользователя на страницу аутентификации Google и возвращает его на защищенный маршрут после успешного входа.
Сначала мы добавим следующую кнопку, которая даст пользователям возможность войти с помощью Google:
<a href="{{ route('auth.google.redirect') }}" class="btn bg-blue-100 p-3 shadow-sm border rounded-md text-blue-900">
Login with Google
</a>
В целях тестирования я определил защищенный маршрут и dashboard. Этот маршрут будет доступен только для аутентифицированных пользователей. После входа в систему мы перенаправим пользователей на эту страницу. Давайте определим этот маршрут в web.php:
Route::get('/dashboard', function () {
return view('dashboard');
})->middleware('auth')->name('dashboard');
Далее создайте файл представления blade для панели управления по адресу resources/views/dashboard.blade.php. Вот содержимое панели управления:
<html>
<head>
<title>Dashboard</title>
</head>
<body>
<h1>Dashboard</h1>
<p>Welcome to the dashboard, {{ auth()->user()->name }}!</p>
</body>
</html>
Здесь мы используем вспомогательную функцию auth()->user() для отображения имени вошедшего в систему пользователя, которое извлекается из учетной записи Google, которую он использовал для входа.
Теперь давайте попробуем войти в систему.
Это страница входа:
Нажатие на кнопку перенаправит вас на экран согласия Google:
Нажмите на продолжить, и вы должны войти в приложение. Вы будете перенаправлены на экран, похожий на приведенный ниже. Вы увидите приветственное сообщение с именем пользователя.
Вот и все! Вы успешно реализовали и протестировали аутентификацию Google в своем проекте Laravel. Теперь ваши пользователи могут входить в систему, используя свои учетные записи Google, что повышает как безопасность, так и удобство.
Чтобы обратиться к полной реализации, вы можете найти полный исходный код этого проекта на GitHub здесь: Интеграция входа через Google для Laravel – Репозиторий GitHub
Заключение
Вы теперь настроили аутентификацию Google в вашем приложении Laravel с помощью Socialite! Вы можете расширить этот метод, чтобы включить других поставщиков OAuth, таких как Facebook, Twitter или GitHub, добавив дополнительные конфигурации в файл config/services.php.
Интеграция Google OAuth является распространенной функцией для современных веб-приложений, и Laravel Socialite упрощает ее реализацию.
Если вам нужно больше опций входа через социальные сети, таких как GitHub, Twitter и Facebook, вы можете рассмотреть готовые шаблоны Laravel SaaS.
Большинство предустановленных шаблонов Laravel SaaS предлагают бесшовную интеграцию с популярными платформами, такими как Google, GitHub, Facebook и Twitter. Например, есть несколько премиум- и открытых ресурсов, таких как:
-
Laravel Starter Kit (Премиум)
-
На основе Tailwind CSS
-
Поставляется с настройкой магической ссылки в один клик
-
Поддерживает различные методы аутентификации, включая традиционный вход по электронной почте/паролю
-
2FA Аутентификация
-
-
SaaS шаблон (с открытым исходным кодом)
-
Многоарендная архитектура с одной базой данных
-
Панель разработчика
-
Управление личными токенами доступа
-
-
Laranuxt (с открытым исходным кодом)
-
Nuxt UI – коллекция компонентов, созданных командой NuxtJS, на основе Tailwind CSS
-
Библиотека аутентификации для помощи с пользовательскими сессиями и входом/выходом
-
Пример промежуточного ПО для аутентификации
-
-
Laravel Vue Boilerplate (Open Source)
-
Веб-сокеты с Laravel Echo и Pusher.
-
Workbox для улучшения разработки PWA.
-
Laravel GraphQL
-
Использование одного из этих шаблонов Laravel SaaS для выхода на рынок может ускорить ваш рабочий процесс, так как вам не нужно настраивать все с нуля.
Особая благодарность Дипу Кумбхаре, опытному разработчику Laravel и энтузиасту, который помог мне в подготовке этой статьи.
Надеюсь, эта статья поможет вам настроить вход через Google в Laravel.
Source:
https://www.freecodecamp.org/news/how-to-set-up-google-auth-in-laravel-apps/