> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> ACUL を使用してクラシックログインから Universal Login に移行する方法を説明します。

# クラシックログインから ACUL を使用して Universal Login に移行する

<Warning>
  現在、Auth0 の開発は Universal Login に注力しており、クラシックログインは更新されていません。特別なユースケースでクラシック体験が必要な場合を除き、Universal Login の実装を推奨します。
  各ログイン体験の機能比較については、[Universal Login vs. Classic Login](/docs/ja-jp/authenticate/login/auth0-universal-login/universal-login-vs-classic-login) を参照してください。
</Warning>

[Advanced Customizations for Universal Login (ACUL)](/docs/ja-jp/customize/login-pages/advanced-customizations#advanced-customizations-for-universal-login-acul) を使用して、[クラシックログイン](/docs/ja-jp/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/classic-experience#classic-login-experience) の画面実装を [Universal Login](/docs/ja-jp/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience) に移行することをお勧めします。

<Card title="開始する前に">
  必要なもの:

  * [Universal Login](/docs/ja-jp/authenticate/login/auth0-universal-login) と [カスタムドメイン](/docs/ja-jp/customize/custom-domains) が設定された Auth0 の開発用テナント。
  * 開発用テナントに対してインストールおよび設定された [Auth0 CLI](https://auth0.github.io/auth0-cli/)。
  * ACUL のカスタムログイン画面を格納するための [GitHub](https://github.com/) リポジトリ。
  * クラシックログイン体験のアセット一覧:
    * UI コンポーネント。
    * CSS / テーマトークンとブランドアセット。
    * バリデーションルール (メール形式、必須項目) 。
    * エラー処理の動作。
</Card>

<div id="initialize-an-acul-project">
  ## ACUL プロジェクトを初期化する
</div>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  開発用テナントを Auth0 CLI でまだ設定していない場合は、[auth0 login](https://auth0.github.io/auth0-cli/auth0_login.html) コマンドを使用してください。
</Callout>

ACUL プロジェクトを作成する場所に移動し、次のコマンドを実行します。

```bash theme={null}
auth0 acul init acul-login --screens login-id,login-password
```

Auth0 CLI は、あらかじめ用意された `login-id` と `login-password` の認証画面を含む形で、プロジェクトを初期化します。

詳しくは、[GitHub の auth0 aclu](https://auth0.github.io/auth0-cli/auth0_acul_init.html) をご覧ください。

<div id="customize-acul-screens">
  ## ACUL 画面をカスタマイズする
</div>

`login-id` と `login-password` の画面を、organization の標準に沿うようにカスタマイズします。

次の点を考慮してください。

* 既存の CSS/テーマと React コンポーネントを再利用します。
  * ブランディング (assets、タイポグラフィ、レイアウト) を適用します。
  * 基本的なクライアント側のバリデーション (メールアドレスの必須入力/形式、パスワードの必須入力) を追加します。
  * エラー表示を標準化します (一貫性があり、アクセシブルであること) 。

次のコマンドを使用して、ACUL 画面をローカルで開発し、カスタマイズできます。

```bash theme={null}
auth0 acul dev
```

詳しくは、[ACUL Development Workflow](/docs/ja-jp/customize/login-pages/advanced-customizations/development-workflow)をご覧ください。

<div id="validate-the-acul-migration">
  ## ACUL の移行を検証する
</div>

ユーザーのエンドツーエンドのログイン体験を検証するには、[auth0 acul](https://auth0.github.io/auth0-cli/auth0_acul_dev.html) コマンドを使用できます。

```bash theme={null}
auth0 acul dev --connected
```

以下をテストし、確実に確認する必要があります。

* 認証フローで `login-id` および `login-password` の画面にカスタム UI が使用され、正しく表示されること。
  * 間違ったパスワードやその他のサーバー側のエラーメッセージが明確にレンダリングされること。
  * ユーザーが正常にアプリケーションへリダイレクトされること。
  * 有効になっている場合、メールアドレスのバリデーションが想定どおりに動作すること。

詳しくは、[ACUL live tenant integration testing](/docs/ja-jp/customize/login-pages/advanced-customizations/development-workflow#live-tenant-integration-testing) を参照してください。

<div id="deploy-acul-screens-to-production-tenant">
  ## ACUL画面を本番テナントにデプロイする
</div>

ACUL画面プロジェクトには、画面を本番環境にデプロイする際の出発点として使えるデプロイ設定が含まれています。

ACULのデプロイ手順には、次の作業が含まれます。

* 画面アセットのバンドルをビルドする。
  * それらをCDNに公開する。
  * Auth0の本番テナントでACULを有効にする。

詳しくは、[ACULデプロイのワークフロー](/docs/ja-jp/customize/login-pages/advanced-customizations/deployment-workflow)をご覧ください。

<div id="learn-more">
  ## 詳細はこちら
</div>

* [Advanced Customizations for Universal Login (ACUL)](/docs/ja-jp/customize/login-pages/advanced-customizations)
* [ACUL React SDK リファレンス](docs/libraries/acul/react-sdk)
* [Auth0 CLI リファレンス](https://auth0.github.io/auth0-cli/auth0_acul.html)
* [ACUL サンプルアプリケーション](https://github.com/auth0-samples/auth0-acul-samples)