JWT토큰 생성 및 검증

JWT 토큰이 뭘까??

1. JWT (JSON Web Token) 토큰이란?

aaa.bbb.ccc 방식으로 점을 기준으로 각각에 값들이 저장되어 있고 이를 활용하여 인증하고 활용하는 토큰을 뜻한다.

필자는 이 토큰을 통하여 사용자인증을 진행하기 위해 활용하였다. JWT토큰 안에 사용자의 id등의 정보를 담고 토큰이 검증됬을 때에만 페이지 이동이 가능 및 포함되어져 있는 정보들을 사용할 수 있도록 하기 위해 활용하였다.

 

먼저 첫 번째 부분인 aaa에는 헤더에 관한 내용들이 들어가게 된다. 암호화된 알고리즘이 무슨 타입으로 지정되어 있는지, 이 토큰은 어떤 토큰인지에 대한 내용을 담고 있다.

{
    alg: '알고리즘 타입'
    typ : '토큰 타입'
}

 

두 번째 부분인 bbb에는 토큰에 담은 내용이 들어가 있다. 예를 들어 이메일주소, 이름 등의 정보들이 포함되어져 있는 부분이다.

{
    email : '내 이메일',
    name : '내 이름!',
}

 

마지막으로 가장 중요한 c부분에는 서명에 관한 내용들을 담고 있다. 헤더부분과 내용부분을 base64 방식으로 인코딩하여 점을 기준으로 값들을 나누어 표현시킨다. 이 서명부분에는 사용자가 임의로 지정하여 추가한 secret key라는 것이 포함되어져 있다. 이 부분에 포함되어져 있는 SECRET KEY는 JWT토큰을 검증할 때, 이 서명부분에 포햠되어져 있는 SECRET KEY와 일치하는지 확인 후, 토큰에 대한 값을 활용할 수 있게 하는 중요한 역할을 한다. 만약 SECRET_KEY가 일치하지 않는 경우 토큰을 활용할 수 없으며 인증을 받지 못하게 된다.

 

2. 설치방법(Node.js - NPM + Yarn)

필자는 yarn을 활용하여 jwt토큰을 설치 후, 활용하였다.

yarn add jsonwebtoken
npm install jsonwebtoken

둘 중 편한 방법으로 선택하여 설치를 진행하면 된다.

 

설치를 진행한 후, 

import jwt from 'jsonwebtoken';
const jwt = require('jsonwebtoken');

를 입력하여 토큰을 생성 후, 사용하고자 하는 js파일 상단부에 입력하면 된다.

 

jwt.sign({
  email : '반갑습니다.',
  exp: Math.floor(Date.now() / 1000) + (60 * 60),
}, secret_key);

 

3. JWT 토큰 생성의 원리와 검증

 

3-1. 생성(sign)

sign은 토큰을 생성한다는 메서드이고, {} 안에 들어가 있는 값들은 토큰의 payload. 즉, 토큰에 포함되어져 있는 내용들을 뜻한다.

exp라는 개념이 생소할수도 있는데, 이 exp는 만료시간을 뜻한다. Date함수를 활용하여 토큰의 유효시간을 1시간으로 지정해놓았다. 이 1시간이 지나게 되면 해당 토큰은 소멸되고 더 이상 인증에 활용을 할 수 없다. 토큰의 만료시간을 지정해놓지 않으면 매번 토큰이 생성되어 토큰이 넘쳐나는 상황을 직면할 수 있기에 토큰의 만료기간을 설정해 놓는 것이 중요하다.

마지막으로 secret_key는 위에서 말한 검증을 진행할 때 활용되는 것이다. 보통은 .env환경변수 파일에 secret key를 저장해놓고 활용한다. 이 서명키를 활용하여 토큰을 생성하고, 토큰 검증시, 이 서명키와 일치하는 토큰의 내용을 볼 수 있게 되는 것이다.

 

3-2. 검증(verify)

jwt.verifty( token, secret_key);

토큰의 검증은 verify 메서드를 활용하여 진행한다. token에는 aaa.bbb.ccc 형식으로 생성된 토큰을 집어넣고, secret_key에는 위에서 말했듯이 .env 환경변수 파일에 지정해 놓은 값을 입력하여 활용한다.

 

이 JWT토큰을 세션 스토리지, 로컬 스토리지 또는 쿠키에 저장하여 사용자를 인증하고 관련 내용들을 활용할 수 있도록 사용할 수 있다. 익히 알려진 저장공간 이 3군데 중에서 자신이 넣고 싶은 곳에 토큰 값을 저장하여 활용하면 된다. 필자는 쿠키에 토큰 값을 활용하여 로그인한 사용자의 권한을 확인하여 페이지 이동을 방지할 때, 활용하였다. 

 

4. 참고 사이트

https://jwt.io

JWT.IO

jwt관련 사이트를 통해 토큰관련 추가적인 정보들을 얻을 수 있으며 이 사이트를 통해 토큰을 간단하게 발급, 검증할 수 있다. 이러한 내용들이 사이트 안에 포함이 되어져 있기 때문에 한 번 쯤은 방문하여 확인하면 좋을 것이다.

 

 

쿠키를 활용하여 값을 저장하는 방법은 추후에 살펴보겠다.

(쿠키 같은 경우는 jQuery 라이브러리를 활용하여 생성 및 가져올 수도 있는데 필자는 리액트 프레임워크를 활용하였기 때문에 

yarn add universal-cookie를 설치한 후 쿠키를 생성하고 가져오는 것을 진행하였다.)

 

(... 다음 포스트 : 쿠키를 활용하여 값을 저장, 가져오기 및 백엔드에서 해당하는 정보를 가져오는 법을 다룰 것이다.)