Learn-json-web-tokens: ์›น ์Šคํ† ๋ฆฌ์ง€ ๋ฐ ์ ์ง„์  ๊ฐœ์„ 

์— ๋งŒ๋“  2015๋…„ 10์›” 15์ผ  ยท  9์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: dwyl/learn-json-web-tokens

#5, #46 ๋ฐ ๋Œ€๋ถ€๋ถ„์˜ ์˜จ๋ผ์ธ ํ† ๋ก ์—์„œ ์‚ฌ๋žŒ๋“ค์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ฟ ํ‚ค๊ฐ€ ์•„๋‹Œ JWT์— ๋Œ€ํ•ด ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€/์„ธ์…˜ ์Šคํ† ๋ฆฌ์ง€๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค. ์ด๋ฅผ ์œ„ํ•ด์„œ๋Š” ์•ฑ ์ „์ฒด์—์„œ AJAX๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋ฏ€๋กœ ๋งค๋ฒˆ ์›น ์ €์žฅ์†Œ์—์„œ ํ—ค๋”๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚ด ์ดํ•ด๋Š” ์ด๊ฒƒ์ด ์‚ฌ์ดํŠธ ๊ฐ„ ์š”์ฒญ ์œ„์กฐ๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•œ ๊ฒƒ์ด๋ฉฐ ๋ณธ์งˆ์ ์œผ๋กœ ์ด๋ฅผ ์ˆ˜ํ–‰ํ•˜๊ธฐ ์œ„ํ•ด ๋™์ผํ•œ ์ถœ์ฒ˜ ์ •์ฑ…์„ ํ™œ์šฉํ•˜๊ณ  ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ์ผ๋ถ€ ์žฅ์น˜๊ฐ€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ „ํ˜€ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ์ ์ง„์  ํ–ฅ์ƒ๊ณผ ์–ด๋–ป๊ฒŒ ๋งž์Šต๋‹ˆ๊นŒ?

enhancement question

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์ด๊ฒƒ์ด ๋„๊ตฌ ์„ธํŠธ์— ๋”ฐ๋ผ ๋‹ค๋ฅด์ง€๋งŒ ๋ฐ˜๋“œ์‹œ ๊ทธ๋Ÿฐ ๊ฒƒ์€ ์•„๋‹™๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด Angular๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ด๊ฒƒ์„ ํ•œ ๋ฒˆ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. jquery๋กœ๋„ ์‰ฝ๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

$.ajaxSetup({
   headers: { 'x-my-custom-header': 'some value' }
});

ํ† ํฐ์— ๋Œ€ํ•œ ์ „์†ก ๊ณ„์ธต์œผ๋กœ ์ฟ ํ‚ค์˜ ๋˜ ๋‹ค๋ฅธ ๋ฌธ์ œ๋Š” 2๊ฐœ์˜ ์‹œ๊ฐ„ ์ดˆ๊ณผ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์œผ๋ฉฐ CORS ๋ฌธ์ œ๋ฅผ ํ”ผํ•˜๋Š” ์ด์ ์„ ์–ป์ง€ ๋ชปํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ฟ ํ‚ค๋Š” RESTful ์›น ์„œ๋น„์Šค์— ๋Œ€ํ•œ ์•ก์„ธ์Šค๋ฅผ ๋ณต์žกํ•˜๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ์ฟ ํ‚ค๋ฅผ ๋ฒˆ๋“ค๋กœ ๋ฌถ๋Š” ๊ฒƒ๋ณด๋‹ค ํ† ํฐ์œผ๋กœ ๋ฆฌ์†Œ์Šค์— ์•ก์„ธ์Šคํ•˜๊ธฐ ์œ„ํ•ด ํ•˜๋‚˜์˜ ์ปฌ์„ ๊ตฌ์„ฑํ•˜๋Š” ๊ฒƒ์ด ํ›จ์”ฌ ์‰ฝ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  9 ๋Œ“๊ธ€

_Another_ _GREAT _ _
์ด ๋งˆ์ดํฌ๋กœ ์˜ˆ์ œ์˜ ๋ชฉ์ ์„ ์œ„ํ•ด "_Ok_"๊ฐ€ localStorage ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.
์†”์งํžˆ ๋งํ•ด์„œ, _๋ชจ๋‘_๋Š” ์š”์ฆ˜ ์ ‘๊ทผ์„ฑ์— ๋Œ€ํ•ด ์ „ํ˜€ ๊ณ ๋ คํ•˜์ง€ ์•Š๊ณ  React๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
๋ฉ‹์ง„ ์•„์ด๋“ค์€ ๋ชจ๋‘ _Progressive Enhancement_๋ณด๋‹ค _Shiny New Frameworks_์— _way_ ๋” ๊ด€์‹ฌ์ด ์žˆ์Šต๋‹ˆ๋‹ค...

