Connexion Google dans Laravel en utilisant Laravel Socialite

Dernière mise à jour Oct 18, 2021

Teneur

Créez une application Google et obtenez vos informations d’identification

Récemment, j’ai publié un article Login with LinkedIn Using Laravel Socialite et l’un de nos lecteurs a posé des questions sur l’intégration de Google Login dans Laravel. La connexion Google est également l’une des plates-formes populaires utilisées pour la connexion sociale sur le site Web.

Lorsque vous autorisez les utilisateurs à se connecter avec leur profil social sur votre site Web, vous ignorez le processus de validation de leur e-mail. Vos utilisateurs n’ont pas besoin de suivre un processus d’activation par e-mail. Nous pouvons nous appuyer sur les sites sociaux car ils ont déjà validé les utilisateurs sur leur plateforme. Il offre une meilleure expérience utilisateur à vos utilisateurs car ils n’ont pas besoin de se souvenir de leurs identifiants de connexion pour votre site Web et vous évite également d’ajouter les codes pour le flux de vérification. C’est une situation gagnant-gagnant.

Dans cet article, nous étudions un guide étape par étape sur l’ajout de Google Login dans Laravel à l’aide de Laravel Socialite. Laravel socialite gère le flux OAuth pour la connexion sociale dans les coulisses. Ce package accélère le processus d’intégration de la connexion sociale sur Laravel.

Pour ce tutoriel, j’utiliserai une nouvelle installation de Laravel, alors exécutez la commande ci-dessous qui installera Laravel pour vous :

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

Lors de l’installation de Laravel, créez une base de données et ajoutez vos informations d’identification de base de données dans le .envfichier. Au fur et à mesure que nous ajoutons la connexion sociale dans l’application, j’ajouterai 2 colonnes supplémentaires au fichier de migration des utilisateurs par défaut et j’ai légèrement modifié son code.

Ouvrez le fichier de migration de votre utilisateur et ajoutez le code ci-dessous à la upméthode.

/**
 * Run the migrations.
 *
 * @return void
 */
public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('name');
        $table->string('email')->nullable();
        $table->timestamp('email_verified_at')->nullable();
        $table->string('password')->nullable();
        $table->string('provider');
        $table->string('provider_id');
        $table->rememberToken();
        $table->timestamps();
    });
}

Dans le code ci-dessus, j’ai ajouté 2 colonnes provideret provider_idqui contiendront respectivement les valeurs ‘google’ et l’identifiant de profil Google de l’utilisateur. Créez la table ‘users’ en exécutant la commande migrate.

php artisan migrate

Vous devez également ajouter ces 2 colonnes au modèle User.

app/Utilisateur.php

/**
 * The attributes that are mass assignable.
 *
 * @var array
 */
protected $fillable = [
    'name', 'email', 'password', 'provider', 'provider_id',
];

Créez une application Google et obtenez vos informations d’identification

Ensuite, nous devons créer un projet sur la console des API Google. Nous aurons besoin de l’ID client et du secret client de l’application pour terminer le processus OAuth pour les utilisateurs.

Suivez les étapes ci-dessous pour créer un projet Google et obtenir les informations d’identification. Pour le tutoriel, j’utilise l’URL du serveur local. Vous pouvez ajuster cette URL selon vos besoins.

Accédez à la console développeur de Google.
Cliquez sur la liste déroulante et créez un nouveau projet en cliquant sur le signe (+). Alternativement, vous pouvez également sélectionner le projet existant.
Sur le tableau de bord du projet, sélectionnez Informations d’identification dans la barre latérale.
Sous l’onglet Informations d’identification, cliquez sur la liste déroulante Créer des informations d’identification et sélectionnez ID client OAuth.
Sélectionnez l’application Web dans le type d’application. Dans les URL de redirection autorisées, saisissez l’URL http://localhost:8000/google/callback.

Une fois que vous l’avez enregistré, vous obtiendrez la fenêtre contextuelle avec votre identifiant client et votre secret client. Copiez ces clés dont nous aurons besoin dans quelques instants.

Créer des routes et un contrôleur

Vous êtes prêt avec vos clés API. Maintenant, pour aller plus loin, nous devons créer des routes, un fichier lame et un contrôleur. Créez un LoginControllerà l’aide de la commande :

php artisan make:controller LoginController

Après cela, créez un fichier lame appelé login.blade.phpet ajoutez-y le code HTML ci-dessous.

<a href="{{ url('/login/google') }}">
    {{ __('Login with Google') }}
</a>

Appelez cette vue à partir de la indexméthode de LoginController.

public function index()
{
    return view('login');
}

Pour appeler cette vue, vous devez lui ajouter une route. Ajoutons également quelques routes supplémentaires qui nécessiteront pour la prochaine partie du didacticiel.

Route::get('login', 'LoginController@index');
Route::get('login/{provider}', 'LoginController@redirectToProvider');
Route::get('{provider}/callback', 'LoginController@handleProviderCallback');
Route::get('/home', function() {
    return 'User is logged in';
});

Notez que j’ai ajouté un homeitinéraire. Lorsqu’un utilisateur se connectera avec Google, je le redirigerai vers la homeroute. Je le garde juste à des fins de démonstration. Vous devriez changer cet itinéraire en quelque chose d’autre.

Connexion Google dans Laravel en utilisant Laravel Socialite

Jusqu’à présent, nous en avons terminé avec la configuration de base requise pour la connexion sociale. À présent. il est temps d’installer la bibliothèque Laravel Socialite. Installez-le en exécutant la commande ci-dessous dans le terminal.

composer require laravel/socialite

Lors de l’installation de la bibliothèque, ouvrez le config/services.phpet ajoutez la configuration Google comme suit :

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

Comme nous avons utilisé la envméthode pour obtenir les informations d’identification, nous devons ajouter ces informations d’identification dans le .envfichier.

GOOGLE_CLIENT_ID=YOUR_CLIENT_ID
GOOGLE_CLIENT_SECRET=YOUR_CLIENT_SECRET
GOOGLE_REDIRECT_URL=http://localhost:8000/google/callback

Assurez-vous de remplacer les espaces réservés par des valeurs réelles. Enfin, nous devons ajouter du code dans un LoginController.phpfichier qui redirige l’utilisateur vers la page de connexion Google et gère en retour la réponse. Dans ce fichier, nous écrivons une fonction qui redirige un utilisateur vers la page de connexion Google et en cas d’autorisation réussie, elle insérera les détails de l’utilisateur dans la base de données et connectera l’utilisateur.

LoginController.php

<?php
  
namespace AppHttpControllers;
  
use IlluminateHttpRequest;
use Socialite;
use AppModelsUser;
use Auth;
  
class LoginController extends Controller
{
    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = '/home';
  
    /**
     * Call the view
     */
    public function index()
    {
        return view('login');
    }
  
    /**
     * Redirect the user to the Google authentication page.
     *
     * @return Response
     */
    public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)->redirect();
    }
    
    /**
     * Obtain the user information from Google.
     *
     * @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
        ]);
    }
}

Dans notre fichier contrôleur, nous vérifions si l’utilisateur avec provider_idexiste déjà ou non. S’il existe, renvoyez l’instance utilisateur actuelle, sinon insérez-la dans la table des utilisateurs et connectez l’utilisateur.

J’espère que vous avez entendu parler de Google Login dans Laravel en utilisant le package Socialite. J’aimerais entendre vos pensées et suggestions dans la section des commentaires ci-dessous.

Articles Liés

Source d’enregistrement: artisansweb.net