JWT 토큰을 활용한 자바스크립트 미들웨어 인증 구현

17 Oct 2023

javascript

개요

인증은 모든 웹 애플리케이션에서 중요한 부분입니다. JWT(JavaScript Web Token)는 웹 애플리케이션의 인증을 간편하게 구현할 수 있는 방법 중 하나입니다. 이 문서에서는 JWT 토큰을 활용하여 자바스크립트 미들웨어 인증을 구현하는 방법에 대해 설명합니다.

JWT란?

JWT(JavaScript Web Token)는 웹 애플리케이션에서 사용자 인증 정보를 안전하게 전달하기 위한 인증 방식입니다. JWT는 토큰 자체에 인증 정보를 포함하여 사용자를 식별하고 인증 요청을 처리하는 데 사용됩니다. JWT는 토큰의 형태로 서버에서 클라이언트로 전달되며, 클라이언트에서는 이 토큰을 이용하여 인증을 수행합니다.

JWT 인증 구현 방법

서버에서 JWT 생성 및 전달: 사용자가 로그인하면 서버에서 JWT를 생성하고 클라이언트에게 전달합니다. 이때 JWT에는 사용자의 식별 정보와 유효 기간 등이 포함됩니다.
클라이언트에서 JWT 저장: 클라이언트는 받은 JWT를 안전한 저장소에 저장합니다. 대표적으로 웹 브라우저의 로컬 스토리지나 쿠키를 활용할 수 있습니다.
인증이 필요한 요청에 JWT 추가: 클라이언트가 서버로 인증이 필요한 요청을 보낼 때, 해당 요청에 JWT를 추가합니다. 대표적으로 HTTP 요청 헤더의 “Authorization” 필드에 JWT 값을 담아 전송합니다.
서버에서 JWT 검증: 서버는 받은 JWT를 검증하고, 유효한 토큰이면 해당 요청을 처리합니다.
인증 결과 반환: 서버는 요청을 처리한 후, 인증 결과를 클라이언트에게 반환합니다. 이를 기반으로 클라이언트는 적절한 로직을 처리하거나, 다음 요청에 필요한 JWT를 갱신할 수 있습니다.

자바스크립트 미들웨어 인증 구현 예시

아래는 Express 프레임워크를 사용하여 서버에서 JWT 인증을 구현하는 예시입니다.

const express = require('express');
const jwt = require('jsonwebtoken');

const app = express();

// JWT 시크릿 키 설정
const secretKey = 'mySecretKey';

// 미들웨어 함수 정의
function authMiddleware(req, res, next) {
  // JWT 토큰을 요청 헤더에서 추출
  const token = req.headers.authorization.split(' ')[1];

  try {
    // JWT 토큰 검증
    const decoded = jwt.verify(token, secretKey);
    // 인증 정보를 요청 객체에 추가
    req.user = decoded;
    // 다음 미들웨어 실행
    next();
  } catch (error) {
    // 유효하지 않은 토큰이면 에러 응답
    res.status(401).json({ error: 'Invalid token' });
  }
}

// 토큰이 필요한 라우트
app.get('/protected', authMiddleware, (req, res) => {
  // 인증된 사용자에게만 응답
  res.json({ message: 'You are authorized' });
});

// 서버 시작
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

위 예시에서는 Express의 미들웨어 함수를 활용하여 JWT 인증을 수행합니다. “protected” 경로로의 GET 요청에 대해 authMiddleware 함수를 통해 인증을 수행한 후, 인증된 사용자에게만 응답을 반환합니다.

결론

JWT 토큰을 활용한 자바스크립트 미들웨어 인증은 간편하게 웹 애플리케이션 인증을 구현하는 방법 중 하나입니다. 위 예시를 참고하여 웹 애플리케이션에서 JWT 인증을 구현해보세요.

개요

JWT란?

JWT 인증 구현 방법

자바스크립트 미들웨어 인증 구현 예시

결론

참고 자료