Пример использования пакета Socialite в Laravel 8 для авторизации через аккаунт Google

В этом руководстве мы рассмотрим пример авторизации в приложении, созданном на основе Laravel 8, с помощью учетной записи Gmail. Социальные сети наподобие Facebook и Google+ очень популярны; у большинства пользователей также есть аккаунт в почтовом сервисе Gmail.

При этом пользователи не любят долгий процесс регистрации и авторизации на сайтах. Если вы подключите к своему веб-сервису опцию авторизации через аккаунт в социальной сети, большинство посетителей сайта воспользуются именно этой возможностью. Я покажу, как можно реализовать авторизацию через Gmail на основе пакетов JetStream и Socialite, шаг за шагом.

Страница авторизации

Шаг 1. Установка Laravel 8

Если рассматриваемый нами фреймворк у вас еще не установлен, выполните приведенную ниже команду для инсталляции Laravel 8 и создания нового проекта:

composer create-project --prefer-dist laravel/laravel googleLogin

Шаг 2. Установка компонента JetStream

Следующая команда установит необходимую нам библиотеку JetStream:

composer require laravel/jetstream

Теперь мы установим составляющие системы авторизации – регистрацию, подтверждение адреса электронной почты и вход в личный кабинет. Для создания учетной записи группы пользователей понадобится дополнительный параметр. Используйте приведенную ниже команду:

php artisan jetstream:install livewire

Установим менеджер пакетов Node.js, npm:

npm install

Запустим менеджер пакетов:

npm run dev

Теперь запустим миграцию для создания базы данных:

php artisan migrate

Шаг 3. Установка Socialite

Приведенная ниже команда установит пакет Socialite, который содержит API интерфейс для аутентификации через учетную запись Google. Выполните в командной строке следующую команду:

composer require laravel/socialite

Шаг 4. Регистрация приложения в Google

Для подключения протокола авторизации Google OAuth необходимо использовать уникальный идентификатор приложения (Client ID) и секретный код (Client secret). Код и ID получают на сайте Google Developers Console в ходе создания нового проекта.

Шаг 4. Регистрация приложения в Google

Откройте раздел Credentials, затем последовательно выберите OAuth и Create new Client ID. В результате вы увидите то же самое, что и на скриншотах, приведенных ниже.

Шаг 4. Регистрация приложения в Google - 2

После создания проекта и регистрации приложения скопируйте полученные идентификатор и секретный код. Внесите данные в файл конфигурации config/services.php, как показано ниже.

return [

    ....

    'google' => [

        'client_id' => 'app id',

        'client_secret' => 'add secret',

        'redirect' => 'http://localhost:8000/auth/google/callback',

    ],

]

Шаг 5. Обновление базы данных

Выполните приведенную ниже команду для создания миграции, в ходе которой в таблицу будет добавлен столбец с идентификатором и кодом авторизации Google ID:

php artisan make:migration add_google_id_column

Файл миграции должен выглядеть следующим образом:

<?php

  

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

   

class AddGoogleIdColumn extends Migration

{

    /**

     * Запуск миграций.

     *

     * @return void

     */

    public function up()

    {

        Schema::table('users', function ($table) {

            $table->string('google_id')->nullable();

        });

    }

   

    /**

     * Остановка миграций.

     *

     * @return void

     */

    public function down()

    {

        //

    }

}

Внесите следующий код в файл User.php модели app/Models/User.php:

<?php

  

namespace App\Models;

  

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Foundation\Auth\User as Authenticatable;

use Illuminate\Notifications\Notifiable;

use Laravel\Fortify\TwoFactorAuthenticatable;

use Laravel\Jetstream\HasProfilePhoto;

use Laravel\Sanctum\HasApiTokens;

  

class User extends Authenticatable

{

    use HasApiTokens;

    use HasFactory;

    use HasProfilePhoto;

    use Notifiable;

    use TwoFactorAuthenticatable;

  

    /**

     * Атрибуты для массового заполнения.

     *

     * @var array

     */

    protected $fillable = [

        'name',

        'email',

        'password',

        'google_id'

    ];

  

    /**

     * Скрытые атрибуты массивов.

     *

     * @var array

     */

    protected $hidden = [

        'password',

        'remember_token',

        'two_factor_recovery_codes',

        'two_factor_secret',

    ];

  

