Authentification automatique avec Laravel Socialite

Si comme moi vous n'aimez pas perdre 5 minutes de votre temps pour vous inscrire sur un site alors pensez que vos visiteurs Ă©galement n'aiment pas cela! 😁

Laravel à mis a notre disposition un package plutÎt sympa qui nous permet de s'authentifier directement en cliquant juste sur un bouton avec le logo de Facebook par exemple. Mais malheureusement on ne peut pas faire plus que ça, comme récupérer ses contacts, s'il souhaite partager son agenda, ses tweets etc... (Oh mais c'est déjà pas mal de pourvoir se connecter hein!).

Nous allons voir ensemble dans ce tutoriel comment se connecter via Facebook, Twitter, Github et Google (oui je sais.... je vous gĂąte trop).

Nous allons partir d'une base propre en faisant une nouvelle installation de Laravel (vous pouvez utiliser votre projet en cours sans problĂšme).

Notre projet s'appellera LaraSocial !

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

Ouvrez le fichier d'environnement .env et configurez votre base de données.

DB_HOST=localhost
DB_DATABASE=lara_social
DB_USERNAME=lara_social
DB_PASSWORD=secret

Migration & table users

Laravel génÚre automatiquement une migration pour la table users se trouvant dans le dossier databases / migrations, ouvez le.

Nous allons apporter quelque changement; remplacez les contenu se trouvant dans la methode up comme ceci:

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

Ici on a mit la colonne password en nullable (c'est une colonne qui accepte les valeurs null) car on ne peut pas récupérer les mots de passe.

Ensuite faites un petit coup de :

php artisan migrate

Cela va créer les tables des utilisateurs (users) et celle qui permet de réinitialiser les mots de passes (password_resets).

Edition du ModĂšle User

Allez dans le fichier app/User.php et ajoutez les colonnes provider et provider_id dans les $fillable (il faut savoir qu'on ne peut pas insérer des données dans la base de donnees sans l'avoir préalablement ajouter dans les $fillables).

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

public function setPasswordAttribute($password)
{
    $this->attributes['password'] = bcrypt($password);
}

La methode setPasswordAttribute() a pour but de récupérer les mots de passes saisis par vos utilisateurs (par exemple lors d'une inscription) et de les crypter automatiquement. Ce qui vous permet de faire comme ceci:

public function store(RegisterRequest $request)
{
    $user = User::create($request->all());
    Mail::to($user)->send(new Register($user));

    return redirect('login')->with("success", "Hey $user->name! Votre compte a hien été crée ;-)");
}

Elle n'est pas belle la vie ? 😃

Nous allons utiliser directement le service d'authentification par défaut de Laravel en faisant un :

php artisan make:auth

Puis ouvrez l'application sur votre navigateur, si vous n'utilisez pas de solution comme LAMP, MAMP, WAMP, Laragon, Homestead etc... faites plutĂŽt la commande :

php artisan serve

Et allez sur http://localhost:8000

Ajout du Socialite

Avant de commencer d'utiliser Socialite, il faudrait au préalable télécharger le package via composer.

composer require laravel/socialite

Si vous utilisez une version antérieur de 5.5 de Laravel, alors il faut l'ajouter dans le fichier de configuration config / app.php.
Dans la partie des providers ajoutez ceci Ă  la fin:

Laravel\Socialite\SocialiteServiceProvider::class,

Et dans la partie des aliases :

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

Inscription aux services OAuth

Ahh enfin, nous voilà arrivé dans l'étape qu'on n'attend tous !
Cet étape consiste à jouter les informations d'identifications des différentes service d'OAuth à notre application.
Pour se faire allez dans le fichier config / services.php et ajouter ceci :

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

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

  'github' => [
      'client_id'     => env('GITHUB_ID'),
      'client_secret' => env('GITHUB_SECRET'),
      'redirect'      => env('GITHUB_URL'),
  ],

  'google' => [
      'client_id'     => env('GOOGLE_ID'),
      'client_secret' => env('GOOGLE_SECRET'),
      'redirect'      => env('GOOGLE_URL'),
  ],

Et dans le fichier .env ajoutez ceci à la fin (nous le compléterons au fur et à mesure).

TWITTER_ID=
TWITTER_SECRET=
TWITTER_URL=http://localhost:8000/auth/twitter/callback

FACEBOOK_ID=
FACEBOOK_SECRET=
FACEBOOK_URL=http://localhost:8000/auth/facebook/callback

GITHUB_ID=
GITHUB_SECRET=
GITHUB_URL=http://localhost:8000/auth/github/callback

GOOGLE_ID=
GOOGLE_SECRET=
GOOGLE_URL=http://localhost:8000/auth/google/callback

Bien sûr vous devez remplacer le localhost:8000 par le nom de votre domaine si vous mettez votre site en production ou bien par le virtualhost si vous avez configuré sur votre machine un domaine personnalisé (ou bien que vous utilisez Laragon sous Windows ou Laravel Valet pour Mac et Linux).

Comme vous pouvez le voir nous allons passer pas mal de temps ensemble Ă  ajouter Facebook, Twitter, Github et Google dans notre application.

Facebook for developers

Nous allons commencer par Facebook :
Allez sur le site de Facebook for developers et connectez-vous avec vos identifiants Facebook.

Facebook for developers

Ici j'ai déjà créer un API avec mon application de développement, on va créer ensemble celle de production.
Il se peut que votre page ne ressemble pas à la mienne si vous n'avez jamais créer d'application.

Cliquez sur le bouton vert en haut Ă  droite ajouter une app
Dans le champ nom d'usage mettez le nom de votre application (le nom de votre site de préfÚrence) ainsi que votre adresse email.

Facebook créer un nouveau ID d'app

Lorsque vous aurez créer l'ID de votre application, vous serez redigirer vers la page de votre application.

Cliquez ensuite sur Général se trouvant dans le menu latéral ParamÚtres à droite.

Rien qu'ici vous pouvez récupérer l'identifiant de l'app et la clé secrÚte ensuite l'ajouter dans le fichier .env

Facebook dans le menu général

Dans mon cas l'ID de l'app est 687125871490764

FACEBOOK_ID=687125871490764
FACEBOOK_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxx
FACEBOOK_URL=http://localhost:8000/auth/facebook/callback

Dans le champ Domaine de l'app : mettez le nom de votre domaine, dans notre exemple c'est http://localhost:8000
vous pouvez Ă©galement importer le logo de votre site ;-)

Puis cliquez sur le bouton en bas Ajouter une plate-forme et selectionnez Site web.

Facebook ajout d'une plate-forme

Dans l'URL cible vous mettez Ă©galement le nom de votre domaine et vous enregistrer tout !

Avant de finir allez dans la section Facebook Login qui se trouve dans la partie PRODUITS du menu latéral gauche. Mettez dans le champ URI de redirection OAuth valides l'URL de redirection vers votre application

ttp://localhost:8000/auth/facebook/callback

Facebook login

Profitez de l'occasion pour activer des options que vous trouverez utils.

LĂ  vous ĂȘtes bon maintenant.

Mais le problĂšme votre application ne sera pas disponible en ligne, il n'y aura que vous et vous seul qui pourrait l'utiliser!
Si vous avez envie de la mettre en ligne il faudrait aller dans l'onglet Examen des apps et de cliquer sur Renndre VOTRE_APP publique ? :

Facebook rendre application en ligne

Twitter : Applcation Management

Nous allons attaquer maintenant le cas de Twitter, pour se faire aller sur [Twitter Application Management]

Twitter Application Management

Il faut bien mettre le lien

http://localhost:8000/auth/twitter/callback

Dans me champ Callback URL.

Complétez bien le formulaire et cliquez sur le bouton Create your Twitter application.

Une fois l'application créer, vous serez rediriger dans votre espace personnel, cliquez sur l'onglet Keys and Access Tokens.
Il vous suffit tout simplement de copier ce qui se trouve dans Consumer Key (API Key) dans le TWITTER_ID de votre fichier .env et Consumer Secret (API Secret) dans TWITTER_SECRET.

Par défaut Twitter ne donne pas accÚs aux emails des utilisateurs, mais vous pouvez faire une demande de permission pour l'avoir (ce serait dommage d'avoir un utilisateur qui n'a pas d'email hein).

Allez dans Settings et remplissez les champs Privacy Policy URL et Terms of Service URL.
Et cochez la case Enable Callback Locking (It is recommended to enable callback locking to ensure apps cannot overwrite the callback url).

Pensez également à compléter Organization.

Puis allez dans Permissions : dans Access : Read, Write and Access direct messages.

Dans Additional Permissions cochez la case Request email addresses from users.

Personnellement c'est ma partie preférée, simple et rapide!

Github

Ahh cet étape est également trÚs rapide, connectez-vous vers la page de Github et vous connaissez la chanson - Complétez le formulaire et dans le champ Authorization callback URL mettez bien

http://localhost:8000/auth/github/callback.

Github - création d'une nouvelle application

Une fois le formulaire rempli, cliquez sur le bouton Register Application vous serez rediriger vers une page que vous trouverez immédiatement l'ID client et la clé secrÚte.

Google Cloud Platform

Pour finir nous allons sur le site de Google Cloud Platform

Google Cloud Platform

Vous devez créer un nouveau projet. Une fois cela fait vous serez conduit dans votre Tableau de bord.

Google vous informera que vous n'avez ni d'API ni de services activés, il va falloir activer l'API de Google+, pour cela cliquez sur *LES API ET LES SERVICES ou allez dans la BibliothÚque et faites une recherche en tapant Google+ API

Google recherche de l'API Google+

Et activez l'Api de Google+. Une fois l'API activer, Google vous demandera de créer un identifiant pour profiter de cet API.

Pour utiliser cette API, vous devez créer des identifiants. Cliquez sur "Créer des identifiants" pour commencer.

Je vous propose d'aller plutĂŽt dans le menu a gauche et de cliquer sur "Identifiants" puis de cliquer sur l'onglet Ecran d'autorisation OAth.

Ecran d'autorisation OAth

Vous n'avez plus besoin de moi petit scarabée! Ensuite allez dans Identifants et cliquez sur Créer des identifiants en choissant bien ID client OAuth.

Créer un identifiant ID client OAth

Dans les options choisissez Application web :
le nom vous pouvez le laisser comme tel ou le changer, Ă  votre guise!
Dans Origines JavaScript autorisées mettez l'URL de votre domaine http://localhost:8000
Et dans URI de redirection autorisés mettez l'adresse de redirection

http://localhost:8000/auth/google/callback

Surprise ! Google vous donne directement votre ID Client et la clé secrÚte ! Ouff ce n'étais pas facile !``

Les routes

Allez maintenant dans le fichier routes / web.php et ajoutez les routes suivantes:

// OAuth Routes
 Route::get('auth/{provider}', 'Auth\AuthController@redirectToProvider');
 Route::get('auth/{provider}/callback', 'Auth\AuthController@handleProviderCallback');

CrĂ©ez le controller avec artisan, si vous ĂȘtes sur Windows :

php artisan make:controller Auth\AuthController

Sur Mac ou Linux

php artisan make:controller Auth/AuthController

Et ouvrez le fichier

app/Http/ContrĂŽleurs/Auth/AuthController.php
Et ajoutez ceci

<?php

namespace App\Http\Controllers\Auth;
use App\User;
use App\Http\Controllers\Controller;
use Laravel\Socialite\Facades\Socialite;

class AuthController extends Controller
{
    public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)->redirect();
    }
  
    public function handleProviderCallback($provider)
    {
        $social = Socialite::driver($provider)->user();
        $user = User::where('email', $social->email)->first();
        if (!is_null($user)){
            auth()->login($user, true);
            auth()->user()->update([
                'provider' => $provider,
                'provider_id' => $social->id
            ]);
            return redirect('/')->with("primary", "Hey <strong>$user->name</strong>! bienvenue et amusez-vous bien: ;-)");
        }else{
            $user->create([
                'name' => $social->email,
                'email' => $social->email,
                'provider' => $provider,
                'provider_id' => $social->id,
            ]);
          
            auth()->login($user, true);  // Je connecte l'utilisateur
            return redirect('account/password')->with("royal", "Bienvenue $user->name, votre compte a bien été crée! Nous vous conseillons de choisir un mot de passe afin de sécuriser votre compte");
        }
    }
}

Changer mon mot de passe

Register & Login

Maintenant il faut qu'on s'occupe de mettre en place des jolis petits boutons en dessous des formulaires de connexion et d'inscription :

   <div class="col-md-6 col-md-offset-4">
       <a href="{{ url('/auth/github') }}" class="btn btn-github"><i class="fa fa-github"></i> Github</a>
       <a href="{{ url('/auth/twitter') }}" class="btn btn-twitter"><i class="fa fa-twitter"></i> Twitter</a>
       <a href="{{ url('/auth/facebook') }}" class="btn btn-facebook"><i class="fa fa-facebook"></i> Facebook</a>
       <a href="{{ url('/auth/google') }}" class="btn btn-google"><i class="fa fa-google"></i> Google</a>
   </div>

Et voilà! Si vous avez eu des problÚmes n'hésitez pas à me contacter, ce serez un plaisir de vous aider ;-)

Ici j'ai utiliser Facebook, Google, Twitter et Github mais il est Ă©galement possible de le faire avec LinkedIn et Bitbucket ;-)