[Node.js_4기] Today_I_Learn : JWT (24/01/26)

2024. 1. 29. 11:33공부/내배캠 TIL

목차

 

1. 학습 내용

2. 내용 정리

3. 예제

 

1. 학습 내용 

 

JWT(Json Web Token)

학습 목표

1. JWT란 무엇인지 알아봅니다.

2. JWT와 쿠키(Cookie), 세션(Session)의 차이점을 이해합니다.

3. jsonwebtoken 라이브러리를 이용해 JWT를 Express.js에서 사용해봅니다.

 

참고

JWT란? 왜 사용할까? 장단점은? (velog.io) + 내배캠

 

JWT란? 왜 사용할까? 장단점은?

개요 이번 멋북스 프로젝트의 ebook reader에서는 REST api를 구현하고, 거기에 더해 JWT토큰을 인증에 사용한다. 사용하고, 프로젝트에 적용할 수는 있지만 깊게 이해하지 못하고 사용하는 것을 찜찜

velog.io

 

2. 내용 정리 

 

0. 인증과 인가

인증 - Autherntication, 로그인, 놀이공원 입장

인가 - Authorization, 로그인 이후 활동, 놀이기구 이용

방법 - 쿠키, 세션, 토큰

(사실 토큰의 진짜 목적은 정보 보호보다는 위조 방지라고 한다.)

1. JWT(Json Web Token)란 무엇인가?

서버와 클라이언트 사이에 Json 형태의 정보를 안전하게 전송하기 위한 인터넷 표준 규격 웹 토큰

1) 특징 

- 유저를 인증하고 식별하기 위한 토큰 기반 인증 방식

- 다양한 암호화 알고리즘을 사용 가능한 신뢰성

- 서버가 아닌 클라이언트에 저장된다.

 

2) JWT 구조

Header - Payload, Signature 3가지로 구성

Header, Payload, Signature 각 부분은 점(.)으로 분리된다.

Header : 토큰의 타입, 어떤 암호화 방식인지 정의된 부분

Payload : 실제 전달하려는 데이터(개발자가 원하는 데이터)

Signature : 헤더, 페이로드, Secret Key를 이용하여 생성(토큰이 변조되었는지 아닌지 확인하게 도와줌)

(각 부분을 base64로 인코딩하여 .으로 구분하여 연결하면 JWT 생성. 이를 쿠키/Path Parameter를 통해 전달)

 

3) 추가로 알아야할 특성

- Secret Key를 몰라도 복호화 가능 : JWT를 가지고 있다면 누구나 데이터 확인 가능. (변조는 불가능!)

- 민감한 정보는 담지 않도록(위에서 말했듯, 누구나 데이터 확인이 가능하기 때문)

- 특정 언어에서만 사용가능한게 아님.(데이터 형식일 뿐)

 

4) 쿠키 세션과의 차이점

 - 쿠키와 세션은 데이터를 교환하고 관리하는 방식. / JWT는 데이터를 표현하는 형식.

쿠키와 세션 : 서버에 저장(Stateful) / JWT : 클라이언트에 저장(Stateless)

 

2. JWT 사용방법

jsonwebtoken 라이브러리

 

3. JWT를 왜 써야 하는가?

1. JWT가 인증 서버에서 발급되었는지 위변조 여부 확인 ★

2. 누구든 JWT 내부의 정보 확인 가능(복호화)

 

4. 이 데이터는 어떻게 쓸 수 있는가?

- 암호화 된 데이터를 클라이언트가 전달받아 다양한 수단을 통해 저장하여 API가 요청할 때, 서버가 요구하는 인증 양식에 맞게 보내주어 인증 시도.

 

1. 회원가입
    - 클라이언트는 회원가입에서 이메일, 패스워드와 같은 정보를 제공합니다.
    - 이 정보는 서버에 저장되어, 이후 인증 과정에서 사용됩니다.
2. 로그인
    - 클라이언트는 이메일, 패스워드로 로그인합니다.
    - 서버는 이 정보를 검증한 후, 유효하다면 JWT를 생성하여 클라이언트에게 제공합니다.
3. 로그인 확인
    - 클라이언트는 로그인 후 모든 API 요청에 JWT를 포함하여 전송합니다.
    - 서버는 JWT를 확인하고, 유효하다면 요청된 API를 수행합니다.
4. 내 정보 조회
    - 클라이언트는 JWT를 사용해 자신의 정보를 조회할 수 있습니다.
    - 서버는 JWT를 복호화하여 내부에 저장된 정보를 확인하고, 이 정보를 바탕으로 사용자의 세부 정보를 조회하여 전달해줍니다.

 

----사족----

확장성이 우수하다.

- 토큰 기반의 다른 로그인 시스템 접근 및 권한 공유가 가능하다.(쿠키와의 차이)

- OAuth의 경우 소셜 계정을 통해 다른 웹서비스에 로그인 가능

- 모바일에서도 잘 작동.(세션과의 차이)

+ JWT는 DB조회가 필요 없다.(서버가 죽는 대부분의 경우는 DB가 터져서 서버가 같이 죽는 경우이기 때문.)

단점)

- 쿠키/세션과 달리 토큰 길이가 길어 인증 요청이 많아질수록 부하가 심해진다.

- payload 자체는 암호화 되지 않아 중요한 정보는 담을 수 없다.

- 토큰이 탈취당하면 대처가 매우 어렵다

 

당신이 JWT를 써야하는 이유(feat. 로그인 구현)

쿠키의 속성값, 만료 시간을 클라이언트가 언제든 수정 가능. 위변조 여부 확인 불가

JWT 생성시 위변조 여부 확인을 위한 비밀키 사용. (쿠키 만료시간과 별개로 JWT만료시간 설정)

 

3. 예제 

json 데이터의 암호화

const token = jwt.sign({ myPayloadData: 1234 }, 'mysecretkey');
console.log(token);  
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJteVBheWxvYWREYXRhIjoxMjM0LCJpYXQiOjE2OTA4NzM4ODV9.YUmYY9aef9HOO8f2d6Umh2gtWRXJjDkzjm5FPhsQEA0

jwt.sign(<payload데이터>,<비밀키>) -> JWT 생성

 

복호화

import jwt from 'jsonwebtoken';

const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJteVBheWxvYWREYXRhIjoxMjM0LCJpYXQiOjE2OTA4NzM4ODV9.YUmYY9aef9HOO8f2d6Umh2gtWRXJjDkzjm5FPhsQEA0";
const decodedValue = jwt.decode(token);

console.log(decodedValue); 
// { myPayloadData: 1234, iat: 1690873885 }

JWT = 누구나 복호화 가능 / 검증을 통해 위변조 여부 확인 가능

 

검증

import jwt from 'jsonwebtoken';

const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJteVBheWxvYWREYXRhIjoxMjM0LCJpYXQiOjE2OTA4NzM4ODV9.YUmYY9aef9HOO8f2d6Umh2gtWRXJjDkzjm5FPhsQEA0";

const decodedValueByVerify = jwt.verify(token, "mysecretkey");
console.log(decodedValueByVerify);
// { myPayloadData: 1234, iat: 1690873885 }

// 검증 실패시 에러 발생
const fail_decodedValueByVerify = jwt.verify(token, "secretkey");
console.log(fail_decodedValueByVerify);
// JsonWebTokenError: invalid signature

검증 실패시 에러 발생.

 

 

 

 

쿠키와 세션 다음으로 JWT에 대한 내용을 공부하였다.

이 내용은 Access Token과 Refresh Token으로 이어지므로,

다음 TIL은 이 둘에 대하여 작성하도록 하겠다.