🎯 왜 OAuth 2.0과 JWT를 알아야 할까?

요즘 웹 서비스를 보면 "구글로 로그인", "카카오로 시작하기" 같은 버튼들 많이 봤지? 🤔 이게 바로 OAuth 2.0을 활용한 소셜 로그인이야. 그리고 로그인 후에 서버가 너를 기억하는 방법 중 하나가 바로 JWT를 사용하는 거지.

전통적인 세션 기반 인증은 서버에 사용자 정보를 저장해야 했어. 사용자가 많아지면? 서버 메모리가 터져버리는 거야! 💥 하지만 JWT는 토큰 자체에 정보를 담아서 서버 부담을 확 줄여줘. OAuth 2.0은 비밀번호를 직접 주고받지 않고도 안전하게 인증할 수 있게 해주고 말이야.

🔑 OAuth 2.0 완전 해부하기

OAuth 2.0이 뭐길래?

OAuth 2.0은 인가(Authorization) 프레임워크야. 여기서 중요한 건 "인증(Authentication)"이 아니라 "인가"라는 점! 🎭 쉽게 말하면, "이 사람이 누구인지"를 확인하는 게 아니라 "이 사람이 무엇을 할 수 있는지"를 결정하는 거야.

예를 들어볼게. 너가 어떤 사진 편집 앱을 사용하는데, 이 앱이 구글 드라이브에 있는 너의 사진에 접근하고 싶어 해. 이때 OAuth 2.0을 사용하면 구글 계정 비밀번호를 앱에 알려주지 않고도, "이 앱이 내 드라이브의 사진만 볼 수 있게 허락할게"라고 할 수 있는 거지! 🎨

OAuth 2.0의 핵심 등장인물들

OAuth 2.0의 4가지 인증 방식 (Grant Types)

OAuth 2.0은 상황에 따라 다른 인증 방식을 제공해. 마치 상황에 맞는 옷을 입는 것처럼 말이야! 👔👗

1️⃣ Authorization Code Grant (가장 안전하고 많이 쓰임)

이 방식의 흐름을 단계별로 살펴볼게:

Step 1: 사용자가 클라이언트 앱에서 "구글로 로그인" 버튼을 클릭 🖱️

Step 2: 클라이언트가 사용자를 Authorization Server로 리다이렉트
이때 URL에 여러 파라미터를 포함시켜:

https://accounts.google.com/o/oauth2/v2/auth?
  client_id=YOUR_CLIENT_ID
  &redirect_uri=https://yourapp.com/callback
  &response_type=code
  &scope=profile email
  &state=random_string_for_security

Step 3: 사용자가 구글에 로그인하고 권한 승인 ✅
"이 앱이 당신의 프로필과 이메일에 접근하는 것을 허용하시겠습니까?" 같은 화면이 나와.

Step 4: Authorization Server가 Authorization Code를 발급하고 redirect_uri로 리다이렉트

https://yourapp.com/callback?code=AUTHORIZATION_CODE&state=random_string_for_security

Step 5: 클라이언트가 이 코드를 가지고 Authorization Server에 Access Token 요청
이때는 서버 간 통신이라 사용자 브라우저를 거치지 않아. 더 안전하지! 🔒

POST https://oauth2.googleapis.com/token
Content-Type: application/x-www-form-urlencoded

code=AUTHORIZATION_CODE
&client_id=YOUR_CLIENT_ID
&client_secret=YOUR_CLIENT_SECRET
&redirect_uri=https://yourapp.com/callback
&grant_type=authorization_code

Step 6: Authorization Server가 Access Token (그리고 보통 Refresh Token도) 발급 🎫

{
  "access_token": "ya29.a0AfH6SMBx...",
  "expires_in": 3600,
  "refresh_token": "1//0gOZp8qT...",
  "scope": "profile email",
  "token_type": "Bearer"
}

Step 7: 이제 이 Access Token으로 Resource Server(구글 드라이브 등)에 API 요청! 🚀

2️⃣ Implicit Grant (단순하지만 보안 약함)

예전에는 SPA(Single Page Application)에서 많이 썼는데, 요즘은 보안 문제로 권장하지 않아. 😰 Authorization Code 없이 바로 Access Token을 받는 방식이야.

https://accounts.google.com/o/oauth2/v2/auth?
  client_id=YOUR_CLIENT_ID
  &redirect_uri=https://yourapp.com/callback
  &response_type=token
  &scope=profile email

리다이렉트 시 URL fragment(#)에 토큰이 바로 포함돼:

https://yourapp.com/callback#access_token=ya29.a0AfH6SMBx...&token_type=Bearer&expires_in=3600

3️⃣ Resource Owner Password Credentials Grant

사용자가 클라이언트에 직접 아이디/비밀번호를 입력하는 방식. 신뢰할 수 있는 자사 앱에서만 사용해야 해! 🏢

POST https://oauth2.googleapis.com/token
Content-Type: application/x-www-form-urlencoded

grant_type=password
&username=user@example.com
&password=user_password
&client_id=YOUR_CLIENT_ID
&client_secret=YOUR_CLIENT_SECRET

이 방식은 OAuth의 철학(비밀번호를 공유하지 않기)에 어긋나서 레거시 시스템 마이그레이션 같은 특수한 경우가 아니면 사용하지 않는 게 좋아.

4️⃣ Client Credentials Grant

사용자가 아닌 애플리케이션 자체가 인증받는 방식. 서버 간 통신(Machine-to-Machine)에서 사용해! 🤖

POST https://oauth2.googleapis.com/token
Content-Type: application/x-www-form-urlencoded

grant_type=client_credentials
&client_id=YOUR_CLIENT_ID
&client_secret=YOUR_CLIENT_SECRET
&scope=api.read

예를 들어, 너의 백엔드 서버가 다른 회사의 API를 호출할 때 사용하는 거야. 사용자 컨텍스트가 없고 순수하게 앱 대 앱 통신이지.

PKCE: 모바일/SPA를 위한 보안 강화

PKCE(Proof Key for Code Exchange, "픽시"라고 읽어)는 Authorization Code Grant를 더 안전하게 만들어주는 확장 기능이야. 📱 특히 모바일 앱이나 SPA처럼 클라이언트 시크릿을 안전하게 보관할 수 없는 환경에서 필수야!

// JavaScript 예제
// 1. Code Verifier 생성
function generateCodeVerifier() {
  const array = new Uint8Array(32);
  crypto.getRandomValues(array);
  return base64URLEncode(array);
}

// 2. Code Challenge 생성
async function generateCodeChallenge(verifier) {
  const encoder = new TextEncoder();
  const data = encoder.encode(verifier);
  const hash = await crypto.subtle.digest('SHA-256', data);
  return base64URLEncode(new Uint8Array(hash));
}

// 3. Authorization 요청
const codeVerifier = generateCodeVerifier();
const codeChallenge = await generateCodeChallenge(codeVerifier);

window.location.href = `https://accounts.google.com/o/oauth2/v2/auth?
  client_id=YOUR_CLIENT_ID
  &redirect_uri=https://yourapp.com/callback
  &response_type=code
  &scope=profile email
  &code_challenge=${codeChallenge}
  &code_challenge_method=S256`;

// 4. Token 요청 시 code_verifier 포함
fetch('https://oauth2.googleapis.com/token', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({
    code: authorizationCode,
    client_id: 'YOUR_CLIENT_ID',
    redirect_uri: 'https://yourapp.com/callback',
    grant_type: 'authorization_code',
    code_verifier: codeVerifier
  })
});

