Вход в Google в Laravel с помощью Laravel Socialite

Недавно я опубликовал статью «Вход в LinkedIn с помощью Laravel Socialite», и один из наших читателей спросил об интеграции входа в Google в Laravel. Вход в Google также является одной из популярных платформ, используемых для входа в социальные сети на веб-сайте.

Когда вы разрешаете пользователям входить в систему с их социальным профилем на своем веб-сайте, вы пропускаете процесс проверки их электронной почты. Вашим пользователям не нужно следить за процессом активации по электронной почте. Мы можем положиться на социальные сайты, поскольку они уже прошли валидацию пользователей на своей платформе. Это обеспечивает лучший пользовательский интерфейс для ваших пользователей, поскольку им не нужно запоминать свои учетные данные для входа на ваш веб-сайт, а также избавляет вас от добавления кодов для процесса проверки. Это беспроигрышная ситуация.

В этой статье мы изучаем пошаговое руководство по добавлению входа в Google в Laravel с помощью Laravel Socialite. Laravel socialite незаметно обрабатывает поток OAuth для входа в социальные сети. Этот пакет ускоряет процесс интеграции входа в социальную сеть на Laravel.

В этом руководстве я буду использовать новую установку Laravel, поэтому выполните следующую команду, которая установит Laravel для вас:

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

После установки Laravel создайте базу данных и добавьте учетные данные своей базы данных в .envфайл. Поскольку мы добавляем социальный вход в приложение, я добавлю еще 2 столбца в файл миграции пользователей по умолчанию и немного изменим его код.

Откройте файл миграции вашего пользователя и добавьте в upметод приведенный ниже код .

/**
 * Run the migrations.
 *
 * @return void
 */
public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('name');
        $table->string('email')->nullable();
        $table->timestamp('email_verified_at')->nullable();
        $table->string('password')->nullable();
        $table->string('provider');
        $table->string('provider_id');
        $table->rememberToken();
        $table->timestamps();
    });
}

В приведенном выше коде я добавил 2 колонки providerи provider_idкоторые будут удерживать значения «Google» и профиль пользователя идентификатор Google соответственно. Создайте таблицу пользователей, выполнив команду migrate.

php artisan migrate

Вам также необходимо добавить эти 2 столбца в модель User.

приложение / User.php

/**
 * The attributes that are mass assignable.
 *
 * @var array
 */
protected $fillable = [
    'name', 'email', 'password', 'provider', 'provider_id',
];

Создайте приложение Google и получите свои учетные данные

Далее нам нужно создать проект в консоли Google API. Нам потребуется идентификатор клиента и секрет клиента приложения для завершения процесса OAuth для пользователей.

Следуйте инструкциям ниже, чтобы создать проект Google и получить учетные данные. Для руководства я использую URL-адрес локального сервера. Вы можете настроить этот URL-адрес в соответствии с вашими требованиями.

• Зайдите в консоль разработчика Google.
• Щелкните раскрывающийся список и создайте новый проект, нажав знак (+). Кроме того, вы также можете выбрать существующий проект.
• На панели управления проекта выберите Учетные данные на боковой панели.
• На вкладке «Учетные данные» щелкните раскрывающееся меню «Создать учетные данные» и выберите «Идентификатор клиента OAuth».
• Выберите веб-приложение из типа приложения. В поле URL-адреса авторизованного перенаправления введите URL-адрес http://localhost:8000/google/callback.

После сохранения вы увидите всплывающее окно с вашим идентификатором клиента и секретом клиента. Скопируйте эти ключи, которые нам понадобятся через несколько минут.

Создать маршруты и контроллер

Вы готовы со своими ключами API. Теперь, чтобы продолжить, нам нужно создать маршруты, блейд-файл и контроллер. Создайте с LoginControllerпомощью команды:

php artisan make:controller LoginController

После этого создайте блейд-файл с именем login.blade.phpи добавьте к нему приведенный ниже HTML.

<a href="{{ url('/login/google') }}">
    {{ __('Login with Google') }}
