メインコンテンツへスキップ
Auth0を使用すると、アプリケーションに手軽に認証を追加して、ユーザープロファイル情報にアクセスすることができます。このガイドは、Ionic（React）とCapacitorのアプリケーションにAuth0 React SDKを使ってAuth0を統合する方法を説明します。
1

使用を開始する

このクイックスタートは、IonicアプリケーションがCapacitorを使ってすでに実行されていることを前提としています。そうでない場合には、IonicフレームワークでCapacitorを使用するガイドを参照しながら簡単なアプリから始めるか、サンプリアプリを複製してください。また、Capacitorの開発ワークフローを理解しておく必要もあります。
2

Auth0を構成する

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、プロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。
以下の説明では、「YOUR_PACKAGE_ID」を実際のアプリケーションのパッケージIDに置き換えてください。これは、capacitor.config.tsファイルのappIdフィールドで見つけて構成することができます。詳細については、Capacitorの構成スキーマを参照してください。

​
アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

​
Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。
サンプルプロジェクトに沿って進めている場合には、次の値に設定します：YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback

​
ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。
サンプルプロジェクトに沿って進めている場合には、次の値に設定します：YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback

​
許可されているオリジンを構成する

ネイティブアプリケーションからAuth0へ要求を送信できるようにするには、アプリケーションの設定で次の許可されているオリジン を設定します。
サンプルプロジェクトに沿って進めている場合、capacitorにiOSとAndroidでそれぞれcapacitor://localhost, http://localhostを設定します。
最後に、アプリケーションの**［Application Type（アプリケーションタイプ）］** が**［Native（ネイティブ）］** になっていることをアプリケーションの設定で必ず確認してください。
3

Auth0 React SDKをインストールする

プロジェクトディレクトリで次のコマンドを実行して、Auth0 React SDKをインストールします：npm install @auth0/auth0-reactSDKは、慣用的にReact Hooksや高階コンポーネント（HOC）を使用して、Auth0をReactアプリケーションに統合しやすくするメソッドや変数を公開しています。

​
Capacitorプラグインをインストールする

このクイックスタートとサンプルでは、Capacitorの公式プラグインをいくつか使用しています。次のコマンドを使用して、これらをアプリにインストールします：npm install @capacitor/browser @capacitor/app
  • @capacitor/browser：デバイスのシステムブラウザーと対話できるようになり、Auth0の認可エンドポイントへのURLを開くために使用されます。
  • @capacitor/app：高レベルのアプリイベントを受け取れるようになるため、Auth0からのコールバックを扱うのに便利です。
iOSのCapacitorのBrowserプラグインはSFSafariViewControllerを使用し、iOS 11以降ではデバイス上のSafariとクッキーを共有しません。つまり、これらのデバイスではSSOが機能しません。SSOが必要な場合には、ASWebAuthenticationSessionを使用する互換のプラグインを使用してください。
4

Auth0Providerコンポーネントを構成する

内部では、Auth0 React SDKはReact Contextを使用して、ユーザーの認証状態を管理します。Auth0をReactアプリに統合する1つの方法として、SDKからインポート可能なAuth0Providerでルートコンポーネントをラップすることができます。Auth0Providerコンポーネントは以下のプロパティを使用します。
  • domain：Auth0 Dashboardで作成したアプリケーションの設定 にあるdomain値、またはAuth0のカスタムドメイン機能を使用する場合のカスタムドメインです。
  • clientId：Auth0 Dashboardで作成したアプリケーションの設定 にあるクライアントID値です。
  • useRefreshTokens：AndroidまたはiOSでauth0-reactをIonicと使用するには、リフレッシュトークンを有効にする必要があります。
  • useRefreshTokensFallback：AndroidまたはiOSでauth0-reactをIonicと使用するには、iframeのフォールバックを無効にする必要があります。
  • authorizationParams.redirect_uri：Auth0で認証した後に、ユーザーをリダイレクトするURLです。
アプリケーションの閉開後に認証を継続するには、SDKを構成する際にcacheLocationをlocalstorageに設定することをお勧めします。ただし、localstorageにトークンを保管するリスクを理解してください。また、状況によってはlocalstorageのデータが思いがけず復元される可能性もあるため、Capacitorアプリ内では一次的 なものとして扱ってください。Capacitorドキュメントに記載のストレージに関するガイドをお読みください。さらに、より安全で永続的なストレージの仕組みが要件である場合、SDKを使用すると、カスタムのキャッシュを実装してトークンを保管することができます。注意 ：CapacitorのStorageプラグインは、iOSではUserDefaults、AndroidではSharedPreferencesによってバックアップされるため、トークンの保管に使用しない ことをお勧めします。これらのAPIを使って保管されたデータは暗号化されません。セキュリティで保護されることもなく、クラウドと同期される可能性があります。
チェックポイント
Auth0ProviderコンポーネントがAppコンポーネントをラップするようにして追加してから、アプリケーションを実行し、SDKが正しく初期化されていること、そして、アプリケーションがAuth0に関連したエラーを投入していないことを確認します。
5

アプリケーションにログインを追加する

