Système de connexion sociale utilisant Laravel Socialite

Dernière mise à jour Oct 18, 2021

Teneur

Installer et configurer Laravel Socialite

Créer un tableau des utilisateurs

Pour mettre en œuvre le système de connexion sociale, nous devons créer une table des utilisateurs qui stockera les détails fournis par le site social.

Si vous avez une nouvelle installation d’un Laravel, ouvrez l’outil de ligne de commande dans le répertoire racine d’un projet et exécutez la commande php artisan make:auth. Cette commande créera des contrôleurs d’authentification tels que LoginController, RegisterController, etc. qui se trouvent dans le répertoire app/Http/Controllers/Auth. Il crée également une vue login.blade.php, register.blade.php dans le répertoire resources/view/auth.

Ensuite, ouvrez la table de migration pour les utilisateurs. Nous allons modifier cette migration par défaut et ajouter deux colonnes supplémentaires appelées provider et provider_id.

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

Comme vous le voyez, nous définissons les colonnes d’e-mail et de mot de passe sur nullable. Pourquoi? Lorsque nous utilisons l’authentification de connexion sociale, il n’y a aucune garantie d’obtenir un identifiant de messagerie d’un utilisateur. Et le mot de passe n’est pas non plus nécessaire dans ce cas. Nous gardons donc l’adresse e-mail et le mot de passe à nullable. Le fournisseur de colonne stockera le nom du site social comme Facebook, Twitter, etc. Column provider_id stockera l’identifiant social d’un utilisateur respectif du site social.

Une fois que vous avez modifié votre migration d’utilisateur comme ci-dessus, exécutez la commande php artisan migrate. Cela créera une table appelée « utilisateurs » dans votre base de données.

Probablement, lors de l’exécution de la commande de migration, vous obtiendrez une erreur étrange liée à la longueur des caractères. Si tel est le cas, ouvrez le fichier AppServiceProvider.php à partir du répertoire app/Providers. Dans ce fichier, nous devons définir la longueur de chaîne par défaut pour les colonnes d’une table de base de données.

Fichier AppServiceProvider.php

<?php
 
namespace AppProviders;
 
use IlluminateSupportServiceProvider;
use IlluminateSupportFacadesSchema;
 
class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Schema::defaultStringLength(255);
    }
 
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

Modèle d’utilisateur

Par défaut, Laravel inclut un modèle AppUser Eloquent dans votre répertoire d’applications. Ouvrez User.php à partir du dossier de l’application. Ajoutez deux autres colonnes provider, provider_id à la variable $fillable.

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

Installer et configurer Laravel Socialite

Pour installer cette bibliothèque, vous devez avoir installé composer sur votre système.

Dans votre outil de ligne de commande, exécutez la commande ci-dessous.

composer require laravel/socialite

Après avoir installé la bibliothèque, enregistrez LaravelSocialiteSocialiteServiceProvider dans votre fichier de configuration config/app.php.

'providers' => [
    // Other service providers...
 
    LaravelSocialiteSocialiteServiceProvider::class,
],

Dans le même fichier config/app.php, sous le tableau aliases, ajoutez Façade Socialite.

'Socialite' => LaravelSocialiteFacadesSocialite::class,

Maintenant, il est temps d’enregistrer votre candidature sur le site social. Par exemple, nous supposons que vous souhaitez implémenter l’authentification de connexion Facebook. Alors n’hésitez plus et créez une application sur Facebook.

Une fois que vous êtes prêt avec l’identifiant de l’application, le secret de l’application de votre application Facebook, ouvrez le fichier config/services.php et ajoutez-y le code ci-dessous.

'facebook' => [
    'client_id' => env('FB_APP_ID'),
    'client_secret' => env('FB_APP_SECRET'),
    'redirect' => env('FB_CALLBACK_URL'),
],

Comme indiqué dans le code ci-dessus, nous devons stocker les détails de notre application et l’URL de rappel dans le fichier .env.

FB_APP_ID=PASTE_APP_ID_HERE
FB_APP_SECRET=PASTE_APP_SECRET_HERE
FB_CALLBACK_URL=YOU_SITE_URL/login/facebook/callback

Nous avons transmis l’URL de rappel en tant que YOU_SITE_URL/login/facebook/callback. Maintenant, il est temps de créer deux routes, une pour rediriger l’utilisateur vers le fournisseur OAuth (dans notre cas, Facebook) et une autre pour recevoir le rappel du fournisseur après authentification.

Code réel pour la gestion d’OAuth

À ce stade, nous avons terminé toutes les configurations de Laravel Socialite. Il est temps d’écrire du code qui gère la redirection OAuth et récupère les détails de l’utilisateur.

Ouvrez votre fichier login.blade.php et placez-y le code ci-dessous probablement après le bouton d’envoi.

<div class="form-group">
    <div class="col-md-6 col-md-offset-4">
        Login with
        <a href="{{ url('/login/facebook') }}"><i class="fa fa-facebook-official" aria-hidden="true"></i> Facebook</a>
        <a href="{{ url('/login/twitter') }}"><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</a>
        <a href="{{ url('/login/github') }}"><i class="fa fa-github" aria-hidden="true"></i> Github</a>
    </div>
</div>

Ici, nous ajoutons un lien pour Github et Twitter. Les étapes d’ajout d’OAuth pour ces sites sociaux sont également identiques à celles de Facebook. Il vous suffit de créer une application des sites sociaux respectifs et de stocker ces informations de la même manière que nous avons ajoutées pour Facebook.

Dans votre fichier de route, définissez les routes comme ci-dessous.

Route::get('login/{provider}', 'AuthLoginController@redirectToProvider');
Route::get('login/{provider}/callback', 'AuthLoginController@handleProviderCallback');

Ensuite, accédez à app/Http/Controllers/Auth/LoginController.php et modifiez le fichier. Vous devez y ajouter le code ci-dessous.

<?php
 
namespace AppHttpControllersAuth;
 
use AppHttpControllersController;
use IlluminateFoundationAuthAuthenticatesUsers;
use Socialite;
use AppUser;
use Auth;
 
class LoginController extends Controller
{
    /**
     * Redirect the user to the GitHub authentication page.
     *
     * @return Response
     */
    public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)->scopes(['email'])->redirect();
    }
 
    /**
     * Obtain the user information from GitHub.
     *
     * @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
        ]);
    }
}

La méthode redirectToProvider redirige l’utilisateur vers la page de connexion d’un site social. Une fois que l’utilisateur autorise l’application, nous récupérons les informations de l’utilisateur dans la fonction handleProviderCallback. Si l’utilisateur n’existe pas avec notre système, nous ajoutons ses coordonnées à l’aide de la méthode findOrCreateUser.

Nous espérons que vous avez pris connaissance du système de connexion sociale utilisant Laravel Socialite. Si vous avez des questions ou des suggestions, veuillez laisser un commentaire ci-dessous.

Articles Liés

Source d’enregistrement: artisansweb.net