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
430
IonicアプリをAuth0で認証する - Ionic Meetup #16 in Online
Hayato OKUMOTO
April 07, 2021
Tweet
Share
More Decks by Hayato OKUMOTO
See All by Hayato OKUMOTO
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
7
1.8k
推し活を支えるAngularアプリ 量産体制
falcon8823
0
62
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
8
6.4k
Angular x Auth0 複数サービス展開での認証基盤を考える
falcon8823
0
620
Angular Schematicsを利用した アプリ量産体制
falcon8823
0
230
iOSとIonicとHEIF画像
falcon8823
0
370
Ionicアプリのビルド自動化
falcon8823
0
37
Firebase Authentication - Ionic Meetup #12 Tokyo
falcon8823
0
310
Other Decks in Technology
See All in Technology
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
320
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
gowhich501
1
130
Agile PBL at New Grads Trainings
kawaguti
PRO
1
410
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
120
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
390
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
170
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
230
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
360
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
1
380
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
710
roppongirb_20250911
igaiga
1
210
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
120
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Music & Morning Musume
bryan
46
6.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How to Ace a Technical Interview
jacobian
279
23k
Being A Developer After 40
akosma
90
590k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
We Have a Design System, Now What?
morganepeng
53
7.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
A Tale of Four Properties
chriscoyier
160
23k
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ͭ͘Γ͍ͨ