Zenn
🙄

JSON Web Token (JWT) とは？

2023/10/07に公開
JWT
テックギーク
tech

Webアプリケーションやモバイルアプリの認証で一般的に使用される、JWT（JSON Web Token）について勉強した内容のまとめです。

1. JWTとは？

JWT（JSON Web Token）は、デジタル署名付きの情報をコンパクトな形式で伝達するためのトークンです。主に認証や情報交換に利用され、ユーザー情報や権限などを安全に伝送する際に活用されます。

2. JWTの構造

JWTは主に3つの部分から成り立っています：

  • Header（ヘッダー）: JWTの種類や、シグネチャに使用する暗号アルゴリズム情報が格納されます。
  • Payload（ペイロード）: トークンの主要な情報部分で、例えばユーザーIDや有効期限などが含まれます。
  • Signature（シグネチャ）: HeaderとPayloadを結合し、秘密鍵を使用して署名を生成します。この部分がトークンの正当性を保証します。

3. どうやって動くの？

以下は簡単なログインプロセスの例です。

  1. ユーザーがログイン情報を提供。
  2. サーバーがその情報を確認し、正しければJWTを生成してクライアントに返す。
  3. クライアントはその後のリクエストでこのJWTをヘッダーに含めてサーバーに送信。
  4. サーバーはJWTを検証し、有効であればリクエストを処理。

4. コードで見るJWT

以下は、Node.jsのExpressフレームワークを使用した簡単なJWTの使用例です。

import jwt from 'jsonwebtoken';

// トークンの検証ミドルウェア
function authenticateToken(req, res, next) {
  const token = req.headers['authorization'];

  if (token == null) return res.sendStatus(401);

  jwt.verify(token, process.env.ACCESS_TOKEN_SECRET, (err, user) => {
    if (err) return res.sendStatus(403);
    req.user = user;
    next();
  });
}

app.get('/dashboard', authenticateToken, (req, res) => {
  res.send('This is a protected dashboard!');
});

このコードは、/dashboardへのアクセスをJWTで保護しています。有効なトークンがヘッダーに含まれている場合のみ、ダッシュボードを表示します。

クライアント側とサーバー側でのJWTの保存方法は大きく異なります。以下にそれぞれの保存方法を説明します。

5. 情報の保管場所

  • クライアント側は、LocalStorage、SessionStorage、Cookieなどを使用してJWTを保存することが一般的です。
  • サーバー側は、通常JWTを保存しないが、特定の要件（例: トークンのブラックリスト化）に応じて保存することもあるらしい。※この辺りはネットで軽く調べた情報で、よく分かりません。

理解度チェッククイズ

  1. JWTはどのような用途で主に使用されますか？

    回答を表示

    JWTは主に認証や情報交換のために使用されます。ユーザー情報や権限などを安全に伝送する際に活用されます。

  2. JWTの3つの主要な部分とは何ですか？

    回答を表示

    JWTは3つの部分から成り立っています：Header（ヘッダー）、Payload（ペイロード）、およびSignature（シグネチャ）です。

  3. AuthorizationヘッダーのBearerの後ろに続くものは何ですか？

    回答を表示

    Bearerの後ろに続くのは実際のJWTの値（トークン）です。

  4. サーバー側は通常JWTをどのように保存しますか？

    回答を表示

    通常、サーバー側はJWTを保存しません。JWTの主な利点の一つは、ステートレス（状態を持たない）であることです。サーバーはJWTをクライアントに発行した後、それを覚えておく必要はありません。

  5. クライアント側でJWTを保存するための一般的な方法は？

    回答を表示

    クライアント側では、LocalStorage、SessionStorage、およびCookieなどを使用してJWTを保存することが一般的です。

以上です。

Discussion