MERN での認証をマスターする: 包括的なガイド-jsチュートリアル-php.cn

Mastering Authentication in MERN: A Comprehensive Guide

MERN での認証をマスターする: 完全ガイド

認証は、ユーザーデータやパーソナライズされたエクスペリエンスを扱うアプリケーションにとって重要な部分です。 MERN スタック (MongoDB、Express、React、Node.js) で堅牢な認証システムを構築するには、バックエンドプロセスとフロントエンドプロセスの両方を理解する必要があります。このガイドでは、認証の設定手順を説明し、主要な概念、実際の例、ベストプラクティスを取り上げます。

1.認証の種類

認証方法を理解すると、アプリケーションに最適なアプローチを決定するのに役立ちます:

セッションベースの認証: サーバー側のセッションと Cookie を使用して、ログインユーザーを追跡します。
トークンベースの認証: JSON Web トークン (JWT) を使用してユーザーを認証および検証します。最新の Web アプリで一般的に使用されます。
サードパーティ認証: ユーザーが Google、Facebook、GitHub などのプラットフォームを使用してログインできるようにします。

2.バックエンドのセットアップ

バックエンドは、ユーザー登録、ログイン、認証ロジックを処理します。

ステップ 1: 依存関係をインストールする

必要なパッケージをインストールすることから始めます:

npm install express mongoose bcrypt jsonwebtoken dotenv

ログイン後にコピー

ステップ 2: ユーザーモデルを定義する

Mongoose を使用して、ユーザー資格情報を安全に保存するためのスキーマを作成します。

const mongoose = require("mongoose");
const bcrypt = require("bcrypt");

const UserSchema = new mongoose.Schema({
  username: { type: String, required: true, unique: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
});

// Hash password before saving
UserSchema.pre("save", async function (next) {
  if (!this.isModified("password")) return next();
  this.password = await bcrypt.hash(this.password, 10);
  next();
});

module.exports = mongoose.model("User", UserSchema);

ログイン後にコピー

ステップ 3: 認証ルートを作成する

登録とログインのルートを実装します:

const express = require("express");
const User = require("./models/User");
const bcrypt = require("bcrypt");
const jwt = require("jsonwebtoken");
const router = express.Router();
const SECRET_KEY = "your_secret_key"; // Use dotenv in production

// Register Route
router.post("/register", async (req, res) => {
  const { username, email, password } = req.body;
  try {
    const user = new User({ username, email, password });
    await user.save();
    res.status(201).json({ message: "User registered successfully" });
  } catch (err) {
    res.status(500).json({ error: "Error registering user" });
  }
});

// Login Route
router.post("/login", async (req, res) => {
  const { email, password } = req.body;
  try {
    const user = await User.findOne({ email });
    if (!user) return res.status(404).json({ error: "User not found" });

    const isPasswordValid = await bcrypt.compare(password, user.password);
    if (!isPasswordValid) return res.status(401).json({ error: "Invalid password" });

    const token = jwt.sign({ id: user._id }, SECRET_KEY, { expiresIn: "1h" });
    res.status(200).json({ message: "Login successful", token });
  } catch (err) {
    res.status(500).json({ error: "Error logging in" });
  }
});

module.exports = router;

ログイン後にコピー

3.ミドルウェアによるバックエンドの保護

トークンを検証してルートを保護します:

const jwt = require("jsonwebtoken");

function authenticateToken(req, res, next) {
  const token = req.headers["authorization"];
  if (!token) return res.status(403).json({ error: "Access denied" });

  jwt.verify(token, "your_secret_key", (err, user) => {
    if (err) return res.status(403).json({ error: "Invalid token" });
    req.user = user;
    next();
  });
}

module.exports = authenticateToken;

ログイン後にコピー

安全なルートで使用します:

const express = require("express");
const authenticateToken = require("./middleware/authenticateToken");
const router = express.Router();

router.get("/profile", authenticateToken, (req, res) => {
  res.json({ message: `Welcome, User ${req.user.id}` });
});

ログイン後にコピー

4.フロントエンドのセットアップ

React フロントエンドはユーザーセッションを管理し、バックエンドと通信します。

ステップ 1: Axios をインストールする

Axios を使用して API リクエストを処理します:

npm install axios

ログイン後にコピー

ステップ 2: 認証コンテキストを作成する

認証を管理するために React Context とフックを使用する:

import React, { createContext, useState, useContext } from "react";
import axios from "axios";

const AuthContext = createContext();

export const useAuth = () => useContext(AuthContext);

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const login = async (email, password) => {
    const { data } = await axios.post("/api/login", { email, password });
    localStorage.setItem("token", data.token);
    setUser(data.user);
  };

  const logout = () => {
    localStorage.removeItem("token");
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

ログイン後にコピー

ステップ 3: 保護されたルートを構築する

認証されていないユーザーをリダイレクトします:

import React from "react";
import { Navigate } from "react-router-dom";
import { useAuth } from "./AuthProvider";

const ProtectedRoute = ({ children }) => {
  const { user } = useAuth();
  return user ? children : <Navigate to="/login" />;
};

export default ProtectedRoute;

ログイン後にコピー

5.トークンとセッション永続性の処理

実際の例

フィットネスアプリでは、ユーザーはページがリロードされた後でもセッションが持続することを期待します。適切なトークンの保管と検証がなければ、yu2019d は繰り返しログインする必要があります。

解決策

トークンを localStorage または sessionStorage に安全に保存します。
ページの読み込みごとにトークンを検証します。

例

npm install express mongoose bcrypt jsonwebtoken dotenv

ログイン後にコピー

6.セキュリティの強化

機密データの暗号化: HTTPS と安全な Cookie を使用します。
レート制限の実装: ブルートフォース攻撃を防止します。
リフレッシュトークンを使用する: 頻繁にログインすることなく、セッション期間を延長します。
CORS 構成: バックエンドアクセスを信頼できるオリジンに制限します。

結論

MERN の認証は、バックエンドロジックとフロントエンド管理を組み合わせたものです。ベストプラクティスに従うことで、安全でスケーラブルで使いやすい認証システムを作成できます。ソーシャルプラットフォーム、電子商取引サイト、SaaS アプリケーションのいずれであっても、認証をマスターすることでシームレスなユーザーエクスペリエンスが保証されます。