Les sessions en ExpressJS
Un site Web est basé sur le protocole HTTP qui est un protocole sans état, ce qui signifie qu'à la fin de chaque
cycle de requête et de réponse, le client et le serveur s'oublient.
C'est là que la session entre en jeu. Une session contiendra des données uniques sur ce client pour permettre
au serveur de suivre l'état de l'utilisateur. Dans l'authentification basée sur la session, l'état de l'utilisateur est
stocké dans la mémoire du serveur ou dans une base de données.
Comment fonctionnent les séssions
Lorsque le client fait une demande de connexion au serveur, le serveur crée une session et la stocke côté
serveur. Lorsque le serveur répond au client, il envoie un cookie. Ce cookie contiendra l'identifiant unique de
la session stocké sur le serveur, qui sera désormais stocké sur le client. Ce cookie sera envoyé à chaque
requête au serveur.
Nous utilisons cet ID de session et recherchons la session enregistrée dans la base de données ou le
magasin de sessions pour maintenir une correspondance un à un entre une session et un cookie. Cela rendra
les connexions de protocole HTTP avec état.
La différence entre session et cookie
Un cookie est une paire clé-valeur stockée dans le navigateur. Le navigateur joint des cookies à chaque
requête HTTP envoyée au serveur.
Dans un cookie, vous ne pouvez pas stocker beaucoup de données. Un cookie ne peut stocker aucune sorte
d'informations d'identification d'utilisateur ou d'informations secrètes.
D'autre part, les données de session sont stockées côté serveur, c'est-à-dire une base de données ou un
magasin de session. Par conséquent, il peut accueillir de plus grandes quantités de données. Pour accéder
aux données côté serveur, une session est authentifiée avec une clé secrète ou un identifiant de session que
nous obtenons du cookie à chaque demande.
Pour démontrer la gestion de session dans Node, on peut développer un système de connexion et de
déconnexion de base. Dans cet utilisateur, l'utilisateur peut se connecter en fournissant son e-mail, et cet e-
mail sera utilisé pour un suivi ultérieur de la session. Une fois l'utilisateur déconnecté, la session sera détruite
et l'utilisateur sera redirigé vers la page d'accueil.
Bibliothèques requises
Les bibliothèques suivantes nous aideront à configurer une session Node.js.
• Express - un framework Web pour Node.js utilisé pour créer des serveurs Web HTTP. Express fournit
une API facile à utiliser pour interagir avec le serveur Web.
• Express-session - un framework côté serveur HTTP utilisé pour créer et gérer un middleware de
session.
• Cookie-parser - utilisé pour analyser l'en-tête du cookie afin de stocker des données sur le navigateur
chaque fois qu'une session est établie côté serveur.
npm install express express-session cookie-parser
Options de session express et comment les utiliser
1
Pour configurer la session, vous devez définir quelques options de session express , comme indiqué ci-
dessous.
const oneDay = 1000 * 60 * 60 * 24; // 24 heures
app.use(sessions({ secret: "mysecrctekey",
saveUninitialized:true,
cookie: { maxAge: oneDay },
resave: false }));
• secret- une clé de chaîne aléatoire unique utilisée pour authentifier une session. Il est stocké dans une
variable d'environnement et ne peut pas être exposé au public.
• resave- prend une valeur booléenne. Il permet à la session d'être stockée dans le magasin de
sessions, même si la session n'a jamais été modifiée lors de la demande. Cela peut entraîner une situation de
concurrence si un client fait deux requêtes parallèles au serveur. Ainsi, une modification effectuée sur la
session de la première requête peut être écrasée lorsque la deuxième requête se termine. La valeur par
défaut est true. Cependant, cela peut changer à un moment donné. False est une meilleure alternative.
• saveUninitialized- cela permet uninitialized d'envoyer n'importe quelle session au magasin. Lorsqu'une
session est créée mais pas modifiée, elle est appelée uninitialized.
• cookie: { maxAge: oneDay }- cela définit le délai d'expiration du cookie. Le navigateur supprimera le
cookie une fois la durée définie écoulée. Le cookie ne sera joint à aucune des demandes à l'avenir..
Mise en place du middleware de session
Pour initialiser la session, nous allons définir le middleware de session à l'intérieur des routes des requêtes
HTTP individuelles.
Lorsqu'un client envoie une demande, le serveur définit un ID de session et définit le cookie égal à cet ID de
session. Le cookie est ensuite stocké dans l'en-tête HTTP set cookie du navigateur. Chaque fois que le
navigateur (client) se rafraîchit, le cookie stocké fera partie de cette demande.
Nous allons créer un formulaire de connexion simple pour le démontrer. Créez un views dossier et ajoutez les
éléments suivants :
Voici le formulaire de connexion ( index.html)
. <html> <head> <link rel="stylesheet" href="views/app.css">
</head>
<body>
<form action="/user" method="post">
<h2>Login</h2>
<div class="input-field">
<input type="text" name="username" id="username" placeholder="Enter Username"> </div>
2
<div class="input-field"> <input type="password" name="password" id="password" placeholder="Enter
Password">
</div> <input type="submit" value="LogIn">
</form>
</body>
</html>
Et quelques CSS pour styliser le formulaire dans le dossier des vues ( app.css)
body { display: flex; justify-content: center; }
form { display: flex; flex-direction: column; }
.input-field { position: relative; margin-top: 2rem; }
.input-field input { padding: 0.8rem; }
form.input-field:first-child { margin-bottom: 1.5rem; }
form input[type="submit"] { background: linear-gradient(to left, #4776E6, #8e54e9); color: white; border-
radius: 4px;
margin-top: 2rem; padding: 0.4rem; }.
Créez un fichier app.js pour configurer le serveur de session, comme suit.
// importer les modules
const express = require('express');
const cookieParser = require("cookie-parser");
const sessions = require('express-session');
//Initialiser l'application express
const app = express();
const PORT = 4000;
// Ajouter les options de session express
// creating 24 hours from milliseconds
const oneDay = 1000 * 60 * 60 * 24;
//session middleware
app.use(sessions({ secret: « mysecret", saveUninitialized:true, cookie: { maxAge: oneDay }, resave: false
}));
//Analyser le formulaire HTML
// parsing the incoming data
3
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
//serving public file
app.use(express.static(__dirname));
Définir l'analyseur de cookies
afin que le serveur puisse accéder à l'option nécessaire pour enregistrer, lire et accéder à un cookie.
// cookie parser middleware
app.use(cookieParser());
Définir les identifiants d'authentification
//username and password
const myusername = 'user1'
const mypassword = 'mypassword'
var session; // a variable to save a session
Dans un environnement de production, ces informations d'identification sont généralement enregistrées dans
une base de données. Dans cet exemple, nous les stockons dans des variables.
Ajouter les points de terminaison
Nous devons faire trois itinéraires :
1, http://localhost:4000/
app.get('/',(req,res) => {
session=req.session;
if(session.userid){
res.send("Welcome User <a href=\'/logout'>click to logout</a>"); }
else
res.sendFile('views/index1.html',{root:__dirname})
});
2, http://localhost:4000/user
app.post('/user',(req,res) => {
if(req.body.username === myusername && req.body.password === mypassword){ session=req.session;
session.userid=req.body.username; console.log(req.session) ;
res.send("Hey there, welcome <a href=\'/logout'>click to logout</a>");
4
else
{ res.send('Invalid username or password'); }
})
Si les informations d'identification ne sont pas valides, le serveur n'accordera pas à cet utilisateur l'accès aux
ressources. Aucune session ne sera initialisée, et aucun cookie ne sera enregistré.
app.post('/user',(req,res) => {
if(req.body.username === myusername && req.body.password === mypassword){
session=req.session;
session.userid=req.body.username;
console.log(req.session) ;
res.send("Hey there, welcome <a href=\'/logout'>click to logout</a>");
else
{ res.send('Invalid username or password'); }
})
3. http://localhost:4000/logout (déconnexion)
Lorsque l'utilisateur se déconnecte, le serveur détruira ( req.session.destroy();) la session et effacera le
cookie côté client. Les cookies sont effacés dans le navigateur lorsque le maxAge expire.
app.get('/logout',(req,res) => { req.session.destroy(); res.redirect('/'); });
Écoutez le port du serveur
app.listen(PORT, () => console.log(`Server Running at port ${PORT}`));
Exécutez l'application en utilisant :
node app.js
Cela devrait démarrer le serveur sur le port défini 4000.
Ouvrez le serveur sur le navigateur sur route http://localhost:4000/, et vous serez servi avec ce formulaire de
connexion.
5
Pour être authentifié par le serveur, fournissez les informations d'identification spécifiées dans le serveur :
nom d'utilisateur en tant que user1et mot de passe en tant que mypassword.
Une fois que vous vous êtes connecté avec succès, une session sera générée et un cookie sera enregistré
dans le navigateur.
Avec console.log(req.session), on peut consulter l ’objet session
Chaque fois que vous actualisez cette page, la demande sera envoyée avec la valeur de ce cookie dans ce
domaine localhost. Si elle correspond à la valeur stockée de la session, le serveur authentifiera cet utilisateur.
Ouvrez l'outil d'inspection du navigateur > application > Cookies http://localhost:4000/.
6
Un cookie contient juste l'ID de session crypté et doit toujours maintenir une relation un à un avec la session
utilisateur. Le cookie sera valide jusqu'à ce que l'ensemble maxAge expire ou que l'utilisateur décide de se
déconnecter.
Lorsque l'utilisateur se déconnecte, la session est détruite. Il n'y a pas de session à comparer avec le cookie
enregistré. L'utilisateur devra se reconnecter pour créer un ID de session pour la nouvelle session de
connexion.
