✅ WEB і WordPress новини, теми, плагіни. Тут ми ділимося порадами і кращими рішеннями для сайтів.

Вхід Google у Laravel за допомогою Laravel Socialite

39

Нещодавно я опублікував статтю Вхід за допомогою 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 стовпці до моделі користувача.

app / User.php

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

Створіть програму Google і отримайте свої облікові дані

Далі нам потрібно створити проект на консолі API Google. Для завершення процесу 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. Я хотів би почути ваші думки та пропозиції у розділі коментарів нижче.

Пов’язані статті

Джерело запису: artisansweb.net

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі