More than TIL/Web

인증/인가, JWT 디코딩

코디번 KodeVvon 2022. 4. 14. 11:24

JSON Web Token, JWT라고 불리는 이 녀석은 토큰처럼 사용할 수 있도록 JSON을 인코딩한 것을 말한다.

쉽게 말해 보안을 위한 웹기술 중 한 유형으로, 인증에 필요한 정보들을 암호화시킨 토큰기반 인증 시스템을 의미한다.

 

먼저 인증과 인가의 비슷하지만 다른 점을 짚고 넘어가보자.

 

인증(Authentication)

  • 사용자의 신원을 검증하는 행위
  • 신원을 확인하고 특정 서비스에 일정 권한이 주어진 사용자임을 인증 받는 것
  • 프론트에서 서버에게 보내는 정보가 일치한다면, 서버는 사용자가 맞다고 판단해 액세스를 허용한다
  • 자격 증명 확인 기능
  • 사용자가 볼 수 있음
  • 비밀번호, 생체인식, 일회용 핀 등의 방식으로 진행
  • ID토큰 사용

인가(Authorization)

  • 한 번 인증을 받은 사용자가 이후 특정 리소스나 기능에 액세스할 수 있는 권한을 부여받는 것
  • 서버로부터 특정 파일을 다운받을 수 있는 권한을 받거나, 관리자 권한으로 관리 페이지를 이용할 수 있는 권한을 부여받는다
  • 항상 인증 이후에 진행된다
  • 서비스의 권한 허가/거부 기능
  • 서비스를 제공하는 보안팀에서 관리하는 설정 방식에 맞춰 진행
  • 엑세스 토큰 사용 

결국 JWT방식이란, 웹개발에서 사용자가 로그인(인증)하고, 어떤 서비스를 요청 시 서버에게 사용자의 이용 권한을 증명해 해당 서비스를 이용 가능하도록 허가받는 과정(인가)을 토큰방식으로 처리하는 프로토콜을 말한다.

 

JWT는 크게 세 가지 구성요소를 가진다.

  1. 헤더(Header): 토큰 유형, 관련된 서명 알고리즘
  2. 페이로드(Payload): 토큰 발급자, 토큰 유효기간 등
  3. 서명(Signature): 웹에서 사용하는 디지털서명 메시지가 이전 전송값과 같은지 확인

 

세션을 사용하고 사용자 데이터를 저장하는 서버 기반인증 시스템과 다르게, 이 방식은 Json 객체에 사용자 정보의 일부를 담는 방식이다. 서버는 세션을 만드는 대신 사용자 로그인 데이터에 JWT를 생성해 보내준다.

 

이후 프론트에서는 JWT를 쿠키, 웹 스토리지 등에 저장 후 이후 모든 요청을 JWT에 첨부해 인증/인가를 유지하고 받는다. JWT는 일반적으로 Access Token/Refresh Token을 HTTP 헤더에 넣어 서버로 보내게 된다.

 

그런데 JWT를 이용한 로그인 구현 중, 서버로부터 받은 암호화된 토큰(JWT)을 프론트단에서 디코딩해야 할 때가 있다.

 

백에서 토큰과 함께 유저의 타입, 다른 기타 정보를 함께 보내줄 수도 있지만, 데이터 자체를 토큰 안에 모두 넣어서 보내는 경우도 있기 때문이다.

이럴 경우 디코딩으로 데이터의 암호를 풀어야 서버가 보내준 추가 정보를 볼 수 있다.

//value 0 -> header, 1 -> payload, 2 -> VERIFY SIGNATURE 
const base64Payload = token.split('.')[1];
const payload = Buffer.from(base64Payload, 'base64'); 
const result = JSON.parse(payload.toString())

console.log(result);

 

 

'More than TIL > Web' 카테고리의 다른 글

API테스트 Thunder Client  (0) 2022.08.02
BOM(Browser Object Model)  (0) 2022.04.29
UI 색상을 추천해주는 사이트(color tool)  (0) 2022.04.13
웹 서비스 HTTP통신 구조  (0) 2022.04.13
쿠키, 세션, JWT  (0) 2022.04.13