Cookieで記憶する

CoddyのNode.jsジャーニー「認証とセキュリティ」セクションの一部。レッスン 8/24。

HTTPはリクエストの間の状態を保持しません。リクエストはそれぞれ単独で届くため、サーバーは同じブラウザーから来たものかどうかを判別できません。Cookieを使うと、この問題を解決できます。サーバーはSet-Cookieヘッダーで応答し、ブラウザーはそのサイトへの以降のすべてのリクエストで、Cookieヘッダーに値を入れて送り返します。

res.cookie(name, value)はCookieを1つ設定します。req.get('cookie')は、ブラウザーが送信したCookieヘッダーを1行のテキストとして読み取ります。ExpressはCookieヘッダーを自動で読み取りません（cookie-parserパッケージを使えば読み取れます）。そのため、cookies.jsにはparseCookiesが用意されています。すべての値はテキストとして届きます。

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}`);
});

チャレンジ

簡単

GET /visitは、このブラウザーが何回呼び出したかを数える必要があります。サーバーはカウントを保存しません。カウントはクッキーに入れて送られ、ブラウザーはリクエストのたびにそれを送り返します。

server.jsのGET /visitで、このレッスンで示したようにparseCookiesを使って、ブラウザーが送ったクッキーを読み取ります。カウントはvisitsという名前のクッキーに入っています。これは"2"のようなテキストとして届きます。初回の訪問では存在しないため、0として扱います。
カウントに数値として1を足し、"2"が"21"ではなく3になるようにします。
visitsクッキーに新しいカウントを設定し、次回にブラウザーが送り返せるようにします。
新しいカウントをテキストではなく数値として返します。{"visits": 3}

試してみましょう：「実行」を押します。GET /visitを送信すると、{"visits": 1}が返ります。もう一度送信すると、{"visits": 2}が返ります。3回目に送信すると、{"visits": 3}が返ります。そのレスポンスの「Headers」タブを開きます。Set-Cookieにはvisits=3; Path=/と表示されます。

自分で試してみよう

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 });
});

// このブラウザが GET /visit を呼び出した回数を数えます。
app.get('/visit', (req, res) => {
    const visits = 1;
    res.json({ visits });
});

// メモ。現時点では誰でも読み書きできます。
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');
});

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

認証とセキュリティのすべてのレッスン

自分で練習してみよう: Expressプレイグラウンド