MERN での認証をマスターする: 包括的なガイド

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 アプリケーションのいずれであっても、認証をマスターすることでシームレスなユーザー エクスペリエンスが保証されます。

---

? 私たちとつながってください!

私たちは、イノベーションが繁栄し、テクノロジー愛好家が共に成長するコミュニティを構築しています。インスピレーションを与え、学び、創造する私たちの旅に参加しましょう!

?さらに詳しく:

• Discord: テクノロジー愛好家とつながりましょう
• WhatsApp: リアルタイムの更新情報を入手
• Telegram: 毎日の洞察とヒント

?毎日のインスピレーションを得るためにフォローしてください:

• Instagram: @thecampuscoders
• LinkedIn: @thecampuscoders
• Facebook: @thecampuscoders

---

? いつでもご来店ください!

? thecampuscoders.com

?テクノロジーの旅を促進するリソース、チュートリアル、アップデートを探索してください。

---

✨ 一緒に協力し、学び、未来を築きましょう!

アイデアや提案がありますか?私たちに連絡して、特別な何かに参加してください!

?お問い合わせ先: deepak@thecampuscoders.com

---

以上がMERN での認証をマスターする: 包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。