SPA & JWT でWeb
アプリケーションを作る

06b9c7286903fd1062a201e1a3ac65d9?s=47 Shunta Saito
August 28, 2019
Programming
0
81

SPA & JWT でWeb
アプリケーションを作る

Node.jsなAPIサーバとReactを用いたかんたんなSPAを、Fetch API & JWTを使いつつ繋ぎこむサンプルコードを見ながら、JWTの活用方法事例をご紹介します。

06b9c7286903fd1062a201e1a3ac65d9?s=128

Shunta Saito

August 28, 2019
Tweet

Want more?

06b9c7286903fd1062a201e1a3ac65d9?s=48 subuta
0
44
06b9c7286903fd1062a201e1a3ac65d9?s=48 subuta
3
490
06b9c7286903fd1062a201e1a3ac65d9?s=48 subuta
2
780
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
7
380
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
1
210
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
140
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
6
270
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
5
200
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
280
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
3
520
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
150
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
230

Transcript

  1. 1.

    SPA & JWT ͰWeb
 ΞϓϦέʔγϣϯΛ࡞Δ @subuta 2019/8/28

  2. 2.

    ࣗݾ঺հ • ໊લ: ੪౻ॣଠ (@subuta) • JavaScriptपΓͷ΋ͷ͕޷͖Ͱ ͢ɻ࠷ۙ͸͓࢓ࣄͰ΋ Node.js(Koa +

    Next.js)Λ࢖͑ͯ ͯϋοϐʔͰ͢ɻ • React͕ओʹ޷͖Ͱ͕͢ɺVue.js ΋Angular.js΋ᅂΉఔ౓ʹ͸ ৮ͬͯ·͢ɻ༻్ʹԠͨ͡ద੾ ͳ΋ͷΛબͿͷ͕ྑͦ͞͏ɻ
  3. 3.

    ໨࣍ w +85ͱ͸ w +85ͷར༻ w +85ͷ࣮૷ྫ /PEFKT 41"

  4. 4.

    ໨࣍ w +85ͱ͸ w +85ͷར༻ w +85ͷ࣮૷ྫ /PEFKT 41"

  5. 5.

    JWTͱ͸ +40/8FC5PLFO +85 JTBO*OUFSOFUTUBOEBSE GPSDSFBUJOH+40/CBTFEBDDFTTUPLFOTUIBU BTTFSUTPNFOVNCFSPGDMBJNT

  6. 6.

    JWTͱ͸ +40/8FC5PLFOʢδΣΠιϯɾ΢ΣϒɾτʔΫ ϯʣ͸ɺ+40/Λϕʔεͱͨ͠ΞΫηετʔΫϯʢӳ ޠ൛ʣͷͨΊͷΦʔϓϯඪ४ 3'$ Ͱ͋Δɻ ུশ͸+85ɻ

  7. 7.

    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σίʔυ͢Ε ͹த਎͸ݟ͑Δɻ

  8. 8.

    JWTͱ͸ +85͸ɺαʔόʔ্ʹೝূঢ়ଶΛอ࣋͠ͳ͍εςʔ τϨεͳೝূํࣜͰ͋Δɻαʔόʔ͸"VUIPSJ[BUJPO ϔομʔͰ౉͞ΕͨτʔΫϯ͕ਖ਼͍͔͚ͩ͠Λݕূ ͠ɺΞΫηεΛڐՄ͢Δɻ+85ʹ͓͍ͯ͸ɺೝূʹ ඞཁͳ৘ใ͸શͯτʔΫϯ಺ʹ֨ೲ͞Ε͓ͯΓɺ σʔλϕʔε΁ͷ໰͍߹ΘͤΛ࡟ݮ͢Δ͜ͱ͕Ͱ͖ Δɻ

  9. 9.

    ໨࣍ w +85ͱ͸ w +85ͷར༻ w +85ͷ࣮૷ྫ /PEFKT 41"

  10. 10.

    JWTͷར༻(ϖΠϩʔυ) +85ʹ͸೚ҙͷσʔλ ྫVTFS*E ΛؚΊΔ͜ͱ͕Ͱ ͖·͕͢ɺඪ४Խ͞ΕͯΔϖΠϩʔυ ॴఆͷҙຯΛ࣋ͬ ͨLFZ ΋ଘࡏ͠·͢ɻҎԼɺྫɻ w JTTൃߦऀ

    *TTVFS  w FYQ༗ޮظݶ &YQJSBUJPO5JNF  w JBUൃߦ೔࣌ *TTVFEBU
  11. 11.

    JWTͷར༻(ϒϥοΫϦετ) +85͸εςʔτϨεͰ͋Δ͜ͱ͔Βɺ+85୯ମͰ͸ τʔΫϯΛແޮʹ͢Δ͜ͱ͕ग़དྷͳ͍ɻैདྷͷηο γϣϯಉ༷ɺαʔόʔʹঢ়ଶΛอ࣋͢Ε͹Մೳ͕ͩɺ ͦͷ৔߹εςʔτϨεͷར఺͸ࣦΘΕΔɻ

  12. 12.

    ໨࣍ w +85ͱ͸ w +85ͷར༻ w +85ͷ࣮૷ྫ /PEFKT 41"

  13. 13.

    JWTͷ࣮૷ྫ(Node.js + SPA) σϞIUUQTHJUIVCDPNTVCVUBQMBZXJUIKXU

  14. 14.

    JWTͷ࣮૷ྫ(Node.js + SPA) σϞIUUQTHJUIVCDPNTVCVUBQMBZXJUIKXU
 
 +85͸͋͘·ͰΞΫηετʔΫϯͳͷͰɺॳճͷϢʔ βೝূ͸௨ৗ௨Γ ࠓճ͸FNBJMQBTTXPSE ߦ͏ɻ Ϣʔβೝূޙʹ+85Λฦ٫͠ɺҎ߱͸"1*ʹ౉͞Εͨ

    +85Λ༻͍ͯϢʔβೝূΛߦ͏ɻ 41" 4JOHMF1BHF"QQMJDBUJPO Ͱ͸ɺओʹ MPDBM4UPSBHFʹ+85Λ֨ೲͯ͠ར༻͢Δ͜ͱ͕ଟ͍ɻ
  15. 15.

    ໨࣍ w +85ͱ͸ w +85ͷར༻ w +85ͷ࣮૷ྫ /PEFKT 41"

  16. 16.

    ͦͷଞ ൿີݤΛ஌͍ͬͯΕ͹Ͳ͔͜Β Ͳͷαʔό Ͱ΋ೝূ͕ ग़དྷΔͷͰɺαʔόؒͰͷೝূ৘ใͷ΍ΓͱΓʹ͸޲͍ͯ Δɻ ୯Ұͷݤ ൿີݤ Ͱͷೝূͩͱ৺഑ͳ৔߹͸ɺ +8,4

    +40/8FC,FZ4FU ͱ͍͏ͷΛ࢖ͬͯɺݤΛ SPUBUF ೖΕସ͑ ͢Δ࢓૊Έ΋͋ΔɻϋοΩϯάͳͲ Ͱݤ͕࿙Εͨ৔߹ʹڧ͍ɻ +85࢖͍ͭͭɺηΩϡϦςΟΛࣗલͰؤுΔΑΓ͸ɺ "VUIʹཔΔํ͕ݱ࣮త ίεύ͸΍΍ѱ͍  4/4ϩάΠϯ΍ɺ-%"1ೝূͱ͔ʹ΋ରԠͯ͠Δɻ
  17. 17.

    ͝੩ௌ͋Γ͕ͱ͏͟͝ ͍·ͨ͠