Se souvenir avec les cookies

Fait partie de la section Authentification et sécurité du Journey Node.js de Coddy. Leçon 8 sur 24.

HTTP vous oublie entre les requêtes : chacune arrive seule, et le serveur ne peut pas savoir qu’elle provient du même navigateur. Un cookie résout ce problème. Le serveur répond avec un en-tête Set-Cookie, et le navigateur renvoie la valeur dans un en-tête Cookie à chaque requête ultérieure vers ce site.

res.cookie(name, value) en définit un. req.get('cookie') lit l’en-tête Cookie envoyé par le navigateur sous forme d’une seule ligne de texte. Express ne lit pas l’en-tête Cookie pour vous (le package cookie-parser le ferait), alors cookies.js vous fournit parseCookies. Chaque valeur arrive sous forme de texte.

app.get('/theme/:name', (req, res) => {
    res.cookie('theme', req.params.name);
    res.send('Saved');
});

app.get('/', (req, res) => {
    const { theme = 'light' } = parseCookies(req.get('cookie'));
    res.send(`Your theme is ${theme}`);
});

Défi

Facile

GET /visit doit compter combien de fois ce navigateur l’a appelé. Le serveur n’enregistre pas le nombre. Celui-ci est transmis dans un cookie, que le navigateur renvoie à chaque requête.

Dans server.js, dans GET /visit, lis les cookies envoyés par le navigateur en utilisant parseCookies, comme indiqué dans la leçon. Le nombre se trouve dans le cookie nommé visits. Il arrive sous forme de texte, comme "2". Lors de la première visite, il est absent, ce qui compte comme 0.
Ajoute 1 au nombre, en le traitant comme un nombre, pour que "2" devienne 3, et non "21".
Définis le cookie visits avec le nouveau nombre, afin que le navigateur le renvoie la prochaine fois.
Réponds avec le nouveau nombre, et non sous forme de texte : {"visits": 3}.

Essaie : Appuie sur « Jouer ». Envoie GET /visit : {"visits": 1}. Envoie-le à nouveau : {"visits": 2}. Envoie-le une troisième fois : {"visits": 3}. Ouvre l’onglet Headers de cette réponse : Set-Cookie indique visits=3; Path=/.

Essayez vous-même

import express from 'express';
import { parseCookies } from './cookies.js';
import { notes, users } from './db.js';
import { hashPassword, verifyPassword } from './passwords.js';

const app = express();
app.use(express.json());

app.post('/signup', async (req, res) => {
    const username = String(req.body.username ?? '').trim().toLowerCase();
    const password = String(req.body.password ?? '');
    if (!username || password.length < 8) {
        return res.status(400).json({ error: 'Pick a username and a password of at least 8 characters' });
    }
    if (await users.findOne({ username })) {
        return res.status(409).json({ error: 'That username is taken' });
    }
    await users.insertOne({ username, passwordHash: await hashPassword(password) });
    res.status(201).json({ username });
});

app.post('/login', async (req, res) => {
    const username = String(req.body.username ?? '').trim().toLowerCase();
    const user = await users.findOne({ username });
    if (!user || !(await verifyPassword(String(req.body.password ?? ''), user.passwordHash))) {
        return res.status(401).json({ error: 'Wrong username or password' });
    }
    res.json({ username: user.username });
});

// Compte le nombre de fois que ce navigateur a appelé GET /visit.
app.get('/visit', (req, res) => {
    const visits = 1;
    res.json({ visits });
});

// Notes. Pour l’instant, tout le monde peut les lire et en écrire.
app.get('/notes', async (req, res) => {
    res.json(await notes.find().toArray());
});

app.post('/notes', async (req, res) => {
    const note = { text: String(req.body.text ?? '') };
    await notes.insertOne(note);
    res.status(201).json(note);
});

app.listen(3000, () => {
    console.log('Vault is running on port 3000');
});

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Toutes les leçons de Authentification et sécurité

Entraînez-vous par vous-même : Playground Express