MERN에서 인증 마스터하기: 종합 가이드-JS 튜토리얼-php.cn

Mastering Authentication in MERN: A Comprehensive Guide

MERN에서 인증 마스터하기: 전체 가이드

인증은 사용자 데이터나 개인화된 경험을 처리하는 모든 애플리케이션에서 중요한 부분입니다. MERN 스택(MongoDB, Express, React, Node.js)에서 강력한 인증 시스템을 구축하려면 백엔드와 프런트엔드 프로세스를 모두 이해해야 합니다. 이 가이드는 주요 개념, 실제 사례 및 모범 사례를 다루면서 인증 설정 과정을 안내합니다.

1. 인증 유형

인증 방법을 이해하면 애플리케이션에 가장 적합한 접근 방식을 결정하는 데 도움이 됩니다.

세션 기반 인증: 서버측 세션과 쿠키를 사용하여 로그인한 사용자를 추적합니다.
토큰 기반 인증: JSON 웹 토큰(JWT)을 사용하여 사용자를 인증하고 검증합니다. 최신 웹 앱에서 일반적으로 사용됩니다.
제3자 인증: 사용자가 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 컨텍스트 및 후크를 사용하여 인증 관리:

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 및 보안 쿠키를 사용하세요.
속도 제한 구현: 무차별 대입 공격을 방지합니다.
새로고침 토큰 사용: 자주 로그인할 필요 없이 세션 기간을 연장하세요.
CORS 구성: 신뢰할 수 있는 출처에 대한 백엔드 액세스를 제한합니다.

결론

MERN의 인증은 백엔드 로직과 프런트엔드 관리가 혼합된 것입니다. 모범 사례를 따르면 안전하고 확장 가능하며 사용자 친화적인 인증 시스템을 만들 수 있습니다. 소셜 플랫폼, 전자상거래 사이트, SaaS 애플리케이션 등 인증 마스터링은 원활한 사용자 경험을 보장합니다.