Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
IonicアプリをAuth0で認証する - Ionic Meetup #16 in Online
Search
Hayato OKUMOTO
April 07, 2021
Technology
0
330
IonicアプリをAuth0で認証する - Ionic Meetup #16 in Online
Hayato OKUMOTO
April 07, 2021
Tweet
Share
More Decks by Hayato OKUMOTO
See All by Hayato OKUMOTO
Angular x Auth0 複数サービス展開での認証基盤を考える
falcon8823
0
310
Angular Schematicsを利用した アプリ量産体制
falcon8823
0
44
iOSとIonicとHEIF画像
falcon8823
0
270
Ionicアプリのビルド自動化
falcon8823
0
10
Firebase Authentication - Ionic Meetup #12 Tokyo
falcon8823
0
200
Other Decks in Technology
See All in Technology
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
320
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
470
自動生成を活用した、運用保守コストを抑える Error/Alert/Runbook の一元集約管理 / Centralized management of Error/Alert/Runbook to minimize operational costs using automated code generation
biwashi
12
2.3k
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
160
SPI原点回帰論:事業課題とFour Keysの結節点を見出す実践的ソフトウェアプロセス改善 / DevOpsDays Tokyo 2024
visional_engineering_and_design
4
1.8k
カオナビの利用実績をアウトカムへつなげる旅 / example-of-data-management-startup-in-kaonavi
kaonavi
0
130
2024/4/26 コンピュータ歴史博物館解説告知
toshi_atsumi
0
210
Databricks における 『MLOps』
databricksjapan
2
160
Databricks:『生成AI World Cup』のご案内
databricksjapan
2
160
ChatGPT for IT Service Management (IT Pro)
dahatake
7
1.4k
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
150
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
2
120
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Producing Creativity
orderedlist
PRO
336
39k
StorybookのUI Testing Handbookを読んだ
zakiyama
12
4.6k
Six Lessons from altMBA
skipperchong
20
3k
Automating Front-end Workflow
addyosmani
1355
200k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
The Illustrated Children's Guide to Kubernetes
chrisshort
30
46k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Web Components: a chance to create the future
zenorocha
305
41k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.4k
Transcript
IonicΞϓϦΛ Ͱೝূ͢Δ גࣜձࣾTwoGate CTO Ԟຊ ൏
ࠓͷ͝൧ 2 Auth0 Curry 🍛
Ԟຊ൏ w גࣜձࣾ5XP(BUF UXPHBUFDPN w ڞಉۀऀऔక$50 w ৽نࣄۀͷ։ൃύʔτφʔ w
ैۀһਓશһΤϯδχΞฏۉྸʙࡀ ࣗݾհ 3
w ΞϓϦɼαʔόɼΠϯϑϥ͔ΒϏδωεϞσϧ·Ͱɺ৽نࣄۀͷཱͪ ্͛ʹ͏ϓϩμΫτ։ൃ͕ಘҙͳձࣾͰ͢ɻ w ΤϯδχΞʢओʹߴઐग़ʣͷձࣾͰɺΤϯδχΞͷҙݟ͕ڧ ͘ө͞ΕͨϓϩμΫτ։ൃΛಘҙͱ͍ͯ͠·͢ɻ 5XP(BUFʹ͍ͭͯ 4 ओཁͳ࠾༻ٕज़ελοΫ
w ΞϓϦͷೝূͲ͏ͯ͠·͔͢ʁ w *POJD.FFUVQͰ'JSFCBTF"VUIFOUJDBUJPOΛհ w ΞϓϦʴ8FCఏڙͷೝূͲ͏ͯ͠·͔͢ʁ ຊ 5
w ಠ࣮ࣗ w 'JSFCBTF"VUIFOUJDBUJPO ($1*EFOUJUZ1MBUGPSN w "84$PHOJUP w *POJD"VUI$POOFDU
w "VUI w "VUIMFUF ΞϓϦͷೝূιϦϡʔγϣϯ 6
w ཧ"1*͕ෆ͍ͯ͠Δ w 1BTTXPSE$SFEFOUJBMT'MPXʹ͔͠ରԠ͍ͯ͠ͳ͍ w Ϣʔβ͔Β*%ύεϫʔυΛड͚औΔํࣜ w ը໘Λ͍͍ͪͪ࡞Δඞཁ͕͋Δ ఏڙ͍ͯ͠Δ6*͋Δ͚Ͳʜ
w αʔυύʔςΟʔͷೝূʹద͞ͳ͍ w ΞϓϦ41"ʹద͍ͯ͠Δ͕ඪ४తͳ8FCΞϓϦͷೝূʹ͑ͳ͍ 'JSFCBTF"VUIͷσϝϦοτ 7
w *POJDΞϓϦʢωΠςΟϒ 8FCʣͱ"VUIΛΈࠐΜͰΈͨ ຊ 8 +
ΈࠐΈର 9 housegate.jp HOUSE GATE Ionic 2,3ܥͰ։ൃ ɹˣ ϑϧεΫϥον͠·ͨ͠ Ionic
4 Angular 1 1 Capacitor
"VUIͱ 10 https://auth0.com/jp/
• ରԠ͍ͯ͠ΔೝূϓϩτίϧͰαʔόϑϩϯτଆΛ࣮͢Δ͚ͩ • ϩάΠϯը໘ αΠϯΞοϓը໘ ύεϫʔυϦηοτը໘Λ༻ҙͯ͘͠ΕΔ • ෳαʔϏεΛఏڙ͢Δͱ͖ͷ4JOHMF4JHO0Oج൫ͱͯ͠ • ճͷϩάΠϯͰෳαʔϏεͷϩάΠϯ͕݁Ͱ͖Δ
• ଟ༷ͳೝূํ๏ʹରԠ͍ͯ͠Δ • &NBJM 1BTTXPSE4PDJBM&OUFSQSJTF1BTTXPSEMFTT.'" "VUIͱ 11 ಛ
"VUIͱ 12 ϝϦοτ ◦ ෳΞϓϦؒͷೝূϋϒʹͳΕΔ 0"VUI1SPWJEFS ◦ 8FC ωΠςΟϒࠞࡏ͢ΔڥͰ౷Ұͨ͠ೝূ͕࣮ݱ͍͢͠
◦ ཧ"1*͕ॆ࣮͍ͯ͠Δ σϝϦοτ ◦ ྉۚମܥతʹUP$ͷແྉαʔϏεͷ߹ཁݕ౼ ◦ ᙱ͍ͱ͜Ζʹख͕ಧ͔ͳ͍͜ͱ͕͋͠͠Δ
• Auth0 ͷ OAuth 2.0ͷೝՄϑϩʔΛར༻͢Δ • ΞϓϦͰOAuthΛར༻͢Δ߹ • Authorization Code
Flow with Proof Key for Code Exchange (PKCE ) • PKCEΛ͏͜ͱ͕ॏཁɿԣऔΓ߈ܸͷੑ Auth0ΛIonicʹ࣮͢Δ 13
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Λ্ཱͪ͛
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. ϩάΠϯ
• ͭ͜ݴΘͣʹ࣮͍ͨ͠ํ͚ • @auth0/cordov a • ެࣜͰIonic 4ͷυΩϡϝϯτ͕͋Δ • ͨͩ͠ɺcordovaͳͷͱWeb൛ͱ࣮ซ༻͠ʹ͍͘
• https://auth0.com/docs/quickstart/native/ionic4/01-login Auth0ΛIonicʹ࣮͢Δ 16
• ͰͬͺΓɺCapacitorͰ࣮͍ͨ͠ΑͶ • ެࣜͷใແ͍ → جຊʹै࣮ͬͯ͢ΕΑ͍ • +φ͍@auth0/auth0-spa-jsύοέʔδΛ͍͍ͨ • چJS
SDKίʔϧόοΫࠈ • ↑Λ͞Βʹϥοϓͨ͠ @auth0/angularύοέʔδ·Ͱ͋Δ Auth0ΛIonicʹ࣮͢Δ 17 https://github.com/auth0/auth0-spa-js
࣮ྫ 18 1. In-app BrowserΛ্ཱͪ͛ 2. Custom URL SchemeͰ ΞϓϦʹίʔϧόοΫ
3. ΞΫηετʔΫϯΛऔಘ 4. ϗʔϜը໘ʹભҠ
࣮ྫ 19 جຊతʹ͜Ε͚ͩͷίʔυͰಈ͘ ͣͩͬͨ…
@auth0/auth0-spa-js ͷ 20 ͓લCookieͬͯΔΜ͔ Ionic Webviewͷ੍ͰCookie͕ਖ਼֨͘͠ೲ͞Εͳ͍͕͋Δ
Fork͠·ͨ͠ 21 @twogate/auth0-spa-js https://github.com/twogate/auth0-spa-js
ӡ༻ͯ͠Έͯ 22 • ·ͩগ͠ڍಈ͕ո͍͠ʁ • ϩάΞτ͞ΕΔ͜ͱ͕ͨ·ʹى͖Δ • localStorageʹ֨ೲ͍ͯ͠ΔͷͰɺlocalStorageͷ͕͋Δ͔ • ຊ
• ωΠςΟϒSDKΛCapacitorͰϥοϓͯ͠Keychainʹ֨ೲ͍ͨ͠…
·ͱΊ 23 • Auth0ΛIonicʹΈࠐΜͰΈͨ • PWA + ωΠςΟϒཱ྆ͨ͠ΞϓϦ • CapacitorͰ࠷৽ͷJS
SDKͰमਖ਼͕ඞཁͰ͢ • ࠓޙ • CapacitorͷAuth0ωΠςΟϒSDKͭ͘Γ͍ͨ