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

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

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

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

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

Callback URLを構成する

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

ログアウトURLを構成する

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

Allowed Web Origins（許可されているWebオリジン）を構成する

［Allowed Web Origin（許可されているWebオリジン）］とは、認証フローにアクセスすることを許可して欲しいURLです。これにはプロジェクトのURLが含まれている必要があります。適切に設定されていない場合、プロジェクトが認証トークンを暗黙でリフレッシュできず、ユーザーがアプリケーションを再び訪問した時、またはページを再読み込みした時にログアウトした状態になってしまいます。

Angularアプリで、Auth0の認証・認可を手軽に実装できるように、Auth0はAngular SDKを提供しています。

ターミナルで以下のコマンドを実行してAuth0 Angular SDKをインストールします：

npm install @auth0/auth0-angular

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

SDKは、SDKが機能するために必要なすべてのサービスを含んだprovide関数である、provideAuth0をエクスポートします。これをアプリケーションで登録するには、以下のようにします。

1. main.tsファイルを開きます。

2. @auth0/auth0-angularパッケージからprovideAuth0関数をインポートします。

3. provideAuth0をbootstrapApplication内のprovidersに追加することで、アプリケーションに追加します。

4. AuthServiceをAppComponentに注入します。

provideAuth0関数はdomainプロパティとclientIdプロパティを取ります。これらのプロパティの値は、Auth0で登録したシングルページアプリケーション（SPA）の［Settings（設定）］にあるDomain（ドメイン）とClient ID（クライアントID）の値に対応します。その上に、authorizationParams.redirect_uriを構成します。これによって、認証に成功した後、Auth0はユーザーを特定のURLにリダイレクトで戻すことができます。

Auth0アプリケーションとAuth0 Angular SDKの構成が完了したら、プロジェクトのためにログインをセットアップする必要があります。これを実現するには、AuthServiceクラスからSDKのloginWithRedirect()メソッドを使用して、ユーザーをAuth0のユニバーサルログインページにリダイレクトします。そこでAuth0はユーザーを認証することができます。ユーザーが認証に成功すると、アプリケーション、およびこのクイックスタートで前にセットアップしたCallback URLへリダイレクトされます。

アプリケーションで選択時にloginWithRedirect()を呼び出すログインボタンを作成します。

プロジェクトにログインしたユーザーには、ログアウトする方法も必要です。SDKには、AuthServiceクラスでアプリからユーザーをログアウトするのに使用できるlogout()メソッドが用意されています。ユーザーはログアウトすると、Auth0ログアウトエンドポイントにリダイレクトされてから、即座に、アプリケーションとこのクイックスタートで先ほどセットアップしたログアウトURLへとリダイレクトで戻されます。

アプリケーションで選択時にlogout()を呼び出すログアウトボタンを作成します。

ユーザーがログインやログアウトできるようになったら、認証済みのユーザーに関連付けられたプロファイル情報を取得できるようにしたいと考えるはずです。たとえば、ログインしたユーザーの名前やプロフィール写真を表示することで、ユーザーインターフェイスをパーソナライズできるようになりたいかもしれません。

Auth0 Angular SDKは、AuthServiceクラスによって公開されたuser$ Observableを介してユーザー情報を提供します。user$ Observableにはユーザーのアイデンティティに関する機密情報とアーティファクトが含まれるため、この方法が使用できるかはユーザーの認証ステータスによります。幸い、user$ Observableは、isAuthenticated$ Observableがtrueである場合にのみ値を出力するよう構成されています。そのため、ユーザープロファイルデータにアクセスする前に、認証状態を手動で確認する必要はありません。

SDKは、AuthServiceクラスでユーザーが認証されているかどうかを確認することができるisAuthenticated$ Observableも公開します。これを使って、たとえば、UI要素を表示・非表示にするかを判断することができます。

インタラクティブパネルでUserProfileComponentコードを確認し、これらの関数の使用方法の例をチェックします。