[JWT] Json Web Token을 이용한 로그인 메커니즘(요약) 정리

서론

실력이 없는 상태에서 어떠한 기능 또는 모듈을 공부할 때 항상 어려웠던 점이

전체적으로 이 도구가 어떤 플로워로 사용되는지 요약본이 없이

처음부터 어디서 설치하고 어떤 코드를 쓰고 이런 것부터 나열하니 이해하기가 어려웠다.

 

그중에 하나가 로그인 메커니즘 중에 JWT를 사용한 방식인데

디테일한 정의나 내용은 다른 블로그들에 너무 많아서 생략하고

아주 간단하게만 정리해보려 한다.

 

JWT(Json Web Token)란?

https://www.npmjs.com/package/jsonwebtoken

일단 난 처음에 Json이라는 게 뭔지도 몰랐었다.

간단하게 말하면 아래와 같이 JavaScript에서 4개의 Property를 가진 객체가 있다면

 

{
  squadName: "Super hero squad",
  homeTown: "Metro City",
  formed: 2016,
  secretBase: "Super tower"
}

 

이것을 전송하기 편하게 (크기도 작고, 이해하기 편한 구조라고 하네요...) 텍스트 형식으로 만든 게 Json 형식이라고 한다.

위의 객체를 Json으로 표현하면 아래와 같은데 Property의 왼쪽(이름)이 문자열 형태로 바뀐 것을 볼 수 있다.

 

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower"
}

 

JWT로 다시 돌아오면 JWT는 이런 Json구조로 데이터를 주고받는데 이 데이터를 누가 발급했는지 검증할 수 있도록

객체 데이터에 암호를 추가했다고 보면 된다. 그리고 이것을 토큰이라고 한다.

토큰 = Json 데이터 + 개인암호키

 

JWT의 전박적인 작동 메커니즘

1. '백엔드'에서 로그인 시 비밀번호가 확인되면 사용자의 정보(보통은 User 데이터의 고유 Id)를 토큰으로 발행하여 '프론트엔드'에 전달
2. '프론트엔드'는 발급받은 토큰을 클라이언트의 LocalStorage 같은 곳에 보관
3. '프론트엔드'가 '백엔드'에 api를 요청할 때마다 Header라는 곳에 토큰을 담아 전달
4. 요청받은 '백엔드'는 요청 데이터의 Header에서 토큰을 확인하고 1.에서 토큰에 넣어놨던 데이터를 읽은 후 어떤 사용자가 요청했는지 확인
5. 확인된 사용자의 권한에 따라 해당 api 작업 수행

 

추가 설명

위의 1.에서 토큰을 발행할 때 백엔드가 갖고 있는 개인비밀키(SECRECT_KEY)를 갖고서 토큰을 발행하고

 

// 사용자 고유 id를 넣어서 토큰 발급
const token = await jwt.sign({ id: user.id }, process.env.SECRET_KEY);

 

4.에서도 개인비밀키를 갖고 내가 발급했는지(같은 비밀키인지) 확인하기 때문에 발급자를 검증할 수 있는 것이다.

 

// id라는 사용자 고유 id 데이터가 담겨있음
const { id } = await jwt.verify(token, process.env.SECRET_KEY);

 

여기서 주의할 점은 토큰 값을 알면 누구나 그 안에 어떤 데이터가 들었는지 확인이 가능하다.

즉, JWT는 토큰의 발급자가 누구인지 암호화(검증)이 가능한 것이지 전달하는 데이터는 암호화되지 않고 누구나 들여다볼 수 있다.

 

아래는 사이트로 들어가면 내가 발행한 토큰에 id라는 데이터(payload)가 들어있는 것을 확인할 수 있다.

(Encoded에 "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNjIwNzE0MDU0fQ.1rxSDY9-bdnptEEYmAAEKPCCJwYvaZPMffTsqobIFpU"입력, id: 1)

https://jwt.io/

JWT.IO

 

따라서, JWT사용 시 외부로 노출되면 안 되는 중요정보는 암호화해서 넣거나 사용해서는 안 된다.