JWT 토큰

session 로그인만 해오던 내가 JWT를..?

 

바로 시작하겠습니다~

 

---

 

JWT는 JSON Web Tokens 의 줄인말로 웹에서 정보를 안전하게 전송하기 위한 표준 방식 중 하나이다

JSON 객체를 사용하여 정보를 암호화된 문자열로 표현하며

JWT는 토큰 자체가 정보를 포함하고 있어 별도의 저장 공간이 필요 없다!

=> 서버와 클라이언트 간의 상태를 유지하지 않음

 

하지만, 세션/쿠키 방식에 비해 JWT 토큰의 길이가 길기 때문에
토큰 발급 및 검증 요청이 많아질수록 서버에서 자원 낭비가 발생한다는 단점이 있다

 

JWT는  Header, Payload, Signature 세 가지 부분으로 구성되어 있다

 

Header는 토큰의 유형과 토큰을 서명하는 알고리즘을 지정하는 두 가지 부분으로 이루어져있다

 

Payload는 토큰의 내용이 인코딩된 부분으로 암호화가 되지 않음!

=> 민감한 정보는 넣지 X

 

Signature는 토큰의 무결성을 확인하기 위한 부분으로 헤더와 페이로드를 조합하고, 비밀 키를 사용하여 서명된 문자열임

 

=> 이를 통해 토큰이 변조되지 않았음을 확인할 수 있다

 

최종적으로 이러한 세 부분이 마침표로 구분되어 하나의 문자열로 합쳐져 최종 JWT 토큰이 생성된다

 

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

 

(헤더와 페이로드는 인코딩됨)

 

그럼 현재 개발중인 Node.js 에서 JWT가 어떤식으로 사용되는지 알아보자~

 

const jwt = require("jsonwebtoken");
const config = require("../configs");

const middleware = (req, res, next) => {
  let token = req.headers["authorization"];
  if (!token) {
    return res.status(401).json({
      message: "Unauthorized",
    });
  }
  token = token.split(" ")[1] ?? "";
  jwt.verify(token, config.auth.Key, (err, decoded) => {
    if (err || !decoded.id || !decoded.username) {
      return res.status(401).json({
        message: "Unauthorized",
      });
    }
    req.user = decoded;
    next();
  });
};

const genToken = (user) => {
  return jwt.sign(user, config.auth.Key, {
    expiresIn: "1d",
  });
};

module.exports = {
  middleware,
  genToken,
};

auth.helper.js

 

우선 middleware를 살펴보기전에 getToken부터 살펴보자

이 코드는 사용자 정보를 받아와서 JSON Web Token (JWT)을 생성하는 함수이다

=> 이 함수는 사용자 정보와 비밀 키, 그리고 추가적인 옵션을 사용하여 JWT를 생성함

 

비밀 키 부분은 토큰을 생성한 서버에서만 알고 있어야 함!

 

추가적인 옵션으로 expiresIn: "1d"를 볼 수 있는데
 이는 토큰의 유효 기간을 설정하는 옵션으로, 코드에서는 1일로 설정되어 있다

=> 이 기간이 지나면 토큰은 만료되어 더 이상 사용할 수 없게 됨

 

 

이런식으로 로그인 로직에서 유효한 사용자인게 인증되면 genToken을 이용해 JWT를 생성한다

 

이후에 이 토큰은 클라이언트에게 전달되어,
클라이언트가 서버에 요청을 보낼 때 마다 이 토큰을 함께 전송하여 인증에 활용한다!

 

 

이제 middleware 부분을 살펴보자!

 

 

클라이언트가 HTTP 헤더의 "Authorization" 필드에 JWT를 담아 서버로 전송하는 상황에서

 

token 변수로 헤더에 있는 authorization 내용을 저장한다

 

=> 만약 token 변수가 존재하지 않는다면 에러를 전달한다

 

그 후, token.split(" ")[1] ?? ""을 통해 실제 토큰 값만을 저장하는데

 

 

Authorization: Bearer 실제 토큰 값

 

"Bearer"는 HTTP 헤더에 토큰을 전송할 때 사용되는 일반적인 규약 중 하나로 
HTTP 헤더의 "Authorization" 필드에 토큰을 넣을 때, 일반적으로 위와 같이 사용된다

 

=> 이는 받은 토큰에서 "Bearer" 스킴을 제거하고 실제 토큰 값만을 추출하는 역할을 한다

 

?? ""는 nullish 병합 연산자로 만약 앞의 실제 토큰 값이 존재하지 않아 null이거나 undefined라면
뒤의 ""(빈 문자열) 로 대체한다

 

=> 이렇게 함으로써 만약 토큰이 적절하게 제공되지 않았을 때, 빈 문자열이 할당되어 예기치 않은 오류를 방지할 수 있음

 

 

그 후, jwt.verify 메서드를 사용하여 토큰의 유효성을 검사하는데
이 메서드는 토큰, 비밀 키, 그리고 콜백 함수를 인자로 받는다

 

(비밀키는 config.auth에 key로 저장되어 있음)

 

decoded는 토큰이 성공적으로 검증되면 디코딩된 페이로드를 나타낸다

 

=> 만약 오류가 발생하거나 디코딩된 토큰에 필요한 정보(위 코드에서는 id와 username)가 없다면,
401 Unauthorized 응답을 클라이언트에게 반환함

 

 

이렇게 성공적으로 토큰이 검증되면 디코딩된 정보를 req.user에 저장한다

 

Express에서는 req객체에 사용자 지정 속성을 추가하여
해당 요청에 관련된 데이터를 전달하는 것이 일반적인 패턴

 

즉, req.user = decoded를 수행하여 req객체에 user라는 사용자 지정 속성을 추가하면 
이후의 라우트 핸들러에서는 req.user를 통해 해당 사용자 정보에 쉽게 접근할 수 있게 됨

 

req.user는 하나의 요청에 대한 라이프사이클 동안만 유지되는데

한 번의 요청에 대한 처리가 끝나면 req.user는 소멸하게 된다!

 

=> 각각의 HTTP 요청마다 새로운 req 객체가 생성되고 처리되기 때문

 

 

 

 

이렇게 특정 주소로 라우팅하기 전에 authHelper의 middleware를 추가하여 토큰의 검증을 마치고 실행되게끔 구현하면 됨