Web

Token] JWT (JSON Web Token)

์™•๊ฐ€๐Ÿ‘ 2023. 7. 27. 16:56
728x90
๋ฐ˜์‘ํ˜•

์ธ์ฆํ† ํฐ์˜ ๋Œ€ํ‘œ์ธ JWT์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

(๋‹ค๋ฅธ ํ† ํฐ์ด ์žˆ๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ...)

 

JWT(JSON Web Token)๋Š” ์ธ์ฆ์— ํ•„์š”ํ•œ ์ •๋ณด๋ฅผ ์•”ํ˜ธํ™”์‹œํ‚จ JSONํ˜•ํƒœ์˜ ์„œ๋ช…๋œ ํ† ํฐ์ž…๋‹ˆ๋‹ค.

์ €๋ฒˆ ๊ธ€์—์„œ ๋ฐฐ์› ๋˜ ํ† ํฐ์ธ์ฆ์„ ํ•  ๋•Œ ์‚ฌ์šฉ๋˜๋Š” ๋ฐฉ์‹?์ž…๋‹ˆ๋‹ค.

 

https://jwt.io/

 

 


 

 

ํŠน์ง•

  • JWTํ† ํฐ์€ ๋ฐœ๊ธ‰ํ•˜๋ฉด ๋ณ„๋„๋กœ ์‚ญ์ œ๊ฐ€ ๋ถˆ๊ฐ€๋Šฅํ•˜๋ฉฐ ์œ ํšจ์‹œ๊ฐ„์„ ํ†ตํ•ด ๊ด€๋ฆฌํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
  • JWTํ† ํฐ์„ ์‚ฌ์šฉํ•˜๋ฉด DB์กฐํšŒ๋ฅผ ํ•˜์ง€ ์•Š๊ณ , ์ธ์ฆ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๋ฐ์ดํ„ฐ์˜ ๋ณ€์กฐ๋ฅผ ๋ง‰์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์„œ๋ฒ„ ์ธก์—์„œ ๋ณ„๋„์˜ ์ €์žฅ์†Œ๊ฐ€ ํ•„์š” ์—†์Šต๋‹ˆ๋‹ค. (ํด๋ผ์ด์–ธํŠธ์—์„œ ์ฃผ๋กœ ์ฟ ํ‚ค๋‚˜ ์›น์Šคํ† ๋ฆฌ์ง€์— ์ €์žฅํ•ด์„œ ๊ด€๋ฆฌ)
  • ์œ ํšจ๊ธฐ๊ฐ„์œผ๋กœ Auth๋ฅผ ๊ด€๋ฆฌํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ธฐ๊ฐ„์„ ์งง๊ฒŒ ํ•˜๋ฉด ์ž์ฃผ ๋กœ๊ทธ์ธ ํ•ด์•ผ ๋˜๊ณ , ๊ธธ๊ฒŒ ํ•˜๋ฉด ๋ณด์•ˆ์— ์ทจ์•ฝํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
  • ํ† ํฐ์˜ ๊ธธ์ด๊ฐ€ ๊ธธ์–ด์งˆ ๊ฒฝ์šฐ, ๋„คํŠธ์›Œํฌ์— ๋ถ€ํ•˜๋ฅผ ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

 


 

 

๊ตฌ์กฐ

Header.Payload.Signature

์ด 3๊ฐœ์˜ ๋ฌธ์ž์—ด์ด ํ•ฉ์ณ์ง„ ๊ฒƒ์„ JWT๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

  • Header : JWT์—์„œ ์‚ฌ์šฉํ•  ํƒ€์ž…๊ณผ ํ•ด์‹œ ์•Œ๊ณ ๋ฆฌ์ฆ˜์˜ ์ข…๋ฅ˜
  • Payload : ์‚ฌ์šฉ์ž ๊ถŒํ•œ ์ •๋ณด์™€ ๋ฐ์ดํ„ฐ
  • Signature : Header, Payload๋ฅผ ํ•ด์‹œํ•จ์ˆ˜๋ฅผ ์ ์šฉ์‹œํ‚จ ๋’ค, ์ „์ž์„œ๋ช…

 

 

Header

