Пример использования пакета Socialite в Laravel 8 для авторизации через аккаунт Google
Авторизация через Google значительно упрощает процесс входа в приложения, повышая удобство для пользователей. В этой статье вы узнаете, как настроить интеграцию Google с помощью пакета Socialite в Laravel 8, чтобы пользователи могли быстро и безопасно авторизовываться.
Мы объясним, как настроить проект и какие шаги необходимо предпринять для подключения Google OAuth. Также вы получите полезные советы по конфигурации и устранению возможных ошибок, что сделает процесс авторизации максимально простым и быстрым.
Шаг 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 в ходе создания нового проекта.
Откройте раздел Credentials, затем последовательно выберите OAuth и Create new Client ID. В результате вы увидите то же самое, что и на скриншотах, приведенных ниже.
После создания проекта и регистрации приложения скопируйте полученные идентификатор и секретный код. Внесите данные в файл конфигурации 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.
Комментарии