Dans ce monde numérique, il est important que vos applications aient un processus d’authentification fluide et sécurisé. Cela contribue à améliorer l’expérience utilisateur et la sécurité globale de vos applications.

L’authentification Google est l’une des méthodes les plus fiables et pratiques pour permettre aux utilisateurs de se connecter à un site en utilisant leur compte Google. Cela signifie qu’ils n’ont pas besoin de se souvenir d’un autre nom d’utilisateur et mot de passe.

L’intégration de l’authentification Google OAuth dans votre application Laravel simplifie le processus de connexion, encourage l’engagement des utilisateurs et renforce la crédibilité de votre plateforme. Dans ce tutoriel, je vous guiderai à travers les étapes de mise en œuvre de l’authentification Google dans une application Laravel. Nous allons de la configuration des identifiants d’API Google à la configuration du package Socialite de Laravel.

Table des matières

Prérequis

Avant de commencer, assurez-vous d’avoir les prérequis suivants :

  1. Laravel 11

  2. Un compte développeur Google.

  3. Connaissances de base de Laravel et de l’authentification.

  4. Composer pour la gestion des packages

Une fois ces prérequis prêts, vous êtes prêt à intégrer l’authentification Google dans votre application Laravel.

Avantages de l’utilisation de l’authentification Google dans une application Laravel

Il y a de nombreux avantages à cette configuration. En voici quelques-uns :

  • Intégration simplifiée avec Socialite

  • Authentification utilisateur transparente

  • Amélioration de la sécurité

  • Flux utilisateur personnalisable

  • Évolutivité améliorée

  • Support solide de l’écosystème

  • Entretien plus facile

Comment configurer la connexion Google avec Laravel

Que vous travailliez sur un projet personnel ou une application prête pour la production, suivre ces étapes vous aidera à intégrer Google Authentication en douceur. Commençons.

Étape 1 : Configurez un projet Google Cloud

Pour utiliser Google Authentication dans votre application Laravel, vous devez d’abord configurer un projet Google Cloud. Suivez ces étapes pour configurer votre projet :

  1. Visitez la console Google Cloud et connectez-vous avec votre compte Google.

  2. Cliquez sur le menu déroulant “Sélectionner un projet” dans la barre de navigation supérieure. Dans la fenêtre contextuelle, cliquez sur “Nouveau projet” pour créer un nouveau projet et fournissez les détails demandés. Ensuite, cliquez sur Créer le projet.

  3. Une fois le projet créé, ouvrez le menu latéral gauche de la console et sélectionnez APIs & Services > Identifiants.

  4. Sur la page des Identifiants, cliquez sur Créer des identifiants > Identifiant client OAuth.

  5. Si c’est la première fois que vous créez un ID client, il vous demandera de configurer l’écran de consentement. Vous pouvez configurer votre écran de consentement en cliquant sur Configurer Écran de consentement. Si vous avez déjà configuré l’écran de consentement, vous pouvez passer cette étape.

    • Sélectionnez Externe si votre application est destinée à un usage public, ou Interne s’il est limité aux utilisateurs de votre organisation Google Workspace.

    • Remplissez les détails requis, comme le nom de l’application, e-mail de support utilisateur, et toute information de marque. Cliquez sur Enregistrer et continuer.

Après avoir configuré l’écran de consentement, revenez à la page des Identifiants et sélectionnez à nouveau ID Client OAuth.

  1. Choisissez le Type d’Application comme Application Web et fournissez un nom pour les identifiants du client (par exemple, Laravel Social Login).

  2. Sous URI de redirection autorisées, ajoutez l’URL de rappel pour votre application:

  3. Exemple: http://your-app-url.com/callback/google

  4. Si vous testez en local, utilisez: http://127.0.0.1:8000/api/auth/google/callback

  5. Cliquez sur Créer, et Google générera un ID client et un Secret client pour votre projet. Enregistrez ces identifiants, car ils seront nécessaires aux étapes suivantes.

Étape 2 : Créer un nouveau projet Laravel et installer le package Laravel Socialite

Si vous n’en avez pas déjà un prêt, vous pouvez créer un nouveau projet Laravel en utilisant la commande ci-dessous :

composer create-project --prefer-dist laravel/laravel social-auth-example

Pour intégrer l’authentification Google dans un projet Laravel, nous utiliserons Laravel Socialite. Socialite est un package Laravel officiel qui simplifie l’authentification OAuth avec des services populaires comme Google, Facebook, Twitter, et plus encore.

Pour installer Socialite, ouvrez votre terminal dans le répertoire racine de votre projet Laravel et exécutez la commande suivante :

