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

IonicアプリをAuth0で認証する - Ionic Meetup #16 in Online

IonicアプリをAuth0で認証する - Ionic Meetup #16 in Online

Af5dcc1970148a511bf8a393f42dda96?s=128

Hayato OKUMOTO

April 07, 2021
Tweet

More Decks by Hayato OKUMOTO

Other Decks in Technology

Transcript

  1. IonicΞϓϦΛ Ͱೝূ͢Δ גࣜձࣾTwoGate CTO Ԟຊ ൏

  2. ࠓ೔ͷ͝൧ 2 Auth0 Curry 🍛

  3. Ԟຊ൏ w גࣜձࣾ5XP(BUF UXPHBUFDPN  w ڞಉ૑ۀऀऔక໾$50 w ৽نࣄۀͷ։ൃύʔτφʔ w

    ैۀһਓશһΤϯδχΞฏۉ೥ྸʙࡀ ࣗݾ঺հ 3
  4. w ΞϓϦɼαʔόɼΠϯϑϥ͔ΒϏδωεϞσϧ·Ͱɺ৽نࣄۀͷཱͪ ্͛ʹ൐͏ϓϩμΫτ։ൃ͕ಘҙͳձࣾͰ͢ɻ w ΤϯδχΞʢओʹߴઐग़਎ʣͷձࣾͰɺΤϯδχΞͷҙݟ͕ڧ ͘൓ө͞ΕͨϓϩμΫτ։ൃΛಘҙͱ͍ͯ͠·͢ɻ 5XP(BUFʹ͍ͭͯ 4 ओཁͳ࠾༻ٕज़ελοΫ

  5. w ΞϓϦͷೝূͲ͏ͯ͠·͔͢ʁ w *POJD.FFUVQͰ'JSFCBTF"VUIFOUJDBUJPOΛ঺հ w ΞϓϦʴ8FCఏڙͷೝূͲ͏ͯ͠·͔͢ʁ ຊ୊ 5

  6. w ಠ࣮ࣗ૷ w 'JSFCBTF"VUIFOUJDBUJPO ($1*EFOUJUZ1MBUGPSN  w "84$PHOJUP w *POJD"VUI$POOFDU

    w "VUI w "VUIMFUF ΞϓϦͷೝূιϦϡʔγϣϯ 6
  7. w ؅ཧ"1*͕ෆ଍͍ͯ͠Δ w 1BTTXPSE$SFEFOUJBMT'MPXʹ͔͠ରԠ͍ͯ͠ͳ͍ w Ϣʔβ͔Β*%ύεϫʔυΛड͚औΔํࣜ w ը໘Λ͍͍ͪͪ࡞Δඞཁ͕͋Δ ఏڙ͍ͯ͠Δ6*΋͋Δ͚Ͳʜ 

    w αʔυύʔςΟʔͷೝূʹ͸ద͞ͳ͍ w ΞϓϦ41"ʹ͸ద͍ͯ͠Δ͕ඪ४తͳ8FCΞϓϦͷೝূʹ͸࢖͑ͳ͍ 'JSFCBTF"VUIͷσϝϦοτ 7
  8. w *POJDΞϓϦʢωΠςΟϒ 8FCʣͱ"VUIΛ૊ΈࠐΜͰΈͨ ຊ୊ 8 +

  9. ૊ΈࠐΈର৅ 9 housegate.jp HOUSE GATE Ionic 2,3ܥͰ։ൃ ɹˣ ϑϧεΫϥον͠·ͨ͠ Ionic

    4 Angular 1 1 Capacitor
  10. "VUIͱ͸ 10 https://auth0.com/jp/

  11. • ରԠ͍ͯ͠ΔೝূϓϩτίϧͰαʔόϑϩϯτଆΛ࣮૷͢Δ͚ͩ • ϩάΠϯը໘ αΠϯΞοϓը໘ ύεϫʔυϦηοτը໘Λ༻ҙͯ͘͠ΕΔ • ෳ਺αʔϏεΛఏڙ͢Δͱ͖ͷ4JOHMF4JHO0Oج൫ͱͯ͠ • ճͷϩάΠϯͰෳ਺αʔϏεͷϩάΠϯ͕׬݁Ͱ͖Δ

    • ଟ༷ͳೝূํ๏ʹରԠ͍ͯ͠Δ • &NBJM 1BTTXPSE4PDJBM&OUFSQSJTF1BTTXPSEMFTT.'" "VUIͱ͸ 11 ಛ௃
  12. "VUIͱ͸ 12 ϝϦοτ ◦ ෳ਺ΞϓϦؒͷೝূϋϒʹͳΕΔ 0"VUI1SPWJEFS  ◦ 8FC ωΠςΟϒࠞࡏ͢Δ؀ڥͰ౷Ұͨ͠ೝূ͕࣮ݱ͠΍͍͢

    ◦ ؅ཧ"1*͕ॆ࣮͍ͯ͠Δ σϝϦοτ ◦ ྉۚମܥతʹUP$ͷແྉαʔϏεͷ৔߹͸ཁݕ౼ ◦ ᙱ͍ͱ͜Ζʹख͕ಧ͔ͳ͍͜ͱ͕͠͹͋͠Δ 

  13. • Auth0 ͷ OAuth 2.0ͷೝՄϑϩʔΛར༻͢Δ • ΞϓϦͰOAuthΛར༻͢Δ৔߹ • Authorization Code

    Flow with Proof Key for Code Exchange (PKCE ) • PKCEΛ࢖͏͜ͱ͕ॏཁɿԣऔΓ߈ܸ΁ͷ଱ੑ Auth0ΛIonicʹ࣮૷͢Δ 13
  14. Authorization Code + PKCE Flow 14 https://auth0.com/docs/ fl ows/authorization-code- fl

    ow-with-proof-key-for-code-exchange-pkce 1. In-app BrowserΛ্ཱͪ͛
  15. Authorization Code + PKCE Flow 15 https://auth0.com/docs/ fl ows/authorization-code- fl

    ow-with-proof-key-for-code-exchange-pkce 3. Custom URL SchemeͰΞϓϦʹίʔϧόοΫ 4. ΞΫηετʔΫϯΛऔಘ 5. ΞΫηετʔΫϯͰAPIʹΞΫηε 2. ϩάΠϯ
  16. • ͭ΂͜΂ݴΘͣʹ࣮૷͍ͨ͠ํ޲͚ • @auth0/cordov a • ެࣜͰIonic 4ͷυΩϡϝϯτ͕͋Δ • ͨͩ͠ɺcordovaͳͷͱWeb൛ͱ͸࣮૷͸ซ༻͠ʹ͍͘

    • https://auth0.com/docs/quickstart/native/ionic4/01-login Auth0ΛIonicʹ࣮૷͢Δ 16
  17. • Ͱ΋΍ͬͺΓɺCapacitorͰ࣮૷͍ͨ͠ΑͶ • ެࣜͷ৘ใ͸ແ͍ → جຊʹै࣮ͬͯ૷͢Ε͹Α͍ • +φ΢͍@auth0/auth0-spa-jsύοέʔδΛ࢖͍͍ͨ • چJS

    SDK͸ίʔϧόοΫ஍ࠈ • ↑Λ͞Βʹϥοϓͨ͠ @auth0/angularύοέʔδ·Ͱ͋Δ Auth0ΛIonicʹ࣮૷͢Δ 17 https://github.com/auth0/auth0-spa-js
  18. ࣮૷ྫ 18 1. In-app BrowserΛ্ཱͪ͛ 2. Custom URL SchemeͰ
 ΞϓϦʹίʔϧόοΫ

    3. ΞΫηετʔΫϯΛऔಘ 4. ϗʔϜը໘ʹભҠ
  19. ࣮૷ྫ 19 جຊతʹ͜Ε͚ͩͷίʔυͰಈ͘ ͸ͣͩͬͨ…

  20. @auth0/auth0-spa-js ͷ໰୊఺ 20 ͓લCookie࢖ͬͯΔΜ͔ Ionic Webviewͷ੍໿ͰCookie͕ਖ਼֨͘͠ೲ͞Εͳ͍໰୊͕͋Δ

  21. Fork͠·ͨ͠ 21 @twogate/auth0-spa-js https://github.com/twogate/auth0-spa-js

  22. ӡ༻ͯ͠Έͯ 22 • ·ͩগ͠ڍಈ͕ո͍͠ʁ • ϩάΞ΢τ͞ΕΔ͜ͱ͕ͨ·ʹى͖Δ • localStorageʹ֨ೲ͍ͯ͠ΔͷͰɺlocalStorageͷ໰୊͕͋Δ͔΋ • ຊ౰͸

    • ωΠςΟϒSDKΛCapacitorͰϥοϓͯ͠Keychainʹ֨ೲ͍ͨ͠…
  23. ·ͱΊ 23 • Auth0ΛIonicʹ૊ΈࠐΜͰΈͨ • PWA + ωΠςΟϒཱ྆ͨ͠ΞϓϦ • CapacitorͰ͸࠷৽ͷJS

    SDKͰ͸मਖ਼͕ඞཁͰ͢ • ࠓޙ • CapacitorͷAuth0ωΠςΟϒSDKͭ͘Γ͍ͨ