iOS / Android SDK を利用する Capacitor プラグインのご紹介 Auth0 by Okta Tech Meetup, 2023-11-16. 株式会社ネクストビート 溝上 友貴 The Capacitor plugin for using the Auth0 iOS and Android SDKs from mobile applications created in JavaScript
Rights Reserved 2 2020年 株式会社ネクストビート 新卒入社 2020年〜2022年 KIDSNAシッター、保育士バンク！コネクトの開発 2022年〜2023年 KIDSNAシッター テックリード 2023年 KIDSNAプラットフォームのID基盤担当 (ID platform) ★今月11月、KIDSNA ID の Auth0 化をリリース 自己紹介 株式会社ネクストビート プリンシパル 溝上 友貴 (Tomoki Mizogami) ★Auth0 implementation of KIDSNA ID released this November
Rights Reserved 3 子育てに関わるすべての人に多様な選択肢を提供するプラットフォーム • KIDSNA プラットフォームで共通利用する KIDSNA ID の基盤に Auth0 を導入している 事例紹介: KIDSNA プラットフォーム KIDSNA platform is a service and action platform that provides diverse options for everyone involved in child rearing.
Rights Reserved 4 保育施設経営者に向けたプラットフォームである保育士バンク！でも保護者向けのアプリを提供している • 保育士バンク！コネクト 保護者アプリにおいても、KIDSNA ID を導入している 事例紹介: KIDSNA プラットフォーム KIDSNA platform is a service and action platform that provides diverse options for everyone involved in child rearing. 保護者向けアプリを提供 (KIDSNA ID)
Rights Reserved 6 • Capacitor について • Ionic & Capacitor アプリケーション用の SDK について • Ionic & Capacitor アプリケーション用 SDK (Capacitor プラグイン) の作成 • Capacitor プラグインを利用した認証機能の導入 • まとめ アジェンダ Overview • About Capacitor • About Auth0 SDKs for Ionic and Capacitor applications • Creating a capacitor plugin for Ionic and Capacitor applications to use Auth0 iOS and Android SDKs • Introducing the capacitor plugin into your application
Rights Reserved 7 • Capacitor は、Web アプリをネイティブアプリとして起動、開発するためのライブラリである ◦ iOS、Android の WebView 上で Web アプリを実行する仕組み ◦ Capacitor プラグインを用いて、iOS、Android 特有の機能を呼び出すことができる • 弊社の以下のアプリも Capacitor で開発している ◦ 保育士バンク！ (Svelte x Ionic & Capacitor) ◦ 保育士バンク！コネクト (Angular x Ionic & Capacitor) ◦ KIDSNA シッター (Angular x Ionic & Capacitor) Capacitor について Capacitor is a library for launching and developing web apps as native apps, and can invoke iOS- and Android-specific features using Capacitor plugins. Capacitor plugins can be used to invoke iOS- and Android-specific functions. We are also operating native applications using Capacitor.
Rights Reserved 11 Ionic & Capacitor アプリケーション用の SDK について 感じたこと • Capacitor の良さはネイティブの機能を JavaScript から利用できることである • せっかく Capacitor 使っているのに、ネイティブ (iOS, Android) の SDK 使えないの勿体ない • Browser プラグインだと SSO ができない & ASWebAuthenticationSession の Capacitor プラグインがない ◦ ネイティブの SDK であれば SSO できる😃 ◦ Capacitor プラグインでネイティブ SDK を呼び出せば、JavaScript フレームワークに依存しなくて良い 😃 Auth0.swift と Auth0.Android を JavaScript から利用する Capacitor プラグインを作成しよう One of benefits of using Capacitor is that native functionality can be used from JavaScript. It is a waste not to be able to use native (iOS, Android) SDKs even though we are using Capacitor. - If you use native SDK, you can use SSO 😃. - Capacitor plugin can call native SDKs, no need to depend on JavaScript framework 😃. I would like to create a Capacitor plugin to call Auth0.swift and Auth0.Android from JavaScript.
Rights Reserved 13 Auth0.swift、Auth0.Android を JavaScript から呼び出す Capacitor プラグインを作成していく Auth0.swift、Auth0.Android は以下の機能を持つ • Web Auth: Web ベース認証 ◦ ログイン、ログアウト • Credentials Manager: 認証情報の管理 ◦ アクセストークン、リフレッシュトークンなどの保持、更新、削除 • Authentication API Client: Auth0 Authentication API のクライアント (今回は対象外) • Management API Client (Users): Auth0 Management API のクライアント (今回は対象外) Auth0.swift、Auth0.Android の概要 Create a Capacitor plugin that calls Auth0.swift and Auth0.Android from JavaScript. Auth0.swift and Auth0.Android have the following features. [1] Web Auth: Web-based authentication (login, logout) [2] Credentials Manager: Authentication information management (access token retention, refresh token) [3] Authentication API Client: Auth0 Authentication API client (not included here) [4] Management API Client (Users): Auth0 Management API client (not included here)
Rights Reserved 14 capacitor-auth0: GitHub / npm 以下の要件を満たす Capacitor プラグインを作成した • Web Auth ◦ Auth0 SDK の WebAuth 機能を利用可能である • Credentials Manager ◦ WebAuth でログイン後、Credentials を保持する ◦ アプリを再度開いた場合、保持した Credentials からユーザー情報にアクセスする ◦ ログアウト後、Credentials を削除する Capacitor プラグインの作成 I have created a Capacitor plugin that meets the following requirements. [1] Web Auth: The WebAuth functionality of the Auth0 SDK is available. [2] Credentials Manager: Retain credentials after login with WebAuth. When the application is reopened, the user information is accessed from the credentials stored in the credentials manager.
Rights Reserved 23 iOS とほぼ同様であるため、コードの紹介は省略する: GitHub • ライブラリ追加 ◦ Auth0.Android を build.gradle に追加する • load ◦ Auth0, SecureCredentialsManager 初期化 • login ◦ WebAuthProvider.login(auth0) を利用する • logout ◦ WebAuthProvider.logout(auth0) を利用する • isAuthenticated ◦ SecureCredentialsManager.hasValidCredentials() を利用する • getUserInfo ◦ SecureCredentialsManager.getCredentials() を利用する Capacitor プラグインの作成 - プラグイン実装 (Android) Plugin implementation (Android): Since the code is almost the same as that of iOS, introduction of the code is omitted.
Rights Reserved 25 [1] Auth0 クライアントを作成する • Auth0 Dashboard または terraform から作成する ◦ Native アプリケーション (PKCE 利用) ◦ コールバック URI (ログイン、ログアウト) に以下を設定する ▪ iOS用: {YOUR_BUNDLE_IDENTIFIER}://{yourDomain}/ios/{YOUR_BUNDLE_IDENTIFIER}/callback ▪ Android用: demo://{yourDomain}/android/{YOUR_APP_PACKAGE_NAME}/callback ◦ 例 ▪ com.github.taretmch.SampleApp://taretmch-dev.jp.auth0.com/ios/com.github.taretmch.SampleApp/callback ▪ demo://taretmch-dev.jp.auth0.com/android/com.github.taretmch/callback [1] Create an Auth0 client Create an Auth0 client. The app type should be Native and callback URIs (login and logout) should be in the above format. Capacitor プラグインを利用した認証機能の導入
Rights Reserved 31 まとめ • Auth0 には Native/Mobile アプリ、Ionic & Capacitor アプリ用の SDK がいくつか用意されている • Auth0 のサイトでは、JavaScript SDK をメインに利用する方法が紹介されている • iOS、Android の SDK を JavaScript から利用する Capacitor プラグインを作成した ◦ iOS、Android の SDK で得られる体験を Capacitor アプリで利用できるようにした ◦ JavaScript フレームワークによらず iOS、Android に Auth0 を導入できるようにした ◦ GitHub ◦ npm (まだ beta バージョン) • 今後の展望 ◦ アクセストークン、リフレッシュトークンの管理機能を追加したい ◦ IDToken から取得するユーザー情報を増やしたい ◦ リポジトリ管理を capacitor-community に移動してみたい [Summary] The Auth0 site shows how to use the JavaScript SDK mainly for Ionic & Capacitor apps. This time, we created a Capacitor plugin to use the iOS and Android SDKs from JavaScript. This allows Capacitor apps to use the experience provided by the iOS and Android SDKs. Also, Auth0 can be introduced to iOS and Android without JavaScript framework. [Future Prospects] We would like to add management functions for access tokens and refresh tokens. We would also like to increase the amount of user information obtained from IDToken. We would also like to move repository management to capacitor-community team.
nextbeatdev
kazatohiei
kubotak
dropout009
orgachem
onihusube
iwatatomoya
masayaaoyama
kentatada
okuzawats
mackee
chiroruxx
syumai
afnizarnur
eileencodes
morganepeng
jonrohan
dougneiner
kneath
zakiyama
yeseniaperezcruz
chriscoyier
marcduiker
lara
michaelherold
