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

また、Capacitorの開発ワークフローを理解しておく必要もあります。

Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、プロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

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

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

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

ネイティブアプリケーションからAuth0へ要求を送信できるようにするには、アプリケーションの設定で次の許可されているオリジンを設定します。

最後に、アプリケーションの［Application Type（アプリケーションタイプ）］が［Native（ネイティブ）］になっていることをアプリケーションの設定で必ず確認してください。

プロジェクトディレクトリで次のコマンドを実行して、Auth0 Angular SDKをインストールします：

npm install @auth0/auth0-angular

SDKはモジュールや認証サービスなど、Auth0をAngularアプリケーションに慣用的に統合しやすくする種類をいくつか公開しています。

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

このクイックスタートとサンプルでは、Capacitorの公式プラグインをいくつか使用しています。次のコマンドを使用して、これらをアプリにインストールします：

npm install @capacitor/browser @capacitor/app

• @capacitor/browser：デバイスのシステムブラウザーと対話できるようになり、Auth0の認可エンドポイントへのURLを開くために使用されます。

• @capacitor/app：高レベルのアプリイベントを受け取れるようになるため、Auth0からのコールバックを扱うのに便利です。

SDKは、SDKが機能するために必要なすべてのサービスを含んだAuthModuleをエクスポートします。このモジュールをアプリケーションに登録し、Auth0のドメインとクライアントIDで構成する必要があります。

AuthModule.forRoot関数は以下の構成を使用します。

• domain：Auth0 Dashboardで作成したアプリケーションの設定にあるdomain値、またはAuth0のカスタムドメイン機能を使用する場合のカスタムドメインです。

• clientId：Auth0 Dashboardで作成したアプリケーションの設定にあるクライアントID値です。

• useRefreshTokens：AndroidまたはiOSでauth0-angularをIonicと使用するには、リフレッシュトークンを有効にする必要があります。

• useRefreshTokensFallback：AndroidまたはiOSでauth0-angularをIonicと使用するには、iframeのフォールバックを無効にする必要があります。

• authorizationParams.redirect_uri：Auth0で認証した後に、ユーザーをリダイレクトするURLです。

Capacitorアプリケーションでは、CapacitorのBrowserプラグインによって、Auth0のユニバーサルログインページにリダイレクトされます。loginWithRedirect関数のopenUrlパラメーターにBrowser.openの使用を設定し、デバイスのシステムブラウザーコンポーネント（iOSではSFSafariViewController、AndroidではChrome Custom Tabs）でURLが開くようにします。

ユーザーがユニバーサルログインページでログインすると、カスタムURLスキームを使ったURLでアプリにリダイレクトされます。appUrlOpenイベントがアプリ内で処理されなければなりません。Auth0 SDKのhandleRedirectCallbackメソッドを呼び出すと、認証状態を初期化することができます。

このメソッドは、Auth0からのリダイレクトでのみ使用することができます。正常に機能していることを確認するには、URL内のcodeとstateパラメーターを確認します。

このイベントが発生した際に、Browser.close()メソッドがブラウザーを閉じるようにします。

appUrlOpenイベントのコールバックがngZone.runでラップされていることに注意してください。handleRedirectCallbackの実行時に発生するオブザーバブルへの変更は、Angularアプリが受け取ります。詳細については、「AngularをCapacitorと使用する」をお読みください。それ以外の場合では、画面がログイン後の認証状態で更新されません。

ユーザーがログインできるようになりました。今度は、ログアウトする方法を構成する必要があります。ユーザーを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パラメーターを設定します。

Auth0 SDKは必要な任意のコンポーネントについて、名前やプロフィール写真など、ログイン済みのユーザーに関連付けられたプロファイル情報を取得し、ユーザーインターフェイスをパーソナライズします。プロファイル情報は、AuthServiceが公開するuser$プロパティを介して使用することができます。