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
350
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
370
Angular Schematicsを利用した アプリ量産体制
falcon8823
0
69
iOSとIonicとHEIF画像
falcon8823
0
290
Ionicアプリのビルド自動化
falcon8823
0
14
Firebase Authentication - Ionic Meetup #12 Tokyo
falcon8823
0
230
Other Decks in Technology
See All in Technology
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
MySQLのロックの種類とその競合
yoku0825
6
1.6k
AOAI Dev Day - Opening Session
yoshidashingo
2
430
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Git: the NoSQL Database
bkeepers
PRO
423
64k
Six Lessons from altMBA
skipperchong
24
3.2k
Typedesign – Prime Four
hannesfritz
37
2.2k
Facilitating Awesome Meetings
lara
46
5.8k
The World Runs on Bad Software
bkeepers
PRO
63
11k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Making Projects Easy
brettharned
111
5.7k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
What's in a price? How to price your products and services
michaelherold
239
11k
Documentation Writing (for coders)
carmenintech
63
4.2k
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ͭ͘Γ͍ͨ