import { bootstrapApplication } from '@angular/platform-browser';
import { provideAuth0 } from '@auth0/auth0-angular';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideAuth0({
      domain: '{yourDomain}',
      clientId: '{yourClientId}',
      authorizationParams: {
        redirect_uri: window.location.origin
      }
    }),
  ]
});
以下をご覧ください Angular認証の例 ガイドでは、Angularでユーザー認証を実装する詳細な方法を説明しています。このガイドでは、サインアップボタンの作成、ルートガードの追加、AngularからプロテクトされたAPIを呼び出す方法について追加の詳細を提供しています。
Auth0を使用すると、ほぼすべてのタイプのアプリケーションに迅速に認証を追加できます。このガイドでは、Auth0を統合し、認証を追加し、Auth0 Angular SDKを使用してAngularアプリケーションでユーザープロファイル情報を表示する方法を示します。 このクイックスタートを使用するには、以下が必要です：
  • 無料のAuth0アカウントにサインアップするか、Auth0にログインします。
  • 統合したい動作するAngularプロジェクトがあること。または、ログイン後にサンプルアプリケーションを表示またはダウンロードすることもできます。
1

Auth0の設定

Auth0サービスを使用するには、Auth0ダッシュボードでアプリケーションを設定する必要があります。Auth0アプリケーションは、開発中のプロジェクトの認証をどのように設定したいかを構成する場所です。

​
アプリケーションの設定

インタラクティブセレクターを使用して、新しいAuth0アプリケーションを作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0の各アプリケーションには、アプリケーションコードがSDKを通じてAuth0 APIを呼び出すために使用する英数字の一意のクライアントIDが割り当てられます。このクイックスタートを使用して設定した設定は、自動的にダッシュボードのアプリケーションに更新されます。ここで将来的にアプリケーションを管理できます。完全な設定を探索したい場合は、代わりにサンプルアプリケーションを表示できます。

​
コールバックURLの設定

コールバックURLは、ユーザーが認証した後にAuth0がリダイレクトさせたいアプリケーション内のURLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻されません。
サンプルプロジェクトに従っている場合は、これをhttp://localhost:4200に設定します。

​
ログアウトURLの設定

ログアウトURLは、ユーザーがログアウトした後にAuth0がリダイレクトさせたいアプリケーション内のURLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーが表示されます。
サンプルプロジェクトに従っている場合は、これをhttp://localhost:4200に設定します。

​
許可されるWebオリジンの設定

許可されるWebオリジンは、認証フローにアクセスを許可したいURLです。これにはプロジェクトのURLが含まれている必要があります。適切に設定されていない場合、プロジェクトは認証トークンを静かに更新できなくなり、ユーザーは次回アプリケーションを訪れたりページを更新したりした際にログアウトされてしまいます。
サンプルプロジェクトに従っている場合は、これをhttp://localhost:4200に設定します。
2

Auth0 Angular SDKのインストール

Auth0はAngular SDKを提供しており、AngularアプリケーションでのAuth0認証と認可の実装プロセスを簡素化します。ターミナルで以下のコマンドを実行して、Auth0 Angular SDKをインストールします：npm install @auth0/auth0-angularSDKは、モジュールや認証サービスを含む、AngularアプリケーションでAuth0を慣用的に統合するのに役立ついくつかの型を公開しています。
3

Auth0の登録と提供

SDKはprovideAuth0をエクスポートしています。これはSDKが機能するために必要なすべてのサービスを含む提供関数です。これをアプリケーションに登録するには：
  1. ファイルを開きます。main.ts ファイル。
  2. 関数をprovideAuth0 パッケージからインポートします。@auth0/auth0-angular パッケージ。
  3. をprovideAuth0 内のproviders に追加してアプリケーションに追加します。bootstrapApplication。
  4. をAuthService に注入します。AppComponent。
関数はprovideAuth0プロパティとdomainを取ります。clientIdこれらのプロパティの値は、Auth0に登録したシングルページアプリケーション（SPA）のドメインとクライアントIDの値に対応します。これらは設定で見つけることができます。さらに、authorizationParams.redirect_uriを設定します。これにより、Auth0は認証が成功した後、ユーザーを特定のURLにリダイレクトすることができます。
Auth0でカスタムドメイン、domainプロパティの値は「設定」タブに反映されている値ではなく、カスタムドメインの値になります。
4

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

