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

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
   *EFOUJUZ
   1MBUGPSN
   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. • ରԠ͍ͯ͠ΔೝূϓϩτίϧͰαʔόϑϩϯτଆΛ࣮૷͢Δ͚ͩ
    • ϩάΠϯը໘
    αΠϯΞοϓը໘
    ύεϫʔυϦηοτը໘Λ༻ҙͯ͘͠ΕΔ
    • ෳ਺αʔϏεΛఏڙ͢Δͱ͖ͷ4JOHMF
    4JHO
    0Oج൫ͱͯ͠
    • ճͷϩάΠϯͰෳ਺αʔϏεͷϩάΠϯ͕׬݁Ͱ͖Δ
    • ଟ༷ͳೝূํ๏ʹରԠ͍ͯ͠Δ
    • &NBJM 1BTTXPSE
    
    4PDJBM
    
    &OUFSQSJTF
    
    1BTTXPSEMFTT
    
    .'" "VUIͱ͸ 11 ಛ௃
12. "VUIͱ͸ 12 ϝϦοτ
    ◦ ෳ਺ΞϓϦؒͷೝূϋϒʹͳΕΔ 0"VUI
    1SPWJEFS
    ◦ 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ͭ͘Γ͍ͨ