Skip to main content
現在、Auth0 の開発は Universal Login に注力しており、クラシックログインは更新されていません。特別なユースケースでクラシック体験が必要な場合を除き、Universal Login の実装を推奨します。 各ログイン体験の機能比較については、Universal Login vs. Classic Login を参照してください。
Advanced Customizations for Universal Login (ACUL) を使用して、クラシックログイン の画面実装を Universal Login に移行することをお勧めします。

開始する前に

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

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

開発用テナントを Auth0 CLI でまだ設定していない場合は、auth0 login コマンドを使用してください。
ACUL プロジェクトを作成する場所に移動し、次のコマンドを実行します。
Auth0 CLI は、あらかじめ用意された login-id と login-password の認証画面を含む形で、プロジェクトを初期化します。 詳しくは、GitHub の auth0 aclu をご覧ください。

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

login-id と login-password の画面を、organization の標準に沿うようにカスタマイズします。 次の点を考慮してください。
  • 既存の CSS/テーマと React コンポーネントを再利用します。
    • ブランディング (assets、タイポグラフィ、レイアウト) を適用します。
    • 基本的なクライアント側のバリデーション (メールアドレスの必須入力/形式、パスワードの必須入力) を追加します。
    • エラー表示を標準化します (一貫性があり、アクセシブルであること) 。
次のコマンドを使用して、ACUL 画面をローカルで開発し、カスタマイズできます。
詳しくは、ACUL Development Workflowをご覧ください。

​
ACUL の移行を検証する

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

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

ACUL画面プロジェクトには、画面を本番環境にデプロイする際の出発点として使えるデプロイ設定が含まれています。 ACULのデプロイ手順には、次の作業が含まれます。
  • 画面アセットのバンドルをビルドする。
    • それらをCDNに公開する。
    • Auth0の本番テナントでACULを有効にする。
詳しくは、ACULデプロイのワークフローをご覧ください。

​
詳細はこちら