🔒 Activité Pratique : Implémentation d’une Authentification OAuth 2.0 avec Google

Dans cette activité, nous allons mettre en place une authentification OAuth 2.0 en utilisant Google comme fournisseur d'identité (IdP). L'application permettra aux utilisateurs de se connecter avec leur compte Google.

Cette activité pratique vous guide pas à pas dans la mise en place d'une connexion OAuth 2.0 via Google : vos utilisateurs pourront s'authentifier directement avec leur compte Google au sein de l'application.

🛠️ Configuration de l’application Google

🔐 Accéder à la Console Google Cloud :

Rendez-vous sur Google Cloud Console et connectez-vous avec votre compte Google.

🔐 Créer un projet :

Cliquez sur "Créer un projet". Donnez-lui un nom, puis cliquez sur "Créer".

Allez dans "API & Services" → "Consentement OAuth".
Choisissez type externe si vous souhaitez permettre à d'autres utilisateurs d'utiliser votre application.
Remplissez les champs requis, comme le nom de l'application et votre email.
Enregistrez.

🔒 Créer des identifiants OAuth 2.0 :

Rendez-vous dans "Identifiants" → "Créer des identifiants" → "Identifiants OAuth 2.0".
Sélectionnez Application web comme type.
Configurez les URI de redirection (callback URL) :
Par exemple :
```
http://localhost:3000/auth/google/callback
```
Cliquez sur Créer et notez votre Client ID et Client Secret.

🔐 Initialiser le Projet Node.js

🔐 Créer un projet Node.js :

mkdir oauth2-google-auth
cd oauth2-google-auth

npm init -y
npm install express passport passport-google-oauth20 express-session dotenv

🛠️ Configurer l’environnement :

Créez un fichier .env pour stocker vos identifiants OAuth :

GOOGLE_CLIENT_ID=<votre_client_id>
GOOGLE_CLIENT_SECRET=<votre_client_secret>
SESSION_SECRET=<votre_session_secret>
CALLBACK_URL=http://localhost:3000/auth/google/callback

🔐 Écrire le Code de l’Application

Créer un fichier app.js :

const express = require('express');
const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;
const session = require('express-session');
require('dotenv').config();

const app = express();

// Configuration de la session
app.use(session({
    secret: process.env.SESSION_SECRET,
    resave: false,
    saveUninitialized: true,
}));

// Initialisation de Passport
app.use(passport.initialize());
app.use(passport.session());

// Configuration de Passport avec Google OAuth
passport.use(new GoogleStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: process.env.CALLBACK_URL,
}, (accessToken, refreshToken, profile, done) => {
    // Stocker le profil utilisateur
    return done(null, profile);
}));

// Sérialiser les données utilisateur dans la session
passport.serializeUser((user, done) => {
    done(null, user);
});

// Désérialiser les données utilisateur depuis la session
passport.deserializeUser((user, done) => {
    done(null, user);
});

// Route principale
app.get('/', (req, res) => {
    res.send(`<h1>Bienvenue</h1><a href="/auth/google">Se connecter avec Google</a>`);
});

// Route pour démarrer l’authentification avec Google
app.get('/auth/google', passport.authenticate('google', {
    scope: ['profile', 'email'],
}));

// Route de callback après l'authentification
app.get('/auth/google/callback', 
    passport.authenticate('google', { failureRedirect: '/' }),
    (req, res) => {
        res.redirect('/dashboard');
    }
);

// Route protégée : tableau de bord
app.get('/dashboard', (req, res) => {
    if (!req.isAuthenticated()) {
        return res.redirect('/');
    }
    res.send(`<h1>Bonjour, ${req.user.displayName}!</h1><a href="/logout">Se déconnecter</a>`);
});

// Déconnexion
app.get('/logout', (req, res) => {
    req.logout(() => {
        res.redirect('/');
    });
});

// Lancer le serveur
const PORT = 3000;
app.listen(PORT, () => {
    console.log(`Serveur en cours d’exécution sur http://localhost:${PORT}`);
});

🔐 Tester l’Application

🔐 Lancer le serveur :

node app.js

🔐 Accéder à l’application :

Ouvrez votre navigateur et rendez-vous sur http://localhost:3000.

Cliquez sur "Se connecter avec Google".
Connectez-vous avec votre compte Google.
Une fois authentifié, vous serez redirigé vers le tableau de bord qui affichera votre nom.

🔐 Explications Techniques

Passport.js :

Un middleware d’authentification pour Node.js.
La stratégie passport-google-oauth20 est utilisée pour intégrer OAuth 2.0 avec Google.

Sessions avec Express :

Les informations utilisateur sont stockées dans une session pour persister entre les requêtes.

Callback URL :

Le point d’entrée où Google redirige après l’authentification.
Cette URL doit être enregistrée dans les paramètres OAuth de Google.

🔐 Allez plus loin

Ajouter une base de données pour stocker les utilisateurs.
Protéger les routes avec des middlewares pour vérifier si un utilisateur est authentifié.
Intégrer d'autres fournisseurs (GitHub, Facebook).

Cette activité pratique vous permet de comprendre le fonctionnement d’OAuth 2.0 et d’implémenter un flux d’authentification sécurisé et moderne.

Vérification rapide

Quiz du chapitre

2 questions

0 / 2 répondue0%

1Dans l'activité d'implémentation OAuth 2.0 avec Google, quel est le rôle du callback URL configuré dans la Console Google Cloud ?
C'est l'URL de l'API Google à laquelle votre application souhaite accéderC'est l'URL de votre application vers laquelle Google redirige avec le code d'autorisation après l'accord de l'utilisateurC'est l'URL où l'utilisateur saisit son mot de passe Google
2Parmi les packages installés dans cette activité, lequel est spécifiquement dédié à la stratégie d'authentification Google OAuth 2.0 ?
express-sessiondotenvpassport-google-oauth20

Authentification

Terminez le quiz du chapitre pour le marquer comme complété.

Tableau de bord

🔒 Activité Pratique : Implémentation d’une Authentification OAuth 2.0 avec Google

On this page