Comment créer une page de connexion avec des champs de nom d'utilisateur et de mot de passe ?

Nom d'utilisateur :

Mot de passe :

` : Conteneurs pour les étiquettes et les champs de saisie, facilitant le style et l'organisation.

* `` et `` :

* `label` :fournit une étiquette de texte pour le champ de saisie. L'attribut « for » doit correspondre à l'« id » du champ de saisie auquel il est associé.

* `input type="text"` :Crée un champ de saisie de texte pour le nom d'utilisateur. `name="username"` est important – le code côté serveur utilisera ce nom pour accéder à la valeur saisie par l'utilisateur. `obligatoire` rend le champ obligatoire.

* `` : Crée un champ de saisie de mot de passe. L'attribut `type="password"` masque l'entrée au fur et à mesure que l'utilisateur tape. `name="password"` est utilisé par le code côté serveur. `obligatoire` rend le champ obligatoire.

* `Connexion ` : Le bouton de soumission qui déclenche la soumission du formulaire.

* `

` : Un espace réservé pour afficher les messages d'erreur du serveur, si l'authentification échoue.

* ` ` : Liens vers votre fichier JavaScript pour toute validation côté client ou autres interactions.

2. Front-End (style CSS - `style.css`)

```css

corps {

famille de polices :sans-serif ;

couleur d'arrière-plan :#f4f4f4 ;

affichage :flexible;

justifier-contenu :centre ;

align-items :centre ;

hauteur min :100 vh ;

}

.conteneur de connexion {

couleur d'arrière-plan :#fff ;

remplissage :20 px ;

rayon de bordure : 8 px ;

box-shadow :0 0 10px rgba(0, 0, 0, 0.1);

largeur :300 px ;

}

.form-group {

marge inférieure :15 px ;

}

étiquette {

affichage :bloc;

marge inférieure :5 px ;

}

entrée[type="text"],

input[type="mot de passe"] {

largeur :100 %;

remplissage :8 px ;

bordure :1px solide #ccc ;

rayon de bordure :4 px ;

dimensionnement de la boîte :bordure-boîte ; /* Inclut le remplissage et la bordure dans la largeur et la hauteur totales de l'élément */

}

bouton {

couleur d'arrière-plan :#4CAF50 ;

couleur :blanc;

remplissage :10px 15px;

bordure :aucune ;

rayon de bordure :4 px ;

curseur :pointeur;

largeur :100 %;

}

bouton : survoler {

couleur d'arrière-plan :#3e8e41 ;

}

.message d'erreur {

couleur :rouge;

marge supérieure :10 px ;

}

```

Ce CSS fournit un style de base pour centrer le formulaire de connexion, styliser les champs de saisie et le bouton et fournir un indicateur visuel pour les messages d'erreur.

3. Front-End (JavaScript - `script.js` - Validation facultative côté client)

```javascript

document.getElementById('loginForm').addEventListener('submit', function(event) {

const nom d'utilisateur =document.getElementById('nom d'utilisateur').value;

const password =document.getElementById('password').value;

const errorMessageDiv =document.getElementById('errorMessage');

errorMessageDiv.textContent =''; // Efface les erreurs précédentes

si (!nom d'utilisateur || !mot de passe) {

errorMessageDiv.textContent ='Veuillez saisir le nom d'utilisateur et le mot de passe.';

event.preventDefault(); // Empêcher l'envoi du formulaire

retour;

}

// Vous pouvez ajouter ici une validation côté client plus complexe, comme des vérifications de la force du mot de passe.

});

```

Ce JavaScript ajoute une vérification de validation côté client indiquant que les champs de nom d'utilisateur et de mot de passe ont été remplis avant de soumettre le formulaire au serveur. C'est facultatif mais améliore l'expérience utilisateur en fournissant un retour immédiat.

4. Back-End (Node.js avec Express - Exemple)

Il s'agit d'un exemple de base utilisant Node.js et le framework Express. Vous devrez les installer :

```bash

npm install express body-analyseur bcrypt

```

* `express` : Un framework d'application Web pour Node.js.

* `body-parser` : Middleware pour analyser les corps des requêtes.

* `bcrypt` : Bibliothèque pour hacher les mots de passe en toute sécurité. (Important pour la sécurité !)

```javascript

const express =require('express');

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

const bcrypt =require('bcrypt');

const app =express();

port const =3000 ;

