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
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
4.1k
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
7
1.8k
推し活を支えるAngularアプリ 量産体制
falcon8823
0
71
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
8
6.7k
Angular x Auth0 複数サービス展開での認証基盤を考える
falcon8823
0
640
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
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
8.9k
Node.js 2025: What's new and what's next
ruyadorno
0
700
RDS の負荷が高い場合に AWS で取りうる具体策 N 連発/a-series-of-specific-countermeasures-available-on-aws-when-rds-is-under-high-load
emiki
7
4.4k
AI-Readyを目指した非構造化データのメダリオンアーキテクチャ
r_miura
1
230
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
0
130
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
[2025年10月版] Databricks Data + AI Boot Camp
databricksjapan
1
220
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
aeonpeople
1
230
初めてのDatabricks Apps開発
taka_aki
1
220
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
500
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3k
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
1
260
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
The Invisible Side of Design
smashingmag
302
51k
Site-Speed That Sticks
csswizardry
13
910
Leading Effective Engineering Teams in the AI Era
addyosmani
7
540
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
920
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Bash Introduction
62gerente
615
210k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
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ͭ͘Γ͍ͨ