Соціальна аутентифікація в Laravel з Socialite

13 хв. читання

На сьогоднішній день більшість сайтів при мають можливість реєстрації/входу через соціальні мережі. У цій статті я навчу вас, як додати таку можливість до свого Laravel додатку з використанням пакета Socialite. На цьому уроці ми додамо Facebook, GitHub і Twitter-реєстрації. Повний код можна знайти на Github.

Давайте згенеруємо новий додаток Laravel. У цій статті я використовую Laravel 5.2.

composer create-project laravel/laravel lara-social

Установка БД

Далі вам потрібно налаштувати базу даних для роботи з Laravel. Щоб зробити це, в першу чергу необхідно знати ім'я хоста, ім'я користувача та ім'я бази даних. Я залишу поле пароля порожнім. Відредагуйте файл конфігурації Laravel, надавши йому розширення .env (в кореневій папці) і додайте налаштування в базі даних:

.env

DB_HOST=localhost
DB_DATABASE=lara-social
DB_USERNAME=username
DB_PASSWORD=

Міграції і створення таблиці користувачів

Якщо ви подивитеся всередину бази даних/міграцій, ви помітите, що згенерований Laravel додаток вже має міграції для створення users table і password resets table. Нагадаємо, що міграція додатків - процедура перекладу програмних продуктів (вихідного коду і структури бази даних) з однієї платформи (технології) на іншу (найчастіше з застарілої на більш сучасну).

Відкрийте міграцію для створення users table. Є кілька речей, які я хочу налаштувати перед створенням users table.

Аккаунт, який було створено за допомогою OAuth матиме provider, також потрібно мати provider_id, який повинен бути унікальним. Розглядаючи Twitter, маємо випадки, коли користувач не має адреси електронної пошти і, таким чином, хеш відправляється назад за допомогою зворотного виклику в нікуди, і це призведе до помилки. Щоб уникнути цього, ми встановимо поле електронної пошти порожнім. Крім того, при створенні користувачів за допомогою Oauth ми не буде пропускати будь-які паролі, тому нам потрібно встановити поле password в міграції порожнім.

Тут ми робимо чотири речі: додавання provider і provider_id стовпців до таблиці користувачів (зверніть увагу, що provider_id стовпець повинен бути встановлений як унікальний). Ми також робимо поля електронної адреси і пароля в таблиці користувачів порожніми.

up method у вашій міграції повинен виглядати наступним чином:

_database/migrations/{titmestamp}create_users_table.php

[...]
public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('email')->nullable();
            $table->string('password', 60)->nullable();
            $table->string('provider');
            $table->string('provider_id')->unique();
            $table->rememberToken();
            $table->timestamps();
        });
    }
[...]

Якщо у вас вже є додаток Laravel, вам доведеться згенерувати нову міграцію, щоб додати додаткові стовпці в users table, а також встановити поля електронної адреси і пароля як nullable на рівні бази даних.

Потім запустіть міграцію з:

php artisan migrate

Це створить як users table, так і password resets table.

Модель користувачів

Ми повинні додати provider і provider_id в список масових атрибутів в User модель.

app/User.php

[...]
protected $fillable = [
        'name', 'email', 'password', 'provider', 'provider_id'
    ];
[...]

Тепер ми можемо додати аутентифікацію до нашого додатка:

php artisan make:auth

Отже, як що ми запустимо php artisan serve і перейдемо до http://localhost:800, ви помітите sign up і sign in посилання на навігації. Тепер користувачі можуть зареєструватися і увійти в наш додаток за допомогою традиційного Login. Ми хочемо, щоб була можливість зареєструватися за допомогою Facebook, Twitter і GitHub. З Socialite, додати цю функціональність буде важче, так як Socialite обробляє майже всі шаблонні коди соціальної аутентифікації.

Додавання Socialite

Щоб розпочати роботу з Socialite нам спочатку потрібен пакет

composer require laravel/socialite

Після встановлення Socialite бібліотек зареєструйте Laravel\\Socialite\\SocialiteServiceProvider у вашому config/app.php файлі конфігурацій, так як це зроблено далі:

