Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
SPA & JWT でWeb アプリケーションを作る
Shunta Saito
August 28, 2019
Programming
0
130
SPA & JWT でWeb アプリケーションを作る
Node.jsなAPIサーバとReactを用いたかんたんなSPAを、Fetch API & JWTを使いつつ繋ぎこむサンプルコードを見ながら、JWTの活用方法事例をご紹介します。
Shunta Saito
August 28, 2019
Tweet
Share
More Decks by Shunta Saito
See All by Shunta Saito
Nuxt.jsの静的サイト 出力を試してみる
subuta
0
260
Wordpress + ACF(Pro) Blocksで 独自コンポーネントを作る
subuta
0
150
Tailwind CSSでいろんなUIをつくる
subuta
3
730
JestとWallaby.jsで始める楽しいJavaScript testing
subuta
2
920
jspmで爆速開発する
subuta
1
1.1k
Other Decks in Programming
See All in Programming
Git操作編
smt7174
2
230
クックパッドマートの失敗したデータ設計 Before / After 大放出
mokuzon
20
25k
Pluggable Storage in PostgreSQL
sira
1
190
夕食断食にTRY!/for-lt-12th
pachikuriii
0
230
ECサイトの脆弱性診断をいい感じにやりたい/OWASPKansaiNight_LT1_220727
owaspkansai
0
290
Windows コンテナ Dojo 第5回 OpenShift で学ぶ Kubernetes 入門
oniak3ibm
PRO
0
130
ふんわり理解するcontext
rukiadia
1
180
Register-based calling convention for Go functions
cjamhe01385
0
400
このタイミングで知っておきたい 開発生産性の高いエンジニア組織の特徴とは / dev-sumi-20220721-productivity-features
findyinc
7
2.6k
ちょっとつよい足トラ
logilabo
0
370
Enzyme から React Native Testing Library に移行した経緯 / 2022-07-20
tamago3keran
1
160
How to Test Your Compose UI (Droidcon Berlin 2022)
stewemetal
1
130
Featured
See All Featured
A Philosophy of Restraint
colly
192
15k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
Rails Girls Zürich Keynote
gr2m
87
12k
What’s in a name? Adding method to the madness
productmarketing
11
1.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
39
13k
Testing 201, or: Great Expectations
jmmastey
21
5.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
14
3.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.7k
4 Signs Your Business is Dying
shpigford
169
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1.1M
Designing with Data
zakiwarfel
91
4k
Transcript
SPA & JWT ͰWeb ΞϓϦέʔγϣϯΛ࡞Δ @subuta 2019/8/28
ࣗݾհ • ໊લ: ੪౻ॣଠ (@subuta) • JavaScriptपΓͷͷ͕͖Ͱ ͢ɻ࠷͓ۙࣄͰ Node.js(Koa +
Next.js)Λ͑ͯ ͯϋοϐʔͰ͢ɻ • React͕ओʹ͖Ͱ͕͢ɺVue.js Angular.jsᅂΉఔʹ ৮ͬͯ·͢ɻ༻్ʹԠͨ͡ద ͳͷΛબͿͷ͕ྑͦ͞͏ɻ
࣍ w +85ͱ w +85ͷར༻ w +85ͷ࣮ྫ /PEFKT 41"
࣍ w +85ͱ w +85ͷར༻ w +85ͷ࣮ྫ /PEFKT 41"
JWTͱ +40/8FC5PLFO +85 JTBO*OUFSOFUTUBOEBSE GPSDSFBUJOH+40/CBTFEBDDFTTUPLFOTUIBU BTTFSUTPNFOVNCFSPGDMBJNT
JWTͱ +40/8FC5PLFOʢδΣΠιϯɾΣϒɾτʔΫ ϯʣɺ+40/Λϕʔεͱͨ͠ΞΫηετʔΫϯʢӳ ޠ൛ʣͷͨΊͷΦʔϓϯඪ४ 3'$ Ͱ͋Δɻ ུশ+85ɻ
JWTͱ zFZ+IC(DJ0J+*6[*/J*T*O3D$**LQ97$+FZ+TCEO;83+CL'[*KPJ:8 3UB8J-$+Q:92J0K&.K*/[L.[IH[4SB4:4&9#Y-/@P8O'43H $[DN+N.K-JVZV$4QZ)*z CBTFΤϯίʔυ͞Εͨ+40/จࣈྻ҉߸Խ ͞Ε͍ͯΔ༁Ͱͳ͍ͷͰɺCBTFσίʔυ͢Ε தݟ͑Δɻ
JWTͱ +85ɺαʔόʔ্ʹೝূঢ়ଶΛอ࣋͠ͳ͍εςʔ τϨεͳೝূํࣜͰ͋Δɻαʔόʔ"VUIPSJ[BUJPO ϔομʔͰ͞ΕͨτʔΫϯ͕ਖ਼͍͔͚ͩ͠Λݕূ ͠ɺΞΫηεΛڐՄ͢Δɻ+85ʹ͓͍ͯɺೝূʹ ඞཁͳใશͯτʔΫϯʹ֨ೲ͞Ε͓ͯΓɺ σʔλϕʔεͷ͍߹ΘͤΛݮ͢Δ͜ͱ͕Ͱ͖ Δɻ
࣍ w +85ͱ w +85ͷར༻ w +85ͷ࣮ྫ /PEFKT 41"
JWTͷར༻(ϖΠϩʔυ) +85ʹҙͷσʔλ ྫVTFS*E ΛؚΊΔ͜ͱ͕Ͱ ͖·͕͢ɺඪ४Խ͞ΕͯΔϖΠϩʔυ ॴఆͷҙຯΛ࣋ͬ ͨLFZ ଘࡏ͠·͢ɻҎԼɺྫɻ w JTTൃߦऀ
*TTVFS w FYQ༗ޮظݶ &YQJSBUJPO5JNF w JBUൃߦ࣌ *TTVFEBU
JWTͷར༻(ϒϥοΫϦετ) +85εςʔτϨεͰ͋Δ͜ͱ͔Βɺ+85୯ମͰ τʔΫϯΛແޮʹ͢Δ͜ͱ͕ग़དྷͳ͍ɻैདྷͷηο γϣϯಉ༷ɺαʔόʔʹঢ়ଶΛอ࣋͢ΕՄೳ͕ͩɺ ͦͷ߹εςʔτϨεͷརࣦΘΕΔɻ
࣍ w +85ͱ w +85ͷར༻ w +85ͷ࣮ྫ /PEFKT 41"
JWTͷ࣮ྫ(Node.js + SPA) σϞIUUQTHJUIVCDPNTVCVUBQMBZXJUIKXU
JWTͷ࣮ྫ(Node.js + SPA) σϞIUUQTHJUIVCDPNTVCVUBQMBZXJUIKXU +85͋͘·ͰΞΫηετʔΫϯͳͷͰɺॳճͷϢʔ βೝূ௨ৗ௨Γ ࠓճFNBJMQBTTXPSE ߦ͏ɻ Ϣʔβೝূޙʹ+85Λฦ٫͠ɺҎ߱"1*ʹ͞Εͨ
+85Λ༻͍ͯϢʔβೝূΛߦ͏ɻ 41" 4JOHMF1BHF"QQMJDBUJPO Ͱɺओʹ MPDBM4UPSBHFʹ+85Λ֨ೲͯ͠ར༻͢Δ͜ͱ͕ଟ͍ɻ
࣍ w +85ͱ w +85ͷར༻ w +85ͷ࣮ྫ /PEFKT 41"
ͦͷଞ ൿີݤΛ͍ͬͯΕͲ͔͜Β Ͳͷαʔό Ͱೝূ͕ ग़དྷΔͷͰɺαʔόؒͰͷೝূใͷΓͱΓʹ͍ͯ Δɻ ୯Ұͷݤ ൿີݤ Ͱͷೝূͩͱ৺ͳ߹ɺ +8,4
+40/8FC,FZ4FU ͱ͍͏ͷΛͬͯɺݤΛ SPUBUF ೖΕସ͑ ͢ΔΈ͋ΔɻϋοΩϯάͳͲ Ͱݤ͕࿙Εͨ߹ʹڧ͍ɻ +85͍ͭͭɺηΩϡϦςΟΛࣗલͰؤுΔΑΓɺ "VUIʹཔΔํ͕ݱ࣮త ίεύѱ͍ 4/4ϩάΠϯɺ-%"1ೝূͱ͔ʹରԠͯ͠Δɻ
͝੩ௌ͋Γ͕ͱ͏͟͝ ͍·ͨ͠