Authentification Google avec Laravel Socialite : le Guide Complet

Tim

December 16th, 2024

L’authentification est une pierre angulaire des applications web modernes, garantissant la sécurité des données et des comptes utilisateur. Laravel propose déjà un système d’authentification intégré out of the box, à la fois puissant et prêt à l’emploi. Cependant, l’ajout d’authentifications tierces, comme Google, peut grandement améliorer l’expérience utilisateur.

Avec des services comme Google, vos utilisateurs peuvent se connecter en un clic, sans avoir à créer un nouveau compte ou à mémoriser un mot de passe supplémentaire. De plus, ces systèmes renforcent la sécurité grâce à des mécanismes avancés, comme l’authentification multifacteur.

Laravel Socialite, un package spécialement conçu pour Laravel, simplifie l’intégration de ces services tiers (Google, Facebook, Twitter, Github, etc.). Mieux encore, vous pouvez facilement combiner l’authentification Laravel native avec des options tierces, offrant ainsi une flexibilité maximale à vos utilisateurs.

Dans ce guide, je vous accompagne étape par étape pour implémenter une authentification Google sécurisée et efficace, tout en tirant le meilleur parti de l’écosystème Laravel.

Configuration de Laravel Socialite

La première étape consiste à installer Laravel Socialite dans votre projet Laravel. Je vous recommande vivement de lire la documentation officielle si vous avez le temps, c'est toujours une bonne habitude à prendre. Ceci dit, utilisez la commande Composer suivante :

shell

composer require laravel/socialite

Ensuite, ouvrez le fichier config/services.php pour configurer les services d’authentification. Vous devez ajouter les informations d’identification de votre application Google (client ID et client secret) ainsi que l’URL de redirection (redirect URL). Cette dernière correspond au point où l’utilisateur sera redirigé après avoir autorisé l’accès via Google.

Si l’entrée pour Google n’existe pas encore dans le tableau, créez-la comme suit :

php

<?php

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),
    'redirect' => env('GOOGLE_REDIRECT_URL'), // Remplacez par votre URL de rappel
],

Maintenant, ajouter les variables d'environnements dans votre fichier .env comme ci-dessous :

shell

GOOGLE_CLIENT_ID=xxxxxxxxxxxxx.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=xxxxxx-xxxxxxxx-xxxxxxxxxxxxxxxxxxx
GOOGLE_REDIRECT_URL=https://example.com/auth/google/callback

Obtenir les identifiants de votre application Google

Pour configurer votre application, vous devez obtenir les identifiants (client ID et client secret) via la Google Cloud Console. Voici les grandes étapes :

Accédez à la Console Google Cloud : Connectez-vous avec votre compte Google à l’adresse Console Google Cloud Platform.
Créez ou sélectionnez un projet : Si vous n’avez pas encore de projet, créez-en un. Sinon, choisissez un projet existant.
Activez l’API OAuth : Accédez à la section APIs & Services, puis assurez-vous que l’API OAuth est activée pour votre projet.
Générez des identifiants OAuth 2.0 :
- Rendez-vous dans Identifiants (Credentials).
- Cliquez sur Créer des identifiants (Create Credentials), puis choisissez ID Client OAuth 2.0 (OAuth 2.0 Client ID).
- Sélectionnez le type d’application : pour une application web, choisissez Application Web (Web Application).
Définissez l’URL de redirection autorisée : Ajoutez l’URL de redirection utilisée dans votre application (celle définie dans votre fichier config/services.php).
Obtenez vos identifiants : Une fois créés, copiez le client ID et le client secret.

Voici un exemple concret :

Création de la connexion Google

Premièrement, créer un nouveau controller. Par exemple : App/Http/Controllers/GoogleAuthController.

php

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;
use Illuminate\Support\Str;

class GoogleAuthController extends Controller
{
    public function redirect()
    {
        return Socialite::driver('google')->redirect();
    }

    public function callbackGoogle()
    {
        try {
            // Get Google user info
            $googleUser = Socialite::driver('google')->user();

            // Check if the user already exists by email
            $user = User::where('email', $googleUser->email)->first();

            // If the user exists but doesn't have google_id, update it
            if ($user) {
                if (is_null($user->google_id)) {
                    $user->google_id = $googleUser->id;
                    $user->save();
                }
            } else {
                // If the user does not exist, create a new user
                $user = User::create([
                    'name' => $googleUser->name,
                    'email' => $googleUser->email,
                    'google_id' => $googleUser->id,
                    // You can generate a random password since they won't use it
                    'password' => bcrypt(Str::random(24))
                ]);
            }

            // Log the user in
            Auth::login($user);

            // Redirect to the intended page after login
            return redirect()->route('home');
        } catch (\Throwable $th) {
            // Handle any errors
            dd('Something went wrong! ' . $th->getMessage());
        }
    }

}

Explications des Points Clés du Code de Contrôleur