// Base de données utilisateur en mémoire (remplacer par une vraie base de données comme MongoDB ou PostgreSQL)

const utilisateurs =[]; // Tableau d'objets utilisateur {username, passwordHash}

app.use(bodyParser.urlencoded({ extended:false })); // Analyser les corps codés en URL

app.use(bodyParser.json()); // Analyser les corps JSON

app.use(express.static('public')); // Servir des fichiers statiques (HTML, CSS, JS) depuis le répertoire 'public'

app.get('/', (req, res) => {

res.sendFile(__dirname + '/public/login.html'); // Servir la page de connexion

});

app.post('/login', async (req, res) => {

const { nom d'utilisateur, mot de passe } =req.body;

const user =users.find(u => u.username ===username);

si (utilisateur) {

// Comparez le mot de passe fourni avec le hachage du mot de passe stocké

const passwordMatch =wait bcrypt.compare(password, user.passwordHash);

si (mot de passeMatch) {

// Authentification réussie

res.send('Connexion réussie !'); // Dans une application réelle, vous redirigeriez vers un tableau de bord ou définiriez un cookie de session.

} autre {

// Mot de passe invalide

res.status(401).send('Nom d'utilisateur ou mot de passe invalide');

}

} autre {

// Utilisateur introuvable

res.status(401).send('Nom d'utilisateur ou mot de passe invalide');

}

});

app.post('/register', async (req, res) => {

const { nom d'utilisateur, mot de passe } =req.body;

// Vérifie si le nom d'utilisateur existe déjà

if (users.find(u => u.username ===username)) {

return res.status(400).send('Le nom d'utilisateur existe déjà');

}

// Hachez le mot de passe

const saltRounds =10 ; // Ou plus pour un hachage plus fort

const passwordHash =wait bcrypt.hash(mot de passe, saltRounds);

// Stocke le nouvel utilisateur dans la base de données

utilisateurs.push({ nom d'utilisateur, mot de passeHash });

res.status(201).send('Utilisateur enregistré avec succès');

});

app.écouter(port, () => {

console.log(`Serveur écoutant sur http://localhost:${port}`);

});

```

Explication du code back-end :

1. Importations : Importe les modules nécessaires :`express`, `body-parser` et `bcrypt`.

2. Initialisation : Crée une instance d'application Express (« app ») et définit le port.

3. Middleware :

* `bodyParser.urlencoded({ extended:false })` :analyse les corps de requête codés en URL (données envoyées à partir de formulaires HTML). `extended :false` utilise la bibliothèque de chaînes de requête intégrée, tandis que `extended :true` utilise la bibliothèque `qs`, qui permet des structures d'objets plus complexes.

* `bodyParser.json()` :analyse les corps des requêtes JSON.

* `express.static('public')` :sert les fichiers statiques (HTML, CSS, JavaScript) à partir du répertoire `public`. C'est ici que vous placeriez vos fichiers `login.html`, `style.css` et `script.js`.

4. Route pour servir la page de connexion (`/`) :

* `app.get('/', ...)` :définit une route qui gère les requêtes GET vers le chemin racine (`/`).

* `res.sendFile(__dirname + '/public/login.html')` :envoie le fichier `login.html` au client. `__dirname` est le répertoire actuel du script, garantissant que le chemin du fichier est correct.

5. Route de gestion de la soumission de connexion (`/login`) :

* `app.post('/login', ...)` :définit une route qui gère les requêtes POST vers le chemin `/login`. C'est ici que les données du formulaire de connexion sont envoyées.

* `req.body` :Contient les données envoyées depuis le formulaire. Grâce à `body-parser`, vous pouvez accéder au nom d'utilisateur et au mot de passe en utilisant `req.body.username` et `req.body.password`.

* `users.find(u => u.username ===username)` :recherche dans le tableau `users` un utilisateur avec le nom d'utilisateur correspondant. (Dans une application réelle, vous interrogeriez votre base de données.)

* Hachage de mot de passe avec `bcrypt` :

* `bcrypt.compare(password, user.passwordHash)` :C'est la partie cruciale pour la sécurité. Il compare le mot de passe en clair saisi par l'utilisateur avec le *hash* stocké du mot de passe. `bcrypt` gère automatiquement le processus de salage. C'est beaucoup plus sûr que de stocker les mots de passe en texte brut.

* Logique d'authentification :

* Si un utilisateur est trouvé et que le mot de passe correspond, vous définissez généralement un cookie de session pour authentifier l'utilisateur et le rediriger vers une zone de connexion. Dans cet exemple, il envoie simplement un message « Connexion réussie ! message.

* Si l'utilisateur n'est pas trouvé ou si le mot de passe ne correspond pas, il envoie une réponse d'erreur (`401 Unauthorized`). Le JavaScript frontal peut alors afficher ce message d'erreur à l'utilisateur.

6. Route d'inscription

* Ajout d'un itinéraire d'enregistrement pour permettre l'ajout de nouveaux utilisateurs au système

* Les mots de passe ne sont pas stockés mais hachés pour assurer la sécurité

7. Démarrage du serveur :

* `app.listen(port, ...)` :démarre le serveur Express sur le port spécifié.

Considérations importantes et bonnes pratiques de sécurité :

* Base de données : Remplacez le tableau « utilisateurs » en mémoire par une vraie base de données (par exemple, MongoDB, PostgreSQL, MySQL). Utilisez une bibliothèque de base de données (comme Mongoose pour MongoDB ou Sequelize pour PostgreSQL/MySQL) pour interagir avec la base de données.

* Hashage de mot de passe : *Ne jamais* stocker les mots de passe en texte brut. Utilisez toujours un algorithme de hachage de mot de passe fort comme « bcrypt » (comme indiqué dans l'exemple). `bcrypt` inclut le salage, ce qui rend beaucoup plus difficile pour les attaquants de déchiffrer les mots de passe même s'ils obtiennent la base de données. Utilisez `bcrypt.hash()` pour hacher les mots de passe lorsque les utilisateurs s'inscrivent, et `bcrypt.compare()` pour comparer le mot de passe saisi avec le hachage stocké lors de la connexion.

* Validation des entrées : Validez les entrées de l'utilisateur à la fois côté client (pour l'expérience utilisateur) et côté serveur (pour la sécurité). Désinfectez les entrées pour empêcher les attaques par injection (par exemple, injection SQL, XSS).

* Gestion des sessions : Utilisez des sessions pour conserver l’état de connexion de l’utilisateur. Après une connexion réussie, stockez un identifiant de session dans un cookie sur le navigateur du client. Lors des demandes ultérieures, le serveur peut utiliser l'ID de session pour identifier l'utilisateur sans lui demander de se reconnecter. Des bibliothèques comme « express-session » peuvent aider à gérer les sessions.

* HTTPS : Utilisez toujours HTTPS (SSL/TLS) pour crypter la communication entre le client et le serveur. Cela empêche les écoutes clandestines et les attaques de l’homme du milieu. Obtenez un certificat SSL auprès d'une autorité de certification (par exemple, Let's Encrypt).

* Gestion des erreurs : Mettez en œuvre une gestion appropriée des erreurs pour éviter que des informations sensibles ne soient exposées dans les messages d’erreur. Enregistrez les erreurs en toute sécurité.

* Protection CSRF : Protégez-vous contre les attaques CSRF (Cross-Site Request Forgery) en utilisant des jetons CSRF.

* Limitation du débit : Implémentez une limitation de débit pour empêcher les attaques par force brute sur le point de terminaison de connexion.

Comment exécuter l'exemple :

1. Créer un répertoire de projet : Créez un répertoire pour votre projet (par exemple, « login-app »).

2. Créer des fichiers : Créez les fichiers suivants dans le répertoire du projet :

* `login.html` (copiez le code HTML)

* `style.css` (copiez le code CSS)

* `script.js` (copiez le code JavaScript)

* `server.js` (ou `app.js`, ou quel que soit le nom que vous voulez pour votre fichier serveur Node.js - copiez le code Node.js)

* Créez un dossier « public » et placez-y « login.html », « style.css » et « script.js ».

3. Installer les dépendances : Ouvrez un terminal dans le répertoire du projet et exécutez :

```bash

npm install express body-analyseur bcrypt

```

4. Exécutez le serveur : Dans le terminal, exécutez :

```bash

serveur de nœud.js

```

5. Ouvrir dans le navigateur : Ouvrez votre navigateur Web et accédez à « http://localhost:3000 ». Vous devriez voir la page de connexion.

N'oubliez pas qu'il s'agit d'un exemple basique. Pour une application réelle, vous devrez mettre en œuvre une intégration de base de données, une gestion de session et des mesures de sécurité appropriées.