🎫 JWT(JSON Web Token) 마스터하기

JWT가 뭐야?

JWT는 JSON 형식의 정보를 안전하게 전송하기 위한 토큰이야. 세 부분으로 나뉘어져 있고, 점(.)으로 구분돼 있어:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

[Header].[Payload].[Signature]

이 이상한 문자열이 실제로는 엄청난 정보를 담고 있어! 🎁 하나씩 뜯어볼까?

JWT의 3가지 구성 요소

1. Header (헤더)

토큰의 타입과 해싱 알고리즘 정보를 담고 있어:

{
  "alg": "HS256",  // 알고리즘: HMAC SHA256
  "typ": "JWT"     // 타입: JWT
}

이걸 Base64Url로 인코딩하면 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9가 돼.

2. Payload (페이로드)

실제 전달하려는 데이터가 들어가는 부분! 여기에는 Claim이라는 정보 조각들이 들어가:

{
  "sub": "1234567890",        // Subject: 토큰 주체 (사용자 ID)
  "name": "John Doe",         // 사용자 이름
  "email": "john@example.com",
  "role": "admin",            // 사용자 역할
  "iat": 1516239022,          // Issued At: 발급 시간
  "exp": 1516242622           // Expiration: 만료 시간
}

3. Signature (서명)

토큰이 변조되지 않았음을 증명하는 부분이야. Header와 Payload를 합치고, 비밀 키로 서명해:

HMACSHA256(
  base64UrlEncode(header) + "." + base64UrlEncode(payload),
  secret
)

이 서명 덕분에 누군가 토큰 내용을 조작하면 바로 알 수 있어! 🔍 서버만 알고 있는 비밀 키로 서명했기 때문에, 같은 키로 검증하면 위조 여부를 확인할 수 있지.

JWT 실전 구현하기

Node.js에서 JWT 생성하기

// jsonwebtoken 라이브러리 사용
const jwt = require('jsonwebtoken');

// JWT 생성
function generateToken(user) {
  const payload = {
    sub: user.id,
    email: user.email,
    role: user.role,
    iat: Math.floor(Date.now() / 1000)
  };
  
  const secret = process.env.JWT_SECRET; // 환경변수에서 비밀키 가져오기
  const options = {
    expiresIn: '1h',  // 1시간 후 만료
    issuer: 'myapp.com'
  };
  
  return jwt.sign(payload, secret, options);
}

// 사용 예시
const user = { id: 123, email: 'user@example.com', role: 'user' };
const token = generateToken(user);
console.log(token);

JWT 검증하기

// JWT 검증 미들웨어
function authenticateToken(req, res, next) {
  // Authorization 헤더에서 토큰 추출
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1]; // "Bearer TOKEN"
  
  if (!token) {
    return res.status(401).json({ error: '토큰이 없습니다' });
  }
  
  jwt.verify(token, process.env.JWT_SECRET, (err, decoded) => {
    if (err) {
      if (err.name === 'TokenExpiredError') {
        return res.status(401).json({ error: '토큰이 만료되었습니다' });
      }
      return res.status(403).json({ error: '유효하지 않은 토큰입니다' });
    }
    
    // 검증 성공! 디코딩된 정보를 req에 저장
    req.user = decoded;
    next();
  });
}

// 보호된 라우트에 적용
app.get('/api/profile', authenticateToken, (req, res) => {
  // req.user에 토큰의 payload 정보가 들어있음
  res.json({
    message: '프로필 정보',
    user: req.user
  });
});

Python (Flask)에서 JWT 사용하기

from flask import Flask, request, jsonify
from flask_jwt_extended import (
    JWTManager, create_access_token, 
    jwt_required, get_jwt_identity
)
from datetime import timedelta

app = Flask(__name__)
app.config['JWT_SECRET_KEY'] = 'your-secret-key'
app.config['JWT_ACCESS_TOKEN_EXPIRES'] = timedelta(hours=1)
jwt = JWTManager(app)

# 로그인 엔드포인트
@app.route('/login', methods=['POST'])
def login():
    username = request.json.get('username')
    password = request.json.get('password')
    
    # 실제로는 DB에서 사용자 확인
    if username == 'test' and password == 'password':
        # JWT 생성
        access_token = create_access_token(
            identity=username,
            additional_claims={'role': 'admin'}
        )
        return jsonify(access_token=access_token), 200
    
    return jsonify(error='Invalid credentials'), 401

# 보호된 라우트
@app.route('/protected', methods=['GET'])
@jwt_required()
def protected():
    current_user = get_jwt_identity()
    return jsonify(logged_in_as=current_user), 200

Java (Spring Boot)에서 JWT 구현

import io.jsonwebtoken.*;
import io.jsonwebtoken.security.Keys;
import java.security.Key;
import java.util.Date;

public class JwtUtil {
    private static final Key SECRET_KEY = Keys.secretKeyFor(SignatureAlgorithm.HS256);
    private static final long EXPIRATION_TIME = 3600000; // 1시간
    
    // JWT 생성
    public static String generateToken(String userId, String role) {
        Date now = new Date();
        Date expiryDate = new Date(now.getTime() + EXPIRATION_TIME);
        
        return Jwts.builder()
                .setSubject(userId)
                .claim("role", role)
                .setIssuedAt(now)
                .setExpiration(expiryDate)
                .signWith(SECRET_KEY)
                .compact();
    }
    
    // JWT 검증 및 파싱
    public static Claims validateToken(String token) {
        try {
            return Jwts.parserBuilder()
                    .setSigningKey(SECRET_KEY)
                    .build()
                    .parseClaimsJws(token)
                    .getBody();
        } catch (ExpiredJwtException e) {
            throw new RuntimeException("토큰이 만료되었습니다");
        } catch (JwtException e) {
            throw new RuntimeException("유효하지 않은 토큰입니다");
        }
    }
    
    // 사용자 ID 추출
    public static String getUserIdFromToken(String token) {
        Claims claims = validateToken(token);
        return claims.getSubject();
    }
}

Access Token vs Refresh Token 전략

실전에서는 보통 두 가지 토큰을 함께 사용해! 🎭

토큰 갱신 플로우 구현

// Node.js 예제
const express = require('express');
const jwt = require('jsonwebtoken');
const router = express.Router();

// Refresh Token 저장소 (실제로는 Redis나 DB 사용)
const refreshTokens = new Set();