composer require laravel/socialite

Étape 3 : Configurer les variables d’environnement

Dans cette étape, nous allons configurer notre application Laravel pour utiliser les informations d’identification Google OAuth que nous avons collectées à l’étape 1.

Trouvez votre fichier .env dans le répertoire racine de votre projet et ajoutez les variables d’environnement suivantes :

GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret
GOOGLE_REDIRECT_URL=http://your-domain.com/auth/google/callback

Remplacez tous les espaces réservés par des secrets.

Essayons de comprendre chaque variable d’environnement une par une :

  • GOOGLE_CLIENT_ID : Un identifiant unique pour votre application, fourni par Google.

  • GOOGLE_CLIENT_SECRET: Une clé privée utilisée par votre application pour s’authentifier de manière sécurisée auprès de l’API de Google.

  • GOOGLE_REDIRECT_URL: L’URL vers laquelle Google redirige les utilisateurs après leur connexion. Cela doit correspondre à l’URI de redirection que vous avez spécifiée lors de la création des informations d’identification à l’étape 1.

Étape 4 : Mettre à jour les fichiers de configuration

Pour permettre à Laravel Socialite d’utiliser les informations d’authentification OAuth de Google, nous devons configurer les détails du fournisseur dans le fichier config/services.php.

Dans le fichier services.php, ajoutez la configuration suivante pour le fournisseur Google :

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),        // Votre identifiant client Google
    'client_secret' => env('GOOGLE_CLIENT_SECRET'), // Votre clé privée client Google
    'redirect' => env('GOOGLE_REDIRECT_URL'),      // Votre URL de redirection Google
]

Étape 5 : Créer des contrôleurs et des routes pour l’authentification.

Dans cette étape, nous allons créer un contrôleur pour gérer la redirection et les rappels OAuth de Google et mettre en place les routes nécessaires pour déclencher ces méthodes.

Exécutez la commande Artisan suivante pour générer le contrôleur GoogleAuthController :

php artisan make:controller GoogleAuthController

Cela créera un contrôleur à l’emplacement app/Http/Controllers/GoogleAuthController.php.

Remplacez le contenu du nouveau fichier GoogleAuthController.php par le code suivant :

<?php

namespace App\\Http\\Controllers;

use App\\Http\\Controllers\\Controller;
use App\\Models\\User;
use Laravel\\Socialite\\Facades\\Socialite;
use Illuminate\\Support\\Facades\\Auth;
use Illuminate\\Support\\Str;
use Throwable;

class GoogleAuthController extends Controller
{
    /**
     * Rediriger l'utilisateur vers la page d'authentification OAuth de Google.
     */
    public function redirect()
    {
        return Socialite::driver('google')->redirect();
    }

    /**
     * Gérer le retour d'appel de Google.
     */
    public function callback()
    {
        try {
            // Obtenir les informations de l'utilisateur depuis Google
            $user = Socialite::driver('google')->user();
        } catch (Throwable $e) {
            return redirect('/')->with('error', 'Google authentication failed.');
        }

        // Vérifier si l'utilisateur existe déjà dans la base de données
        $existingUser = User::where('email', $user->email)->first();

        if ($existingUser) {
            // Connecter l'utilisateur s'ils existent déjà
            Auth::login($existingUser);
        } else {
            // Sinon, créer un nouvel utilisateur et les connecter
            $newUser = User::updateOrCreate([
                'email' => $user->email
            ], [
                'name' => $user->name,
                'password' => bcrypt(Str::random(16)), // Définir un mot de passe aléatoire
                'email_verified_at' => now()
            ]);
            Auth::login($newUser);
        }

        // Rediriger l'utilisateur vers le tableau de bord ou toute autre page sécurisée
        return redirect('/dashboard');
    }
}

Ce contrôleur contient deux fonctions :

  1. Rediriger : Redirige l’utilisateur vers la page d’authentification OAuth de Google.

  2. Retour d’appel : Gère le retour d’appel de Google et redirige l’utilisateur vers le tableau de bord ou toute autre page sécurisée.

Définissons les routes redirect et callback dans le fichier routes/web.php :

use App\\Http\\Controllers\\GoogleAuthController;

// Route pour rediriger vers la page d'authentification OAuth de Google
Route::get('/auth/google/redirect', [GoogleAuthController::class, 'redirect'])->name('auth.google.redirect');

// Route pour gérer le retour d'appel de Google
Route::get('/auth/google/callback', [GoogleAuthController::class, 'callback'])->name('auth.google.callback');