</a>

Вызовите это представление из indexметода LoginController.

public function index()
{
    return view('login');
}

Чтобы вызвать это представление, вам нужно добавить для него маршрут. Давайте добавим еще несколько маршрутов, которые потребуются в следующей части урока.

Route::get('login', 'LoginController@index');
Route::get('login/{provider}', 'LoginController@redirectToProvider');
Route::get('{provider}/callback', 'LoginController@handleProviderCallback');
Route::get('/home', function() {
    return 'User is logged in';
});

Обратите внимание, что я добавил homeмаршрут. Когда пользователь войдет в систему с помощью Google, я перенаправлю его на homeмаршрут. Я просто сохраняю его для демонстрационных целей. Вам следует изменить этот маршрут на другой.

Вход в Google в Laravel с помощью Laravel Socialite

На данный момент мы закончили с базовой настройкой, необходимой для входа в социальную сеть. Сейчас. пришло время установить библиотеку Laravel Socialite. Установите его, выполнив следующую команду в терминале.

composer require laravel/socialite

После установки библиотеки откройте config/services.phpи добавьте конфигурацию Google следующим образом:

'google' => [
    'client_id'     => env('GOOGLE_CLIENT_ID'),
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),
    'redirect'      => env('GOOGLE_REDIRECT_URL'),
],

Поскольку мы использовали envметод для получения учетных данных, нам нужно добавить эти учетные данные в .envфайл.

GOOGLE_CLIENT_ID=YOUR_CLIENT_ID
GOOGLE_CLIENT_SECRET=YOUR_CLIENT_SECRET
GOOGLE_REDIRECT_URL=http://localhost:8000/google/callback

Обязательно замените заполнители фактическими значениями. Наконец, нам нужно добавить код в LoginController.phpфайл, который перенаправляет пользователя на страницу входа в Google и, в свою очередь, обрабатывает ответ. В этом файле мы пишем функцию, которая перенаправляет пользователя на страницу входа в Google и при успешной авторизации вставляет данные пользователя в базу данных и регистрирует пользователя.

LoginController.php

<?php
  
namespace AppHttpControllers;
  
use IlluminateHttpRequest;
use Socialite;
use AppModelsUser;
use Auth;
  
class LoginController extends Controller
{
    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = '/home';
  
    /**
     * Call the view
     */
    public function index()
    {
        return view('login');
    }
  
    /**
     * Redirect the user to the Google authentication page.
     *
     * @return Response
     */
    public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)->redirect();
    }
    
    /**
     * Obtain the user information from Google.
     *
     * @return Response
     */
    public function handleProviderCallback($provider)
    {
        $user = Socialite::driver($provider)->user();
        $authUser = $this->findOrCreateUser($user, $provider);
        Auth::login($authUser, true);
        return redirect($this->redirectTo);
    }
    
    /**
     * If a user has registered before using social auth, return the user
     * else, create a new user object.
     * @param  $user Socialite user object
     * @param $provider Social auth provider
     * @return  User
     */
    public function findOrCreateUser($user, $provider)
    {
        $authUser = User::where('provider_id', $user->id)->first();
        if ($authUser) {
            return $authUser;
        }
        return User::create([
            'name'     => $user->name,
            'email'    => $user->email,
            'provider' => $provider,
            'provider_id' => $user->id
        ]);
    }
}

В нашем файле контроллера мы проверяем, provider_idсуществует ли уже пользователь с. Если он существует, верните текущий экземпляр пользователя, иначе вставьте его в таблицу пользователей и войдите в систему.

Надеюсь, вы узнали о входе в Google в Laravel с помощью пакета Socialite. Я хотел бы услышать ваши мысли и предложения в разделе комментариев ниже.

Статьи по Теме

• Войдите в LinkedIn в Laravel с помощью Laravel Socialite
• Войти через Twitter в Laravel с помощью Laravel Socialite
• Как добавить логин Google OAuth на веб-сайт с помощью PHP