Web アプリでの JWT 認証の作成と保護

導入

JSON Web Token (JWT) は、関係者間で情報を JSON オブジェクトとして安全に送信するためのコンパクトで自己完結型の方法です。 JWT は、Web アプリケーションでのユーザーの認証に広く使用されています。このチュートリアルでは、JWT 認証を使用して Node.js と Express バックエンドを構築します。

JWTとは何ですか?

JWT (JSON Web Token) は、当事者間で情報を JSON オブジェクトとして安全に送信するためのオープンスタンダードです。各トークンは 3 つの部分で構成されます:

1. ヘッダー: トークンのタイプとハッシュ アルゴリズムに関する情報が含まれます。
2. ペイロード: ユーザー情報とクレームが含まれます。
3. 署名: トークンの整合性を検証します。

JWT の例

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIxMjM0IiwidXNlcm5hbWUiOiJqb2huZG9lIn0.H6BBiB1y5eXKXvW9bbjT2Rg8Jp4oE4Y5Kxf_sDF7Kzg

プロジェクトのセットアップ

1. 新しいプロジェクト ディレクトリを作成します:
   

   mkdir jwt-auth-app
   cd jwt-auth-app
   

2. 新しい Node.js プロジェクトを初期化します:
   

   npm init -y
   

依存関係のインストール

必要な依存関係をインストールします:

npm install express jsonwebtoken bcryptjs dotenv express-validator

• express: Node.js 用の Web フレームワーク。
• jsonwebtoken: JWT を生成および検証するためのライブラリ。
• bcryptjs: パスワードをハッシュするためのライブラリ。
• dotenv: 環境変数用。
• express-validator: 入力データの検証用。

サーバーの構成

server.js で基本的なサーバー設定を作成します:

// server.js
require('dotenv').config();
const express = require('express');
const app = express();
app.use(express.json());

// Import Routes
const authRoutes = require('./routes/auth');
app.use('/api/auth', authRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

環境変数を保存するための .env ファイルを作成します:

PORT=5000
JWT_SECRET=your_jwt_secret_key

ユーザー認証ルートの作成

1. 認証ルート用のroutes/auth.jsファイルを作成します。

// routes/auth.js
const express = require('express');
const { body, validationResult } = require('express-validator');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const router = express.Router();

const users = []; // In-memory user storage

// Signup Route
router.post(
  '/signup',
  [
    body('username').isLength({ min: 3 }),
    body('password').isLength({ min: 5 })
  ],
  async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) return res.status(400).json({ errors: errors.array() });

    const { username, password } = req.body;
    const hashedPassword = await bcrypt.hash(password, 10);

    users.push({ username, password: hashedPassword });
    res.status(201).json({ message: 'User registered successfully' });
  }
);

// Login Route
router.post(
  '/login',
  [
    body('username').notEmpty(),
    body('password').notEmpty()
  ],
  async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) return res.status(400).json({ errors: errors.array() });

    const { username, password } = req.body;
    const user = users.find(u => u.username === username);

    if (!user) return res.status(400).json({ message: 'Invalid credentials' });

    const isMatch = await bcrypt.compare(password, user.password);
    if (!isMatch) return res.status(400).json({ message: 'Invalid credentials' });

    const token = jwt.sign({ username }, process.env.JWT_SECRET, { expiresIn: '1h' });
    res.json({ token });
  }
);

module.exports = router;

1. ルートの説明

• サインアップ ルート: ユーザーを保存する前にパスワードを検証してハッシュします。
• ログイン ルート: 資格情報を検証し、パスワードを確認し、JWT トークンを発行します。

JWT トークンの生成

• jwt.sign メソッドは、ユーザーの情報を含むトークンを生成します。
• JWT_SECRET はトークンの署名に使用され、安全かつ非公開に保つ必要があります。

const token = jwt.sign({ username }, process.env.JWT_SECRET, { expiresIn: '1h' });

JWT によるルートの保護

ルートを保護するには、トークンを検証するミドルウェアを作成します。

1. ミドルウェア/auth.js を作成します。

// middleware/auth.js
const jwt = require('jsonwebtoken');

module.exports = function (req, res, next) {
  const token = req.header('Authorization')?.split(' ')[1];
  if (!token) return res.status(401).json({ message: 'Access denied' });

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded;
    next();
  } catch (ex) {
    res.status(400).json({ message: 'Invalid token' });
  }
};

1. server.js のルートを保護する:

有効なトークンを必要とする保護されたルートを作成します:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIxMjM0IiwidXNlcm5hbWUiOiJqb2huZG9lIn0.H6BBiB1y5eXKXvW9bbjT2Rg8Jp4oE4Y5Kxf_sDF7Kzg

ミドルウェアの説明

• ミドルウェアは、Authorization ヘッダー内のトークンの存在を確認します。
• トークンが有効な場合、ユーザーの情報が req オブジェクトに追加され、保護されたルートへのアクセスが許可されます。

結論

このチュートリアルでは、Node.js および Express バックエンドでの JWT 認証の設定の基本について説明しました。このガイドでは次のことを説明しました:

1. サインアップとログインのための認証ルートを設定します。
2. JWT トークンの作成と検証。
3. JWT ベースのミドルウェアを使用してルートを保護します。

JWT は認証を処理する強力な方法であり、Web アプリケーションを安全かつスケーラブルにします。

以上がWeb アプリでの JWT 認証の作成と保護の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。