Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

06b9c7286903fd1062a201e1a3ac65d9?s=128

Shunta Saito

August 28, 2019
Tweet

Transcript

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

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

    Next.js)Λ࢖͑ͯ ͯϋοϐʔͰ͢ɻ • React͕ओʹ޷͖Ͱ͕͢ɺVue.js ΋Angular.js΋ᅂΉఔ౓ʹ͸ ৮ͬͯ·͢ɻ༻్ʹԠͨ͡ద੾ ͳ΋ͷΛબͿͷ͕ྑͦ͞͏ɻ
  3. ໨࣍ w +85ͱ͸ w +85ͷར༻ w +85ͷ࣮૷ྫ /PEFKT 41"

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

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

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

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

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

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

    *TTVFS  w FYQ༗ޮظݶ &YQJSBUJPO5JNF  w JBUൃߦ೔࣌ *TTVFEBU
  11. JWTͷར༻(ϒϥοΫϦετ) +85͸εςʔτϨεͰ͋Δ͜ͱ͔Βɺ+85୯ମͰ͸ τʔΫϯΛແޮʹ͢Δ͜ͱ͕ग़དྷͳ͍ɻैདྷͷηο γϣϯಉ༷ɺαʔόʔʹঢ়ଶΛอ࣋͢Ε͹Մೳ͕ͩɺ ͦͷ৔߹εςʔτϨεͷར఺͸ࣦΘΕΔɻ

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

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

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

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

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

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