JWT(Json Web Token)란 Json 포맷을 이용하여 사용자에 대한 속성을 저장하는 Claim기반의 Web Token이다. JWT는 토큰 자체를 정보로 사용하는 Self-Contained 방식으로 정보를 안전하게 전달한다. 주로 회원 인증이나 정보 전달에 사용된다.
Application이 실행될 때, JWT를 static변수와 local 스토리지에 저장하게 된다. static변수에 저장되는 이유는 HTTP통신을 할 때마다 JWT를 HTTP헤더에 담아서 보내야 하는데, 이를 local 스토리지에서 계속 불러오면 오버헤드가 발생하기 때문이다. Client에서 JWT를 포함해 요청을 보내면 서버는 허가된 JWT인지를 검사한다. 또한 로그아웃을 할 경우 local스토리지에 저장된 JWT데이터를 제거한다.(실제 서비스의 경우에는 로그아웃시, 사용했던 토큰을 blacklist라는 DB 테이블에 넣어 해당 토큰의 접근을 막는 작업을 해주어야 한다.)
JWT는 Header, Payload, Signature의 세 부분으로 이루어지며, Json형태인 각 부분은 Base64로 인코딩 되어 표현된다. 또한 각각의 부분을 이어 주기 위해 . 구분자를 사용하여 구분한다. 추가로 Base64는 암호화된 문자열이 아니고, 같은 문자열에 대해 항상 같은 인코딩 문자열을 반환한다.
토큰의 헤더는 alg와 typ 두 가지 정보로 구성된다. alg는 헤더(Header)를 암호화 하는것이 아니고, Signature를 해싱하기 위한 알고리즘을 지정하는 것이다.
{
"alg" : "HS256", // 알고리즘 방식을 지정하며, 서명(Signature)및 토큰 검증에 사용
"typ" : JWT //토큰의 타입을 지정
}
토큰의 페이로드에는 토큰에서 사용할 정보의 조각들인 클레임(Claim)이 담겨 있다.
클레임은 총 3가지로 나누어지며, Json(Key/Value)형태로 다수의 정보를 넣을 수 있다.
등록된 클레임은 토큰 정보를 표현하기 위해 이미 정해진 종류의 데이터들로, 모두 선택적으로 작성이 가능하며 사용할 것을 권장한다. 또한 JWT를 간결하게 하기 위해 Key는 모두 길이 3의 String이다. 여기서 Subject로는 unique한 값을 사용하는데, 사용자 이메일을 주로 사용한다.
공개 클레임은 사용자 정의 클레임으로, 공개용 정보를 위해 사용된다. 충돌 방지를 위해 URI포맷을 이용하며, 예시는 아래와 같다.
{
"access_token" : access
}
JWT에서 정보 추출하기!
Backend에서 지정한 access_token을 받은 후 name인 John Doe를 추출 하려면 아래의 코드와 같이 jwt_decode라이브러리를 이용하여 정보를 추출할 수 있다.
const {access_token : accessToken } = res.data;
const payload = jwt_decode(accessToken);
const { name } = payload
여기서 jwt_decode는 Base64Url로 인코딩된 JWT 토큰을 디코딩하는데 도움이 되는 작은 브라우저 라이브러리이다.
서명(Signature)은 토큰을 인코딩하거나 유효성 검증을 할 때 사용하는 고유의 암호화 코드이다. 서명(Signature)은 위에서 만든 헤더(Header)와 페이로드(Payload)의 값을 각각 BASE64로 인코딩하고, 인코딩한 값을 비밀키를 이용해 헤더(Header)에서 정의한 알고리즘으로 해싱을 하고, 이 값을 다시 BASE64로 인코딩하여 생성한다.
생성된 토큰은 HTTP 통신을 할 때 Authorization이라는 key의 value로 사용된다. 일반적으로 value에는 Bearer이 앞에 붙여진다.
{
"Authorization" : "Bearer {생성된 토큰 값}",
}