Аутентификация Google в Laravel

Интеграция Google OAuth в ваше приложение Laravel упрощает процесс входа, поощряет вовлечение пользователей и повышает доверие к вашей платформе. В этом руководстве я проведу вас по шагам внедрения аутентификации Google в приложение Laravel. Мы перейдем от настройки учетных данных API Google к настройке пакета Laravel Socialite.

Предпосылки

Прежде чем начать, убедитесь, что у вас есть следующие предварительные условия:

1. Ларавел 11
2. Учетная запись разработчика Google.
3. Базовые знания Laravel и аутентификации.
4. Composer для управления пакетами

Как только вы выполните все эти предварительные условия, вы будете готовы приступить к интеграции аутентификации Google в свое приложение Laravel.

Преимущества использования Google Auth в приложении Laravel

Такая схема имеет много преимуществ. Вот некоторые из них:

• Упрощенная интеграция с Socialite
• Простая аутентификация пользователя
• Улучшенная безопасность
• Настраиваемый пользовательский поток
• Улучшенная масштабируемость
• Надежная поддержка экосистемы
• Более простое обслуживание

Как настроить вход через Google в Laravel

Независимо от того, работаете ли вы над личным проектом или готовым к производству приложением, выполнение этих шагов поможет вам плавно интегрировать Google Authentication. Давайте начнем.

Шаг 1: Настройте проект Google Cloud

Чтобы использовать Google Authentication в вашем приложении Laravel, сначала вам нужно настроить проект Google Cloud. Выполните следующие шаги для настройки вашего проекта:

1. Посетите консоль Google Cloud и войдите в систему, используя свою учетную запись Google.
2. 
3. Нажмите на раскрывающийся список «Выбрать проект» в верхней навигационной панели. Во всплывающем окне нажмите «Новый проект», чтобы создать новый проект и предоставить запрошенные данные. Затем нажмите Создать проект .
4. 
5. После создания проекта откройте меню консоли слева и выберите API и службы > Учетные данные .
6. 
7. На странице «Учетные данные» нажмите «Создать учетные данные» > «Идентификатор клиента OAuth» .
8. 
9. Если вы создаете идентификатор клиента впервые, вам будет предложено настроить экран согласия. Вы можете настроить экран согласия, нажав Настроить экран согласия . Если вы уже настроили экран согласия, вы можете пропустить этот шаг.

• Выберите «Внешнее», если ваше приложение предназначено для публичного использования, или «Внутреннее» , если оно доступно только пользователям вашей организации Google Workspace.

• 
• Заполните необходимые данные, такие как имя приложения , адрес электронной почты службы поддержки пользователей и любую информацию о бренде. Нажмите Сохранить и продолжить .

После настройки экрана согласия вернитесь на страницу «Учетные данные» и снова выберите «Идентификатор клиента OAuth» .

1. Выберите тип приложения « Веб-приложение» и укажите имя для учетных данных клиента (например, Laravel Social Login).
2. В разделе «Авторизованные URI перенаправления » добавьте URL-адрес обратного вызова для вашего приложения:

• Пример:http://your-app-url.com/callback/google
• Если вы проводите локальное тестирование, используйте: http://127.0.0.1:8000/api/auth/google/callback

1. Нажмите «Создать» , и Google сгенерирует Client ID и Client Secret для вашего проекта. Сохраните эти учетные данные, так как они потребуются на следующих этапах.

Шаг 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 перенаправляет пользователей после входа в систему. Он должен совпадать с URI перенаправления, который вы указали при создании учетных данных на шаге 1.

Шаг 4: Обновите файлы конфигурации

Чтобы разрешить Laravel Socialite использовать учетные данные Google OAuth, нам необходимо настроить данные провайдера в config/services.phpфайле.

В services.phpфайле добавьте следующую конфигурацию для провайдера Google:

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),        // Your Google Client ID'client_secret' => env('GOOGLE_CLIENT_SECRET'), // Your Google Client Secret'redirect' => env('GOOGLE_REDIRECT_URL'),      // Your Google Redirect URL
]

Шаг 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
{
    /**
     * Redirect the user to Google’s OAuth page.
     */public function redirect()
    {
        return Socialite::driver('google')->redirect();
    }

    /**
     * Handle the callback from Google.
     */public function callback()
    {
        try {
            // Get the user information from Google$user = Socialite::driver('google')->user();
        } catch (Throwable $e) {
            return redirect('/')->with('error', 'Google authentication failed.');
        }

        // Check if the user already exists in the database$existingUser = User::where('email', $user->email)->first();

        if ($existingUser) {
            // Log the user in if they already existAuth::login($existingUser);
        } else {
            // Otherwise, create a new user and log them in$newUser = User::updateOrCreate(['email' => $user->email
            ], [
                'name' => $user->name,
                'password' => bcrypt(Str::random(16)), // Set a random password'email_verified_at' => now()
            ]);
            Auth::login($newUser);
        }

        // Redirect the user to the dashboard or any other secure pagereturn redirect('/dashboard');
    }
}

Этот контроллер содержит две функции:

1. Перенаправление: перенаправляет пользователя на страницу OAuth Google.
2. Обратный вызов: обрабатывает обратный вызов от Google и перенаправляет пользователя на панель управления или любую другую защищенную страницу.

Определим маршруты redirect и callback в routes/web.php файле:

use App\\Http\\Controllers\\GoogleAuthController;

// Route to redirect to Google's OAuth page
Route::get('/auth/google/redirect', [GoogleAuthController::class, 'redirect'])->name('auth.google.redirect');

// Route to handle the callback from 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 Authentication в своем проекте Laravel. Теперь ваши пользователи могут входить, используя свои учетные записи Google, что повышает как безопасность, так и удобство.

Заключение

Теперь вы настроили аутентификацию Google в своем приложении Laravel с помощью Socialite! Вы можете расширить этот метод, включив других поставщиков OAuth, таких как Facebook, Twitter или GitHub, добавив дополнительные конфигурации в config/services.php файл.