logo oujood
🔍

Authentification avec ExpressJS - Créer un Système de Connexion

Dans ce tutoriel, nous allons apprendre à créer un système d’authentification simple avec ExpressJS. Ce guide est fait pour les débutants : nous irons doucement, étape par étape, avec des explications très claires et un exemple que vous pourrez tester. Vous apprendrez à gérer une inscription et une connexion avec un mot de passe sécurisé

OUJOOD.COM

Introduction : Qu’est-ce que l’Authentification et Pourquoi l’Utiliser ?

L’authentification, c’est vérifier qui est l'utilisateur avant de lui donner accès à certaines parties d’un site. Par exemple, sur un site, vous entrez un email et un mot de passe pour prouver que c’est bien vous. Avec ExpressJS, nous allons utiliser des sessions pour suivre les utilisateurs connectés et bcrypt pour sécuriser les mots de passe. Notre exemple aura une page d’inscription et une page de connexion.

Étape 1 : Préparer Votre Environnement

Avant de coder, préparons tout ce qu’il faut. Si vous avez suivi les tutoriels précédents, vous avez déjà Node.js et ExpressJS. Si non voici les étapes à suivre :

  • Vérifiez Node.js : Ouvrez un terminal et tapez node -v. Si une version apparaît (ex. : v16.13.0), c’est bon. Sinon, téléchargez Node.js sur le site officiel : nodejs.org.
  • Créez un dossier projet : Faites un dossier nommé par exemple : "authentification-express" sur votre ordinateur.
  • Initialisez le projet : Dans le terminal, allez dans ce dossier avec la commande : cd chemin/vers/authentification-express, puis tapez la commande : npm init -y. Cela crée un fichier package.json.
  • Installez les outils nécessaires : Tapez npm install express express-session bcrypt. Voici ce que chaque outil fait :
    • express : Pour le serveur.
    • express-session : Pour suivre les utilisateurs connectés.
    • bcrypt : Pour sécuriser les mots de passe en les "hachant" (les rendant illisibles).

Étape 2 : Créer un Système d’Inscription

Commençons par permettre aux utilisateurs de s’inscrire avec un email et un mot de passe. Pour simplifier, nous stockerons les données dans une liste en mémoire (pas une vraie base de données pour ce tutoriel).

Exemple de Code : Inscription avec ExpressJS

Créez un fichier nommé index.js dans votre dossier "authentification-express" et ajoutez ce code. Il gère l’inscription.

📋 Copier le code

var express = require('express');
var session = require('express-session');
var bcrypt = require('bcrypt');
var app = express();

// Liste temporaire pour stocker les utilisateurs
var utilisateurs = [];

// Configurer les sessions et les formulaires
app.use(session({
    secret: 'monsecret',
    resave: false,
    saveUninitialized: false
}));
app.use(express.urlencoded({ extended: false }));

// Route pour afficher le formulaire d’inscription
app.get('/inscription', function(req, res) {
    res.send(`
        <html>
            <body>
                <h1>Inscription</h1>
                <form method="POST" action="/inscription">
                    <label>Email : </label>
                    <input type="email" name="email"><br>
                    <label>Mot de passe : </label>
                    <input type="password" name="motdepasse"><br>
                    <button type="submit">S’inscrire</button>
                </form>
                <p><a href="/connexion" title="Aller à la page de connexion">Déjà inscrit ? Connectez-vous</a></p>
            </body>
        </html>
    `);
});

// Route pour traiter l’inscription
app.post('/inscription', async function(req, res) {
    var email = req.body.email;
    var motdepasse = req.body.motdepasse;

    // Vérifier si l’email existe déjà
    var existe = utilisateurs.find(user => user.email === email);
    if (existe) {
        res.send("<html><body><h1>Cet email est déjà utilisé ! <a href='/inscription'>Réessayer</a></h1></body></html>");
    } else {
        // Hacher le mot de passe
        var motdepasseHache = await bcrypt.hash(motdepasse, 10);
        utilisateurs.push({ email: email, motdepasse: motdepasseHache });
        res.send("<html><body><h1>Inscription réussie ! <a href='/connexion'>Se connecter</a></h1></body></html>");
    }
});