config/app.php

'providers' => [
    // Інші провайдери...

    Laravel\\Socialite\\SocialiteServiceProvider::class,
],

Потім додайте аліас Socialite до масиву aliases у вашому app файлі конфігурацій:

config/app.php

'aliases' => [
    // Інші aliases...

    'Socialite' => Laravel\\Socialite\\Facades\\Socialite::class,
],

Реєстрація в додатку

Наступним кроком є додавання облікових даних, я кі використовує додаток, до OAuth. Ці облікові дані повинні бути поміщені в вашому файлі конфігурацій config/services.php. Нагадаю, у цьому додатку ми будемо використовувати Twitter, Github і Facebook.

Давайте почнемо з реєстрації нашого додатку на Twitter, так що ми можемо отримати client id і secret. Ми також повинні встановити посилання зворотного виклику для нашого застосування. Відвідайте цю сторінку, щоб зареєструвати новий додаток. Зверніть увагу, що ви повинні бути авторизовані для того, щоб зареєструвати додаток на Twitter.

Встановіть URL зворотного виклику http://localhost:8000/auth/twitter/callback. Після того, як додаток було створено, натисніть keys and access tokens, щоб отримати ваш Consumer API Key і Consumer API secret. Додайте Twitter як сервіс в вашому файлі config/services.php:

config/services.php

[...]
'twitter' => [
        'client_id'     => env('TWITTER_ID'),
        'client_secret' => env('TWITTER_SECRET'),
        'redirect'      => env('TWITTER_URL'),
    ],
[...]

Встановіть ключі, які Ви отримаєте після реєстрації вашої програми, у файлі .env:

TWITTER_ID={{API Key}}
TWITTER_SECRET={{API secret}}
TWITTER_URL={{callbackurl}}

Нам доведеться повторювати це як для Facebook, так і для Github.

Для Facebook: зареєструйте ваше додаток тут потім натисніть на settings на сайдбарі.

Соціальна аутентифікація в Laravel з Socialite

З основних налаштувань, які ви зможете отримати доступ до API Key і API Secret. Крім того, натисніть на кнопку Add Platform нижче конфігурації налаштувань. Виберіть сайт в діалоговому вікні платформи і введіть адресу веб-сайту, в нашому випадку це http://localhost:8000. Встановіть App Domains на localhost, потім збережіть зміни.

Оновіть ваш файл config/services.php, використовуючи Facebook в якості входу. Зверніть увагу, що значення для key, secret і callback url повинні бути встановлені в файлі .env. FACEBOOK_URL в цьому випадку буде http://localhost:8000/auth/facebook/callback:

config/services.php

[...]
'facebook' => [
        'client_id'     => env('FACEBOOK_ID'),
        'client_secret' => env('FACEBOOK_SECRET'),
        'redirect'      => env('FACEBOOK_URL'),
    ],
[...]

Відвідайте це посилання, щоб створити новий додаток на Github. Введіть дані додатку, і ви отримаєте ключ API і secret. Оновіть config/services.php, використовуючи дані з Github, подібно до того, як ви це зробили для Twitter і Facebook.

Роутинг

Далі, ви готові для аутентифікації користувачів! Вам знадобляться два маршрути: один для перенаправлення користувача до провайдера OAuth, а інший для отримання зворотного виклику від постачальника після перевірки:

app/Http/routes.php

// Інші маршрути
[...]
// Маршрути OAuth
Route::get('auth/{provider}', 'Auth\\AuthController@redirectToProvider');
Route::get('auth/{provider}/callback', 'Auth\\AuthController@handleProviderCallback');

Автентичні контролери

Ми будемо звертатися до Socialite за допомогою аліасу Socialite. Крім того, нам знадобиться Auth, щоб ми могли отримати доступ до різних Auth методів:

app/Http/Controllers/Auth/AuthController.php

[...]
use Auth;
use Socialite;
[...]

