Skip to main content

始める前に

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

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

開発用テナントをまだ Auth0 CLI で設定していない場合は、auth0 login コマンドを使用してテナントを設定してください。
プロジェクトを作成するディレクトリに移動し、次のコマンドを実行します。
  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. (任意) プロジェクトに画面を追加する

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

​
3. Universal Login Context Inspector で Login Id 画面をローンチする

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

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

auth0 acul dev コマンドは、ACUL の画面をビルドし、assets をローカルでホストして、assets ディレクトリへの更新を継続的に監視することで、画面をローカルでテストできるようにします。詳しくは、Auth0 CLI acul コマンドのドキュメントを参照してください。
  1. プロジェクトのディレクトリで、/src/index.css を編集し、ロゴ widget をご自身のロゴ 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 file に追加します。
たとえば、ダウンロードした 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 のドキュメントを参照してください。