Angularでユーザー認証を実装するための詳しい情報については、「例を挙げて説明するAngular認証ガイド」を参照してください。このガイドでは、サインアップボタンを作成する方法、ルートガードを追加する方法、そして保護されたAPIをAngularから呼び出す方法が詳しく説明されています。
1
Auth0を構成する
Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。
アプリケーションを構成する
対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。Callback URLを構成する
Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。サンプルプロジェクトに沿って進めている場合は、
http://localhost:4200に設定してください。ログアウトURLを構成する
ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。サンプルプロジェクトに沿って進めている場合は、
http://localhost:4200に設定してください。Allowed Web Origins（許可されているWebオリジン）を構成する
［Allowed Web Origin（許可されているWebオリジン）］とは、認証フローにアクセスすることを許可して欲しいURLです。これにはプロジェクトのURLが含まれている必要があります。適切に設定されていない場合、プロジェクトが認証トークンを暗黙でリフレッシュできず、ユーザーがアプリケーションを再び訪問した時、またはページを再読み込みした時にログアウトした状態になってしまいます。サンプルプロジェクトに沿って進めている場合は、
http://localhost:4200に設定してください。2
Auth0 Angular SDKをインストールする
Angularアプリで、Auth0の認証・認可を手軽に実装できるように、Auth0はAngular SDKを提供しています。ターミナルで以下のコマンドを実行してAuth0 Angular SDKをインストールします：SDKはモジュールや認証サービスなど、Auth0をAngularアプリケーションに慣用的に統合しやすくする種類をいくつか公開しています。
3
Auth0を登録・提供する
SDKは、SDKが機能するために必要なすべてのサービスを含んだprovide関数である、
provideAuth0をエクスポートします。これをアプリケーションで登録するには、以下のようにします。main.tsファイルを開きます。@auth0/auth0-angularパッケージからprovideAuth0関数をインポートします。provideAuth0をbootstrapApplication内のprovidersに追加することで、アプリケーションに追加します。AuthServiceをAppComponentに注入します。
provideAuth0関数はdomainプロパティとclientIdプロパティを取ります。これらのプロパティの値は、Auth0で登録したシングルページアプリケーション（SPA）の**［Settings（設定）］** にあるDomain（ドメイン） と**Client
ID（クライアントID）**の値に対応します。その上に、authorizationParams.redirect_uriを構成します。これによって、認証に成功した後、Auth0はユーザーを特定のURLにリダイレクトで戻すことができます。Auth0を使用したカスタムドメインでは、ドメインプロパティの値は［Settings（設定）］タブに反映された値でなく、カスタムドメインの値になります。
4
アプリケーションにログインを追加する
Auth0アプリケーションとAuth0 Angular
SDKの構成が完了したら、プロジェクトのためにログインをセットアップする必要があります。これを実現するには、
AuthServiceクラスからSDKのloginWithRedirect()メソッドを使用して、ユーザーをAuth0のユニバーサルログインページにリダイレクトします。そこでAuth0はユーザーを認証することができます。ユーザーが認証に成功すると、アプリケーション、およびこのクイックスタートで前にセットアップしたCallback
URLへリダイレクトされます。アプリケーションで選択時にloginWithRedirect()を呼び出すログインボタンを作成します。チェックポイント
アプリケーションにログインできるようになります。アプリケーションを実行し、ログインボタンを選択します。以下の点を確認します：- ユーザー名とパスワードを使って、ログインまたはサインアップできる。
- アプリケーションによってAuth0ユニバーサルログインページにリダイレクトされる。
- 認証用にAuth0にリダイレクトされる。
- 認証した後、Auth0はアプリケーションにリダイレクトで戻される。
- コンソールでAuth0に関連したエラーを受け取らない。
5
アプリケーションにログアウトを追加する
プロジェクトにログインしたユーザーには、ログアウトする方法も必要です。SDKには、
AuthServiceクラスでアプリからユーザーをログアウトするのに使用できるlogout()メソッドが用意されています。ユーザーはログアウトすると、Auth0ログアウトエンドポイントにリダイレクトされてから、即座に、アプリケーションとこのクイックスタートで先ほどセットアップしたログアウトURLへとリダイレクトで戻されます。アプリケーションで選択時にlogout()を呼び出すログアウトボタンを作成します。SDKによって
AuthServiceクラスでisAuthenticated$
Observableが公開されることで、ユーザーが認証されているかどうかを確認することができます。isAuthenticated$
Observableの値に基づいて、条件付きでログインボタンとログアウトボタンを作成することができます。または、シングルボタンを使って、ログインとログアウトの両方のボタンと条件付きレンダリングを組み合わせることができます。チェックポイント
アプリケーションからログアウトできるようになります。アプリケーションを実行し、ログインし、ログアウトボタンを選択します。以下の点を確認します：- Auth0のログアウトエンドポイントにリダイレクトされている。
- Auth0がアプリケーションと正しいログアウトURLへのリダイレクトで戻される。
- アプリケーションにログインしていない。
- コンソールでAuth0に関連したエラーを受け取らない。
6
ユーザープロファイル情報を表示する
ユーザーがログインやログアウトできるようになったら、認証済みのユーザーに関連付けられたプロファイル情報を取得できるようにしたいと考えるはずです。たとえば、ログインしたユーザーの名前やプロフィール写真を表示することで、ユーザーインターフェイスをパーソナライズできるようになりたいかもしれません。Auth0 Angular SDKは、
AuthServiceクラスによって公開されたuser$
Observableを介してユーザー情報を提供します。user$
Observableにはユーザーのアイデンティティに関する機密情報とアーティファクトが含まれるため、この方法が使用できるかはユーザーの認証ステータスによります。幸い、user$
Observableは、isAuthenticated$
Observableがtrueである場合にのみ値を出力するよう構成されています。そのため、ユーザープロファイルデータにアクセスする前に、認証状態を手動で確認する必要はありません。SDKは、AuthServiceクラスでユーザーが認証されているかどうかを確認することができるisAuthenticated$
Observableも公開します。これを使って、たとえば、UI要素を表示・非表示にするかを判断することができます。インタラクティブパネルでUserProfileComponentコードを確認し、これらの関数の使用方法の例をチェックします。チェックポイント
ユーザープロファイル情報を表示することができるようになります。アプリケーションを実行して次の点を確認します：- ログイン後にユーザー情報が正しく表示される。
- ログアウト後にユーザー情報が表示されない。
次のステップ
成功です！ここまで来れば、アプリケーションにログイン、ログアウト、ユーザープロファイル情報が備わっているはずです。これでクイックスタートチュートリアルは終了ですが、機能はまだまだたくさんあります。Auth0でできることについて詳しくは、以下をご覧ください。- Auth0 Dashboard - Auth0のテナントやアプリケーションを構成して管理する方法について説明します
- auth0-angular SDK - このチュートリアルで使用されているSDKをより詳しく説明します
- Auth0 Marketplace - Auth0の機能性を拡張できる各種の統合を見つけられます