JWT (JSON Web トークン) を使用して React に認証を実装する方法

認証は多くの Web アプリケーションにとって重要な部分であり、React でルートを保護するには、JSON Web Token (JWT) などのトークンがどのように機能するかを理解する必要があります。 JWT を使用すると、クライアントとサーバー間で情報を安全に送信できます。これは、最新の Web アプリケーションにユーザー認証を実装する場合に特に役立ちます。この記事では、JWT を使用して React に認証を実装する方法を学びます。

JWTとは何ですか?

JSON Web トークン (JWT) は、2 者間のクレームを表すために使用されるコンパクトで URL セーフなトークンです。 JWT は軽量でステートレスで実装が簡単であるため、シングルページ アプリケーション (SPA) の認証によく選ばれています。

一般的な JWT は 3 つの部分で構成されます。
1.ヘッダー: 署名アルゴリズムを含む、トークンに関するメタデータが含まれます。
2.ペイロード: ユーザー情報など、送信するクレーム (データ) が含まれます。
3.署名: 送信者が本人であることを確認し、メッセージが途中で変更されていないことを確認するために使用されます。

React で JWT 認証を実装する手順

1.バックエンドのセットアップ (Node.js Express JWT)

• 必要な依存関係をインストールします:express、jsonwebtoken、bcryptjs。
• シンプルな Express サーバーをセットアップし、ログインと保護されたデータ アクセスのためのルートを作成します。
• ログインに成功すると、JWT トークンを生成します。 バックエンド コードの例 (Node.js Express JWT):

const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const app = express();
const users = [{ username: 'test', password: 'a$...' }]; // Example user data

app.use(express.json());

app.post('/login', (req, res) => {
  const { username, password } = req.body;

  // Verify user credentials
  const user = users.find(u => u.username === username);
  if (user && bcrypt.compareSync(password, user.password)) {
    const token = jwt.sign({ username: user.username }, 'secretKey', { expiresIn: '1h' });
    return res.json({ token });
  } else {
    return res.status(401).send('Invalid credentials');
  }
});

app.listen(5000, () => console.log('Server running on port 5000'));

2.フロントエンドのセットアップ (React JWT):

• React の useState フックと useEffect フックを使用して認証状態を管理します。
• ログインに成功した後、JWT トークンをローカル ストレージまたは Cookie に保存します。
• JWT トークンを使用して、バックエンド API に対して認証されたリクエストを作成します。 フロントエンド コードの例 (React JWT):

import React, { useState } from 'react';
import axios from 'axios';

function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('http://localhost:5000/login', { username, password });
      localStorage.setItem('token', response.data.token); // Store the JWT
      alert('Login successful');
    } catch (error) {
      alert('Login failed');
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button type="submit">Login</button>
    </form>
  );
}

function Dashboard() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
      axios.get('http://localhost:5000/protected', {
        headers: { Authorization: `Bearer ${token}` }
      })
      .then(response => setData(response.data))
      .catch(error => console.error(error));
    }
  }, []);

  return (
    <div>
      <h1>Protected Dashboard</h1>
      <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}