app.listen(3000, function() {
    console.log("Serveur démarré sur http://localhost:3000/inscription");
});

Explication Détaillée du Code

Voici chaque ligne du cose expliquée très simplement :

  • var express = require('express'); : On importe ExpressJS pour le serveur.
  • var session = require('express-session'); : On importe express-session pour suivre les utilisateurs (utilisé plus tard).
  • var bcrypt = require('bcrypt'); : On importe bcrypt pour sécuriser les mots de passe.
  • var utilisateurs = []; : On crée une liste vide pour stocker les utilisateurs (comme une mini-base de données temporaire).
  • app.use(session({ ... })); : On configure les sessions avec une clé secrète ("monsecret").
  • app.use(express.urlencoded({ extended: false })); : On active la lecture des données des formulaires.
  • app.get('/inscription', ...); : Cette route affiche un formulaire pour entrer un email et un mot de passe.
  • app.post('/inscription', async function(req, res) { ... }); : Quand le formulaire est envoyé, on traite les données. async est nécessaire pour utiliser await avec bcrypt.
  • var email = req.body.email; : On récupère l’email du formulaire.
  • var motdepasse = req.body.motdepasse; : On récupère le mot de passe.
  • var existe = utilisateurs.find(...); : On vérifie si l’email est déjà dans la liste.
  • if (existe) { ... } : Si l’email existe, on affiche un message d’erreur.
  • var motdepasseHache = await bcrypt.hash(motdepasse, 10); : On "hache" le mot de passe (on le transforme en code sécurisé). 10 est le niveau de sécurité (plus c’est haut, plus c’est lent mais sûr).
  • utilisateurs.push(...); : On ajoute l’utilisateur à la liste avec son email et mot de passe haché.
  • res.send(`...`); : On confirme l’inscription.
  • app.listen(3000, ...); : On démarre le serveur.

Pour exécuter : Sauvegardez index.js, tapez node index.js, puis ouvrez <a href="http://localhost:3000/inscription" title="Tester l’inscription">http://localhost:3000/inscription</a>. Entrez un email (ex. : "test@example.com") et un mot de passe (ex. : "1234"), cliquez sur "S’inscrire". Vous verrez "Inscription réussie !".

Étape 3 : Ajouter la Connexion

Maintenant, ajoutons une page de connexion pour vérifier les utilisateurs inscrits et utiliser une session pour les suivre.

Exemple de Code : Système Complet avec Connexion

Mettez à jour index.js avec ce code. Il ajoute la connexion et une page protégée.

📋 Copier le code

var express = require('express');
var session = require('express-session');
var bcrypt = require('bcrypt');
var app = express();

// Liste temporaire pour stocker les utilisateurs
var utilisateurs = [];

// Configurer les sessions et les formulaires
app.use(session({
    secret: 'monsecret',
    resave: false,
    saveUninitialized: false
}));
app.use(express.urlencoded({ extended: false }));

// Route pour l’inscription
app.get('/inscription', function(req, res) {
    res.send(`
        <html>
            <body>
                <h1>Inscription</h1>
                <form method="POST" action="/inscription">
                    <label>Email : </label>
                    <input type="email" name="email"><br>
                    <label>Mot de passe : </label>
                    <input type="password" name="motdepasse"><br>
                    <button type="submit">S’inscrire</button>
                </form>
                <p><a href="/connexion" title="Aller à la page de connexion">Déjà inscrit ? Connectez-vous</a></p>
            </body>
        </html>
    `);
});