// 로그인
router.post('/login', async (req, res) => {
  const { username, password } = req.body;
  
  // 사용자 인증 (실제로는 DB 확인)
  const user = await authenticateUser(username, password);
  if (!user) {
    return res.status(401).json({ error: '인증 실패' });
  }
  
  // Access Token 생성 (15분)
  const accessToken = jwt.sign(
    { sub: user.id, email: user.email },
    process.env.ACCESS_TOKEN_SECRET,
    { expiresIn: '15m' }
  );
  
  // Refresh Token 생성 (7일)
  const refreshToken = jwt.sign(
    { sub: user.id },
    process.env.REFRESH_TOKEN_SECRET,
    { expiresIn: '7d' }
  );
  
  // Refresh Token 저장
  refreshTokens.add(refreshToken);
  
  // Refresh Token은 HttpOnly 쿠키로 전송
  res.cookie('refreshToken', refreshToken, {
    httpOnly: true,
    secure: true,
    sameSite: 'strict',
    maxAge: 7 * 24 * 60 * 60 * 1000 // 7일
  });
  
  res.json({ accessToken });
});

// Access Token 갱신
router.post('/refresh', (req, res) => {
  const refreshToken = req.cookies.refreshToken;
  
  if (!refreshToken) {
    return res.status(401).json({ error: 'Refresh Token이 없습니다' });
  }
  
  if (!refreshTokens.has(refreshToken)) {
    return res.status(403).json({ error: '유효하지 않은 Refresh Token' });
  }
  
  jwt.verify(refreshToken, process.env.REFRESH_TOKEN_SECRET, (err, decoded) => {
    if (err) {
      return res.status(403).json({ error: 'Refresh Token 검증 실패' });
    }
    
    // 새로운 Access Token 발급
    const newAccessToken = jwt.sign(
      { sub: decoded.sub },
      process.env.ACCESS_TOKEN_SECRET,
      { expiresIn: '15m' }
    );
    
    // Refresh Token Rotation (선택사항이지만 권장)
    refreshTokens.delete(refreshToken);
    const newRefreshToken = jwt.sign(
      { sub: decoded.sub },
      process.env.REFRESH_TOKEN_SECRET,
      { expiresIn: '7d' }
    );
    refreshTokens.add(newRefreshToken);
    
    res.cookie('refreshToken', newRefreshToken, {
      httpOnly: true,
      secure: true,
      sameSite: 'strict',
      maxAge: 7 * 24 * 60 * 60 * 1000
    });
    
    res.json({ accessToken: newAccessToken });
  });
});

// 로그아웃
router.post('/logout', (req, res) => {
  const refreshToken = req.cookies.refreshToken;
  refreshTokens.delete(refreshToken);
  res.clearCookie('refreshToken');
  res.json({ message: '로그아웃 성공' });
});

🔗 OAuth 2.0 + JWT 통합 구현하기

이제 진짜 실전이야! OAuth 2.0으로 소셜 로그인을 구현하고, JWT로 세션을 관리하는 완전한 시스템을 만들어볼게. 🚀

전체 아키텍처 설계

실전 구현: Express.js + Passport.js

1단계: 프로젝트 설정

// package.json 의존성
{
  "dependencies": {
    "express": "^4.18.2",
    "passport": "^0.6.0",
    "passport-google-oauth20": "^2.0.0",
    "jsonwebtoken": "^9.0.0",
    "cookie-parser": "^1.4.6",
    "dotenv": "^16.0.3"
  }
}

// .env 파일
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GOOGLE_CALLBACK_URL=http://localhost:3000/auth/google/callback
JWT_ACCESS_SECRET=your_access_token_secret
JWT_REFRESH_SECRET=your_refresh_token_secret
SESSION_SECRET=your_session_secret

2단계: Passport 설정

// config/passport.js
const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;
const User = require('../models/User'); // 사용자 모델

passport.use(new GoogleStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: process.env.GOOGLE_CALLBACK_URL
  },
  async (accessToken, refreshToken, profile, done) => {
    try {
      // 기존 사용자 찾기
      let user = await User.findOne({ googleId: profile.id });
      
      if (!user) {
        // 새 사용자 생성
        user = await User.create({
          googleId: profile.id,
          email: profile.emails[0].value,
          name: profile.displayName,
          avatar: profile.photos[0].value
        });
      }
      
      return done(null, user);
    } catch (error) {
      return done(error, null);
    }
  }
));

module.exports = passport;

3단계: JWT 유틸리티

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

class JWTService {
  // Access Token 생성 (15분)
  static generateAccessToken(user) {
    return jwt.sign(
      {
        sub: user.id,
        email: user.email,
        role: user.role || 'user'
      },
      process.env.JWT_ACCESS_SECRET,
      { expiresIn: '15m' }
    );
  }
  
  // Refresh Token 생성 (7일)
  static generateRefreshToken(user) {
    return jwt.sign(
      { sub: user.id },
      process.env.JWT_REFRESH_SECRET,
      { expiresIn: '7d' }
    );
  }
  
  // Access Token 검증
  static verifyAccessToken(token) {
    try {
      return jwt.verify(token, process.env.JWT_ACCESS_SECRET);
    } catch (error) {
      throw new Error('Invalid access token');
    }
  }
  
  // Refresh Token 검증
  static verifyRefreshToken(token) {
    try {
      return jwt.verify(token, process.env.JWT_REFRESH_SECRET);
    } catch (error) {
      throw new Error('Invalid refresh token');
    }
  }
}

module.exports = JWTService;

4단계: 인증 라우트

// routes/auth.js
const express = require('express');
const passport = require('passport');
const JWTService = require('../utils/jwt');
const router = express.Router();

// 구글 로그인 시작
router.get('/google',
  passport.authenticate('google', {
    scope: ['profile', 'email'],
    session: false // 세션 사용 안 함 (JWT 사용)
  })
);

// 구글 콜백
router.get('/google/callback',
  passport.authenticate('google', { 
    session: false,
    failureRedirect: '/login'
  }),
  (req, res) => {
    // OAuth 인증 성공! 이제 JWT 발급
    const accessToken = JWTService.generateAccessToken(req.user);
    const refreshToken = JWTService.generateRefreshToken(req.user);
    
    // Refresh Token을 HttpOnly 쿠키로 저장
    res.cookie('refreshToken', refreshToken, {
      httpOnly: true,
      secure: process.env.NODE_ENV === 'production',
      sameSite: 'strict',
      maxAge: 7 * 24 * 60 * 60 * 1000 // 7일
    });
    
    // Access Token은 클라이언트로 전달 (여러 방법 가능)
    // 방법 1: 쿼리 파라미터로 프론트엔드로 리다이렉트
    res.redirect(`http://localhost:3000/auth-success?token=${accessToken}`);
    
    // 방법 2: JSON 응답 (SPA의 경우)
    // res.json({ accessToken, user: req.user });
  }
);

// Token 갱신
router.post('/refresh', async (req, res) => {
  const refreshToken = req.cookies.refreshToken;
  
  if (!refreshToken) {
    return res.status(401).json({ error: 'Refresh token not found' });
  }
  
  try {
    const decoded = JWTService.verifyRefreshToken(refreshToken);
    const user = await User.findById(decoded.sub);
    
    if (!user) {
      return res.status(404).json({ error: 'User not found' });
    }
    
    // 새 Access Token 발급
    const newAccessToken = JWTService.generateAccessToken(user);
    
    // Refresh Token Rotation (선택사항)
    const newRefreshToken = JWTService.generateRefreshToken(user);
    res.cookie('refreshToken', newRefreshToken, {
      httpOnly: true,
      secure: process.env.NODE_ENV === 'production',
      sameSite: 'strict',
      maxAge: 7 * 24 * 60 * 60 * 1000
    });
    
    res.json({ accessToken: newAccessToken });
  } catch (error) {
    res.status(403).json({ error: 'Invalid refresh token' });
  }
});

// 로그아웃
router.post('/logout', (req, res) => {
  res.clearCookie('refreshToken');
  res.json({ message: 'Logged out successfully' });
});

module.exports = router;

5단계: JWT 인증 미들웨어

// middleware/auth.js
const JWTService = require('../utils/jwt');
const User = require('../models/User');

async function authenticateJWT(req, res, next) {
  const authHeader = req.headers.authorization;
  
  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    return res.status(401).json({ error: 'No token provided' });
  }
  
  const token = authHeader.substring(7); // "Bearer " 제거
  
  try {
    const decoded = JWTService.verifyAccessToken(token);
    
    // 사용자 정보 조회 (선택사항, 캐싱 권장)
    const user = await User.findById(decoded.sub);
    if (!user) {
      return res.status(404).json({ error: 'User not found' });
    }
    
    req.user = user;
    req.userId = decoded.sub;
    next();
  } catch (error) {
    if (error.message === 'jwt expired') {
      return res.status(401).json({ 
        error: 'Token expired',
        code: 'TOKEN_EXPIRED'
      });
    }
    return res.status(403).json({ error: 'Invalid token' });
  }
}

// 역할 기반 접근 제어
function authorize(...roles) {
  return (req, res, next) => {
    if (!req.user) {
      return res.status(401).json({ error: 'Unauthorized' });
    }
    
    if (!roles.includes(req.user.role)) {
      return res.status(403).json({ error: 'Forbidden' });
    }
    
    next();
  };
}

module.exports = { authenticateJWT, authorize };

6단계: 보호된 API 라우트

// routes/api.js
const express = require('express');
const { authenticateJWT, authorize } = require('../middleware/auth');
const router = express.Router();

// 인증 필요한 라우트
router.get('/profile', authenticateJWT, (req, res) => {
  res.json({
    user: {
      id: req.user.id,
      email: req.user.email,
      name: req.user.name,
      avatar: req.user.avatar
    }
  });
});

// 관리자만 접근 가능
router.get('/admin/users', 
  authenticateJWT, 
  authorize('admin'), 
  async (req, res) => {
    const users = await User.find().select('-password');
    res.json({ users });
  }
);

// 사용자 정보 수정
router.put('/profile', authenticateJWT, async (req, res) => {
  const { name, bio } = req.body;
  
  try {
    const updatedUser = await User.findByIdAndUpdate(
      req.userId,
      { name, bio },
      { new: true }
    );
    
    res.json({ user: updatedUser });
  } catch (error) {
    res.status(500).json({ error: 'Update failed' });
  }
});

module.exports = router;

7단계: 메인 앱 설정

// app.js
const express = require('express');
const cookieParser = require('cookie-parser');
const passport = require('./config/passport');
require('dotenv').config();

const authRoutes = require('./routes/auth');
const apiRoutes = require('./routes/api');

const app = express();

// 미들웨어
app.use(express.json());
app.use(cookieParser());
app.use(passport.initialize());

// CORS 설정 (프론트엔드가 다른 도메인인 경우)
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header('Access-Control-Allow-Credentials', 'true');
  res.header('Access-Control-Allow-Headers', 'Authorization, Content-Type');
  next();
});

// 라우트
app.use('/auth', authRoutes);
app.use('/api', apiRoutes);

// 에러 핸들링
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).json({ error: 'Something went wrong!' });
});

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

프론트엔드 통합 (React 예제)

// src/services/auth.js
class AuthService {
  constructor() {
    this.accessToken = null;
  }
  
  // 구글 로그인 시작
  loginWithGoogle() {
    window.location.href = 'http://localhost:5000/auth/google';
  }
  
  // 콜백에서 토큰 저장
  handleAuthCallback(token) {
    this.accessToken = token;
    localStorage.setItem('accessToken', token);
  }
  
  // API 요청
  async fetchWithAuth(url, options = {}) {
    const token = this.accessToken || localStorage.getItem('accessToken');
    
    const response = await fetch(url, {
      ...options,
      headers: {
        ...options.headers,
        'Authorization': `Bearer ${token}`
      },
      credentials: 'include' // 쿠키 포함 (Refresh Token)
    });
    
    // 토큰 만료 시 자동 갱신
    if (response.status === 401) {
      const data = await response.json();
      if (data.code === 'TOKEN_EXPIRED') {
        const refreshed = await this.refreshToken();
        if (refreshed) {
          // 재시도
          return this.fetchWithAuth(url, options);
        }
      }
    }
    
    return response;
  }
  
  // 토큰 갱신
  async refreshToken() {
    try {
      const response = await fetch('http://localhost:5000/auth/refresh', {
        method: 'POST',
        credentials: 'include'
      });
      
      if (response.ok) {
        const { accessToken } = await response.json();
        this.accessToken = accessToken;
        localStorage.setItem('accessToken', accessToken);
        return true;
      }
      
      return false;
    } catch (error) {
      console.error('Token refresh failed:', error);
      return false;
    }
  }
  
  // 로그아웃
  async logout() {
    await fetch('http://localhost:5000/auth/logout', {
      method: 'POST',
      credentials: 'include'
    });
    
    this.accessToken = null;
    localStorage.removeItem('accessToken');
  }
}

export default new AuthService();

// src/components/Login.jsx
import React from 'react';
import AuthService from '../services/auth';

function Login() {
  const handleGoogleLogin = () => {
    AuthService.loginWithGoogle();
  };
  
  return (
    <div className="login-container">
      <h1>로그인</h1>
      <button onClick={handleGoogleLogin}>
        🔐 구글로 로그인
      </button>
    </div>
  );
}

export default Login;

// src/components/AuthCallback.jsx
import React, { useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import AuthService from '../services/auth';

function AuthCallback() {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  
  useEffect(() => {
    const token = searchParams.get('token');
    if (token) {
      AuthService.handleAuthCallback(token);
      navigate('/dashboard');
    } else {
      navigate('/login');
    }
  }, [searchParams, navigate]);
  
  return <div>로그인 처리 중...</div>;
}

export default AuthCallback;

// src/components/Profile.jsx
import React, { useEffect, useState } from 'react';
import AuthService from '../services/auth';

function Profile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    loadProfile();
  }, []);
  
  const loadProfile = async () => {
    try {
      const response = await AuthService.fetchWithAuth(
        'http://localhost:5000/api/profile'
      );
      
      if (response.ok) {
        const data = await response.json();
        setUser(data.user);
      }
    } catch (error) {
      console.error('Failed to load profile:', error);
    } finally {
      setLoading(false);
    }
  };
  
  if (loading) return <div>로딩 중...</div>;
  if (!user) return <div>사용자 정보를 불러올 수 없습니다.</div>;
  
  return (
    <div className="profile">
      <img src={user.avatar} alt={user.name} />
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

export default Profile;

🛡️ 보안 베스트 프랙티스

인증 시스템은 보안이 생명이야! 🔐 실수 하나로 전체 시스템이 뚫릴 수 있으니 꼭 지켜야 할 원칙들을 알아보자.

1. 비밀 키 관리

// 강력한 비밀 키 생성 (Node.js)
const crypto = require('crypto');

// 256비트 랜덤 키 생성
const generateSecret = () => {
  return crypto.randomBytes(32).toString('hex');
};

console.log('JWT_ACCESS_SECRET=' + generateSecret());
console.log('JWT_REFRESH_SECRET=' + generateSecret());

2. HTTPS 필수

프로덕션 환경에서는 반드시 HTTPS를 사용해야 해! 🔒 HTTP로 토큰을 전송하면 중간자 공격(Man-in-the-Middle)에 취약해져.

// Express에서 HTTPS 강제
app.use((req, res, next) => {
  if (process.env.NODE_ENV === 'production' && !req.secure) {
    return res.redirect('https://' + req.headers.host + req.url);
  }
  next();
});

// 쿠키 설정 시 secure 플래그
res.cookie('refreshToken', token, {
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production', // HTTPS에서만
  sameSite: 'strict'
});

3. XSS (Cross-Site Scripting) 방어

XSS 공격은 악의적인 스크립트를 주입해서 토큰을 훔쳐가는 공격이야. 😈

// Helmet 미들웨어로 CSP 설정
const helmet = require('helmet');

app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "'unsafe-inline'"], // 가능하면 'unsafe-inline' 제거
    styleSrc: ["'self'", "'unsafe-inline'"],
    imgSrc: ["'self'", "data:", "https:"],
    connectSrc: ["'self'", "https://api.yourapp.com"]
  }
}));

// 사용자 입력 sanitization
const validator = require('validator');

app.post('/api/comment', authenticateJWT, (req, res) => {
  let { content } = req.body;
  
  // HTML 태그 제거
  content = validator.escape(content);
  
  // 또는 DOMPurify 사용 (클라이언트 사이드)
  // import DOMPurify from 'dompurify';
  // const clean = DOMPurify.sanitize(dirty);
  
  // DB 저장...
});

4. CSRF (Cross-Site Request Forgery) 방어

CSRF는 사용자가 의도하지 않은 요청을 보내도록 속이는 공격이야. 🎣

// CSRF 토큰 사용
const csrf = require('csurf');
const csrfProtection = csrf({ cookie: true });

app.use(csrfProtection);

app.get('/form', (req, res) => {
  res.render('form', { csrfToken: req.csrfToken() });
});

app.post('/api/transfer', csrfProtection, (req, res) => {
  // CSRF 토큰이 유효한 경우에만 실행
  // ...
});

JWT를 사용할 때는 SameSite 쿠키 속성으로도 방어할 수 있어:

res.cookie('refreshToken', token, {
  httpOnly: true,
  secure: true,
  sameSite: 'strict' // 또는 'lax'
});

5. Rate Limiting (속도 제한)

무차별 대입 공격(Brute Force)을 막기 위해 요청 횟수를 제한해야 해! ⏱️

const rateLimit = require('express-rate-limit');

// 로그인 엔드포인트 제한
const loginLimiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15분
  max: 5, // 최대 5번 시도
  message: '너무 많은 로그인 시도입니다. 15분 후 다시 시도해주세요.',
  standardHeaders: true,
  legacyHeaders: false
});

app.post('/auth/login', loginLimiter, (req, res) => {
  // 로그인 로직
});

// API 전체 제한
const apiLimiter = rateLimit({
  windowMs: 15 * 60 * 1000,
  max: 100
});

app.use('/api/', apiLimiter);

6. JWT 블랙리스트 구현

JWT는 stateless라서 발급 후 취소가 어려워. 하지만 로그아웃이나 보안 사고 시 특정 토큰을 무효화해야 할 때가 있지. 🚫

// Redis를 사용한 블랙리스트
const redis = require('redis');
const client = redis.createClient();

// 토큰 블랙리스트 추가
async function blacklistToken(token, expiresIn) {
  const decoded = jwt.decode(token);
  const remainingTime = decoded.exp - Math.floor(Date.now() / 1000);
  
  // 만료 시간까지만 블랙리스트에 보관
  await client.setEx(`blacklist:${token}`, remainingTime, 'true');
}

// 토큰 검증 시 블랙리스트 확인
async function isTokenBlacklisted(token) {
  const result = await client.get(`blacklist:${token}`);
  return result !== null;
}

// 미들웨어에 적용
async function authenticateJWT(req, res, next) {
  const token = extractToken(req);
  
  if (!token) {
    return res.status(401).json({ error: 'No token' });
  }
  
  // 블랙리스트 확인
  if (await isTokenBlacklisted(token)) {
    return res.status(401).json({ error: 'Token has been revoked' });
  }
  
  // JWT 검증
  try {
    const decoded = JWTService.verifyAccessToken(token);
    req.user = decoded;
    next();
  } catch (error) {
    res.status(403).json({ error: 'Invalid token' });
  }
}

// 로그아웃 시 블랙리스트 추가
app.post('/auth/logout', authenticateJWT, async (req, res) => {
  const token = extractToken(req);
  await blacklistToken(token, 900); // 15분
  res.clearCookie('refreshToken');
  res.json({ message: 'Logged out' });
});

7. 토큰 만료 시간 설정

8. 로깅과 모니터링

의심스러운 활동을 감지하기 위해 로깅은 필수야! 📊

// Winston 로거 설정
const winston = require('winston');

const logger = winston.createLogger({
  level: 'info',
  format: winston.format.json(),
  transports: [
    new winston.transports.File({ filename: 'error.log', level: 'error' }),
    new winston.transports.File({ filename: 'combined.log' })
  ]
});

// 인증 실패 로깅
app.post('/auth/login', async (req, res) => {
  const { email, password } = req.body;
  
  const user = await authenticateUser(email, password);
  
  if (!user) {
    logger.warn('Failed login attempt', {
      email,
      ip: req.ip,
      userAgent: req.headers['user-agent'],
      timestamp: new Date()
    });
    
    return res.status(401).json({ error: 'Invalid credentials' });
  }
  
  logger.info('Successful login', {
    userId: user.id,
    email: user.email,
    ip: req.ip
  });
  
  // 토큰 발급...
});

// 의심스러운 활동 감지
async function detectSuspiciousActivity(userId) {
  // 최근 1시간 동안 5개 이상의 다른 IP에서 로그인?
  const recentLogins = await getRecentLogins(userId, 3600);
  const uniqueIPs = new Set(recentLogins.map(l => l.ip));
  
  if (uniqueIPs.size >= 5) {
    logger.error('Suspicious activity detected', {
      userId,
      uniqueIPs: Array.from(uniqueIPs)
    });
    
    // 알림 전송, 계정 잠금 등
    await notifyUser(userId, 'suspicious_activity');
  }
}

🚀 고급 패턴과 최적화

1. Token Refresh 자동화 (Silent Refresh)

사용자가 앱을 사용하는 중에 토큰이 만료되면 짜증나잖아? 😤 자동으로 갱신해주는 패턴을 구현해보자!

// React에서 자동 갱신 구현
import { useEffect, useRef } from 'react';
import AuthService from './services/auth';

function useTokenRefresh() {
  const refreshTimerRef = useRef(null);
  
  useEffect(() => {
    // Access Token 만료 5분 전에 갱신
    const scheduleRefresh = () => {
      const token = localStorage.getItem('accessToken');
      if (!token) return;
      
      const decoded = JSON.parse(atob(token.split('.')[1]));
      const expiresAt = decoded.exp * 1000; // 밀리초로 변환
      const now = Date.now();
      const timeUntilRefresh = expiresAt - now - (5 * 60 * 1000); // 5분 전
      
      if (timeUntilRefresh > 0) {
        refreshTimerRef.current = setTimeout(async () => {
          await AuthService.refreshToken();
          scheduleRefresh(); // 다음 갱신 예약
        }, timeUntilRefresh);
      }
    };
    
    scheduleRefresh();
    
    return () => {
      if (refreshTimerRef.current) {
        clearTimeout(refreshTimerRef.current);
      }
    };
  }, []);
}

// App.js에서 사용
function App() {
  useTokenRefresh();
  
  return (
    // ...
  );
}

2. 다중 디바이스 세션 관리

사용자가 여러 기기에서 로그인했을 때, 각 세션을 관리하고 필요시 특정 세션을 종료할 수 있어야 해! 📱💻

// 세션 모델
const sessionSchema = new mongoose.Schema({
  userId: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },
  refreshToken: { type: String, required: true },
  deviceInfo: {
    userAgent: String,
    ip: String,
    deviceType: String // 'mobile', 'desktop', 'tablet'
  },
  createdAt: { type: Date, default: Date.now },
  lastUsedAt: { type: Date, default: Date.now },
  expiresAt: Date
});

// 로그인 시 세션 생성
router.post('/login', async (req, res) => {
  const user = await authenticateUser(req.body.email, req.body.password);
  
  const accessToken = JWTService.generateAccessToken(user);
  const refreshToken = JWTService.generateRefreshToken(user);
  
  // 세션 저장
  await Session.create({
    userId: user.id,
    refreshToken,
    deviceInfo: {
      userAgent: req.headers['user-agent'],
      ip: req.ip,
      deviceType: detectDeviceType(req.headers['user-agent'])
    },
    expiresAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
  });
  
  res.cookie('refreshToken', refreshToken, { /* ... */ });
  res.json({ accessToken });
});

// 활성 세션 목록 조회
router.get('/sessions', authenticateJWT, async (req, res) => {
  const sessions = await Session.find({ 
    userId: req.userId,
    expiresAt: { $gt: new Date() }
  }).sort({ lastUsedAt: -1 });
  
  res.json({ sessions });
});

// 특정 세션 종료
router.delete('/sessions/:sessionId', authenticateJWT, async (req, res) => {
  const session = await Session.findOne({
    _id: req.params.sessionId,
    userId: req.userId
  });
  
  if (!session) {
    return res.status(404).json({ error: 'Session not found' });
  }
  
  // 블랙리스트에 추가
  await blacklistToken(session.refreshToken, 604800); // 7일
  await session.remove();
  
  res.json({ message: 'Session terminated' });
});

// 모든 다른 세션 종료
router.post('/sessions/terminate-others', authenticateJWT, async (req, res) => {
  const currentRefreshToken = req.cookies.refreshToken;
  
  const sessions = await Session.find({
    userId: req.userId,
    refreshToken: { $ne: currentRefreshToken }
  });
  
  // 모든 다른 세션의 토큰 블랙리스트 추가
  for (const session of sessions) {
    await blacklistToken(session.refreshToken, 604800);
  }
  
  await Session.deleteMany({
    userId: req.userId,
    refreshToken: { $ne: currentRefreshToken }
  });
  
  res.json({ message: `${sessions.length} sessions terminated` });
});

3. 소셜 로그인 계정 연동

사용자가 여러 소셜 계정을 하나의 계정에 연결할 수 있게 해보자! 🔗

// 사용자 모델 확장
const userSchema = new mongoose.Schema({
  email: String,
  name: String,
  avatar: String,
  providers: [{
    provider: String, // 'google', 'facebook', 'github'
    providerId: String,
    email: String,
    connectedAt: Date
  }]
});

// 계정 연동 라우트
router.get('/connect/google', 
  authenticateJWT, // 이미 로그인된 상태
  passport.authenticate('google', {
    scope: ['profile', 'email'],
    session: false,
    state: req.user.id // 현재 사용자 ID 전달
  })
);

router.get('/connect/google/callback',
  passport.authenticate('google', { session: false }),
  async (req, res) => {
    const userId = req.query.state; // 원래 사용자 ID
    const googleProfile = req.user;
    
    // 이미 다른 계정에 연결되어 있는지 확인
    const existingUser = await User.findOne({
      'providers.provider': 'google',
      'providers.providerId': googleProfile.id
    });
    
    if (existingUser && existingUser.id !== userId) {
      return res.redirect('/settings?error=already_connected');
    }
    
    // 현재 사용자에 구글 계정 연결
    await User.findByIdAndUpdate(userId, {
      $push: {
        providers: {
          provider: 'google',
          providerId: googleProfile.id,
          email: googleProfile.emails[0].value,
          connectedAt: new Date()
        }
      }
    });
    
    res.redirect('/settings?success=connected');
  }
);

// 계정 연결 해제
router.delete('/connect/:provider', authenticateJWT, async (req, res) => {
  const user = await User.findById(req.userId);
  
  // 최소 1개의 로그인 방법은 남겨야 함
  if (user.providers.length <= 1 && !user.password) {
    return res.status(400).json({ 
      error: '최소 1개의 로그인 방법이 필요합니다' 
    });
  }
  
  await User.findByIdAndUpdate(req.userId, {
    $pull: {
      providers: { provider: req.params.provider }
    }
  });
  
  res.json({ message: 'Provider disconnected' });
});

4. JWT 페이로드 최적화

JWT는 모든 요청에 포함되니까 크기를 최소화하는 게 중요해! 📦

{
  "userId": "507f1f77bcf86cd799439011",
  "userEmail": "user@example.com",
  "userName": "John Doe",
  "userRole": "admin",
  "userAvatar": "https://example.com/avatar.jpg",
  "userPreferences": { /* ... */ },
  "issuedAt": 1516239022,
  "expirationTime": 1516242622
}

{
  "sub": "507f1f77bcf86cd799439011",
  "rol": "adm",
  "iat": 1516239022,
  "exp": 1516242622
}

5. 캐싱 전략

매 요청마다 DB에서 사용자 정보를 조회하면 느려져. Redis로 캐싱하자! ⚡

const redis = require('redis');
const client = redis.createClient();

// 사용자 정보 캐싱
async function getUserFromCache(userId) {
  const cached = await client.get(`user:${userId}`);
  
  if (cached) {
    return JSON.parse(cached);
  }
  
  // 캐시 미스 - DB에서 조회
  const user = await User.findById(userId);
  
  if (user) {
    // 5분간 캐싱
    await client.setEx(
      `user:${userId}`,
      300,
      JSON.stringify(user)
    );
  }
  
  return user;
}

// 미들웨어에 적용
async function authenticateJWT(req, res, next) {
  const token = extractToken(req);
  
  try {
    const decoded = JWTService.verifyAccessToken(token);
    
    // 캐시에서 사용자 정보 조회
    const user = await getUserFromCache(decoded.sub);
    
    if (!user) {
      return res.status(404).json({ error: 'User not found' });
    }
    
    req.user = user;
    next();
  } catch (error) {
    res.status(403).json({ error: 'Invalid token' });
  }
}

// 사용자 정보 업데이트 시 캐시 무효화
router.put('/profile', authenticateJWT, async (req, res) => {
  const updatedUser = await User.findByIdAndUpdate(
    req.userId,
    req.body,
    { new: true }
  );
  
  // 캐시 삭제
  await client.del(`user:${req.userId}`);
  
  res.json({ user: updatedUser });
});

🔍 디버깅과 트러블슈팅

자주 발생하는 문제들

1. "Invalid Token" 에러

// 토큰 디버깅
const token = req.headers.authorization?.split(' ')[1];
console.log('Raw token:', token);
console.log('Token length:', token?.length);

try {
  const decoded = jwt.decode(token, { complete: true });
  console.log('Decoded header:', decoded.header);
  console.log('Decoded payload:', decoded.payload);
  
  // 검증
  jwt.verify(token, process.env.JWT_SECRET);
} catch (error) {
  console.error('Verification error:', error.message);
}

2. CORS 에러

const cors = require('cors');

app.use(cors({
  origin: 'http://localhost:3000', // 프론트엔드 URL
  credentials: true, // 쿠키 허용
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

// Preflight 요청 처리
app.options('*', cors());

3. 쿠키가 전송되지 않음

// 서버
res.cookie('refreshToken', token, {
  httpOnly: true,
  secure: false, // 개발 환경에서는 false
  sameSite: 'lax', // 'strict'는 너무 엄격할 수 있음
  domain: 'localhost' // 명시적으로 설정
});

// 클라이언트
fetch('http://localhost:5000/api/profile', {
  credentials: 'include' // 필수!
});

4. 토큰 만료 처리가 안 됨

// 토큰 생성 시 명시적으로 exp 설정
const token = jwt.sign(
  { sub: user.id },
  secret,
  { 
    expiresIn: '15m',
    // 또는 직접 설정
    // exp: Math.floor(Date.now() / 1000) + (15 * 60)
  }
);

// 검증 시 시간 허용 오차 설정 (5초)
jwt.verify(token, secret, {
  clockTolerance: 5
});

유용한 디버깅 도구

💼 실전 프로젝트 시나리오

이제 배운 걸 종합해서 실제 프로젝트를 만들어보자! 재능넷 같은 플랫폼에서 사용할 수 있는 인증 시스템을 구축해볼게. 🎨

프로젝트: "SkillShare" 재능 공유 플랫폼

요구사항

데이터베이스 스키마

// models/User.js
const mongoose = require('mongoose');
const bcrypt = require('bcrypt');

const userSchema = new mongoose.Schema({
  email: {
    type: String,
    required: true,
    unique: true,
    lowercase: true
  },
  password: {
    type: String,
    select: false // 기본 쿼리에서 제외
  },
  name: {
    type: String,
    required: true
  },
  avatar: String,
  role: {
    type: String,
    enum: ['user', 'expert', 'admin'],
    default: 'user'
  },
  providers: [{
    provider: String,
    providerId: String,
    email: String,
    connectedAt: Date
  }],
  emailVerified: {
    type: Boolean,
    default: false
  },
  twoFactorEnabled: {
    type: Boolean,
    default: false
  },
  twoFactorSecret: String,
  skills: [String], // 재능넷처럼 보유 스킬
  rating: {
    type: Number,
    default: 0
  },
  createdAt: {
    type: Date,
    default: Date.now
  }
});

// 비밀번호 해싱
userSchema.pre('save', async function(next) {
  if (!this.isModified('password')) return next();
  
  this.password = await bcrypt.hash(this.password, 12);
  next();
});

// 비밀번호 비교 메서드
userSchema.methods.comparePassword = async function(candidatePassword) {
  return await bcrypt.compare(candidatePassword, this.password);
};

module.exports = mongoose.model('User', userSchema);

이메일 인증 구현

// routes/auth.js
const crypto = require('crypto');
const nodemailer = require('nodemailer');

// 이메일 전송 설정
const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: process.env.EMAIL_USER,
    pass: process.env.EMAIL_PASSWORD
  }
});

// 회원가입
router.post('/register', async (req, res) => {
  const { email, password, name } = req.body;
  
  // 이미 존재하는 사용자 확인
  const existingUser = await User.findOne({ email });
  if (existingUser) {
    return res.status(400).json({ error: '이미 존재하는 이메일입니다' });
  }
  
  // 사용자 생성
  const user = await User.create({
    email,
    password,
    name,
    emailVerified: false
  });
  
  // 인증 토큰 생성 (1시간 유효)
  const verificationToken = jwt.sign(
    { userId: user.id, type: 'email_verification' },
    process.env.JWT_SECRET,
    { expiresIn: '1h' }
  );
  
  // 인증 이메일 전송
  const verificationUrl = `${process.env.FRONTEND_URL}/verify-email?token=${verificationToken}`;
  
  await transporter.sendMail({
    from: process.env.EMAIL_USER,
    to: email,
    subject: 'SkillShare 이메일 인증',
    html: `
      <h1>환영합니다!</h1>
      <p>아래 링크를 클릭하여 이메일을 인증해주세요:</p>
      <a href="${verificationUrl}">이메일 인증하기</a>
      <p>이 링크는 1시간 동안 유효합니다.</p>
    `
  });
  
  res.status(201).json({
    message: '회원가입 성공! 이메일을 확인해주세요.',
    userId: user.id
  });
});

// 이메일 인증
router.post('/verify-email', async (req, res) => {
  const { token } = req.body;
  
  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    
    if (decoded.type !== 'email_verification') {
      return res.status(400).json({ error: '유효하지 않은 토큰입니다' });
    }
    
    const user = await User.findByIdAndUpdate(
      decoded.userId,
      { emailVerified: true },
      { new: true }
    );
    
    if (!user) {
      return res.status(404).json({ error: '사용자를 찾을 수 없습니다' });
    }
    
    // 인증 완료 후 자동 로그인
    const accessToken = JWTService.generateAccessToken(user);
    const refreshToken = JWTService.generateRefreshToken(user);
    
    res.cookie('refreshToken', refreshToken, { /* ... */ });
    res.json({
      message: '이메일 인증 완료!',
      accessToken,
      user: {
        id: user.id,
        email: user.email,
        name: user.name
      }
    });
  } catch (error) {
    res.status(400).json({ error: '토큰이 만료되었거나 유효하지 않습니다' });
  }
});

비밀번호 재설정