JWT์—์„œ ์‚ฌ์šฉํ•  ํƒ€์ž…๊ณผ ํ•ด์‹œ ์•Œ๊ณ ๋ฆฌ์ฆ˜์˜ ์ข…๋ฅ˜๋ฅผ ๋‹ด์•„์ค๋‹ˆ๋‹ค.

  • alg : ์„œ๋ช… ์•”ํ˜ธํ™” ์•Œ๊ณ ๋ฆฌ์ฆ˜
  • typ : ํ† ํฐ ์œ ํ˜•

(๋‹ค๋ฅธ ๊ฒƒ๋“ค๋„ ์žˆ์„ ๊ฑฐ ๊ฐ™๊ธฐ๋Š” ํ•œ๋ฐ... ์ฐพ์•„๋ณด๋Š” ๊ฑฐ ๋งˆ์ž HS256๊ณผ JWT๋ฐ–์— ์•ˆ ๋ณด์ธ๋‹ค.)

 

 


 

 

Payload

ํ† ํฐ์—์„œ ์‚ฌ์šฉ๋  ์ •๋ณด๋“ค์ด ๋‹ด๊ฒจ ์žˆ์Šต๋‹ˆ๋‹ค.

Key-Valueํ˜•์‹์œผ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๊ณ , ์ •๋ณด ํ•œ ๋ฌถ์Œ์„ Claim์ด๋ผ๊ณ  ์ง€์นญํ•œ๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

Registered claims, Public claims, Private claim ์ด 3๊ฐ€์ง€๋กœ ๋‚˜๋‰œ๋‹ค๊ณ  ํ•œ๋‹ค.

 

  • Registered claims : ๋ฏธ๋ฆฌ ์ •์˜ํ•œ ํด๋ ˆ์ž„
    • sub : ์ œ๋ชฉ
    • iss : ๋ฐœํ–‰์ž
    • lat : ๋ฐœํ–‰ ์‹œ๊ฐ„
    • exp : ๋งŒ๋ฃŒ ์‹œ๊ฐ„
  • Public claims : ์‚ฌ์šฉ์ž๊ฐ€ ์ •์˜ํ•  ์ˆ˜ ์žˆ๋Š” ๊ณต๊ฐœ์šฉ ์ •๋ณด ํด๋ ˆ์ž„. ์ถฉ๋Œ ๋ฐฉ์ง€๋ฅผ ์œ„ํ•ด URL ํฌ๋งท์„ ์ด์šฉ
    • ์œ„ ์˜ˆ์‹œ์—์„œ https://wanga... ์ด ๋ถ€๋ถ„์ด ํ•ด๋‹น๋œ๋‹ค.
  • Private claims : ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ ๊ฐ„์— ์ •๋ณด๋ฅผ ๊ณต์œ ํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ง„ ํด๋ ˆ์ž„.
    • ์œ„ ์˜ˆ์‹œ์—์„œ username: wanga ์ด ๋ถ€๋ถ„์ด ํ•ด๋‹น๋ฉ๋‹ˆ๋‹ค.

 

 


 

 

Signature

Header์—์„œ ์ •์˜ํ•œ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ฐฉ์‹(alg) ๊ฐ’์„ ํ™œ์šฉํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

Header์™€ Payload์™€ ์„œ๋ฒ„๊ฐ€  ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์œ ์ผํ•œ key๊ฐ’์„ ํ•ฉ์น˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

 

 

์ „์ฒด์ ์œผ๋กœ ์ทจํ•ฉํ•ด์„œ ํ† ํฐ์„ ๋งŒ๋“ค๊ฒŒ ๋˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

https://jwt.io/

 

 

728x90

 

 

Refresh Token

๊ธฐ๋ณธ์ ์œผ๋กœ ์„œ๋ฒ„์—์„œ JWTํ† ํฐ์„ ๋ฐœํ–‰ํ•  ๋•Œ๋Š” 2๊ฐœ์˜ ์ข…๋ฅ˜(AccessToken, RefreshToken)๋กœ ํ† ํฐ์„ ๋ฐœํ–‰ํ•ฉ๋‹ˆ๋‹ค.

ํ† ํฐ์˜ ๊ฐ’์€ ๊ฐ™์ง€๋งŒ ์œ ํšจ์‹œ๊ฐ„๋งŒ ๋‹ค๋ฅธ ํ† ํฐ์ž…๋‹ˆ๋‹ค.