ํ•˜์ง€๋งŒ...
_actual_ ์•ฑ์—์„œ๋Š” ์ด์ „ ๋ฒ„์ „๊ณผ์˜ ํ˜ธํ™˜์„ฑ๊ณผ ์ ์ง„์ ์ธ ํ–ฅ์ƒ์„ ์œ„ํ•ด cookies _precisely_ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
์ด๊ฒƒ์ด JWT2์— ์˜ต์…˜์„ ์ถ”๊ฐ€ํ•œ ์ด์œ ์ž…๋‹ˆ๋‹ค... ์ฐธ์กฐ: https://github.com/dwyl/hapi-auth-jwt2#want -to-sendstore-your-jwt-in-a-cookie

๊ทธ๋ž˜์„œ ๊ฒฐ๋ก ์ ์œผ๋กœ: ์ด ๋ฆฌํฌ์ง€ํ† ๋ฆฌ์˜ ์˜ˆ์ œ์— localStorage ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  JWT๋ฅผ ์ €์žฅํ•˜๊ธฐ ์œ„ํ•ด ์ฟ ํ‚ค๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด "_Ohkay_"์ž„์„ ์•Œ๋ฆฌ๋Š” comment ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด ์—ฌ์ „ํžˆ ๋ชจ๋“  _์ˆ˜ํ‰ ํ™•์žฅ์„ฑ_๊ณผ ๋ณด์•ˆ์„ ์–ป์„ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค JWT๋ฅผ ์„ค์ •/๊ฐ€์ ธ์˜ค๊ณ  ๊ฐ ์š”์ฒญ์˜ ํ—ค๋”์— ์ถ”๊ฐ€ํ•ด์•ผ ํ•˜๋Š” _๋…ธ๋ ฅ_์„ ์ ˆ์•ฝํ•˜๋ฉด์„œ JWT ์‚ฌ์šฉ์˜ ์ด์ ...

@rjmk & @nelsonic

๋กœ์ปฌ ์ €์žฅ์†Œ์— ์ €์žฅ๋œ JWTS๋ฅผ ํ—ค๋”๋กœ ๋ณด๋‚ด์•ผ ํ•˜๋Š” ํŠน๋ณ„ํ•œ ์ด์œ ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ? ์•„๋‹ˆ๋ฉด https://www.npmjs.com/package/node-localstorage ์‚ฌ์šฉ์— ๋Œ€ํ•ด ์ทจ์•ฝํ•˜๊ฑฐ๋‚˜ "์ž˜๋ชป๋œ" ๊ฒƒ์ด

@Jbarget ์„œ๋ฒ„์—์„œ localStorage ์— ์•ก์„ธ์Šคํ•ด์•ผ ํ•˜๋Š” "_Universal_"์„ ๊ตฌ์ถ•ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ? ๊ทธ๊ฒƒ์ด ๊ท€ํ•˜์˜ ์‚ฌ์šฉ ์‚ฌ๋ก€๋ผ๋ฉด node-localstorage ๋ชจ๋“ˆ์ด ๊ท€ํ•˜์˜ ๋ชฉ์ ์„ ๋‹ฌ์„ฑํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.
_ํ•˜์ง€๋งŒ_ "AJAX" ์š”์ฒญ์—์„œ ์„œ๋ฒ„๋กœ ๋‹ค์‹œ ๋ณด๋‚ด๋ ค๋ฉด header ์—์„œ JWT๋ฅผ _์ˆ˜๋™์œผ๋กœ_ ๋ณด๋‚ด์•ผ ํ•ฉ๋‹ˆ๋‹ค... ๋”ฐ๋ผ์„œ ์›ํ•˜๋Š” ๋ชจ๋“  ๊ฒฝ์šฐ _module_์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ๊ทธ๋‹ค์ง€ ์ด์ ์ด ์—†์Šต๋‹ˆ๋‹ค. localStorage ์—์„œ ํ† ํฐ์„ ๊ฐ€์ ธ์˜ค๊ฑฐ๋‚˜ ์„ค์ •ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค ...

@nelsonic ์šฐ๋ฆฌ๋Š” ์•„๋งˆ๋„ ๊ฐ ์š”์ฒญ์˜ ํ—ค๋”์— ์„ค์ •ํ•˜๊ฒŒ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ช…ํ™•์„ฑ์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค!