Redirection vers Google pour l'Authentification
La méthode redirect() utilise Laravel Socialite pour rediriger l'utilisateur vers la page de connexion Google. Cela initie le processus OAuth, permettant à l'application de demander les informations d'utilisateur nécessaires à Google.
Récupération des Informations Utilisateur depuis Google
Dans callbackGoogle(), une fois que l'utilisateur a validé l'autorisation, Socialite récupère les informations de l'utilisateur depuis Google, stockées dans $googleUser. Ces informations incluent des champs comme l'identifiant Google (id), l'adresse email et le nom.
Vérification de l'Existence de l'Utilisateur dans la Base de Données
Le code vérifie ensuite si un utilisateur avec la même adresse email existe déjà dans la base de données. Cela permet d'associer une session de connexion Google à un compte existant et de gérer les utilisateurs existants.
Mise à Jour des Comptes Existants sans Google ID
Si l'utilisateur existe, mais n'a pas encore de google_id, le code met à jour le compte en ajoutant l'identifiant Google. Cela permet de lier des utilisateurs existants avec leur compte Google et évite la duplication de comptes.
Création d'un Nouveau Compte si l'Utilisateur n'Existe pas
Si aucun utilisateur n'existe avec cette adresse email, un nouvel enregistrement est créé dans la base de données. Le code crée le nom, l'email, l'identifiant Google et génère un mot de passe aléatoire sécurisé, puisque cet utilisateur ne l'utilisera pas pour se connecter via Google.
Connexion de l'Utilisateur
Après avoir soit mis à jour un compte existant, soit créé un nouvel utilisateur, le code connecte automatiquement l'utilisateur en appelant Auth::login($user), facilitant l'accès immédiat sans exiger une étape supplémentaire de connexion.
Redirection après Connexion
Enfin, l'utilisateur est redirigé vers la route home, ou vers une autre page définie dans l'application, après avoir été authentifié. Cela clôt le processus en offrant une expérience fluide et intégrée.

Maintenant, définissez les routes pour la connexion Google dans votre fichier routes/web.php:

php

<?php
use App\Http\Controllers\GoogleAuthController;

Route::get('/auth/google', 'GoogleAuthController@redirect')->name('google.auth');;
Route::get('/auth/google/callback', 'GoogleAuthController@callbackGoogle');

Protection des routes d’authentification

Il est important de protéger les routes qui nécessitent une connexion avec l’attribut auth dans le fichier routes/web.php :

php

<?php
Route::group(['middleware' => 'auth'], function () {
    Route::get('/dashboard', 'DashboardController@index');
    // ... Autres routes protégées
});

Utilisation de Socialite dans votre application

Maintenant, vous pouvez utiliser Socialite pour vous connecter à Google dans votre application. Par exemple, vous pouvez créer un lien Se connecter avec Google sur votre page de connexion :

html

<a href="{{ route('google.auth') }}" class="tw-google-button">
  <div>
		<!-- En supposant que vous avez le logo de google dans images/google-logo.png -->
        <img src="images/google-logo.png"
			 alt="G" class="tw-google-button__logo"
		/>
    </div>
    <div>
        <span>Se connecter avec Google</span>
    </div>  
</a>

css

.tw-google-button {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 260px;
    font-size: 1.1rem;
    padding: 15px 20px;
    font-family: 'Roboto';
    border: 1px solid #ddd;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    border-radius: 40px;
    transition: all .4s;
  	color: #111111;
}

.tw-google-button:hover {
	background-color: #ffd166;
}

.tw-google-button__logo {
  	width: 32px;
  	height: 32px;
}

Lorsque l’utilisateur clique sur ce lien, il sera redirigé vers la page d’authentification de Google. Après avoir accepté les permissions, il sera redirigé vers votre application et authentifié automatiquement.

Conseils pratiques et meilleures pratiques

Utilisez les dernières versions de Laravel Socialite et des bibliothèques associées.
Implémentez une validation de sécurité robuste pour toutes les données transmises entre votre application et l’API de Google.
Utilisez des variables d’environnement pour stocker vos identifiants d’application Google sensibles.
Mettez en place une gestion des erreurs pour gérer les situations auxquelles la connexion Google échoue.
Stockez les informations de profil de l’utilisateur dans votre base de données pour une meilleure expérience utilisateur.
Proposez la possibilité aux utilisateurs de se déconnecter de Google via votre application.
Testez et documentez minutieusement votre système d’authentification Google pour garantir son bon fonctionnement et sa sécurité.

FAQ

Q: Comment configurer les permissions de l’application Google ?

R: Lorsque vous créez vos identifiants OAuth 2.0, vous devez spécifier les permissions que votre application requiert auprès de l’API Google. Sélectionnez les permissions appropriées en fonction des informations que vous souhaitez récupérer auprès de l’utilisateur Google (par exemple, le nom, l’email, l’adresse, etc.).

Q: Comment puis-je personnaliser le bouton “Se connecter avec Google” ?

R: Vous pouvez utiliser des CSS pour personnaliser le bouton “Se connecter avec Google” selon vos préférences de design.

Q: Est-il possible de déconnecter l’utilisateur de Google ?

R: Oui, vous pouvez utiliser la méthode logout() de Socialite pour déconnecter l’utilisateur de votre application et de son compte Google.

Q: Quelles sont les implications de l’utilisation de Socialite pour la sécurité de mon application ?

R: Laravel Socialite utilise les API de Google pour l’authentification, ce qui signifie que vous déléguez une partie de la sécurité à Google. Vous devez cependant mettre en place une validation et une gestion des erreurs adéquates pour garantir la sécurité de votre application. Ce qui est bien, c'est que vous pouvez toujours avoir votre propre système d'authentification à côté.

Vous pourriez aimer...

Tim

November 25th, 2024

Lancez des recherches Google en un clic avec JavaScript !

Lire l'article

Tim

November 15th, 2024

Comprendre les Listes en Python : Une Exploration Détaillée...

Lire l'article

Tim

November 15th, 2023

Guide Complet pour Maîtriser les Bases de Flexbox en CSS

Lire l'article