Budowanie aplikacji wykorzystującej logowanie przy pomocy serwisów społecznościowych przestało być trudne, odkąd mamy do dyspozycji Socialite. Jest to pakiet pozwalający wykorzystać popularne serwisy społecznościowe jako warstwę autoryzującą użytkowników naszej aplikacji. W chwili obecnej wspierane są takie serwisy jak Facebook, Twitter, Github, Google oraz Bitbucket.

Bez zbędnego przedłużania, bierzmy się do pracy. Na samym początku zaznaczę, iż podczas przygotowywania tego wpisu, korzystałem z Laravela 5.1. Zacznijmy od dodania Socialite do naszego projektu. Socialite dodajemy przy pomocy polecenia:

composer require laravel/socialite

Następnie musimy w pliku config/app.php zarejestrować ServiceProvidera

'Laravel\Socialite\SocialiteServiceProvider',

oraz dodać fasadę

'Socialite' => 'Laravel\Socialite\Facades\Socialite',

Kolejnym krokiem będzie konfiguracja usługi. W moim przypadku jest to Twitter.

Aby móc korzystać z Twittera jako dostawcy usługi autoryzacji, musimy na stronie apps.twitter.com zarejestrować nową aplikację. Na etapie developerskim raczej nie posiadamy jeszcze zarejestrowanej domeny dla naszej aplikacji, więc w polu Website wpisujemy http://127.0.0.1:8000. Ważne jest, aby uzupełnić pole Callback URL. Bez tego nie będziemy w stanie korzystać z usługi. Wpisujemy tutaj adres, na jaki użytkownik zostanie przekierowany po zalogowaniu się na stronie Twittera. W moim przypadku jest to http://127.0.0.1:8000/callback. Adres powrotu możecie zdefiniować dowolny. Pamiętajcie tylko, żeby poprawnie go obsłużyć po stronie aplikacji.

twitter_new_app

Po dodaniu aplikacji przechodzimy do zakładki Keys and Asscess Tokens. W tym miejscu znajdziemy Consumer Key oraz Consumer Secret, niezbędne do poprawnego podłączenia usługi do naszej aplikacji.

Mając wszystkie niezbędne dane, wracamy do naszej aplikacji. Na początek baza służąca do przechowywania danych użytkownika.

php artisan make:migration create_users_table
Schema::create('users', function ($table) {
    $table->increments('id');
    $table->text('twitter_id');
    $table->text('username')->nullable();
    $table->text('email')->nullable();
    $table->timestamps();
    $table->rememberToken();
});
php artisan migrate

Następny w kolejności jest model, który będzie komunikować się bazą danych.

php artisan make:model User
namespace App;

use Illuminate\Contracts\Auth\Authenticatable;
use Illuminate\Database\Eloquent\Model;

class User extends Model implements Authenticatable
{
    use \Illuminate\Auth\Authenticatable;
}

Pozostało jeszcze utworzyć kontroler, który przekieruje użytkownika do formularza logowania oraz odbierze dane po poprawnym zalogowaniu się.

php artisan make:controller AuthController --plain

Kontroler będzie zawierał dwie metody – pierwsza odpowiedzialna za przekierowanie do Twittera, druga odpowiedzialna za odebranie odpowiedzi oraz dodanie lub zaktualizowanie danych użytkownika.

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use App\Http\Controllers\Controller;
use App\User;

class AuthController extends Controller
{
    public function redirectToProvider()
    {
        return \Socialite::driver('twitter')->redirect();
    }

    public function handleProviderCallback()
    {
        $userData = \Socialite::driver('twitter')->user();

        $user = User::where('twitter_id', $userData->id)->first();

        // check if there is local user account. if not, create it
        if($user === null) {
            $user = new User();
        }

        // sync data with service
        $user->twitter_id = $userData->id;
        $user->username = $userData->nickname;
        $user->email = $userData->email;
        $user->save();

        // login and remember user
        \Auth::login($user, true);

        return redirect('/');
    }
}

Pozostało jeszcze zdefiniować route’y

Route::get('/login', '[email protected]');
Route::get('/callback', '[email protected]');

oraz uzupełnić konfigurację Twittera (config/services.php)

'twitter' => [
    'client_id' => 'Consumer Key (API Key)',
    'client_secret' => 'Consumer Secret (API Secret)',
    'redirect' => 'http://127.0.0.1:8000/callback',
],

I to wszystko co musimy zrobić, aby skorzystać z logowania przy pomocy serwisu społecznościowego (w tym przypadku Twittera). Jeśli wejdziecie na adres http://127.0.0.1:8000/login, zostaniecie przekierowani na stronę logowania Twittera

twitter_login

Po zalogowaniu się na swoje konto, zostaniecie przekierowani z powrotem do aplikacji, a wasze dane zostaną zsynchronizowane z lokalną bazą danych.