    /**

     * Атрибуты, которые нужно преобразовать в нативный тип.

     *

     * @var array

     */

    protected $casts = [

        'email_verified_at' => 'datetime',

    ];

  

    /** 

     * Аксессоры для добавления в массив модели.

     *

     * @var array

     */

    protected $appends = [

        'profile_photo_url',

    ];

}

Шаг 6. Создание маршрутов

После добавления столбца google_id в таблицу базы нам нужно создать новый маршрут для обработки авторизации через Google. Добавьте приведенный ниже код в файл routes.php, расположенный по адресу app/Http/routes.php.

<?php

  

use Illuminate\Support\Facades\Route;

  

use App\Http\Controllers\GoogleController;

  

/*

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

|

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!

|

*/

  

Route::get('auth/google', [GoogleController::class, 'redirectToGoogle']);

Route::get('auth/google/callback', [GoogleController::class, 'handleGoogleCallback']);

Шаг 7. Создание контроллера

После добавления маршрута нам необходимо создать метод, который будет обрабатывать ссылку на приложение в системе аутентификации Google. Для этого добавьте следующий код в файл GoogleController.php, который расположен по адресу app/Http/Controllers/GoogleController.php:

<?php

  

namespace App\Http\Controllers;

  

use Illuminate\Http\Request;

use Laravel\Socialite\Facades\Socialite;

use Exception;

use App\Models\User;

use Illuminate\Support\Facades\Auth;

  

class GoogleController extends Controller

{

    /**

     * Create a new controller instance.

     *

     * @return void

     */

    public function redirectToGoogle()

    {

        return Socialite::driver('google')->redirect();

    }

        

    /**

     * Create a new controller instance.

     *

     * @return void

     */

    public function handleGoogleCallback()

    {

        try {

      

            $user = Socialite::driver('google')->user();

       

            $finduser = User::where('google_id', $user->id)->first();

       

            if($finduser){

       

                Auth::login($finduser);

      

                return redirect()->intended('dashboard');

       

            }else{

                $newUser = User::create([

                    'name' => $user->name,

                    'email' => $user->email,

                    'google_id'=> $user->id,

                    'password' => encrypt('123456dummy')

                ]);

      

                Auth::login($newUser);

      

                return redirect()->intended('dashboard');

            }

      

        } catch (Exception $e) {

            dd($e->getMessage());

        }

    }

}

Шаг 8. Обновление шаблона Blade

Создайте файл login.blade.php, расположенный по адресу resources/views/auth/login.blade.php, внесите в него приведенный ниже код.

<x-guest-layout>

    <x-jet-authentication-card>

        <x-slot name="logo">

            <x-jet-authentication-card-logo />

        </x-slot>

 

        <x-jet-validation-errors class="mb-4" />

  

        @if (session('status'))

            <div class="mb-4 font-medium text-sm text-green-600">

                {{ session('status') }}

            </div>

        @endif

  

        <form method="POST" action="{{ route('login') }}">

            @csrf

 

            <div>

                <x-jet-label value="Email" />

                <x-jet-input class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />

            </div>

  

            <div class="mt-4">

                <x-jet-label value="Password" />

                <x-jet-input class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />

            </div>

  

            <div class="block mt-4">

                <label class="flex items-center">

                    <input type="checkbox" class="form-checkbox" name="remember">

                    <span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>

                </label>

            </div>

  

            <div class="flex items-center justify-end mt-4">

                @if (Route::has('password.request'))

                    <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('password.request') }}">

                        {{ __('Forgot your password?') }}

                    </a>

                @endif

  

                <x-jet-button class="ml-4">

                    {{ __('Login') }}

                </x-jet-button>

            </div>

            <div class="flex items-center justify-end mt-4">

                <a href="{{ url('auth/google') }}">

                    <img src="https://developers.google.com/identity/images/btn_google_signin_dark_normal_web.png" style="margin-left: 3em;">

                </a>

            </div>

        </form>

    </x-jet-authentication-card>

</x-guest-layout>

Все готово. Можно проверять в браузере – введите в адресную строку название вашего проекта и в конце добавьте /login.

Пожалуйста, оставляйте свои комментарии по текущей теме статьи. За комментарии, лайки, подписки, дизлайки, отклики огромное вам спасибо!

Наталья Кайдаавтор-переводчик статьи «Laravel 8 Socialite Login with Google Account Example»