Étape 6 : Testez l’authentification Google de Laravel dans votre projet.

Nous avons configuré l’authentification Google, il est maintenant temps de la tester pour s’assurer qu’elle fonctionne parfaitement. Dans cette étape, nous utiliserons un bouton de connexion qui redirige l’utilisateur vers la page d’authentification de Google et le renvoie à une route protégée après une connexion réussie.

Tout d’abord, nous ajouterons le bouton suivant qui donne aux utilisateurs la possibilité de se connecter avec Google :

<a href="{{ route('auth.google.redirect') }}" class="btn bg-blue-100 p-3 shadow-sm border rounded-md text-blue-900">
    Login with Google 
</a>

À des fins de test, j’ai défini une route protégée et un tableau de bord. Cette route ne sera accessible qu’aux utilisateurs authentifiés. Après s’être connecté, nous redirigerons les utilisateurs vers cette page. Définissons cette route dans web.php :

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware('auth')->name('dashboard');

Ensuite, créez un fichier de vue blade pour le tableau de bord à l’emplacement resources/views/dashboard.blade.php. Voici le contenu du tableau de bord :

<html>
    <head>
        <title>Dashboard</title>
    </head>

    <body>
        <h1>Dashboard</h1>
        <p>Welcome to the dashboard, {{ auth()->user()->name }}!</p>
    </body>

</html>

Ici, nous utilisons l’assistant auth()->user() pour afficher le nom de l’utilisateur connecté, qui est extrait du compte Google qu’ils ont utilisé pour se connecter.

Maintenant, essayons de nous connecter.

Voici la page de connexion :

En cliquant sur le bouton, vous serez redirigé vers l’écran de consentement de Google :

Cliquez sur continuer, et vous devriez être connecté à l’application. Vous serez redirigé vers un écran comme ci-dessous. Vous pouvez voir le message de bienvenue avec le nom de l’utilisateur.

C’est tout ! Vous avez implémenté et testé avec succès l’authentification Google dans votre projet Laravel. Désormais, vos utilisateurs pourront se connecter en utilisant leurs comptes Google, renforçant à la fois la sécurité et la commodité.

Pour faire référence à l’implémentation complète, vous pouvez trouver le code source complet de ce projet sur GitHub ici : Intégration de la connexion Google pour Laravel – Dépôt GitHub

Conclusion

Vous avez maintenant configuré l’authentification Google dans votre application Laravel en utilisant Socialite ! Vous pouvez étendre cette méthode pour inclure d’autres fournisseurs OAuth comme Facebook, Twitter ou GitHub en ajoutant des configurations supplémentaires dans le fichier config/services.php.

L’intégration OAuth Google est une fonctionnalité courante pour les applications web modernes, et Laravel Socialite facilite sa mise en œuvre.

Si vous avez besoin de plus d’options de connexion sociale telles que GitHub, Twitter et Facebook, vous pouvez envisager des boilerplates Laravel SaaS prêts à l’emploi.

La plupart des boilerplates Laravel SaaS pré-construits offrent une intégration transparente avec des plateformes populaires telles que Google, GitHub, Facebook et Twitter. Par exemple, il existe des ressources premium et open source comme :

  • Kit de Démarrage Laravel (Premium)

    • Basé sur Tailwind CSS

    • Livré avec la configuration d’un lien magique en un clic

    • Prend en charge diverses méthodes d’authentification, y compris la connexion traditionnelle par email/mot de passe

    • Authentification à 2 facteurs

  • Modèle de démarrage SaaS (Open Source)

    • Multi-locataires sur une seule base de données

    • Tableau de bord développeur

    • Gérer les jetons d’accès personnels

  • Laranuxt (Open Source)

    • Interface utilisateur Nuxt, une collection de composants développés par l’équipe NuxtJS, alimentée par Tailwind CSS

    • Bibliothèque d’authentification pour aider avec les sessions utilisateur et la connexion/déconnexion

    • Exemple de middleware d’authentification

  • Laravel Vue Boilerplate (Open Source)

    • WebSockets avec Laravel Echo et Pusher.

    • Workbox pour un meilleur développement PWA.

    • Laravel GraphQL

Utiliser l’un de ces boilerplates Laravel SaaS peut accélérer vos flux de travail car vous n’avez pas besoin de tout configurer à partir de zéro.

Remerciements spéciaux à Deep Kumbhare, un développeur Laravel expérimenté et passionné, qui m’a aidé à préparer cet article.

J’espère que cet article vous aidera à configurer la connexion Google avec Laravel.