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

開始前に

必要なもの:
Auth0 CLI を使用すると、Advanced Customization for Universal Login (ACUL) の画面を実装してテストできます。これにより、認証画面 (Login、Signup、Passwordless、Passkey の登録など) を、Web アプリケーションに正確に合わせて簡単にカスタマイズできます。 以下の手順に従って、Auth0 CLI を使用し、ACUL プロジェクトとカスタム login_id 画面を作成します。

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

Auth0 CLI を使用して開発用テナントをまだ設定していない場合は、auth0 login コマンドでテナントを設定します。
プロジェクトを作成するディレクトリに移動し、次のコマンドを実行します。 
auth0 acul init "Your_App_Name"
  1. React (with ACUL React SDK) を選択します。
  2. login-id 画面を選択します。
  3. Would you like to proceed with installing the required dependencies using ‘npm install’? と表示されたら、y を入力します。
Auth0 CLI により、指定したアプリケーション名で新しいプロジェクトディレクトリが作成されます。
必要な依存関係のインストール時に y を選択しなかった場合は、プロジェクトディレクトリに移動して npm install コマンドを実行します。

​
2. (任意) プロジェクトに追加する画面を選択する

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

​
3. Universal Login Context Inspector で Login ID 画面を起動する

UL context inspector を使用して Login ID 画面を起動します。
  1. プロジェクトディレクトリに移動し、次のコマンドを実行します。
  auth0 acul dev
  1. プロジェクトディレクトリを確認します
  2. ローカルアセットを共有するポートを選択します。デフォルトではポート 55444 が使用されます
Universal Login Context Inspector が新しいブラウザーウィンドウで開き、Login Id 画面が表示されます。

​
4. サンプルの Login Id 画面を更新する

auth0 acul dev コマンドは、ACUL の画面をビルドし、アセットをローカルでホストし、assets ディレクトリの更新を継続的に監視することで、画面をローカルでテストできるようにします。詳細については、Auth0 CLI acul コマンドのドキュメントを参照してください。
  1. プロジェクト ディレクトリで /src/index.css ファイルを編集し、ロゴ ウィジェットを自分のロゴ URL に更新します。
--ul-theme-widget-logo-url: "Your-Logo-URL";
  1. 変更を保存します。
ローカル開発サーバーは最新の変更を自動的に反映します。

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

Universal Login Context Inspector を使用すると、デフォルトのコンテキストデータをカスタマイズして、テナント固有の設定に対して認証画面をテストできます。
  1. プロジェクト内で、画面用のモックコンテキストデータのローカル版を作成します。
モックコンテキストデータファイルをダウンロードするには、Download JSON アイコンを選択します。
Auth0 Dashboard ACUL ページ
  1. ダウンロードしたファイル名を変更して public/screens/{prompt}/{screen} に移動し、プロジェクトディレクトリ内の public/manifest.json ファイルに追加します。
たとえば、ダウンロードした login-id-login-id-context.json ファイルを login-id.json にリネームし、/public/screens/login-id/login-id.json に移動します。
  1. 画面のモックコンテキストのローカル版を読み込むには、Universal Login Context Inspector の Data source から Local Development を選択します。
詳細については、Auth0 CLI ACUL のドキュメントを参照してください。