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
390
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とアーキテクチャ - Kaigi on Rails 2024
falcon8823
7
4.8k
Angular x Auth0 複数サービス展開での認証基盤を考える
falcon8823
0
520
Angular Schematicsを利用した アプリ量産体制
falcon8823
0
110
iOSとIonicとHEIF画像
falcon8823
0
340
Ionicアプリのビルド自動化
falcon8823
0
28
Firebase Authentication - Ionic Meetup #12 Tokyo
falcon8823
0
280
Other Decks in Technology
See All in Technology
IAMのマニアックな話2025
nrinetcom
PRO
6
1.3k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
540
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.7k
サバイバルモード下でのエンジニアリングマネジメント
konifar
6
1.4k
[OpsJAWS Meetup33 AIOps] Amazon Bedrockガードレールで守る安全なAI運用
akiratameto
1
120
事業を差別化する技術を生み出す技術
pyama86
2
440
リクルートのエンジニア組織を下支えする 新卒の育成の仕組み
recruitengineers
PRO
1
140
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
150
MIMEと文字コードの闇
hirachan
2
1.4k
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
280
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
3.9k
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
190
Featured
See All Featured
Side Projects
sachag
452
42k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
The Language of Interfaces
destraynor
156
24k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Building Applications with DynamoDB
mza
93
6.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Why Our Code Smells
bkeepers
PRO
336
57k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The World Runs on Bad Software
bkeepers
PRO
67
11k
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ͭ͘Γ͍ͨ