🧪 Activité Pratique : Mise en Place d’une Page Simple de Connexion avec Mot de Passe

Dans cette activité, nous allons créer une page de connexion simple en utilisant Node.js avec Express comme framework. Cette application permettra aux utilisateurs de saisir un nom d'utilisateur et un mot de passe, puis de les authentifier à l'aide d'une vérification simple.

Objectif de l'activité

Nous créons une page de connexion simple avec Node.js et Express : saisie d'un nom d'utilisateur et d'un mot de passe, puis authentification par une vérification simple (avec hachage bcrypt).

🔐 Initialiser le Projet Node.js

Créez un nouveau projet et installez les dépendances nécessaires :

mkdir simple-login
cd simple-login

npm init -y
npm install express body-parser bcrypt ejs

🔐 Créer la Structure des Fichiers

Organisez les fichiers comme suit :

- simple-login/
  - app.js
  - views/
    - login.ejs
    - dashboard.ejs
  - public/
    - styles.css
  - package.json

🛠️ Configurer le Serveur (app.js)

Voici le code du serveur principal :

const express = require('express');
const bodyParser = require('body-parser');
const bcrypt = require('bcrypt');

const app = express();

// configuration du hash
const saltRounds = 10;
const salt = bcrypt.genSaltSync(saltRounds);

// uniquement pour l'exercice on hash manuellement le mdp à ne pas reproduire !!!
const hashedPassword = bcrypt.hashSync("password123", salt);

// Middleware
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));
app.set('view engine', 'ejs');

// Simuler une base de données
const users = [
 { username: 'testuser', password: hashedPassword } // Password: "password123"
];

// Page de connexion
app.get('/', (req, res) => {
 res.render('login', { error: null });
});

// Vérification des identifiants
app.post('/login', async (req, res) => {
 const { username, password } = req.body;
 const user = users.find(u => u.username === username);
 if (!user) {
     return res.render('login', { error: 'Nom d’utilisateur incorrect.' });
 }

 const match = await bcrypt.compare(password, user.password);
 if (!match) {
     return res.render('login', { error: 'Mot de passe incorrect.' });
 }

 // Authentification réussie
 res.render('dashboard', { username });
});

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

🔐 Créer les Vues (EJS)

login.ejs (page de connexion) :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Connexion</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <div class="container">
        <h2>Connexion</h2>
        <% if (error) { %>
            <p class="error"><%= error %></p>
        <% } %>
        <form action="/login" method="POST">
            <label for="username">Nom d'utilisateur :</label>
            <input type="text" id="username" name="username" required>
            <label for="password">Mot de passe :</label>
            <input type="password" id="password" name="password" required>
            <button type="submit">Se connecter</button>
        </form>
    </div>
</body>
</html>

dashboard.ejs (page après connexion) :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tableau de bord</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <div class="container">
        <h2>Bienvenue, <%= username %> !</h2>
        <p>Vous êtes connecté avec succès.</p>
    </div>
</body>
</html>

🔐 Ajouter un Fichier CSS Simple (public/styles.css)

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.container {
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}
h2 {
    text-align: center;
    margin-bottom: 20px;
}
.error {
    color: red;
    text-align: center;
}
form {
    display: flex;
    flex-direction: column;
}
label {
    margin-bottom: 5px;
}
input {
    margin-bottom: 15px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
}
button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 3px;
    cursor: pointer;
}
button:hover {
    background-color: #0056b3;
}

🔐 Tester l’Application

Lancez le serveur avec la commande :
```
node app.js
```
Accédez à http://localhost:3000 dans votre navigateur.
Testez la connexion avec :
- Nom d’utilisateur : testuser
- Mot de passe : password123

🔐 Explications Techniques

bcrypt : Utilisé pour sécuriser les mots de passe en les hachant avant de les stocker dans une base de données.
EJS : Permet de créer des vues dynamiques en intégrant des variables côté serveur dans des pages HTML.
Body-parser : Middleware pour traiter les données soumises via un formulaire HTML.

Ce projet constitue une base pour explorer des systèmes d'authentification plus avancés comme ceux basés sur JWT ou OAuth, que nous verrons dans les prochains modules.

Vérification rapide

Quiz du chapitre

2 questions

0 / 2 répondue0%

1Dans l'activité de mise en place d'une page de connexion, pourquoi utilise-t-on bcrypt pour comparer les mots de passe ?
Pour comparer le mot de passe saisi avec son hash stocké sans jamais stocker le mot de passe en clairPour chiffrer les données du formulaire lors de leur transmissionPour générer automatiquement des mots de passe pour les utilisateurs
2Parmi les packages npm installés dans cette activité pratique, lequel est responsable de la gestion des vues HTML dynamiques ?
body-parserbcryptejs

Authentification

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

Tableau de bord

🧪 Activité Pratique : Mise en Place d’une Page Simple de Connexion avec Mot de Passe

On this page