class AuthController extends Controller
{
    // Деякі методи, згенеровані додатком
    [...]
    /**
     * Перенаправлення користувача на OAuth.
     *
     * @return Response
     */
    public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)->redirect();
    }

    /**
     * Отримання інформації про користувача від провайдера. Перевірка, чи користувач вже існує в нашій
     * базі даних, дивлячись на їх provider_id в базі даних.
     * Якщо користувач існує, авторизувати його. Інакше, створити нового користувача та авторизувати його. Після 
     * цього перенаправити до сторінки аутентифікації.
     *
     * @return Response
     */
    public function handleProviderCallback($provider)
    {
        $user = Socialite::driver($provider)->user();

        $authUser = $this->findOrCreateUser($user, $provider);
        Auth::login($authUser, true);
        return redirect($this->redirectTo);
    }

    /**
     * Якщо користувач зареєстувався до цього, використовуючи соціальні мережі, повернути користувача
     * інакше, створити нового користувача.
     * @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
        ]);
    }
    [...]

Метод redirectToProvider відповідає за доставку даних користувача до провайдера OAuth, в той час як метод handleProviderCallback читатиме вхідний запит і отримуватиме інформацію про користувача від постачальника. Зверніть увагу, у нас також є метод findOrCreateUser, який дивиться на об'єкт користувача в базі даних, щоб побачити, чи він існує. Якщо користувач існує, буде повернуто user object. В іншому випадку, буде створений новий користувач. Це не дозволяє користувачам реєструватися двічі.

Входи із соціальних мереж

Прийшов час додати посилання на реєстрації і входу в систему, так що користувачі можуть зареєструватися і увійти в систему через Facebook, Twitter і Github. Ви помітите, що посилання вказують на /auth/{provider} і доставлять користувача до провайдера OAuth для перевірки автентичності.

У поданні реєстрації користувача додайте це після кнопки Register:

Resources/Views/Auth/register.blade.php

[...]
<form action="{{ url('/register') }}" class="form-horizontal" method="POST" role="form">

    <div class="form-group">
        <div class="col-md-6 col-md-offset-4">
            <button class="btn btn-primary" type="submit">
            <i class="fa fa-btn fa-user"></i> Register
            </button>
        </div>
    </div>
    <hr>
    <div class="form-group">
        <div class="col-md-6 col-md-offset-4">
            <a class="btn btn-github" href="{{ url('/auth/github') }}"><i class="fa fa-github"></i> Github</a>
            <a class="btn btn-twitter" href="{{ url('/auth/twitter') }}"><i class="fa fa-twitter"></i> Twitter</a>
            <a class="btn btn-facebook" href="{{ url('/auth/facebook') }}"><i class="fa fa-facebook"></i> Facebook</a>
        </div>
    </div>
</form>
[...]

Подання реєстрації повинен виглядати наступним чином: Соціальна аутентифікація в Laravel з Socialite

У поданні логіну додайте це після кнопки Login:

Resources/Views/Auth/login.blade.php

[...]
<form action="{{ url('/login') }}" class="form-horizontal" method="POST" role="form">

    <div class="form-group">
        <div class="col-md-6 col-md-offset-4">
            <button class="btn btn-primary" type="submit">
            <i class="fa fa-btn fa-sign-in"></i> Login
            </button>
        </div>
    </div>
    <hr>
    <div class="form-group">
        <div class="col-md-6 col-md-offset-4">
            <a class="btn btn-github" href="{{ url('/auth/github') }}"><i class="fa fa-github"></i> Github</a>
            <a class="btn btn-twitter" href="{{ url('/auth/twitter') }}"><i class="fa fa-twitter"></i> Twitter</a>
            <a class="btn btn-facebook" href="{{ url('/auth/facebook') }}"><i class="fa fa-facebook"></i> Facebook</a>
        </div>
    </div>
</form>
[...]

Подання логіну повинно виглядати наступним чином: Соціальна аутентифікація в Laravel з Socialite

І тепер користувачі можуть зареєструватися за допомогою різних соціальних мереж. Socialite не обмежується Twitter, Facebook і Github, він також підтримує LinkedIn, Google і Bitbucket. Я сподіваюся, що стаття була корисною.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.2K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація