2_5.authentication.md

게시판 애플리케이션에 사용자 인증 기능을 추가하면 보안성과 사용자 경험을 향상시킬 수 있습니다. 아래는 회원가입 및 로그인 기능, 세션 또는 JWT를 활용한 인증 관리, 프로필 관리, 소셜 로그인 연동을 단계별로 구현하는 방법입니다.

1. 회원가입 및 로그인 기능 구현

• 1.1. 필요한 패키지 설치

  bcrypt를 사용하여 비밀번호를 안전하게 해시하고, express-session을 사용하여 세션 관리를 수행합니다.

  npm install bcrypt express-session

• 1.2. 사용자 데이터 저장소 설정

  여기서는 간단히 메모리 내 객체를 사용하지만, 실제 애플리케이션에서는 데이터베이스를 활용해야 합니다.

  const users = []; // 사용자 데이터를 저장할 배열

• 1.3. 회원가입 라우트 추가

  사용자가 회원가입 폼을 제출하면, 비밀번호를 해시하여 사용자 데이터를 저장합니다.

  const bcrypt = require('bcrypt');
  const saltRounds = 10;
  
  // 회원가입 폼 표시
  app.get('/register', (req, res) => {
    res.render('register');
  });
  
  // 회원가입 처리
  app.post('/register', async (req, res) => {
    const { username, password } = req.body;
    const hashedPassword = await bcrypt.hash(password, saltRounds);
    users.push({ username, password: hashedPassword });
    res.redirect('/login');
  });

• 1.4. 로그인 라우트 추가

  사용자가 로그인 폼을 제출하면, 저장된 해시된 비밀번호와 비교하여 인증을 수행합니다.

  const session = require('express-session');
  
  // 세션 설정
  app.use(session({
    secret: 'your_secret_key',
    resave: false,
    saveUninitialized: true,
  }));
  
  // 로그인 폼 표시
  app.get('/login', (req, res) => {
    res.render('login');
  });
  
  // 로그인 처리
  app.post('/login', async (req, res) => {
    const { username, password } = req.body;
    const user = users.find(u => u.username === username);
    if (user && await bcrypt.compare(password, user.password)) {
      req.session.userId = user.username;
      res.redirect('/');
    } else {
      res.redirect('/login');
    }
  });

2. 세션 또는 JWT를 활용한 인증 관리

• 2.1. 세션을 활용한 인증 관리

  로그인 시 세션에 사용자 정보를 저장하고, 인증이 필요한 라우트에서 세션을 확인하여 접근을 제어합니다.

  // 인증 미들웨어
  function requireAuth(req, res, next) {
    if (req.session.userId) {
      next();
    } else {
      res.redirect('/login');
    }
  }
  
  // 인증이 필요한 라우트 예시
  app.get('/profile', requireAuth, (req, res) => {
    const user = users.find(u => u.username === req.session.userId);
    res.render('profile', { user });
  });

• 2.2. JWT를 활용한 인증 관리

  jsonwebtoken 패키지를 사용하여 JWT를 생성하고 검증할 수 있습니다.

  npm install jsonwebtoken

  const jwt = require('jsonwebtoken');
  const secretKey = 'your_secret_key';
  
  // 로그인 처리 시 JWT 발급
  app.post('/login', async (req, res) => {
    const { username, password } = req.body;
    const user = users.find(u => u.username === username);
    if (user && await bcrypt.compare(password, user.password)) {
      const token = jwt.sign({ username: user.username }, secretKey, { expiresIn: '1h' });
      res.cookie('token', token, { httpOnly: true });
      res.redirect('/');
    } else {
      res.redirect('/login');
    }
  });
  
  // JWT 인증 미들웨어
  function requireAuth(req, res, next) {
    const token = req.cookies.token;
    if (token) {
      jwt.verify(token, secretKey, (err, decoded) => {
        if (err) {
          res.redirect('/login');
        } else {
          req.user = decoded;
          next();
        }
      });
    } else {
      res.redirect('/login');
    }
  }
  
  // 인증이 필요한 라우트 예시
  app.get('/profile', requireAuth, (req, res) => {
    const user = users.find(u => u.username === req.user.username);
    res.render('profile', { user });
  });

3. 프로필 관리

• 3.1. 프로필 보기 및 수정 라우트 추가

  사용자가 자신의 프로필을 조회하고 수정할 수 있는 기능을 제공합니다.

  // 프로필 보기
  app.get('/profile', requireAuth, (req, res) => {
    const user = users.find(u => u.username === req.session.userId);
    res.render('profile', { user });
  });
  
  // 프로필 수정 폼 표시
  app.get('/profile/edit', requireAuth, (req, res) => {
    const user = users.find(u => u.username === req.session.userId);
    res.render('edit-profile', { user });
  });
  
  // 프로필 수정 처리
  app.post('/profile/edit', requireAuth, (req, res) => {
    const { username, password } = req.body;
    const userIndex = users.findIndex(u => u.username === req.session.userId);
    if (userIndex !== -1) {
      users[userIndex].username = username;
      if (password) {
        users[userIndex].password = bcrypt.hashSync(password, saltRounds);
      }
      req.session.userId = username; // 세션 업데이트
    }
    res.redirect('/profile');
  });

4. 소셜 로그인 연동

• 4.1. passport 및 관련 전략 패키지 설치

  passport는 다양한 소셜 로그인 전략을 지원하는 미들웨어입니다. 예를 들어, 구글 로그인을 위해 passport-google-oauth20 전략을 사용할 수 있습니다.

  npm install passport passport-google-oauth20

• 4.2. passport 설정 및 구글 로그인 연동

  구글 개발자 콘솔에서 OAuth 2.0 클라이언트 ID와 비밀키를 발급받아 설정합니다