メインコンテンツへスキップ
現在、Auth0 の開発は Universal Login に注力しており、Classic Login は更新されなくなっています。特定のユースケースで Classic エクスペリエンスが必要な場合を除き、Universal Login の実装を推奨します。 ログインエクスペリエンス間の機能比較については、Universal Login vs. Classic Login を参照してください。
Universal Login の高度なカスタマイズ (ACUL) を使用して、Classic Login の画面実装を Universal Login へ移行することを推奨します。

開始前に

以下が必要です。
  • Universal Login と カスタムドメイン が設定された Auth0 の開発用テナント。
  • 開発用テナントに対してインストールおよび設定された Auth0 CLI。
  • ACUL のカスタムログイン画面を格納するための GitHub リポジトリ。
  • Classic Login エクスペリエンスのアセット一覧:
    • UI コンポーネント。
    • CSS/テーマトークンとブランドアセット。
    • 検証ルール (メールアドレス形式、必須項目) 。
    • エラー処理の動作。

​
ACUL プロジェクトを初期化する

開発用テナントで Auth0 CLI の設定がまだの場合は、auth0 login コマンドを使用します。
ACUL プロジェクトを作成するディレクトリに移動し、次のコマンドを実行します。 
auth0 acul init acul-login --screens login-id,login-password
Auth0 CLI は、あらかじめ用意された login-id と login-password の認証画面でプロジェクトを初期化します。 詳細については、GitHub 上の auth0 acluを参照してください。

​
ACUL 画面をカスタマイズする

login-id と login-password の画面を、組織の標準に沿うようにカスタマイズします。 次の点を考慮してください。
  • 既存の CSS/テーマと React コンポーネントを再利用します。
    • ブランディング (アセット、タイポグラフィ、レイアウト) を適用します。
    • 基本的なクライアント側の検証を追加します (メールアドレスの必須チェックと形式チェック、パスワードの必須チェック) 。
    • エラー表示を標準化します (一貫性とアクセシビリティを確保する) 。
次のコマンドを使用すると、ACUL 画面をローカルで開発してカスタマイズできます。 
auth0 acul dev
詳細については、ACUL の開発ワークフローを参照してください。

​
ACUL の移行を検証する

ユーザーのエンドツーエンドのログイン体験を検証するには、auth0 acul コマンドを使用できます。 
auth0 acul dev --connected
次の点をテストして確認する必要があります。
  • 認証フローで login-id と login-password の画面にカスタム UI が使用され、正しく表示されること。
    • パスワードの誤りなどのサーバー側エラーメッセージが明確に表示されること。
    • ユーザーが正常にアプリケーションへリダイレクトされること。
    • 有効になっている場合、メールアドレスの検証が想定どおりに動作すること。
詳しくは、ACUL ライブテナント統合テストを参照してください。

​
ACUL 画面を本番テナントにデプロイする

ACUL 画面プロジェクトには、画面を本番テナントにデプロイするための出発点として利用できるデプロイ設定が含まれています。 ACUL のデプロイ手順には、次が含まれます。
  • 画面アセットのバンドルをビルドする。
    • それらを CDN に公開する。
    • Auth0 の本番テナントで ACUL を有効にする。
詳細については、ACUL Deployment workflowを参照してください。

​
詳しくは