Refresh Token๋„ Access Token๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ฟ ํ‚ค๋‚˜ ์›น์Šคํ† ๋ฆฌ์ง€์— ์ €์žฅ๋ฉ๋‹ˆ๋‹ค.

 

Refresh Token์„ ์ถ”๊ฐ€๋กœ ๋ฐœํ–‰ํ•˜๋Š” ์ด์œ ๋Š”

Access Token์ด ํƒˆ์ทจ๋‹นํ•  ์œ„ํ—˜์ด ๋†’๊ธฐ ๋•Œ๋ฌธ์ธ๋ฐ, ํƒˆ์ทจํ•œ Access Token์„ ํ†ตํ•ด์„œ ์„œ๋ฒ„์— ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ฌธ์ œ๋ฅผ Access Token์€ ๊ฐ€์ง€๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— Refresh Token์ด๋ผ๋Š” ๋˜ ํ•˜๋‚˜์˜ ํ† ํฐ์„ ์œ ํšจ๊ธฐ๊ฐ„์„ ๊ธธ๊ฒŒ ๋ฐœํ–‰ํ•˜์—ฌ Access Token์ด ๋งŒ๋ฃŒ ๋์„ ๋•Œ, ์ƒˆ๋กœ ๋ฐœ๊ธ‰ํ•ด ์ฃผ๋Š” ํ† ํฐ์„ ๋ฐœํ–‰ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

(ํด๋ผ์ด์–ธํŠธ์—์„œ Access Token์ด ๋งŒ๋ฃŒ๋œ ๊ฒƒ์„ Payload๋ฅผ ํ†ตํ•ด ์•Œ ์ˆ˜ ์žˆ์œผ๋‹ˆ, ์• ์ดˆ์— ์žฌ๋ฐœ๊ธ‰์„ ์š”์ฒญํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.)

 

Access Token์ด ๊ธฐ๊ฐ„์ด ๋งŒ๋ฃŒ๋œ ์ƒํƒœ์—์„œ ์„œ๋ฒ„๋กœ ๋ณด๋‚ด์ง€๊ฒŒ ๋˜๋ฉด,

์„œ๋ฒ„๋Š” ๋งŒ๋ฃŒ๋๋‹ค๋Š” ์‘๋‹ต์„ ๋ณด๋‚ด๊ฒŒ ๋˜๊ณ ,

๊ทธ๋•Œ  Access Token๊ณผ Refeash Token์„ ๊ฐ™์ด ๋ณด๋‚ด๋ฉด์„œ ์ƒˆ๋กœ์šด Access Token์„ ๋ฐœ๊ธ‰ํ•˜๊ฒŒ ๋˜๊ณ 

ํด๋ผ์ด์–ธํŠธ์—์„œ๋„ Access Token์ด ์—…๋ฐ์ดํŠธ ๋˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

๋กœ๊ทธ์•„์›ƒ ํ•˜๊ฒŒ ๋˜๋ฉด ๋‘ ๊ฐœ์˜ ํ† ํฐ์€ ์‚ญ์ œ๋˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

์ฃผ๋กœ Refresh Token์€ 2์ฃผ, Access Token์€ 1~2์‹œ๊ฐ„์˜ ์œ ํšจ๊ธฐ๊ฐ„์„ ๊ฐ–๊ฒŒ ๋ฐœ๊ธ‰ํ•ฉ๋‹ˆ๋‹ค.

Refresh Token๋„ ํƒˆ์ทจ๋  ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋„ˆ๋ฌด ๊ธธ๋ฉด ์•ˆ ๋˜๊ณ , ํ† ํฐ ํƒˆ์ทจ์˜ ์œ„ํ—˜์ด ์™„์ „ํžˆ ํ•ด๊ฒฐ๋œ ๊ฒƒ์€ ์•„๋‹™๋‹ˆ๋‹ค.

 

 


 

 

