[GDSC/Front-End] JWT 로그인

📕 JSON Web Token

• 인증에 필요한 정보들을 암호화시킨 JSON 토큰
• 웹표준으로서, 두 개체에서 JSON 객체를 사용하여 가볍고 자가수용적인(self-contained) 방식으로 정보를 안정성 있게 전달
• JWT 기반 인증은 JWT 토큰(Access Token)을 HTTP 헤더에 실어 서버가 클라이언트를 식별하는 방식

 

📌 JWT 사용 순서

1. 클라이언트 사용자가 아이디, 패스워드를 통해 웹서비스 인증
2. 서버에서 서명된 JWT를 생성하여 클라이언트에 응답으로 돌려줌
3. 클라이언트가 서버에 데이터를 추가적으로 요구할 때 JWT를 HTTP Header에 첨부
4. 서버에서 클라이언트로부터 온 JWT를 검증

 

📌 JWT 구조

WT는 ‘.’을 구분자로 3가지의 문자열로 되어 있다.

aaaaaa.bbbbbb.cccccc
헤더(header).내용(payload).서명(signature)

(1) header

정의/개념

• JWT 에서 사용할 타입과 해시 알고리즘의 종류
• JWT에서 사용할 타입과 해시 알고리즘의 종류가 담겨있다.

쓰임 

• 두 데이터를 JSON으로 만들고, URL-safe BASE64 인코딩하면 완성

typ 

• 토큰의 타입을 지정한다. 즉, JWT이다.

alg 

• 해싱 알고리즘을 지정한다. 해싱 알고리즘으로는 보통 HMAC SHA256 혹은 RSA가 사용되며, 이 알고리즘은 토큰을 검증할 때 사용되는 signature 부분에서 사용된다.

 

(2) payload

정의/개념

• 서버에서 첨부한 사용자 권한 정보와 데이터
• 즉, 서버와 클라이언트가 주고받는 시스템에서 실제로 사용될 정보에 대한 내용을 담고 있는 섹션
• payload 부분에는 토큰에 담을 정보가 들어 있다. 여기에 담는 '정보의 한 조각'을 클레임(claim)이라고 부른다.
• name/value의 한 쌍으로 이루어져 있으며, 토큰에는 여러 개의 클레임들을 넣을 수 있다.

쓰임 

• 전달할 데이터를 JSON으로 만들고, URL-safe BASE 64 인코딩하면 완성

세 가지 클레임

• 클레임은 등록된(registered) 클레임, 공개(public) 클레임, 비공개(private) 클레임으로 나뉘어져 있다.

 

(3) signature

정의/개념 

• 서명은 헤더의 인코딩 값과, 정보의 인코딩 값을 합친 후, 주어진 비밀키로 해쉬를 하여 생성
• Header, Payload 를 Base64 URL-safe Encode 를 한 이후 Header 에 명시된 해시함수를 적용하고, 개인키(Private Key)로 서명한 전자서명이 담겨있다.

특징 

• 시그니처에서 사용하는 알고리즘은 헤더에서 정의한 알고리즘 방식(alg)을 활용한다.
• 시그니처의 구조는 (헤더 + 페이로드)와 서버가 갖고 있는 유일한 key 값을 합친 것을 헤더에서 정의한 알고리즘으로 암호화를 한다.

쓰임 

• header과 payload를 URL-safe BASE64 인코딩 후, 마침표(.)로 이어준 뒤, 서버에서 정한 암호화 알고리즘에 따라, 서버에서 생성한 비밀키를 이용해 암호화한 후, URL-safe BASE64 인코딩을 하면 완성

 

---

📕 OAuth

• OAuth는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는 접근 위임을 위한 개방형 표준 프로토콜
• 외부 서비스에서도 인증을 가능하게 하고 그 서비스의 API를 이용하게 해주는 것

 

 

📌 동작 매커니즘

1 ~ 2. 로그인 요청

Resource Owner가 우리 서비스의 '구글로 로그인하기' 등의 버튼을 클릭해 로그인을 요청한다.

3 ~ 4. 로그인 페이지 제공, ID/PW 제공

5 ~ 6. Authorization Code 발급, Redirect URI로 리디렉트

Authorization Code란 Client가 Access Token을 획득하기 위해 사용하는 임시 코드이다. 이 코드는 수명이 매우 짧다. (일반적으로 1~10분)

7 ~ 8. Authorization Code와 Access Token 교환

9. 로그인 성공

10 ~ 13. Access Token으로 리소스 접근

 

 

📌 React에서 구현 방법

[React17]React에서 JWT 인증 구현하기