Développement Laravel : Comment intégrer rapidement la connexion tierce à l'aide de Laravel Socialite ?

Laravel est un framework PHP populaire utilisé pour développer des applications Web. L'une des fonctionnalités les plus courantes est l'intégration de connexions tierces dans l'application. Cela peut offrir aux utilisateurs une meilleure expérience utilisateur et réduire les processus d’inscription répétitifs.

Dans cet article, nous verrons comment intégrer la connexion tierce à l'aide de la bibliothèque Laravel Socialite.

Qu'est-ce que Laravel Socialite ?

Laravel Socialite est un package d'extension pour le framework Laravel qui permet aux développeurs d'implémenter facilement une connexion tierce dans leurs applications. Il prend en charge diverses plateformes sociales telles que Facebook, Twitter, LinkedIn, etc.

Comment fonctionne Socialite ?

Socialite suit le protocole OAuth. OAuth est un cadre d'autorisation qui permet aux utilisateurs de transmettre les informations de leur compte d'un site à un autre sans partager leurs informations d'identification. OAuth nécessite l'autorisation de l'utilisateur, dans ce cas, l'utilisateur autorise l'application à accéder à ses comptes de réseaux sociaux.

L'autorisation Socialite fonctionne comme ceci :

1. L'utilisateur clique sur le bouton "Connexion", qui le dirigera vers l'autorisation Socialite :

   Route::get('auth/{provider}', 'AuthSocialController@redirectToProvider');

2. Socialite met l'utilisateur au défi d'autoriser l'accès à son compte de réseau social ; vers le site de réseau social ;

   Route::get('auth/{provider}/callback', 'AuthSocialController@handleProviderCallback');

3. L'utilisateur autorise son compte et le site de réseau social redirige vers l'URL de rappel

public function redirectToProvider($provider)
{
  return Socialite::driver($provider)->redirect();
}

4. Socialite renvoie l'URL de rappel avec le code d'autorisation à l'application, et l'application le fera. demander OAuth avec le code d'autorisation Access Token ;

   public function handleProviderCallback($provider)
   {
   $socialUser = Socialite::driver($provider)->user();
   }

5. Une fois l'authentification terminée, Socialite renverra le jeton autorisé de l'utilisateur et le transmettra à l'application.

Comment utiliser Socialite dans Laravel ?

En utilisant n'importe quelle plateforme de médias sociaux prise en charge par Socialite, vous devrez configurer les informations d'identification ou les clés de l'application à deux endroits :

    'facebook' => [
        'client_id' => env('FB_CLIENT_ID'),
        'client_secret' => env('FB_CLIENT_SECRET'),
        'redirect' => env('FB_CALLBACK_URL'),
    ]

    'twitter' => [
        'client_id' => env('TW_CLIENT_ID'),
        'client_secret' => env('TW_CLIENT_SECRET'),
        'redirect' => env('TW_CALLBACK_URL'),
    ],

    'google' => [
         'client_id' => env('GOOGLE_CLIENT_ID'),
         'client_secret' => env('GOOGLE_CLIENT_SECRET'),
         'redirect' => env('GOOGLE_CALLBACK_URL')
    ]

Les informations d'identification ou les clés de l'application sont conçues pour vérifier l'identité de l'application.

Nous allons configurer cela dans le fichier config/services.php.

Étape 1 : Créer des routes d'autorisation

Créez les routes qui déclenchent l'autorisation Socialite :

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

Généralement, ces routes sont placées dans un contrôleur appelé SocialController, qui gère l'autorisation et les rappels Socialite.

Étape 2 : Créer un SocialController

Comme tous les contrôleurs, nous devons créer un SocialController en utilisant de bonnes pratiques de codage.

Utilisez la commande suivante pour créer le contrôleur :

php artisan make:controller AuthSocialController

À terme, cela nous permettra d'utiliser le fournisseur d'autorisation pour l'autorisation et les rappels de nos routes.

Dans SocialController, nous définissons deux méthodes, redirectToProvider et handleProviderCallback. La première est une redirection vers le fournisseur d'autorisation. La fonction de rappel suivante fournit ensuite l'URL de rappel au client avec le code d'autorisation pour récupérer les informations et terminer l'authentification.

Voici l'exemple de code pour SocialController :

namespace AppHttpControllersAuth;
use AppHttpControllersController;
use IlluminateSupportFacadesAuth;
use IlluminateHttpRequest;
use LaravelSocialiteFacadesSocialite;

class SocialController extends Controller
{
    /**
     * Redirect the user to the OAuth Provider.
     *
     * @return IlluminateHttpResponse
     */
    public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)->redirect();
    }
    /**
     * Obtain the user information from OAuth Provider.
     *
     * @return IlluminateHttpResponse
     */
    public function handleProviderCallback($provider)
    {
        $user = Socialite::driver($provider)->user();

        // Do something with user data, for example:
        // $user->token;
        // $user->getId();
        // $user->getEmail();
    }
}

Étape 3 : Utilisation d'un contrôleur de vue