Auth0 ApplicationとAuth0 Angular SDKを設定したので、次はプロジェクトにログインを設定する必要があります。これを行うには、SDKのloginWithRedirect()メソッドをAuthServiceクラスから使用して、ユーザーをAuth0 Universal Loginページにリダイレクトし、Auth0が認証を行います。ユーザーが正常に認証されると、このクイックスタートの前半で設定したコールバックURLにアプリケーションにリダイレクトされます。アプリケーションに選択時にloginWithRedirect()を呼び出すログインボタンを作成します。
チェックポイント
これで、アプリケーションにログインできるはずです。アプリケーションを実行し、ログインボタンを選択します。以下を確認してください：
  • ユーザー名とパスワードを使用してログインまたはサインアップできる。
  • アプリケーションがAuth0 Universal Loginページにリダイレクトする。
  • 認証のためにAuth0にリダイレクトされる。
  • 認証後、Auth0が正常にアプリケーションに戻りリダイレクトする。
  • Auth0に関連するエラーがコンソールに表示されない。
5

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

プロジェクトにログインするユーザーにはログアウトする方法も必要です。SDKはlogout()メソッドをAuthServiceクラスで提供しており、これを使用してアプリからユーザーをログアウトさせることができます。ユーザーがログアウトすると、Auth0ログアウトエンドポイントにリダイレクトされ、そこからすぐにアプリケーションと、このクイックスタートの前半で設定したログアウトURLにリダイレクトされます。アプリケーションに選択時にlogout()を呼び出すログアウトボタンを作成します。
SDKはisAuthenticated$オブザーバブルをAuthServiceクラスで公開しており、これを使用してユーザーが認証されているかどうかを確認できます。isAuthenticated$オブザーバブルの値に基づいて、ログインボタンとログアウトボタンを条件付きでレンダリングできます。あるいは、単一のボタンを使用して、ログインとログアウトの両方のボタンとその条件付きレンダリングを組み合わせることもできます。
チェックポイント
これで、アプリケーションからログアウトできるはずです。アプリケーションを実行し、ログインしてからログアウトボタンを選択します。以下を確認してください：
  • Auth0のログアウトエンドポイントにリダイレクトされる。
  • Auth0が正常にアプリケーションと正しいログアウトURLに戻りリダイレクトする。
  • アプリケーションからログアウトされている。
  • Auth0に関連するエラーがコンソールに表示されない。
6

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

ユーザーがログインとログアウトできるようになったので、次は認証されたユーザーに関連するプロファイル情報を取得できるようにしたいでしょう。例えば、ログインしたユーザーの名前やプロフィール画像を表示してユーザーインターフェースをパーソナライズしたい場合があります。Auth0 Angular SDKは、user$オブザーバブルを通じてユーザー情報を提供します。これはAuthServiceクラスによって公開されています。user$オブザーバブルにはユーザーのアイデンティティに関連する機密情報とアーティファクトが含まれているため、その可用性はユーザーの認証状態に依存します。幸いなことに、user$オブザーバブルはisAuthenticated$オブザーバブルがtrueの場合にのみ値を発行するように設定されているため、ユーザープロファイルデータにアクセスする前に手動で認証状態をチェックする必要はありません。SDKはまた、isAuthenticated$オブザーバブルをAuthServiceクラスで公開しており、これを使用してユーザーが認証されているかどうかを確認できます。例えば、UIエレメントを表示するか非表示にするかを決定するのに使用できます。インタラクティブパネルのUserProfileComponentコードを確認して、これらの関数の使用例を見てください。
チェックポイント
これで、ユーザープロファイル情報を表示できるはずです。アプリケーションを実行し、以下を確認してください：
  • ログイン後、ユーザー情報が正しく表示される。
  • ログアウト後、ユーザー情報が表示されない。

​
次のステップ

素晴らしい仕事です！ここまで来られたなら、アプリケーションでログイン、ログアウト、およびユーザープロファイル情報が動作しているはずです。 これでクイックスタートチュートリアルは終了ですが、まだまだ探索することがたくさんあります。Auth0でできることについてもっと学ぶには、以下をチェックしてください：

Auth0 Dashboard

Auth0テナントとアプリケーションの設定と管理方法を学ぶ

auth0-angular SDK

このチュートリアルで使用されているSDKをより詳しく探索する

Auth0 Marketplace

Auth0の機能を拡張するために有効にできる統合を発見する
import { bootstrapApplication } from '@angular/platform-browser';
import { provideAuth0 } from '@auth0/auth0-angular';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideAuth0({
      domain: '{yourDomain}',
      clientId: '{yourClientId}',
      authorizationParams: {
        redirect_uri: window.location.origin
      }
    }),
  ]
});