๋™์ž‘ ์ˆœ์„œ

  1. ์‚ฌ์šฉ์ž๊ฐ€ ๋กœ๊ทธ์ธ์„ ์‹œ๋„ํ•˜์—ฌ ์„œ๋ฒ„์— ์š”์ฒญ์„ ๋ณด๋ƒ…๋‹ˆ๋‹ค.
  2. ํด๋ผ์ด์–ธํŠธ๋กœ๋ถ€ํ„ฐ ์š”์ฒญ์„ ๋ฐ›์€ ์„œ๋ฒ„๋Š” DB์กฐํšŒํ•˜์—ฌ ์‚ฌ์šฉ์ž ๋กœ๊ทธ์ธ์ •๋ณด๋ฅผ ํ™•์ธํ•œ ๋’ค,
    JWTํ† ํฐ์„ Header.PayLoad.Signature๋กœ ๋งŒ๋“ค๊ณ  ์•”ํ˜ธํ™”ํ•˜์—ฌ ํ† ํฐ์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
  3. ์ƒ์„ฑ๋œ ํ† ํฐ์„ ์ฟ ํ‚ค์— ๋‹ด์•„ ํด๋ผ์ด์–ธํŠธ์— ์ „๋‹ฌํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
  4. ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ์‘๋‹ต์„ ๋ฐ›์€ ํด๋ผ์ด์–ธํŠธ๋Š” ์ฟ ํ‚ค์— ๋‹ด๊ธด ํ† ํฐ ๊ฐ’์„ ์ฟ ํ‚ค, ๋กœ์ปฌ์Šคํ† ๋ฆฌ์ง€ ๋“ฑ์— ์ €์žฅํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
  5. ํด๋ผ์ด์–ธํŠธ๋Š” ์ด์ œ API๋ฅผ ์š”์ฒญํ•  ๋•Œ, Authorization header๊ฐ’์— ํ† ํฐ๊ฐ’์„ ๋‹ด์•„์„œ ๋ณด๋‚ด๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
  6. ์„œ๋ฒ„๋Š” ์ด์ œ ํด๋ผ์ด์–ธํŠธ๋กœ๋ถ€ํ„ฐ ์š”์ฒญ๋ฐ›์„ ๋•Œ๋งˆ๋‹ค ํ† ํฐ ๊ฐ’์„ ํ™•์ธํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.
  7. ๋งŒ์•ฝ ํด๋ผ์ด์–ธํŠธ๋กœ๋ถ€ํ„ฐ ์š”์ฒญ์„ ๋ฐ›์•˜๋Š”๋ฐ ํ† ํฐ ๊ฐ’์ด ๋งŒ๋ฃŒ๋˜์—ˆ์„ ๊ฒฝ์šฐ,
    ํด๋ผ์ด์–ธํŠธ๋Š” Refresh Token์„ ํ†ตํ•ด Access Token์„ ์žฌ๋ฐœ๊ธ‰๋ฐ›๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

 


 

 

Cookie, Session์— ์ด์–ด Token, JWT๊นŒ์ง€ ํ•ด์„œ ๊ณต๋ถ€ํ–ˆ์Šต๋‹ˆ๋‹ค.
์ž์„ธํžˆ ์‹ ๊ฒฝ ์•ˆ ์“ฐ๊ณ  ๊ฐœ๋ฐœ๋งŒ ํ–ˆ์—ˆ๋Š”๋ฐ, ๊ฐœ๋… ์žก๊ณ  ์ƒ๊ฐํ•˜๋ฉด์„œ ๊ฐœ๋ฐœ์„ ํ•  ์ˆ˜ ์žˆ์„ ๋“ฏ์‹ถ์Šต๋‹ˆ๋‹ค.
Auth ์ชฝ์€ ๊ฒฐ๊ตญ ์•ˆ ์“ฐ์ด๋Š” ๊ณณ์ด ์—†์œผ๋‹ˆ...

Cookie Session JWT 3๊ฐœ๋ฅผ ๋น„๊ตํ•ด ๊ฐ€๋ฉด์„œ ์„œ๋กœ ์“ฐ์ด๋Š” ๊ฒƒ์„ ํ™•์ธํ•˜๋ฉด ์ข‹์„ ๋“ฏ์‹ถ์Šต๋‹ˆ๋‹ค.

 

728x90

'Web' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

CSR vs SSR vs SSG (+SEO)  (0) 2023.08.06
Token] Token๋ž€? ์ •์˜  (0) 2023.07.23
Session์ด๋ž€?  (0) 2023.07.20
Cookie] ์‚ฌ์šฉํ•˜๋Š” ์ด์œ   (0) 2023.07.16
Cookie] ์ •์˜  (0) 2023.07.15