Normalement, nous utiliserions un contrôleur de vue pour gérer le rendu de toutes nos vues. Cela rend notre code plus facile à lire et à gérer. Créons une vue simple pour notre application à l'aide du contrôleur de vue de Laravel.

Utilisez la commande suivante pour créer le contrôleur de vue :

php artisan make:controller SocialAuthController

Voici les modifications apportées au contrôleur.

namespace AppHttpControllers;

use IlluminateHttpRequest;

class SocialAuthController extends Controller
{
    /**
     * Redirect the user to the OAuth Provider.
     *
     * @return IlluminateHttpResponse
     */
    public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)->redirect();
    }

    /**
     * Obtain the user information from OAuth Provider.
     *
     * @return IlluminateHttpResponse
     */
    public function handleProviderCallback($provider)
    {
        $user = Socialite::driver($provider)->user();
        $existingUser = User::where('email', $user->getEmail())->first();
        if ($existingUser) { // If user already exists, login the user                
            auth()->login($existingUser, true);
        } else { // Register new user                    
            $newUser = new User();
            $newUser->name = $user->getName();
            $newUser->email = $user->getEmail();
            $newUser->google_id = $user->getId();
            $newUser->password = encrypt('amitthakur');
            $newUser->save();
            auth()->login($newUser, true);
        }
        return redirect()->to('/home');
    }
}

Étape 4 : Créer une vue de connexion

Maintenant, nos contrôleurs et nos itinéraires sont prêts. Nous devons maintenant créer la vue pour la connexion.

Créez un fichier de vue et nommez-le social_login.blade.php. Nous devons afficher des boutons pouvant déclencher des connexions tierces. Dans ce cas, nous afficherons 3 boutons pour prendre en charge la connexion avec Google, Facebook et Twitter.

Voici l'exemple de code pour le fichier de vue :

@extends('layouts.app')
@section('content')
<main class="py-4">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">{{ __('Login') }}</div>
                    <div class="card-body">
                        <a href="{{ route('social.oauth', ['provider' => 'google']) }}" class="btn btn-google">Sign in with google</a>
                        <a href="{{ route('social.oauth', ['provider' => 'facebook']) }}" class="btn btn-facebook">Sign in with Facebook</a>
                        <a href="{{ route('social.oauth', ['provider' => 'twitter']) }}" class="btn btn-twitter">Sign in with twitter</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

Utilisez le fichier de mise en page en haut. Lorsque l'utilisateur clique sur un bouton, nous le redirigeons vers le fournisseur d'autorisation. Dans la réponse de SocialController, nous obtiendrons les données utilisateur et terminerons l'authentification.

Étape 5 : Créer un nouvel itinéraire

Nous devons maintenant créer un nouvel itinéraire pour gérer le fichier de vue ci-dessus.

Modifiez le fichier web.php comme suit :

Route::get('social', 'SocialAuthController@index')->name('social.login');
Route::get('social/{provider}', 'SocialAuthController@redirectToProvider')->name('social.oauth');
Route::get('social/{provider}/callback', 'SocialAuthController@handleProviderCallback');

Notons que les routes ci-dessus sont identifiées nommément afin de pouvoir être référencées dans le code du contrôleur.

Étape 6 : Test

Maintenant que nous avons configuré nos identités sur les réseaux sociaux, avant de tester l'application, nous devons configurer notre application via le fichier .env.

Pour configurer le fichier .env, ajoutez le code suivant :

FACEBOOK_CLIENT_ID=xxxxxxxxxxxxxxxxx
FACEBOOK_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxx
FACEBOOK_CALLBACK_URL=http://www.example.com/auth/facebook/callback

GOOGLE_CLIENT_ID=xxxxxxxxxxxxxxxxx
GOOGLE_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxx
GOOGLE_CALLBACK_URL=http://www.example.com/auth/google/callback

TWITTER_CLIENT_ID=xxxxxxxxxxxxxxxxx
TWITTER_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxx
TWITTER_CALLBACK_URL=http://www.example.com/auth/twitter/callback

Remplacez l'ID d'application réel par "xxxxxxxxxxxxxxxxxx" dans cette ligne. Ensuite, nous pouvons lancer notre application via la ligne de commande et accéder au fichier de vue ci-dessus. Une fois que nous cliquons sur n'importe quel bouton et autorisons notre compte via OAuth, nous sommes authentifiés auprès de chaque utilisateur connu.

Conclusion

Dans cet article, nous avons appris comment intégrer la connexion tierce à l'aide de la bibliothèque Laravel Socialite. L'objectif principal de Socialite est de simplifier le processus de connexion aux réseaux sociaux pour améliorer l'expérience utilisateur. Nous avons appris à configurer Socialite pour prendre en charge Google, Facebook et Twitter. Nous récupérons également le code d'autorisation dans le contrôleur et complétons l'authentification OAuth en utilisant les données demandées. Le processus créera en fait un nouveau compte ou mettra à jour un compte existant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!