Angular x Auth0 複数サービス展開での認証基盤を考える

Startup Angular #6での発表資料です。
https://voicy.connpass.com/event/289575/

Transcript

1. Angular x Auth0
   
   ෳ਺αʔϏεల։Ͱͷೝূج൫Λߟ͑Δ
   גࣜձࣾTwoGate
   
   
   Ԟຊ ൏
   

   View Slide

2. 2
   ࣗݾ঺հ
   Ԟຊ൏!GBMDPO@
   w גࣜձࣾ5XP(BUFɹڞಉ૑ۀऀऔక໾$50
   w 5XP(BUF૑ۀظ͔Βͷٕज़Ϧʔυͱͯ͠
   w ࠓ೥Ͱ೥
   w ࠷ۙͷٕज़τϐοΫ
   w ೝূج൫ "VUI ͦͷଞ
   σʔλج൫ߏங #JH2VFSZUSPDDP
   
   

   View Slide

3. ࣄۀ಺༰
   ɾΤϯλϝྖҬͷ4BB4։ൃʢϞόΠϧΦʔμʔ͘͡&$ίϛϡχςΟΞϓϦ౳ʣ
   ɾ4IPQJGZͰͷ&$αΠτ։ൃ
   ɾ###&ྖҬͷڞ૑ࣄۀ։ൃ
   3
   ձࣾ֓ཁ
   https://twogate.com/
   ઃཱ
   ɾ೥݄ઃཱʢظ໨ʣ
   ɾνʔϜͱͯ͠͸೥໨
   ɾ໊த໊ͷߴઐੜͰ૑ۀɹݱࡏɺϑϧλΠϜ໊ن໛ʹ
   

   View Slide

4. 4
   5XP(BUFͷٕज़ελοΫ
   αʔόαΠυ ϑϩϯτΤϯυ
   ։ൃ؀ڥ Πϯϑϥ
   

   View Slide

5. 5
   4IPQJGZ1BSUOFSPGUIF:FBSड৆اۀ
   w 4IPQJGZ&DPNNFSDF"XBSE
   w 4IPQJGZ1BSUOFSPGUIF:FBS
   ଟ਺ͷ࣮੷Λදজ͞Εɺ4IPQJGZ+BQBOΑΓ̎౓ͷදজΛड͚͍ͯ·͢ɻ
   

   View Slide

6. 5XP(BUFͷϓϩμΫτ
   

   View Slide

7. 7
   /PDPEF-PXDPEFιϦϡʔγϣϯ
   ϞόΠϧΦʔμʔ
   
   
   (ΞϓϦ)
   ΦϯϥΠϯΨνϟ
   
   
   (Web)
   ެࣜΞϓϦ
   
   
   (ΞϓϦˍ̬eb)
   Nocode Low code
   

   View Slide

8. 8
   ##ڞ૑ϓϩμΫτ
   ޻຿ళ޲͚
   ίϛϡχέʔγϣϯπʔϧ
   PCͰͷಇ͖ํ
   ՄࢹԽπʔϧ
   

   View Slide

9. Angular x Auth0
   
   ෳ਺αʔϏεల։Ͱͷೝূج൫Λߟ͑Δ
   

   View Slide

10. w αʔϏεͷೝূͲ͏ͯ͠·͔͢ʁ
    w ΞϓϦʴ8FCఏڙͷೝূͲ͏ͯ͠·͔͢ʁ
    w #$##ͷαʔϏεఏڙ
    10
    ຊ୊
    

    View Slide

11. w ࣄۀن໛͕֦େ͢Δʹ࿈Εͯɺෳ਺αʔϏεల։΍αϒαʔϏεͰͷల։Λߟ͑࢝ΊΔɻ
    w ಉ͡Ϣʔβ૚ͰͷΫϩεηϧͰͷαʔϏεల։
    w ಛʹ࠷ۙͷ##4BB4Ͱ͸ͦͷ܏޲͸ߴ͘ͳΓͭͭ͋Δ
    11
    ϚϧναʔϏεͷೝূΛߟ͑Δ
    

    View Slide

12. w #$αʔϏε
    w ແྉ͔Β࢝·Δ
    w Ϣʔβ୯Ձ͸௿͍
    w ΞΫςΟϒ཰͸௿͍
    w Ϣʔβ୯ҐͰͷ؅ཧ
    w ݸਓ৘ใ౳͕ͳ͚Ε͹ϦεΫ௿
    w ##αʔϏε
    w ༗ྉܖ໿
    w Ϣʔβ୯Ձ͸ߴ͍
    w ΞΫςΟϒ཰͸ߴ͍
    w ॴଐ૊৫Ͱͷू߹ͷ؅ཧ
    w औΓѻ͍৘ใͷॏཁੑ͕ߴ͍
    12
    αʔϏεಛੑͰ࠾༻͢΂͖ೝূج൫͸ҟͳΔ
    αʔϏεಛੑʹԠͨ͡ೝূج൫΁ͷ౤ࢿ͕ඞཁ
    

    View Slide

13. w ಠ࣮ࣗ૷
    w 'JSFCBTF"VUIFOUJDBUJPO ($1*EFOUJUZ1MBUGPSN
    
    w "VUI
    w "84$PHOJUP
    w "[VSF"%#$
    13
    ೝূιϦϡʔγϣϯ
    

    View Slide

14. w ஌͍ͬͯΔਓ΋ଟ͍ͱࢥ͏ͷͰׂѪ
    w ϞόΠϧϑΝʔετͳΞϓϦͩͱ࠾༻࣮੷͕૿͖͑ͯͨҹ৅
    w 5(Ͱ΋͍ۙ0&.ΞϓϦͰ׆༻͍ͯ͠·͢
    w ࢖͍ͮΒ͍ͱ͜Ζ
    w γϯάϧαΠϯΦϯతͳಈ͖͸αϙʔτ֎ʢΞϓϦϒϥ΢βͰͦΕͧΕηογϣϯΛ࣋ͭ
    ͨΊʣ
    w 0*%$ରԠ 0"VUIϑϩʔ͸ରԠ͍ͯ͠ͳ͍
    w ΞϓϦ41"ʹ͸ద͍ͯ͠Δ͕ඪ४తͳ8FCΞϓϦͷೝূʹ͸࢖͑ͳ͍
    14
    'JSFCBTF"VUIFOUJDBUJPO
    

    View Slide

15. w ಛ௃
    w ։ൃͷख͕ؒ࠷খݶʹͳΔΑ͏ʹ4%,౳͕๛෋ʹఏڙ͞Ε͍ͯΔ
    w ෳ਺αʔϏεల։ͰͷγϯάϧαΠϯΦϯͷఏڙ
    w ۚ༥ɾϔϧεέΞྖҬͷೝূʹ΋ରԠՄೳ
    w ೥ʹPLUBʹങऩ͞ΕPLUBͷαʔϏε $VTUPNFS*EFOUJUZ$MPVE
    ͱͯ͠
    ఏڙ
    15
    "VUI
    

    View Slide

16. w 41"΍ΞϓϦଆ͸4%,Λ૊ΈࠐΉ͚ͩͰೝূ࣮૷͕ऴΘΔʹ!BVUIBVUIBOHVMBS
    w 6OJWFSTBM-PHJOͱ͍͏ϩάΠϯը໘͕ఏڙ͞ΕΔͨΊ
    w ؆୯ͳϚΠΫϩαʔϏεతͳ"1*Λͭͬͯ͘΋ೝূΛߟ͑ͳͯ͘ࡁΉ
    w .1"ͳΞϓϦέʔγϣϯͰ͋Ε͹ɺ"84ͷ"QQMJDBUJPO-PBE#BMBODFSͷೝূʹܨ͙͚ͩͰ΋࣮ݱͰ͖Δ
    w ؅ཧը໘ͳͲकΓ͍ͨͱ͜Ζʹ༗ޮ
    w ΞϓϦέʔγϣϯʹ΋૊ΈࠐΈͭͭ"-#Ͱ΋ࣄલೝূΛֻ͚͓ͯ͘ͱ͞ΒʹηΩϡΞʹ
    w "DUJPOTͰ/PEFKTʹΑΔ"VUIͷೝূڍಈΛ֦ு͢Δ͜ͱ΋Մೳ
    w ྫ͑͹*1੍ݶͳͲΛ"DUJPOTͰ࣮૷Ͱ͖Δ
    16
    "VUIͷศརͳͱ͜Ζ
    

    View Slide

17. 17
    ๛෋ͳೝূखஈʹରԠͰ͖Δ
    ιʔγϟϧϩάΠϯ
    Google / Apple / LINEͳͲ
    ΤϯλʔϓϥΠζϩάΠϯ
    Okta / HENGE / Google Workspaces
    

    Azure AD / SAML
    ύεϫʔυϨεϩάΠϯ
    ϝʔϧϦϯΫ / SMSϫϯλΠϜ /
    
    
    WebAuthn
    ϝʔϧΞυϨε/PWҎ֎ͷೝূखஈΛΞϓϦέʔγϣϯଆͰߟ͑Δඞཁ͕ͳ͘ͳΔɻ
    Auth0Ͱઃఆ͢Δ͚ͩ
    

    View Slide

18. 18
    αʔϏεΞʔΩςΫνϟͷྫ
    ސ٬

    ϙʔλϧ

    αΠτ
    αʔϏε

    A
    αʔϏε

    B
    ڞ௨ೝূج൫
    ϑϧεΫϥον ϑϧεΫϥον
    OAuth OAuth
    SAML
    w ҟछγεςϜಉ࢜ͷ࿈ܞ
    w 4".-0"VUI
    w "VUIͰͷ$PPLJFηογϣϯʹΑ
    ΓγϯάϧαΠϯΦϯΛ࣮ݱ
    w αʔϏε͝ͱʹೝূΛٻΊΒΕͳ
    ͍
    

    View Slide

19. w "VUIͷΞΧ΢ϯτΛ࡞੒͠ɺ"QQMJDBUJPOΛ࡞੒
    19
    "OHVMBSʹ"VUIΛಋೖ͢Δखॱ
    

    View Slide

20. 20
    "OHVMBS΁ͷಋೖνϡʔτϦΞϧ
    

    View Slide

21. w OQNJOTUBMM!BVUIBVUIBOHVMBS
    21
    "OHVMBSͰͷηοτΞοϓ
    

    View Slide

22. 22
    ϩάΠϯϘλϯͷ࣮૷
    

    View Slide

23. w "1*ʹΞΫηετʔΫϯΛૹΔʹ͸ʁ
    23
    "1*ͷೝূ
    w *OUFSDFQUPS͕಺ଂ͞Ε͍ͯΔͷͰɺ
    .PEVMFʹઃఆΛ༩͑Δ͚ͩͰΞΫηε
    τʔΫϯ͕"VUIPSJ[BUJPOϔομʹࣗಈͰ
    ෇༩͞Ε·͢ɻ
    

    View Slide

24. w ඍົͳͱ͜ΖΛృΓସ͑ͳ͕Β࡞͍ͬͯΔಠࣗೝূͷ࣮૷͕ϓϩμΫτ͝ͱʹҟͳΔ
    w ˠ͢΂ͯ"VUIͷ࣮૷ʹू໿͞Εͨ
    w &OUFSQSJTFܖ໿Λక݁͠·ͨ͠
    w ࠷ऴతʹ͍ΖΜͳೝূखஈ΁ͷରԠ΍Ϣʔβن໛͕૿Ճͨͨ͠Ί
    w શϓϩμΫτͷॏཁͳՕॴΛकΔηΩϡϦςΟ౤ࢿͱͯ͠
    24
    ࣾ಺Ͱಋೖͯ͠Έͯ
    

    View Slide

25. w αʔϏεಛੑʹԠͨ͡ඞཁͳೝূج൫Λબ୒͠·͠ΐ͏
    w ෳ਺ͷ##αʔϏεల։ʹ͸"VUIΛ࠾༻͢Δͱ։ൃ͕ϋοϐʔʹͳͬͨ
    w 4%,͕ରԠ͍ͯ͠ΔݴޠɾϑϨʔϜϫʔΫͰ͸ಋೖ͕؆୯
    w ҟछγεςϜͰ΋0*%$4".-ରԠ͍ͯ͠ΔγεςϜͱͷ݁߹͸༰қ
    25
    ·ͱΊ
    

    View Slide