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

Webサービス開発とSPAの認証の話 / spa-and-identity

Webサービス開発とSPAの認証の話 / spa-and-identity

SPAとサービス開発と認証への気持ちをまとめました

Takahiro Tsuchiya

May 29, 2019
Tweet

More Decks by Takahiro Tsuchiya

Other Decks in Technology

Transcript

  1. 8FCαʔϏε։ൃͱ
    41"ͷೝূͷ࿩
    *EFOUJUZ%BODF4DIPPMJEEBODF
    -FTTPOٕज़ॻయͱ%JHJUBM*EFOUJUZٕज़

    ʢਫʣ
    5BLBIJSP5TVDIJZB!DPSPDO

    View full-size slide

  2. !DPSPDO
    5BLBIJSP5TVDIJZB
    ͜ΖͪΌΜ

    View full-size slide

  3. ࣗݾ঺հ
    w ذෞݝࡏॅ
    w ϑϧϦϞʔτϫʔΫ!Ωϟελʔ
    w ਓҎ্͕ϦϞʔτϫʔΫ͍ͯ͠Δձࣾ
    w ຊۀ͸8FCαʔϏε։ൃ
    w ηΩϡϦςΟΤϯδχΞͰ͸ͳ͍
    w *EFOUJUZٕज़͸ڵຯͰ௥ͬͯΔ
    w ॳ৺ऀ޲͚ͱฉ͍͖ͯͨͷʹ᱐͞Εͨ
    w 3VCZ3BJMT 7VF "84 ($1
    w "VUI"NCBTTBEPS
    bosyu

    View full-size slide

  4. ΞδΣϯμ
    w ٕज़ॻయ Ͱॻ͍ͨຊͷ঺հ
    w *EFOUJUZٕज़ʹର͢Δؾ࣋ͪͷڞ༗
    w 41"ͷηογϣϯ؅ཧͷ࿩

    View full-size slide

  5. ࠓ೔͸͍͍ػձͳͷͰஏΛࡽ
    ͍ͯ͜͠͏͔ͱɾɾɾ

    View full-size slide

  6. ٕज़ॻయͱͷؔΘΓ
    w લ৬ಉ྅ͱϊϦͰਃ͠ࠐΜͩͷ͕࠷ॳ
    w ٕज़ॻయ ͱԿ͔͠ΒͷܗͰࢀՃ
    w ౦ژͷೝূք۾ͷਓͨͪͱͷܨ͕Γ͕Ͱ͖ͨ
    w ذෞͰೝূ΍ͬͯΔਓશવ͍ͳ͍ͷͰخ͍͠
    w *%Ͳ͜Ζ͔8FC΍ͬͯΔਓ΋΄ͱΜͲ͍ͳ͍
    w ຊۀͰ΍ͬͯͳ͍ࣗ෼ʹͱͬͯେ͖ͳϞνϕ

    View full-size slide

  7. ٕज़ॻయ
    w 7VFKTɺ/VYUKTΛ࢖ͬͨ41"͕੝Γ্
    ͕Γ͸͡Ίͨ࣌ظ
    w 41"ͷೝূʹ՝୊ҙࣝ
    w "VUI࢖ͬͯΈͨΒඇৗʹศརͩͬͨͷ͕
    Ϟνϕ
    w ࣌ؒͰ෦׬ച
    w ΈΜͳҙ֎ͱೝূपΓʹࠔͬͯΔʁͱ͍͏ײ
    ૝Λ΋ͬͨ
    w "VUIͷ$&0͕تΜͰ࣋ͬͯؼͬͨΒ͍͠
    w ຊΛॻ͍ͨ͜ͱͰதͷਓͱͷܨ͕Γ͕Ͱ͖
    ͨ

    View full-size slide

  8. ঎ۀࢴ
    w ಺༰ಉ͡
    w "VUIͷதͷਓʹϨ
    Ϗϡʔͯ͠΋ΒͬͨΓ
    w ྦྷܭͰ෦͙Β͍ʁ
    ʢ,JOEMFͷηʔϧͱ͔Ͱ
    ͦͦ͜͜ചΕͨΓʣ
    w ࠓݟΔͱஏ͔͍ͣ͠આ໌ͳ
    ͷͰͱͯ΋վగ͍ͨ͠

    View full-size slide

  9. ٕज़ॻయ
    w લ৬Ͱ߹ಉࢴΛग़ͨ͠
    w %FW0QTϝΠϯͷ࿩
    w τʔΫϯͷ࿩Λগ͠
    w ͬͨࣽ͝ຊ͸ചΕʹ͍͘
    w એ఻ΊͬͪΌେࣄ

    View full-size slide

  10. ٕज़ॻయ
    w ٕज़ॻయͷͱ͖ʹ!XBUBIBOJ
    ͞Μʹձͬͨͷ͕͖͔͚ͬ
    w ඒຯ͍͠ম೑ʹ௼ΒΕͯدߘ
    w 8FC"VUIOͰΫοΩʔηογϣ
    ϯ࢖͍ͨ͘ͳ͍ͱ͍͏ڧ͍ؾ࣋ͪ
    w '*%0αʔόʔΛηογϣϯϨε
    Ͱ࣮૷ͯ͠Έͨ
    w 3VCZ3BJMTͰύεϫʔυϨε
    ΍͍͖͍ͬͯͨ

    View full-size slide

  11. https://twitter.com/kaitendaentai/status/1052689241744896001

    View full-size slide

  12. https://twitter.com/kaitendaentai/status/1052689241744896001
    ٕज़ॻయ
    ग़ͨ࣌͠

    View full-size slide

  13. https://twitter.com/kaitendaentai/status/1052689241744896001
    ٕज़ॻయ
    ग़ͨ࣌͠
    ٕज़ॻయ
    ग़ͨ࣌͠
    ٕज़ॻయ
    ग़ͨ࣌͠
    ݱࡏ

    View full-size slide

  14. https://twitter.com/kaitendaentai/status/1052689241744896001
    ٕज़ॻయ
    ग़ͨ࣌͠
    ٕज़ॻయ
    ग़ͨ࣌͠
    ٕज़ॻయ
    ग़ͨ࣌͠
    ͜ͷ΁Μ
    ໨ࢦ͍ͨ͠
    ݱࡏ

    View full-size slide

  15. ݱঢ়ͷؾ࣋ͪͷڞ༗
    w ݸਓతͳ࿩ͩͱೝূɺೝՄٕज़͸ָ͍͠
    w ͔͠͠ʜ
    w αʔϏε։ൃऀͱͯ͠ఏڙ͍ͨ͠αʔϏεͷʮຊ࣭ʯͰ͸ͳ͍
    w ΋ͪΖΜ69ͷ޲্௿Լʹܨ͕ΔͷͰେࣄ
    w झຯͳΒ·ͩ͠΋ϏδωεϢʔεͩͱࣗ࡞ා͍
    w ηΩϡϦςΟϗʔϧ࡞Γͦ͏
    w ಛʹελʔτΞοϓ͸ଞʹ࡞Δ΂͖΋ͷͨ͘͞Μ͋ΔͷͰ͸
    w ͱ͸͍͑ཧղͯ͠ͳ͍ͱ*%BB4ͱͷ࿈ܞ΋೉ͦ͠͏
    w ৄ͘͠஌Ε͹஌Δ΄Ͳʮ͍͍ͬͨԿ͕ਖ਼͍͠ΜͩɾɾɾʯˡΠϚίί

    View full-size slide

  16. Ͱ͖Ε͹ࣗ࡞ͤͣؤுΓ͍ͨ
    w ։ൃεϐʔυΛग़ͨ͢Ίͷ*%BB4ͱ͍͏બ୒
    w ΋ͱ΋ͱ*%BB4&OUFSQSJTFͳೝࣝͩͬͨ
    w #UP$Ͱ࢖͑ͦ͏ͳ*%BB4͕૿͖͑ͯͨ
    w ศརͳ΋ͷ͸࢖͑Δ͚ͩ࢖͍͖͍ͬͯͨ
    w αʔϏε্ཱͪ͛࣌ʹΨνΨνʹࣗ࡞͢Δͷɺඞཁʁ
    w ద੾ʹ*%BB4ΛऔΓೖΕΒΕΔ஌͕ࣝ΄͍͠
    w ࠷ۙ͸"VUIMFUFʹڵຯͰͯΔ

    View full-size slide

  17. Ξ΢τϓοτ೉͍͠໰୊
    w ஌ࣝΛ਎ʹ͚ͭΔ্ͰΞ΢τϓοτ͸େࣄ
    w Ͱ΋ηΩϡϦςΟͬͯਆܦ࣭ͳ࿩ʹͳΓ͕ͪ
    w ࣮ࡍͷϢʔεέʔεʹԊͬͨ಺༰Λެ։ͮ͠Β͍
    w ஌ݟ͕ΫϥΠΞϯτϫʔΫͷձࣾʹدΓ͕ͪʁ
    w ਖ਼͘͠ཧղͯ͠ਖ਼͘͠ॻ͔ͳ͍ͱ΋Εͳ͘Ԍ্
    w ਖ਼͘͠ཧղͰ͖Δͷ͍ͭͰ͔͢ʁ
    w ֤࢓༷ͷղઆ͸ଟ͍͕࢖͍ॴ΍ϢʔεέʔεʹԊͬͨ࿩গͳ
    ΊͳͷͰΠϯϓοτ΋େม

    View full-size slide

  18. Ҏલ͜Μͳ-5Λͨ͠
    https://speakerdeck.com/corocn/next-geneartion-identity-auth0

    View full-size slide

  19. +85͕࿩୊ʹͳͬͨ࣌ظ
    w ʮͲ͏ͯ͠ϦεΫΞηεϝϯτͤͣʹ+85Ληογϣϯ
    ʹ࢖ͬͪΌ͏Θ͚ʁʯ
    w ʮ+85ೝূɺศར΍Μʁʯ
    w IUUQTBVUIIBUFOBCMPHDPNFOUSZ

    w தͷਓΛ೏ΘͤͨΑ͏ͳهࣄ͕ʢதͷਓͰ͸ͳ͔ͬͨʣ
    w -5ͷલ೔͙Β͍ͩͬͨͷͰϏΫϏΫ͍ͯͨ͠


    View full-size slide

  20. ࠷ۙͷٙ໰

    View full-size slide

  21. 41"Ͱ+85Ͱηογϣϯ؅
    ཧͨ͠Β͔͋Μͷʁ

    View full-size slide

  22. 41"ͱ͸
    w ୯Ұϖʔδ+4ओʹ3&45"1*ͷίϯς
    ϯπ੾Γସ͑Ͱߏ੒͞ΕΔ8FCΞϓϦ
    w Ϧονͳ6*Λఏڙ͠΍͍͢
    w ϑϩϯτͱόοΫΤϯυΛ෼཭Ͱ͖Δ
    w ϞόΠϧϑΝʔετͰ࡞ͬͨ"1*ͷྲྀ༻
    w ૊৫ߏ଄ʢઐ໳ੑɾ෼ۀʣͳഎܠ΋͋Γͦ͏

    View full-size slide

  23. 41"ͷηογϣϯ؅ཧͷ໰୊
    w ʮMPDBM4UPSBHFʹอଘͨ͠Β͑͑΍Ζʂ͆ʯ
    w ͦ͏ࢥ͍ͬͯΔ࣌ظ͕ࢲʹ΋͋Γ·ͨ͠
    w 944ʹऑ͍͔Βൈ͔ΕΔ
    w ˢͳ͍Α͏ʹ࡞Δͷ͕جຊ͚ͩͲݶք͋Δ
    w 5PLFO͸ηΩϡΞʹอ؅Ͱ͖ͳ͍
    w "84"NQMJGZ͸΍͘ͳΜͱ͔ͯ͋͛ͯ͠
    w ϞόΠϧͷ0"VUI1,$&ͱಉ͡Α͏ʹ͍͔ͳ͍

    View full-size slide

  24. $PPLJFPS5PLFO
    w ʮ$PPLJF࢖͓͏Ͷʯ͸ೝ͍ࣝͯ͠Δ
    w αʔόʔϨε͕བྷΉͱτʔΫϯΛ࢖ͬͨೝূͰ׬͍݁ͤͨ͞έʔε
    ͸ଟʑ͋Δ
    w 41"αʔόʔϨεͳ։ൃ͕೥ʑ૿͍͑ͯΔ
    w ࠓޙˢͳεΩϧηοτΛ࣋ͭਓ΋૿͑ͯ͘ΔͩΖ͏
    w ϞόΠϧͱಉ͡ํ๏Ͱѻ͑ͳ͍͔
    w ϞόΠϧ΋8FC΋Ұॹʹ࡞Δέʔε͸ͦ͜·Ͱͳ͍ͱ͸ࢥ͍ͭͭ
    w ҰาҾ͍ͯݟͨ࣌ʹDPPLJF΋DPPLJFͰѻ͍೉͍͠
    w ࢖͍׳ΕͯΔɺੜଘόΠΞε

    View full-size slide

  25. *%BB4࢖ͬͨ৔߹͸Ͳ͏͔
    w *%BB4ͱηΩϡΞʹηογϣϯҡ࣋Ͱ͖͍ͯΕ͹+85Ͱ"1*ͷೝূͯ͠΋͍
    ͍ͷͰ͸ʁ
    w *%BB4ଆʹػೳ͕͋Ε͹
    w ۩ମతʹ͸
    w 41"Ͱ࡞੒͞Εͨϖʔδදࣔ࣌ʹ*%BB4͔Βຖճ+85Λ෷͍ग़͢
    w JONFNPSZͰ+85Λ؅ཧͯ͠ӬଓԽ͠ͳ͍
    w +85ͷ༗ޮظݶ͸ՄೳͳݶΓ୹͘
    w ϔομʹ৐ͤͯ"1*͸+85Λݕূ͢Δ͚ͩ
    w ͜ͷ࢓૊ΈͳΒ+85ʹدͤΒΕΔͷͰ͸ʁ
    w ͋Μ·Γࣗ৴ͳ͍ͷͰϦεΫʹ͍ͭͯ΋ͬͱ஌Γ͍ͨ

    View full-size slide

  26. ͦͷଞͷϑϩϯτΤϯυٕज़ͱೝূ
    w 41"443ʢ4FSWFS4JEF3FOEFSJOHʣ
    w 4FSWJDF8PSLFSͰτʔΫϯߋ৽
    w Ұ୴ߟ͑ͨ͘ͳ͍ɾɾɾ
    w 443͸ͦ΋ͦ΋αʔόʔ͋Δ͔Βɾɾɾ
    w 41"ΛϞόΠϧͱಉྻͰߟ͑ͨ͘ͳΔࣗ෼ͷࢥ
    ߟճ࿏͕ΑΖ͘͠ͳ͍͔΋

    View full-size slide

  27. ·ͱΊ
    w ٕज़ॻయָ͍͔͠ΒΈΜͳຊॻ͜͏ʂ৘ใ͸
    Ξ΢τϓοτͨ͠ਓʹू·Δ
    w ઐ໳Խ෼ۀԽ͕ਐΜͰ͖ͨͷͰɺͦΕͧΕΛ
    ͭͳ͛Δ෼໺͸͞ΒʹॏཁੑΛ૿ͦ͠͏
    w ΑΓָʹγϯϓϧ͔ͭηΩϡΞΛߟ͍͍͑ͯ
    ͖͍ͨ

    View full-size slide