Capacitorアプリケーションでは、CapacitorのBrowserプラグインによって、Auth0のユニバーサルログインページにリダイレクトされます。loginWithRedirect関数のopenUrlパラメーターにBrowser.openの使用を設定し、デバイスのシステムブラウザーコンポーネント（iOSではSFSafariViewController、AndroidではChrome Custom Tabs）でURLが開くようにします。
SDKのloginWithRedirectメソッドは、デフォルトでwindow.location.hrefを使用して、ユーザーのデバイスにあるデフォルトのブラウザーアプリケーションでログインページを開きます。プラットフォームに適切なシステムブラウザーコンポーネントは使用しません。ユーザーが認証でアプリケーションを離れるため、ユーザーエクスペリエンスとしては最適ではありません。
チェックポイント
loginWithRedirect関数は、SDKにログインフローを開始するように指示します。openUrlパラメーターにログインURLを設定して、Browser.open関数を呼び出し、プラットフォームのシステムブラウザーコンポーネントでログインURLを開きます。これは、ユーザーがアプリケーションにログインする方法を提供します。ユーザーはAuth0のログインページにリダイレクトされ、エラーは一切受け取りません。
6

ログインコールバックを処理する

ユーザーがユニバーサルログインページでログインすると、カスタムURLスキームを使ったURLでアプリにリダイレクトされます。appUrlOpenイベントがアプリ内で処理されなければなりません。Auth0 SDKのhandleRedirectCallbackメソッドを呼び出すと、認証状態を初期化することができます。このメソッドは、Auth0からのリダイレクトでのみ使用することができます。正常に機能していることを確認するには、URL内のcodeとstateパラメーターを確認します。このイベントが発生した際に、Browser.close()メソッドがブラウザーを閉じるようにします。
以下の説明では、カスタムURLスキームを使用して、アプリケーション内でコールバックを処理することを前提にしています。このためには、YOUR_PACKAGE_IDを選択したプラットのURLスキームで置き換えて登録します。詳細については、iOSには「カスタムURLスキームを定義する」、Androidには「アプリコンテンツ用のディープリンクを作成する」をお読みください。
チェックポイント
アプリケーションのAppコンポーネントにappUrlOpenを追加して、ログインします。ユーザーが認証して、アプリにログインすると、ブラウザーのウィンドウが閉じます。
7

アプリケーションにログアウトを追加する

ユーザーがログインできるようになりました。今度は、ログアウトする方法を構成する必要があります。ユーザーをAuth0のログアウトエンドポイントにリダイレクトし、ブラウザー内のセッションをクリアする必要があります。他の場合と同様に、ユーザーがアプリから離れることでユーザーエクスペリエンスが損なわれないように、CapacitorのBrowserプラグインがリダイレクトを処理するようにします。Auth0 SDKを使用してIonicとCapacitorで実現するには、以下を行います。
  • アプリについて、ログアウト後にAuth0のリダイレクト先となるURLを構築します。これは、登録済みのカスタムスキームとAuth0ドメインを使ったURLです。これを、Auth0 Dashboardの**［Allowed Logout URLs（許可されているログアウトURL）］** の構成に追加します。
  • logoutを呼び出し、logoutParams.returnToパラメーターにリダイレクト先のURLを渡して、SDKからログアウトします。
  • CapacitorのBrowserプラグインを使用してBrowser.openでURLを開くコールバックに、openUrlパラメーターを設定します。
ログインの手順と同様に、logoutを呼び出す際にopenUrlを設定しないと、SDKがユーザーをログアウトURLにリダイレクトするのに、デバイスのデフォルトのブラウザーアプリケーションが使用されるため、ユーザーエクスペリエンスとしては最適ではありません。
チェックポイント
ユーザーがアプリケーションからログアウトする方法を提供します。Auth0にリダイレクトしてから、returnToパラメーターで指定したアドレスへ移動することを確認します。アプリケーションにログインしていないことを確認します。
8

ユーザープロファイルを表示する

Auth0 React SDKは必要な任意のコンポーネントについて、名前やプロフィール写真など、ログイン済みのユーザーに関連付けられたユーザープロファイルを取得し、ユーザーインターフェイスをパーソナライズします。プロファイル情報は、useAuth0()フックが公開するuserプロパティを介して使用することができます。SDKの初期化は非同期に行われます。isLoadingとuserプロパティを確認して、ユーザープロファイルを保護する必要があります。isLoadingがfalseになり、userが値を持つと、ユーザープロファイルを利用することができます。
チェックポイント
ユーザーがアプリ内でユーザープロファイルの詳細を表示できる手段を提供し、ログインした後に自分のプロファイル情報を取得して画面に表示できることを確認します。

​
次のステップ

成功です！ここまで来れば、アプリケーションにログイン、ログアウト、ユーザープロファイル情報が備わっているはずです。これでクイックスタートチュートリアルは終了ですが、機能はまだまだたくさんあります。Auth0でできることについて詳しくは、以下をご覧ください。
  • Auth0 Dashboard - Auth0のテナントやアプリケーションを構成して管理する方法について説明します
  • Auth0 Marketplace - Auth0の機能性を拡張できる各種の統合を見つけられます
⌘I