Skip to Content
🎉 Utilisez JS efficacement →
AuthentificationLes protocolesExemples

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

Dans cette activité, nous allons mettre en place une authentification OAuthOAuth
Protocole d'autorisation permettant à une application d'accéder aux ressources d'un utilisateur sans connaître son mot de passe. 2.0 en utilisant Google comme fournisseur d’identité (IdP). L’application permettra aux utilisateurs de se connecter avec leur compte Google.

🛠️ 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”.

🛠️ Configurer l’OAuth Consent Screen (écran de consentement OAuth) :

  • Allez dans “APIAPI
    Application Programming Interface – interface permettant à deux applications de communiquer entre elles.     & 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 URLURL
    Uniform Resource Locator – adresse unique identifiant une ressource sur le web.    ) :
    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 middlewaremiddleware
    Fonction exécutée avant le traitement d'une requête, utilisée pour l'authentification, les redirections, etc.     d’authentification pour Node.jsNode.js
    Environnement d'exécution JavaScript côté serveur, basé sur le moteur V8 de Chrome.    .
  • La stratégie passport-google-oauth20 est utilisée pour intégrer OAuth 2.0 avec Google.

Sessions avec ExpressExpress
Framework minimaliste pour Node.js facilitant la création de serveurs web et d'API. :

  • Les informations utilisateur sont stockées dans une sessionsession
    Mécanisme côté serveur pour maintenir l'état d'un utilisateur connecté entre les requêtes.     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.

mis à jour le
ComparatifsSessions et cookies