メインコンテンツへスキップ
ACUL の画面の開発には、主に 2 つのモードがあります。ローカル開発と、ライブテナント統合テストです。

ローカル開発

Auth0 CLIauth0 acul dev コマンドを使用すると、ACUL の画面をローカルでカスタマイズできます。Universal Login Context Inspector を使えば、遅延やバックエンドへの依存なしに、ACUL の画面をすばやく繰り返し調整できます。 Universal Login Context Inspector は、テナント固有の設定に対して認証画面をテストするためのモックコンテキストデータを提供します。
Universal Login Context Inspector
  • Screen を選択すると、既定のモックコンテキストデータとともに、利用可能な ACUL 設定済み画面を確認できます。
    • Data Source を選択すると、Auth0 CDN から配信されるモックコンテキストデータ、または Local Development プロジェクトの public/screens/{prompt}/{screen} ディレクトリ内のモックコンテキストデータを選択できます。
    • Download JSON アイコンを選択すると、選択した画面のコンテキストデータをダウンロードできます。

ライブテナント統合テスト

Auth0 CLI コマンド auth0 acul dev --connected を使用したライブテナント統合では、カスタム画面 UI のエンドツーエンドテストを実行し、Auth0 テナントとの統合を検証できます。 UI がほぼ完成してから統合テストに --connected モードを使用してください。リロードするたびに認証フローが再起動されるためです。 auth0 acul dev --connected を使用する場合
  • ACUL プロジェクトのディレクトリを選択します。
    • npm run build を選択して、プロジェクトをビルドし、Auth0 テナントを設定します。
    • ローカルアセットを配信する ポート を選択します。既定値は 55444 で、ローカルサーバーがバックグラウンドで起動します。
    • 必要に応じて、--connected モードでプロジェクトの /dist/assets ディレクトリへの変更を継続的に監視するようにします。
新しいターミナルを開き、auth0 test login を実行して、テナント上のログインフローをテストします。
--connected モードでは、Auth0 CLI コマンドがファイルの変更を監視し、アセットを再ビルドして、テナントの設定を自動的に更新します。
詳細については、GitHub の Auth0 CLI を参照してください。