Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࠓ೔ͷ͝൧ 2 Auth0 Curry 🍛

Slide 3

Slide 3 text

Ԟຊ൏ w גࣜձࣾ5XP(BUF UXPHBUFDPN w ڞಉ૑ۀऀऔక໾$50 w ৽نࣄۀͷ։ൃύʔτφʔ w ैۀһਓશһΤϯδχΞฏۉ೥ྸʙࡀ ࣗݾ঺հ 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

w ಠ࣮ࣗ૷ w 'JSFCBTF"VUIFOUJDBUJPO ($1*EFOUJUZ1MBUGPSN w "84$PHOJUP w *POJD"VUI$POOFDU w "VUI w "VUIMFUF ΞϓϦͷೝূιϦϡʔγϣϯ 6

Slide 7

Slide 7 text

w ؅ཧ"1*͕ෆ଍͍ͯ͠Δ w 1BTTXPSE$SFEFOUJBMT'MPXʹ͔͠ରԠ͍ͯ͠ͳ͍ w Ϣʔβ͔Β*%ύεϫʔυΛड͚औΔํࣜ w ը໘Λ͍͍ͪͪ࡞Δඞཁ͕͋Δ ఏڙ͍ͯ͠Δ6*΋͋Δ͚Ͳʜ w αʔυύʔςΟʔͷೝূʹ͸ద͞ͳ͍ w ΞϓϦ41"ʹ͸ద͍ͯ͠Δ͕ඪ४తͳ8FCΞϓϦͷೝূʹ͸࢖͑ͳ͍ 'JSFCBTF"VUIͷσϝϦοτ 7

Slide 8

Slide 8 text

w *POJDΞϓϦʢωΠςΟϒ8FCʣͱ"VUIΛ૊ΈࠐΜͰΈͨ ຊ୊ 8 +

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

"VUIͱ͸ 10 https://auth0.com/jp/

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

"VUIͱ͸ 12 ϝϦοτ ◦ ෳ਺ΞϓϦؒͷೝূϋϒʹͳΕΔ 0"VUI1SPWJEFS ◦ 8FC ωΠςΟϒࠞࡏ͢Δ؀ڥͰ౷Ұͨ͠ೝূ͕࣮ݱ͠΍͍͢ ◦ ؅ཧ"1*͕ॆ࣮͍ͯ͠Δ σϝϦοτ ◦ ྉۚମܥతʹUP$ͷແྉαʔϏεͷ৔߹͸ཁݕ౼ ◦ ᙱ͍ͱ͜Ζʹख͕ಧ͔ͳ͍͜ͱ͕͠͹͋͠Δ 


Slide 13

Slide 13 text

• Auth0 ͷ OAuth 2.0ͷೝՄϑϩʔΛར༻͢Δ • ΞϓϦͰOAuthΛར༻͢Δ৔߹ • Authorization Code Flow with Proof Key for Code Exchange (PKCE ) • PKCEΛ࢖͏͜ͱ͕ॏཁɿԣऔΓ߈ܸ΁ͷ଱ੑ Auth0ΛIonicʹ࣮૷͢Δ 13

Slide 14

Slide 14 text

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Λ্ཱͪ͛

Slide 15

Slide 15 text

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. ϩάΠϯ

Slide 16

Slide 16 text

• ͭ΂͜΂ݴΘͣʹ࣮૷͍ͨ͠ํ޲͚ • @auth0/cordov a • ެࣜͰIonic 4ͷυΩϡϝϯτ͕͋Δ • ͨͩ͠ɺcordovaͳͷͱWeb൛ͱ͸࣮૷͸ซ༻͠ʹ͍͘ • https://auth0.com/docs/quickstart/native/ionic4/01-login Auth0ΛIonicʹ࣮૷͢Δ 16

Slide 17

Slide 17 text

• Ͱ΋΍ͬͺΓɺCapacitorͰ࣮૷͍ͨ͠ΑͶ • ެࣜͷ৘ใ͸ແ͍ → جຊʹै࣮ͬͯ૷͢Ε͹Α͍ • +φ΢͍@auth0/auth0-spa-jsύοέʔδΛ࢖͍͍ͨ • چJS SDK͸ίʔϧόοΫ஍ࠈ • ↑Λ͞Βʹϥοϓͨ͠ @auth0/angularύοέʔδ·Ͱ͋Δ Auth0ΛIonicʹ࣮૷͢Δ 17 https://github.com/auth0/auth0-spa-js

Slide 18

Slide 18 text

࣮૷ྫ 18 1. In-app BrowserΛ্ཱͪ͛ 2. Custom URL SchemeͰ
 ΞϓϦʹίʔϧόοΫ 3. ΞΫηετʔΫϯΛऔಘ 4. ϗʔϜը໘ʹભҠ

Slide 19

Slide 19 text

࣮૷ྫ 19 جຊతʹ͜Ε͚ͩͷίʔυͰಈ͘ ͸ͣͩͬͨ…

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

ӡ༻ͯ͠Έͯ 22 • ·ͩগ͠ڍಈ͕ո͍͠ʁ • ϩάΞ΢τ͞ΕΔ͜ͱ͕ͨ·ʹى͖Δ • localStorageʹ֨ೲ͍ͯ͠ΔͷͰɺlocalStorageͷ໰୊͕͋Δ͔΋ • ຊ౰͸ • ωΠςΟϒSDKΛCapacitorͰϥοϓͯ͠Keychainʹ֨ೲ͍ͨ͠…

Slide 23

Slide 23 text

·ͱΊ 23 • Auth0ΛIonicʹ૊ΈࠐΜͰΈͨ • PWA + ωΠςΟϒཱ྆ͨ͠ΞϓϦ • CapacitorͰ͸࠷৽ͷJS SDKͰ͸मਖ਼͕ඞཁͰ͢ • ࠓޙ • CapacitorͷAuth0ωΠςΟϒSDKͭ͘Γ͍ͨ