app.post('/inscription', async function(req, res) {
    var email = req.body.email;
    var motdepasse = req.body.motdepasse;
    var existe = utilisateurs.find(user => user.email === email);
    if (existe) {
        res.send("<html><body><h1>Cet email est déjà utilisé ! <a href='/inscription'>Réessayer</a></h1></body></html>");
    } else {
        var motdepasseHache = await bcrypt.hash(motdepasse, 10);
        utilisateurs.push({ email: email, motdepasse: motdepasseHache });
        res.send("<html><body><h1>Inscription réussie ! <a href='/connexion'>Se connecter</a></h1></body></html>");
    }
});

// Route pour la connexion
app.get('/connexion', function(req, res) {
    res.send(`
        <html>
            <body>
                <h1>Connexion</h1>
                <form method="POST" action="/connexion">
                    <label>Email : </label>
                    <input type="email" name="email"><br>
                    <label>Mot de passe : </label>
                    <input type="password" name="motdepasse"><br>
                    <button type="submit">Se connecter</button>
                </form>
                <p><a href="/inscription" title="Aller à la page d’inscription">Pas de compte ? Inscrivez-vous</a></p>
            </body>
        </html>
    `);
});

app.post('/connexion', async function(req, res) {
    var email = req.body.email;
    var motdepasse = req.body.motdepasse;
    var utilisateur = utilisateurs.find(user => user.email === email);

    if (utilisateur && await bcrypt.compare(motdepasse, utilisateur.motdepasse)) {
        req.session.utilisateur = email; // Stocker l’email dans la session
        res.send("<html><body><h1>Connexion réussie ! <a href='/prive'>Page privée</a></h1></body></html>");
    } else {
        res.send("<html><body><h1>Email ou mot de passe incorrect ! <a href='/connexion'>Réessayer</a></h1></body></html>");
    }
});

// Route protégée
app.get('/prive', function(req, res) {
    if (req.session.utilisateur) {
        res.send(`
            <html>
                <body>
                    <h1>Bienvenue, ${req.session.utilisateur} !</h1>
                    <p>Ceci est une page privée. <a href="/deconnexion">Se déconnecter</a></p>
                </body>
            </html>
        `);
    } else {
        res.send("<html><body><h1>Vous devez vous connecter ! <a href='/connexion'>Connexion</a></h1></body></html>");
    }
});

// Route pour se déconnecter
app.get('/deconnexion', function(req, res) {
    req.session.destroy();
    res.send("<html><body><h1>Déconnecté ! <a href='/connexion'>Se reconnecter</a></h1></body></html>");
});

app.listen(3000, function() {
    console.log("Serveur démarré sur http://localhost:3000/inscription");
});

Explication Détaillée du Code

Voici chaque nouvelle partie expliquée pour les débutants :

  • app.get('/connexion', ...); : Cette route affiche un formulaire de connexion.
  • app.post('/connexion', async function(req, res) { ... }); : Quand le formulaire est envoyé, on vérifie les informations.
  • var utilisateur = utilisateurs.find(...); : On cherche l’utilisateur par son email.
  • await bcrypt.compare(motdepasse, utilisateur.motdepasse) : On compare le mot de passe entré avec le mot de passe haché. bcrypt.compare vérifie si ça correspond.
  • req.session.utilisateur = email; : Si tout est correct, on stocke l’email dans la session pour dire "cet utilisateur est connecté".
  • app.get('/prive', ...); : Cette route est protégée. Si la session a un utilisateur, on affiche une page privée, sinon on redirige vers la connexion.
  • req.session.destroy(); : Pour la déconnexion, on supprime la session.

Pour exécuter : Sauvegardez index.js, tapez node index.js, allez à http://localhost:3000/inscription. Inscrivez-vous (ex. : "test@example.com", "1234"), puis connectez-vous à http://localhost:3000/connexion. Vous accéderez à la page privée !

Conclusion

Félicitations ! Vous savez maintenant créer un système d’authentification avec ExpressJS. Vous avez appris à inscrire des utilisateurs, sécuriser leurs mots de passe, et gérer leur connexion avec des sessions. Pour aller plus loin, explorez notre prochain tutoriel sur Créer une API RESTful avec ExpressJS ou consultez la documentation ExpressJS.


Cours precedent    Sommaire     Cours suivant