@Jbarget JWT๋ฅผ ์ฟ ํ‚ค์— ์ €์žฅํ•˜๋Š” ๋ฐ _์ด์˜๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ? (_๊ทธ๊ฒƒ์€ ๋‹น์‹ ์˜ ์‚ถ์„ ๋‹จ์ˆœํ™”ํ•ฉ๋‹ˆ๋‹ค..._)

@nelsonic ์ด์˜๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ๋กœ์ปฌ/์„ธ์…˜ ์ €์žฅ์†Œ๊ฐ€ ์•„๋‹Œ ์•ฑ์˜ ์–ด๋Š ๊ณณ์—์„œ๋‚˜ ์ฟ ํ‚ค์— ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ์–ด ๋‚ด ์‚ถ์ด ๋‹จ์ˆœํ™”๋œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋Š” ๊ฒƒ์ด ๋งž์Šต๋‹ˆ๊นŒ?

์„œ๋ฒ„์—์„œ ์ฟ ํ‚ค๋ฅผ _์„ค์ •_ํ•˜๋ฉด ์ „์†ก/์ˆ˜์‹ ๋œ _all_ ์š”์ฒญ์— ํ•ญ์ƒ ์ฟ ํ‚ค๊ฐ€ ํฌํ•จ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์•ฑ์„ ๋‹จ์ˆœํ™”ํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋‹น์‹ ์ด ๊ทธ ์‹œ์  ์ดํ›„์— ๊ทธ๊ฒƒ์— ๋Œ€ํ•ด _์ ˆ๋Œ€_ ์ƒ๊ฐํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.
๋Œ€์กฐ์ ์œผ๋กœ JWT๋ฅผ localStorage ์— ์ €์žฅํ•˜๋ฉด ๋น„ ajax ์ƒํ˜ธ ์ž‘์šฉ์„ ๊ฐ€์งˆ ์ˆ˜ ์—†์œผ๋ฉฐ ์„œ๋ฒ„์— ๋Œ€ํ•œ ๊ฐ ์š”์ฒญ์— ๋Œ€ํ•ด SET auth ํ—ค๋”๋ฅผ ๊ธฐ์–ตํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. .

์ด๊ฒƒ์ด ๋„๊ตฌ ์„ธํŠธ์— ๋”ฐ๋ผ ๋‹ค๋ฅด์ง€๋งŒ ๋ฐ˜๋“œ์‹œ ๊ทธ๋Ÿฐ ๊ฒƒ์€ ์•„๋‹™๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด Angular๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ด๊ฒƒ์„ ํ•œ ๋ฒˆ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. jquery๋กœ๋„ ์‰ฝ๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

$.ajaxSetup({
   headers: { 'x-my-custom-header': 'some value' }
});

ํ† ํฐ์— ๋Œ€ํ•œ ์ „์†ก ๊ณ„์ธต์œผ๋กœ ์ฟ ํ‚ค์˜ ๋˜ ๋‹ค๋ฅธ ๋ฌธ์ œ๋Š” 2๊ฐœ์˜ ์‹œ๊ฐ„ ์ดˆ๊ณผ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์œผ๋ฉฐ CORS ๋ฌธ์ œ๋ฅผ ํ”ผํ•˜๋Š” ์ด์ ์„ ์–ป์ง€ ๋ชปํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ฟ ํ‚ค๋Š” RESTful ์›น ์„œ๋น„์Šค์— ๋Œ€ํ•œ ์•ก์„ธ์Šค๋ฅผ ๋ณต์žกํ•˜๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ์ฟ ํ‚ค๋ฅผ ๋ฒˆ๋“ค๋กœ ๋ฌถ๋Š” ๊ฒƒ๋ณด๋‹ค ํ† ํฐ์œผ๋กœ ๋ฆฌ์†Œ์Šค์— ์•ก์„ธ์Šคํ•˜๊ธฐ ์œ„ํ•ด ํ•˜๋‚˜์˜ ์ปฌ์„ ๊ตฌ์„ฑํ•˜๋Š” ๊ฒƒ์ด ํ›จ์”ฌ ์‰ฝ์Šต๋‹ˆ๋‹ค.

1๋…„์ด ๋„˜์—ˆ์œผ๋‹ˆ ์ž๋™์œผ๋กœ ์ข…๋ฃŒ๋˜๋Š” ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค. ์—ฌ์ „ํžˆ ๊ท€ํ•˜์˜ ํ”„๋กœ์ ํŠธ์™€ ๊ด€๋ จ์ด ์žˆ๋Š” ๊ฒฝ์šฐ ์ž์œ ๋กญ๊ฒŒ ๋‹ค์‹œ ์—ฌ์‹ญ์‹œ์˜ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