開始する前に
必要なもの:
- Universal Login と カスタムドメイン が設定された Auth0 の開発テナント。
- Auth0 の First Party Application。
- Auth0 テナントで有効化された Identifier First Authentication。
- Node.js バージョン 22
- 開発テナント用にインストールおよび設定された Auth0 CLI。
login_id 画面を作成します。
1. ACUL サンプルアプリケーションを初期化する
開発テナントを Auth0 CLI でまだ設定していない場合は、
auth0 login コマンドを使用してテナントを設定してください。- React (with ACUL React SDK) を選択します。
- login-id 画面を選択します。
- Would you like to proceed with installing the required dependencies using ‘npm install’? と表示されたら、y を入力します。
必要な依存関係のインストールを実行するよう求められた際に y を入力しなかった場合は、プロジェクトディレクトリに移動して
npm install コマンドを実行してください。2. （任意）プロジェクトに含める追加の画面を選択する
3. Universal Login Context Inspector を使って Login ID 画面を起動する
- プロジェクトディレクトリに移動し、次のコマンドを実行します。
- プロジェクトディレクトリを確認します。
- ローカルアセットを共有するポートを選択します。デフォルトはポート
55444です。
4. サンプルの Login ID 画面を更新する
auth0 acul dev コマンドは ACUL の画面をビルドし、アセットをローカルでホストし、アセットディレクトリの更新を継続的に監視します。これにより、画面をローカルでテストできます。詳細については、Auth0 CLI acul コマンドのドキュメントを参照してください。- プロジェクトディレクトリで
/src/index.cssファイルを編集し、ロゴウィジェットを自分のロゴの URL に更新します：
--ul-theme-widget-logo-url: "Your-Logo-URL";
- 変更を保存します。
5. 認証画面用のコンテキストデータをカスタマイズする
- プロジェクト内の特定の画面用に、モックコンテキストデータのローカル版を作成します。
- ダウンロードしたファイルの名前を変更して
public/screens/{prompt}/{screen}に移動し、プロジェクトディレクトリ内のpublic/manifest.jsonファイルに追加します。
login-id-login-id-context.json ファイルの名前を login-id.json に変更し、/public/screens/login-id/login-id.json に移動します。
- Universal Login Context Inspector の Data source から Local Development を選択して、その画面用のモックコンテキストのローカル版を読み込みます。