メインコンテンツへスキップ

Before you start

以下が必要です。
Auth0 CLIを使用すると、ユニバーサルログイン（ACUL）画面の高度なカスタマイズを実装しテストできます。認証画面（ログイン、サインアップ、パスワードレス、パスキー登録など）をWebアプリケーションに合わせて簡単にカスタマイズできます。 Auth0 CLIを使用してACULプロジェクトとカスタムlogin_id画面を作成するには、次の手順に従います。

​
1. ACULサンプルアプリケーションを初期化する

Auth0 CLIを使用して開発テナントを構成していない場合は、auth0 loginコマンドを使用してテナントを構成します。
プロジェクトをビルドする場所に移動し、次のコマンドを実行します。 
auth0 acul init "Your_App_Name"
  1. **React（とACUL React SDK）**を選択します。
  2. login-id画面を選択します。
  3. 「‘npm install’を使用して必要な依存関係のインストールを続行しますか？」でyと入力します。
Auth0 CLIは、指定されたアプリケーション名で新しいプロジェクトディレクトリを作成します。
yを選択して必要な依存関係をインストールしなかった場合は、プロジェクトディレクトリに移動してnpm installコマンドを実行します。

​
2. （任意）プロジェクトにさらに画面を追加する

次のコマンドを実行して、プロジェクトの追加画面を選択します。 
auth0 acul screen add SCREEN_NAME

​
3. ユニバーサルログインコンテキストインスペクターでログインID画面を起動する

ULコンテキストインスペクターを使用して、ログインID画面を起動します。
  1. プロジェクトディレクトリに移動し、次のコマンドを実行します。
auth0 acul dev
  1. プロジェクトディレクトリを確認する
  2. ローカルアセットを共有するポート（デフォルトではポート55444）を選択します。
ユニバーサルログインコンテキストインスペクターは、新しいブラウザのウィンドウを開きログインID画面を表示します。

​
4. サンプルのログインID画面を更新する

Auth0 acul devコマンドは、ACUL画面を構築し、アセットをローカルでホストし、アセットディレクトリの更新を継続的に監視するため、ローカルで画面をテストできます。詳しくは、「[Auth0 CLI acul]」(https://auth0.github.io/auth0-cli/auth0_acul_dev.html)コマンドのドキュメントをご覧ください。
  1. プロジェクトディレクトリで、/src/index.cssディレクトリを編集し、ロゴウィジェットをロゴURLで更新します。
--ul-theme-widget-logo-url: "Your-Logo-URL";
  1. 変更を保存します。
ローカル開発サーバーは最新の変更で自動的に更新されます。

​
5. 認証画面のコンテキストデータをカスタマイズする

ユニバーサルログインコンテキストインスペクターを使用すると、デフォルトのコンテキストデータをカスタマイズして、テナント固有の構成に対して認証画面をテストできます。
  1. 次の手順で、プロジェクト内の画面のモックコンテキストデータのローカルバージョンを作成します。
**［JSONをダウンロード］**アイコンを選択して、モックのコンテキストデータファイルをダウンロードします。
Auth0 Dashboard ACUL page
  1. ダウンロードしたファイルの名前を変更してpublic/screens/{prompt}/{screen}に移動し、プロジェクトディレクトリにあるpublic/manifest.json fileに追加します。
たとえば、ダウンロードしたlogin-id-login-id-context.jsonファイルの名前をlogin-id.jsonに変更し、/public/screens/login-id/login-id.jsonに移動します。
  1. ユニバーサルログインコンテキストインスペクターの**［データソース］から［ローカル開発］**を選択して、画面のモックコンテキストのローカルバージョンを読み込みます。
詳しくは、「[Auth0 CLI ACUL]」(https://auth0.github.io/auth0-cli/auth0_acul_dev.html)のドキュメントをご覧ください。