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

Auth0ハンズオンウェビナー資料

suwa yuki
March 04, 2020

 Auth0ハンズオンウェビナー資料

2020年3月に、認証認可プラットフォーム「Auth0」のハンズオンウェビナーを開催しました。そのウェビナーの資料です。

ブログとあわせてご覧ください。
https://dev.classmethod.jp/server-side/auth0/auth0-hands-on-webinar-basic/

suwa yuki

March 04, 2020
Tweet

More Decks by suwa yuki

Other Decks in Technology

Transcript

  1. Auth0ϋϯζΦϯ΢ΣϏφʔ
    ೝূج൫αʔϏε

    View full-size slide

  2. εέδϡʔϧ
    wςφϯτͷ࡞੒
    w41"ͷೝূ
    w$POOFDUJPO
    w6OJWFSTBM-PHJO
    w3VMFT
    2
    Part1 جຊฤ 60min Part2 ൃలฤ 60min
    w6TFS-JOL
    w3#"$
    w$VTUPN%#
    w:".-*NQPSU&YQPSU
    w"%࿈ܞ %FNPͷΈ

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    View full-size slide

  3. Part1 جຊฤ 60min

    View full-size slide

  4. ςφϯτͷ࡞੒
    w"VUIΞΧ΢ϯτͷ৽ن࡞੒࣌ʹͭ࡞Δ
    wςφϯτ͸ԿݸͰ΋࡞੒Ͱ͖Δ
    w"84Ͱݴ͏ͱ͜Ζͷ4XJUDI3PMFͱಉ͡Α͏ʹ

    ෳ਺ͷςφϯτΛ੾Γସ͑ͯ؅ཧ͢Δ
    4
    1

    View full-size slide

  5. جຊߏ੒
    5
    https://dev.classmethod.jp/server-side/auth0/auth0-architecture/
    Auth0
    Tenant
    Application
    Connection
    User Account

    View full-size slide

  6. جຊߏ੒
    6
    Auth0
    Tenant A
    Account
    Tenant B
    Switch Tenant

    View full-size slide

  7. ΞΧ΢ϯτ࡞੒͸ͪ͜Β͔Β
    7
    https://auth0.com/signup

    View full-size slide

  8. 41"ͷೝূ
    w41"ͱ͸ʁʜ4JOHMF1BHF"QQMJDBUJPO
    w࣮ଶͱͯ͠͸୯Ұͷϖʔδ )5.-$44+4
    ͕ͩɺ

    +BWB4DSJQUʹΑͬͯΞϓϦͷΑ͏ͳৼΔ෣͍Λ͢Δ
    wϖʔδભҠͷ੾Γସ͕͑ૣ͍ͳͲͷϝϦοτ͕͋Γ

    ݱ୅ͷ8FCΞϓϦͷओྲྀ
    8
    2

    View full-size slide

  9. 41"ͷೝূͷ࢓૊Έ
    9
    Web App

    (SPA)
    Auth0
    ( IdP )
    ᶄAuth0ͷϩάΠϯϖʔδʹ

    ϦμΠϨΫτ
    ᶃϩάΠϯϘλϯΛ

    ԡ͢ ᶅϩάΠϯॲཧ
    ᶆݩͷϖʔδʹࣗಈϦμΠϨΫτͯ͠

    ID Token / Access TokenΛऔಘ

    View full-size slide

  10. ೝূϑϩʔ
    w͍Ζ͍Ζ͋Δ͕ɺ41"ͷ৔߹͸

    "VUIPSJ[BUJPO$PEFXJUI1,$&'MPX͕ਪ঑
    10

    View full-size slide

  11. "VUIPSJ[BUJPO$PEF'MPXXJUI1SPPG,FZ
    GPS$PEF&YDIBOHF 1,$&

    w0"VUIͷػೳ֦ு
    w3'$ ೥ൃߦ

    IUUQTUPPMTJFUGPSHIUNMSGD
    w1VCMJD$MJFOUͷηΩϡϦςΟϦεΫΛղফ͢ΔͨΊʹ
    ੜΈग़͞Εͨϑϩʔ
    wͽ͘͠ʔ
    11

    View full-size slide

  12. 12
    ϦμΠϨΫτઌΛͳΓ͢·͠
    Ҏ߱ͷॲཧΛԣऔΓͰ͖Δ

    View full-size slide

  13. 14
    ԣऔΓͯ͠΋Code Verifier͕
    ෼͔Βͳ͍ʂ

    View full-size slide

  14. 41"ͷೝূΛࢼ͢
    w%BTICPBSE͔Β৽ن"QQMJDBUJPOΛ࡞੒
    w"QQMJDBUJPO5ZQFͰ

    ʮ4JOHMF1BHF8FC"QQMJDBUJPOTʯΛબ୒
    w2VJDL4UBSUͰʮ+BWB4DSJQUʯΛબ୒
    wϩʔΧϧͰಈ͔ͨ͢Ίʹ"QQMJDBUJPOͷઃఆΛมߋ
    wαϯϓϧΞϓϦέʔγϣϯΛμ΢ϯϩʔυ࣮ͯ͠ߦ
    15

    View full-size slide

  15. "MMPXFE$BMMCBDL63-Tͱ͸
    17
    Web App

    (SPA)
    Auth0
    ( IdP )
    ᶆݩͷϖʔδʹࣗಈϦμΠϨΫτͯ͠

    ID Token / Access TokenΛऔಘ
    Auth0͔ΒϦμΠϨΫτ͢ΔURL͸ϗϫΠτϦετͰ؅ཧɻ
    ·ͨAuth0ͷAPIΛ࣮ߦ͢Δ৔߹͸Cross-Origin͕ൃੜ͢ΔͨΊ

    OriginΛϗϫΠτϦετͰ؅ཧ (Allowed Origins)ɻ

    View full-size slide

  16. ϞδϡʔϧͷΠϯετʔϧˍىಈ
    # ϞδϡʔϧͷΠϯετʔϧ
    $ npm install
    # αϯϓϧΞϓϦέʔγϣϯͷىಈ
    $ npm start

    View full-size slide

  17. $POOFDUJPOͱ͸ʁ
    w"VUI͔ΒϩάΠϯ࣌ʹ઀ଓ͢Δઌ
    w͍͔ͭ͘ͷ઀ଓํࣜͷछྨ͕͋Δ
    %BUBCBTF$POOFDUJPO
    4PDJBM-PHJO
    &OUFSQSJTF%JSFDUPSZ
    1BTTXPSEMFTT4ZTUFN
    19
    3

    View full-size slide

  18. Desktop App
    Web App
    Mobile App
    Auth0
    ( IdP )
    LINE
    Facebook
    Google
    Database
    User User User
    User User
    User User User
    User User

    View full-size slide

  19. Desktop App
    Web App
    Mobile App
    Auth0
    ( IdP )
    LINE
    Facebook
    Google
    Database
    User User User
    User User
    User User User
    User User

    View full-size slide

  20. $POOFDUJPOͷ0/0''
    wσϑΥϧτͰ͸(PPHMF$POOFDUJPO ͓ࢼ͠
    ͕0/
    wͦͷͨΊϩάΠϯը໘ʹʮ4JHOJOXJUI(PPHMFʯ͕
    දࣔ͞Ε͍ͯΔ
    w"QQMJDBUJPOT4BNQMF"QQ$POOFDUJPOTͰ

    HPPHMFPBVUIͷϑϦοϓΛΦϑʹͯ͠ΈΔ
    wϩάΠϯը໘͔Βදࣔ͞Εͳ͘ͳΕ͹੒ޭ
    22

    View full-size slide

  21. 6OJWFSTBM-PHJO
    w"VUI͕ϗεςΟϯά͢Δ
    ϩάΠϯϖʔδ͕ར༻Մೳ
    w)5.-ϕʔεͰͷΧελϚ
    Πζ΋ॊೈʹߦ͑Δ
    wϩάΠϯϖʔδΛ࡞ΓࠐΉ
    ඞཁ͕ͳ͍
    23
    4

    View full-size slide

  22. "VUI-PDL
    w૊ΈࠐΈ༻ͷ6*ϥΠϒϥϦ
    w೚ҙͷ8FCϖʔδʹϩάΠ
    ϯ΢ΟδΣοτΛຒΊࠐΈ
    wݟͨ໨Λࣗ༝ʹมߋՄೳ
    24
    https://auth0.com/lock

    View full-size slide

  23. 6OJWFSTBM-PHJOWT"VUI-PDL
    w6OJWFSTBM-PHJO͸ݱࡏछྨͷ༻ҙ͕͋Δ
    $MBTTJD/FX&YQFSJFODF
    w/FX&YQFSJFODF͸ମݧࣗମ͸ྑ͍͕ɺ

    $MBTTJDͱൺ΂Δͱػೳ͕ෆे෼ͳͱ͜Ζ͕͋Δ
    w6OJWFSTBM-PHJOͷΧελϚΠζ͸$MBTTJDͷΈରԠ
    w$MBTTJD͸"VUI-PDLΛ࢖࣮ͬͨ૷ʹͳ͍ͬͯΔ
    25

    View full-size slide

  24. 6OJWFSTBM-PHJOͷΧελϚΠζ
    w6OJWFSTBM-PHJO4FUUJOHTͰ

    ʮ$MBTTJDʯΛબ୒
    w6OJWFSTBM-PHJO-PHJOͰ

    ʮ$VTUPNJ[F-PHJO1BHFʯΛ0/
    wιʔείʔυΛΧελϚΠζɺ1SFWJFXͰදࣔΛ֬ೝ
    wαϯϓϧ͸4MBDLʹͯ
    26
    https://auth0.com/docs/libraries/lock/v11/configuration

    View full-size slide

  25. બఆϩδοΫ
    w·ͣ͸/FX&YQFSJFODFͰཁ͕݅ຬͨͤΔ͔ࢼ͢
    wཁ͕݅ຬͨͤͳ͍৔߹͸$MBTTJDPS"VUI-PDL
    wΞϓϦϖʔδʹϩάΠϯϑΥʔϜΛຒΊࠐΈ͍ͨ৔߹
    ͸"VUI-PDLΛ࢖͏
    w6OJWFSTBM-PHJOʹͨ͠ํ͕ख཭Ε͕ྑ͍ͷͰɺ

    ຒΊࠐΈ͕ຊ౰ʹඞཁ͔Ͳ͏͔୳Δ
    27

    View full-size slide

  26. 3VMFT
    w"VUIͷ֦ுੑͷίΞͱͳΔػೳ
    wϩάΠϯ࣌ʢτʔΫϯϦϑϨογϡ࣌ʣʹؔ਺Λ࣮ߦ
    wෳ਺ઃఆՄೳʢॱ൪ʹ࣮ߦ͞ΕΔʣ
    wҎ্ͷςϯϓϨʔτ͔Β࡞Γ࢝ΊΒΕΔ
    28
    5

    View full-size slide

  27. https://auth0.com/docs/best-practices/rules

    View full-size slide

  28. ಛఆυϝΠϯͷΈϩάΠϯڐՄ
    w3VMFT$3&"5&36-&
    wʮ"DDFTT$POUSPMʯ಺ͷ

    ʮ&NBJMEPNBJOXIJUFMJTUʯΛબ୒
    wίʔυ಺ͷʮXIJUFMJTUʯͷ഑ྻΛमਖ਼

    ྫ'classmethod.jp'
    31
    *%18Ͱొ࿥ͨ͠ޙʹϝʔϧ͕ಧ͍͍ͯΔͷͰɺ
    ঝೝ͓ͯ͘͜͠ͱ
    ஫ҙ

    View full-size slide

  29. 3VMFͷ࢖͍ಓ
    wςϯϓϨʔτΛҰ௨ΓݟΔͱେମΘ͔Δ
    wҰ෦ػೳ͸3VMFͷซ༻Ͱ࣮ݱ͞Ε͍ͯΔ
    ଟཁૉೝূʢ.'"ʣ
    6TFS-JOL
    w"VUIͷ֦ுੑ͸3VMFͰ࣮ݱ͞Ε͍ͯΔͷͰ

    ׆͔͢ιϦϡʔγϣϯΛߟ͍͑ͯ͘
    32

    View full-size slide

  30. Part2 ൃలฤ 60min

    View full-size slide

  31. 6TFS-JOL
    w$POOFDUJPOͷҟͳΔϢʔβʔΛϦϯΫͤͯ͞

    ·ͱΊΔػೳ
    w"VUI"1*Λ࢖ͬͯϦϯΫ͢Δखஈ͕ࣗ༝ʹऔΕΔ
    Ϣʔβʔࣗ਎ʹ࿈ܞΛઃఆͯ͠΋Β͏
    3VMFΛ࢖ͬͯϝʔϧΞυϨεͰࣗಈ໊دͤ
    ؅ཧऀଆ·ͨ͸γεςϜͰಠࣗʹ໊دͤ
    34
    6
    https://dev.classmethod.jp/server-side/auth0/auth0-user-account-link/

    View full-size slide

  32. ࣗಈ໊دͤ
    w3VMFT$3&"5&36-&
    wʮ"DDFTT$POUSPMʯͷ

    ʮ-JOL"DDPVOUTXJUI4BNF&NBJM"EESFTTʯΛબ୒
    wαϯϓϧΞϓϦέʔγϣϯͰ࠶ϩάΠϯ

    ʢ(PPHMFͰͷϩάΠϯɺ*%18ͰϩάΠϯͦΕͧΕߦ͏ʣ
    35
    *%18Ͱొ࿥ͨ͠ޙʹϝʔϧ͕ಧ͍͍ͯΔͷͰɺ
    ঝೝ͓ͯ͘͜͠ͱ
    ஫ҙ

    View full-size slide

  33. ϩʔϧ͝ͱͷΞΫηε੍ޚ 3#"$

    w͋Β͔͡Ίઃఆ͞Εͨ3PMFͱ1FSNJTTJPOʹج͖ͮ

    ϢʔβʔʹϦιʔεͷΞΫηεݖݶΛ༩͑Δ
    Roles Permissions Resource
    Users
    User
    Manager
    Admin
    ਃ੥ऀ
    ਃ੥ঝೝऀ
    ؅ཧऀ
    Roleͷ෇༩
    ਃ੥ͷ࡞੒
    ਃ੥ͷऔΓԼ͛
    ਃ੥ͷঝೝ
    ਃ੥API
    ؅ཧAPI
    7

    View full-size slide

  34. 3#"$ͷઃఆ
    w"1*Tͷʮ$3&"5&"1*ʯͰ৽ن"1*Λ࡞੒
    wʮ3#"$4FUUJOHTʯͷʮ&OBCMF3#"$ʯͱ

    ʮ"EE1FSNJTTJPOJOUIF"DDFTT5PLFOʯΛ0/
    wʮ1FSNJTTJPOTʯͰ1FSNJTTJPOΛఆٛ
    w6TFS3PMFT3PMFTͰ3PMFΛ࡞੒
    w6TFS3PMFT6TFSTͰϢʔβʔʹ3PMFΛઃఆ
    37

    View full-size slide

  35. αϯϓϧΞϓϦέʔγϣϯͷमਖ਼खॱ
    w·ͣϩάΞ΢τ͓ͯ͘͠˞ॏཁ
    w4BNQMF"QQMJDBUJPOͷιʔείʔυΛՕॴमਖ਼
    wϩάΠϯ͠௚͢
    38

    View full-size slide

  36. αϯϓϧΞϓϦέʔγϣϯͷमਖ਼
    39
    public/js/app.js
    11 const options = {
    12 redirect_uri: window.location.origin,
    13 audience: 'https://example.jp'
    14 });

    View full-size slide

  37. αϯϓϧΞϓϦέʔγϣϯͷमਖ਼
    40
    public/js/app.js
    103 const token = await auth0.getTokenSilently({
    104 audience: 'https://example.jp'
    105 });
    106 console.log(token);
    107 return;

    View full-size slide

  38. $VTUPN%BUBCBTF
    wϩάΠϯͳͲͷॲཧΛεΫϦϓτʢؔ਺ʣͰ

    ࣗ༝ʹॻ͚Δػೳ
    wಠࣗͷ"1*Λୟ͘͜ͱ΋σʔλϕʔεʹ௚઀઀ଓ͢Δ
    ͜ͱ΋Ͱ͖Δʢ"VUIͷ*1ΛڐՄ͢Δඞཁ͕͋Δʣ
    w&OUFSQSJTF1MBOͷΈӡ༻Մೳ
    42
    8

    View full-size slide

  39. $VTUPN%#ͷઃఆ
    w$POOFDUJPOT%BUBCBTFͰ

    ʮ$3&"5&%#$0//&$5*0/ʯΛΫϦοΫ
    w$VTUPN%BUBCBTFͷʮ6TFNZPXOEBUBCBTFʯΛ
    0/ʹ͢Δ
    wʮ%BUBCBTF"DUJPO4DSJQUTʯΛमਖ਼͢Δ
    43

    View full-size slide

  40. $POOFDUJPOͷมߋ
    w"QQMJDBUJPOT4BNQMF"QQΛબ୒
    w$POOFDUJPOTͷ

    ʮ6TFSOBNF1BTTXPSE"VUIFOUJDBUJPOTʯΛΦϑ
    ʹͯ͠ʮ$VTUPN%#ʯΛΦϯʹ͢Δ
    wαϯϓϧΞϓϦέʔγϣϯͰ࠶ϩάΠϯ͢Δ
    44

    View full-size slide

  41. :".-*NQPSU&YQPSU
    w"84$MPVE'PSNBUJPOͷΑ͏ʹ"VUIͷςφϯτͷ
    ઃఆΛ:".-ϑΝΠϧ͔ΒσϓϩΠͰ͖Δ
    wϩʔΧϧʹग़ྗ΋Ͱ͖Δ
    w$*πʔϧͳͲͱ૊Έ߹Θͤͯ࢖͏͜ͱͰ

    $*$%͕࣮ݱͰ͖Δ
    45
    9

    View full-size slide

  42. "VUIͷςφϯτ৘ใΛ&YQPSU͢Δ
    wࣄલ४උͱͯ͠"VUI"1*ͷೝূ৘ใΛऔಘ͢Δ
    w"1*T"VUI.BOBHFNFOU"1*"1*&YQMPSFSͰ
    ʮ$3&"5&"65)03*;&5&45"11-*$"5*0/ʯ
    ΛΫϦοΫ
    w"QQMJDBUJPOT"VUI.BOBHFNFOU"1* 5FTU
    "QQMJDBUJPO
    Ͱ$MJFOU*%ͱ$MJFOU4FDSFUΛऔಘ
    46

    View full-size slide

  43. ؀ڥߏங
    47
    # ϞδϡʔϧͷΠϯετʔϧ
    $ mkdir ~/auth0-tenant && cd ~/auth0-tenant
    $ npm i -g auth0-deploy-cli
    # Help
    $ a0deploy -h

    View full-size slide

  44. 48
    # config.json
    {
    "AUTH0_DOMAIN": "",
    "AUTH0_CLIENT_SECRET": "",
    "AUTH0_CLIENT_ID": "",
    "AUTH0_ALLOW_DELETE": true
    }

    View full-size slide

  45. ςφϯτ৘ใΛ*NQPSU&YQPSU͢Δ
    49
    # Export
    $ a0deploy export \
    -c config.json -f yaml -o .
    # Import (Deploy)
    $ a0deploy import \
    -c config.json -i tenant.yaml

    View full-size slide

  46. :".-ͷߏ੒
    50
    https://dev.classmethod.jp/server-side/auth0/auth0-inport-config/
    https://dev.classmethod.jp/server-side/auth0/auth0-export-config/

    View full-size slide

  47. "%-%"1$POOFDUPS %FNPͷΈ

    w"DUJWF%JSFDUPSZʹొ࿥͞Ε͍ͯΔϢʔβʔΛ

    ೝূͤ͞ΔͨΊͷػೳ
    w"%-%"1$POOFDUPSͱ͍͏"HFOUΛΠϯετʔϧ
    ͢Δ͜ͱͰར༻Մೳ
    51
    10

    View full-size slide

  48. "%-%"1$POOFDUPS
    wߏஙʹ͕͔͔࣌ؒΔͷͰσϞ
    wڵຯ͕͋Δํ͸ҎԼΛࢀߟʹߏஙͯ͠Έ͍ͯͩ͘͞
    52
    https://qiita.com/hisashiyamaguchi/items/44890d436a2b3d76e7d9
    https://qiita.com/omaenimutyuu/items/4b6359b0968fb14288f7

    View full-size slide