// 비밀번호 재설정 요청
router.post('/forgot-password', async (req, res) => {
  const { email } = req.body;
  
  const user = await User.findOne({ email });
  if (!user) {
    // 보안상 사용자 존재 여부를 알려주지 않음
    return res.json({ 
      message: '이메일이 발송되었습니다 (존재하는 경우)' 
    });
  }
  
  // 재설정 토큰 생성 (15분 유효)
  const resetToken = jwt.sign(
    { userId: user.id, type: 'password_reset' },
    process.env.JWT_SECRET,
    { expiresIn: '15m' }
  );
  
  const resetUrl = `${process.env.FRONTEND_URL}/reset-password?token=${resetToken}`;
  
  await transporter.sendMail({
    from: process.env.EMAIL_USER,
    to: email,
    subject: 'SkillShare 비밀번호 재설정',
    html: `
      <h1>비밀번호 재설정</h1>
      <p>아래 링크를 클릭하여 비밀번호를 재설정하세요:</p>
      <a href="${resetUrl}">비밀번호 재설정하기</a>
      <p>이 링크는 15분 동안 유효합니다.</p>
      <p>요청하지 않았다면 이 이메일을 무시하세요.</p>
    `
  });
  
  res.json({ message: '이메일이 발송되었습니다' });
});

// 비밀번호 재설정 실행
router.post('/reset-password', async (req, res) => {
  const { token, newPassword } = req.body;
  
  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    
    if (decoded.type !== 'password_reset') {
      return res.status(400).json({ error: '유효하지 않은 토큰입니다' });
    }
    
    const user = await User.findById(decoded.userId).select('+password');
    if (!user) {
      return res.status(404).json({ error: '사용자를 찾을 수 없습니다' });
    }
    
    // 새 비밀번호 설정
    user.password = newPassword;
    await user.save();
    
    // 모든 기존 세션 무효화
    await Session.deleteMany({ userId: user.id });
    
    res.json({ message: '비밀번호가 재설정되었습니다' });
  } catch (error) {
    res.status(400).json({ error: '토큰이 만료되었거나 유효하지 않습니다' });
  }
});

역할 기반 접근 제어 (RBAC)

// middleware/rbac.js
const permissions = {
  user: [
    'profile:read',
    'profile:update',
    'skill:search',
    'booking:create'
  ],
  expert: [
    'profile:read',
    'profile:update',
    'skill:search',
    'skill:create',
    'skill:update',
    'booking:create',
    'booking:manage'
  ],
  admin: [
    '*' // 모든 권한
  ]
};

function hasPermission(userRole, requiredPermission) {
  const userPermissions = permissions[userRole] || [];
  
  return userPermissions.includes('*') || 
         userPermissions.includes(requiredPermission);
}

function requirePermission(permission) {
  return (req, res, next) => {
    if (!req.user) {
      return res.status(401).json({ error: 'Unauthorized' });
    }
    
    if (!hasPermission(req.user.role, permission)) {
      return res.status(403).json({ 
        error: 'Forbidden',
        message: `${permission} 권한이 필요합니다`
      });
    }
    
    next();
  };
}

module.exports = { requirePermission, hasPermission };

// 사용 예시
const { requirePermission } = require('../middleware/rbac');

// 스킬 등록 (전문가만 가능)
router.post('/skills', 
  authenticateJWT,
  requirePermission('skill:create'),
  async (req, res) => {
    const skill = await Skill.create({
      ...req.body,
      expertId: req.userId
    });
    
    res.status(201).json({ skill });
  }
);

// 사용자 관리 (관리자만 가능)
router.get('/admin/users',
  authenticateJWT,
  requirePermission('user:manage'),
  async (req, res) => {
    const users = await User.find();
    res.json({ users });
  }
);

2단계 인증 (2FA) 구현

// 2FA 설정
const speakeasy = require('speakeasy');
const QRCode = require('qrcode');

router.post('/2fa/setup', authenticateJWT, async (req, res) => {
  // 시크릿 생성
  const secret = speakeasy.generateSecret({
    name: `SkillShare (${req.user.email})`
  });
  
  // 사용자에게 시크릿 저장 (아직 활성화 안 함)
  await User.findByIdAndUpdate(req.userId, {
    twoFactorSecret: secret.base32
  });
  
  // QR 코드 생성
  const qrCodeUrl = await QRCode.toDataURL(secret.otpauth_url);
  
  res.json({
    secret: secret.base32,
    qrCode: qrCodeUrl
  });
});

// 2FA 활성화
router.post('/2fa/enable', authenticateJWT, async (req, res) => {
  const { token } = req.body;
  
  const user = await User.findById(req.userId);
  
  // 토큰 검증
  const verified = speakeasy.totp.verify({
    secret: user.twoFactorSecret,
    encoding: 'base32',
    token: token
  });
  
  if (!verified) {
    return res.status(400).json({ error: '유효하지 않은 코드입니다' });
  }
  
  // 2FA 활성화
  await User.findByIdAndUpdate(req.userId, {
    twoFactorEnabled: true
  });
  
  res.json({ message: '2단계 인증이 활성화되었습니다' });
});

// 로그인 시 2FA 확인
router.post('/login', async (req, res) => {
  const { email, password, twoFactorToken } = req.body;
  
  const user = await User.findOne({ email }).select('+password');
  
  if (!user || !(await user.comparePassword(password))) {
    return res.status(401).json({ error: '이메일 또는 비밀번호가 잘못되었습니다' });
  }
  
  // 2FA 활성화된 경우
  if (user.twoFactorEnabled) {
    if (!twoFactorToken) {
      return res.status(200).json({ 
        requiresTwoFactor: true,
        userId: user.id
      });
    }
    
    // 2FA 토큰 검증
    const verified = speakeasy.totp.verify({
      secret: user.twoFactorSecret,
      encoding: 'base32',
      token: twoFactorToken
    });
    
    if (!verified) {
      return res.status(401).json({ error: '유효하지 않은 2FA 코드입니다' });
    }
  }
  
  // 로그인 성공
  const accessToken = JWTService.generateAccessToken(user);
  const refreshToken = JWTService.generateRefreshToken(user);
  
  res.cookie('refreshToken', refreshToken, { /* ... */ });
  res.json({ accessToken, user });
});

📚 마무리하며

와! 여기까지 왔다면 정말 대단해! 🎉 OAuth 2.0과 JWT에 대해 정말 많은 걸 배웠어. 이제 너는 현대적인 인증 시스템을 구축할 수 있는 지식을 갖췄어.

재능넷 같은 플랫폼에서도 이런 인증 시스템이 핵심이야. 사용자들이 안전하게 로그인하고, 자신의 재능을 공유하고, 다른 사람의 재능을 이용할 수 있게 해주는 기반이 바로 인증이거든! 🌟

응용프로그래밍에서 인증은 선택이 아니라 필수야. 하지만 이제 너는 이 복잡한 주제를 정복했어! 자신감을 가지고 실전에 적용해봐. 처음엔 어려울 수 있지만, 계속 연습하다 보면 어느새 전문가가 되어 있을 거야. 💪

궁금한 점이 있거나 막히는 부분이 있다면, 커뮤니티에 질문하는 것도 좋은 방법이야. 개발자들은 서로 돕는 문화가 있으니까! 그리고 보안은 끝이 없는 여정이라는 걸 기억해. 항상 배우고, 개선하고, 업데이트하는 자세가 중요해.

자, 이제 나가서 멋진 애플리케이션을 만들어봐! 화이팅! 🚀✨