> ## 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.

# Universal Login の高度なカスタマイズ（ACUL）

> Auth0 の Universal Login 向け高度なカスタマイズを使用して、Auth0 が認証状態マシンを引き続き制御しながら、ホスト型ログイン UI を独自の React または Vanilla JS アプリに置き換える方法を学びます。

**Universal Login の高度なカスタマイズ (ACUL) ** は、[Universal Login](/docs/ja-jp/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience#universal-login-experience) の機能を拡張し、マルチブランド対応、複雑なセキュリティ構成、多数の分析プラットフォームとの統合を可能にします。

<video autoPlay muted loop playsInline className="w-full aspect-video rounded-xl" src="https://mintcdn.com/translations/XFWEQWmI0huCzrNi/docs/images/videos/ACUL.mp4?fit=max&auto=format&n=XFWEQWmI0huCzrNi&q=85&s=d31345ad12fc6f560b916e91d346fc6c" data-path="docs/images/videos/ACUL.mp4" />

ACUL を使用すると、好みのフレームワークでコードを記述し、既存の分析プラットフォームや A/B テストプラットフォームを統合して、ユーザー体験を設計できます。[ACUL SDK](/docs/ja-jp/customize/login-pages/advanced-customizations/reference) は、カスタムコードと Universal Login をつなぐ役割を果たします。

<div id="benefits">
  ## 利点
</div>

* 1 つのテナントで複数ブランドに対応できるよう、Auth0 の Universal Login の機能を拡張できます。
* 認証ロジックを作り直すことなく、[Passkeys](/docs/ja-jp/authenticate/database-connections/passkeys)、[Bot Detection](/docs/ja-jp/secure/attack-protection/bot-detection)、[MFA](/docs/ja-jp/secure/multi-factor-authentication) などの Auth0 の機能を活用できます。
* 高度な分析や A/B テストを統合して、ユーザージャーニーを最適化できます。
* ACUL SDK を使用して、お使いの技術スタックで構築できます。具体的には次のことが可能です。
  * 任意のサードパーティ製 CSS、JS、またはコンポーネントライブラリを使用する
  * Heap、Mixpanel など、好みの分析プラットフォームを統合する
  * Vue や React など、好みのフロントエンドフレームワークで構築する

<div id="use-cases">
  ## ユースケース
</div>

次の場合は、Universal Login の実装で ACUL を使用するとよいでしょう。

* 認証フローに特定のブランド基準を適用する必要がある。
* マルチブランド対応を提供する必要がある。
* UI レベルでの A/B テストや詳細な分析を行う必要がある。
* Auth0 が現在サポートしていない言語で、ローカライズされた Universal Login を提供する必要がある。
* 認証フローに複雑なロジックやカスタム ロジックを追加する必要がある。

詳しくは、[ACUL Use Cases](/docs/ja-jp/customize/login-pages/advanced-customizations/acul-use-cases) を参照してください。

<div id="how-it-works">
  ## 仕組み
</div>

<img className="block dark:hidden" src="https://mintcdn.com/translations/mMSz-RNYLuOm2GmQ/docs/images/cdy7uua7fh8z/ACUL/Final-Light-ACUL.png?fit=max&auto=format&n=mMSz-RNYLuOm2GmQ&q=85&s=8507121e915823d72438ccb4db8fb6a3" alt="仕組み ACUL" width="1400" height="449" data-path="docs/images/cdy7uua7fh8z/ACUL/Final-Light-ACUL.png" />

<img className="hidden dark:block" src="https://mintcdn.com/translations/c0RQ9V0YAcT0-8l5/docs/images/cdy7uua7fh8z/ACUL/Final-Dark-ACUL.png?fit=max&auto=format&n=c0RQ9V0YAcT0-8l5&q=85&s=2e7140d91d91f99a9a3f3b01f5470be3" alt="仕組み ACUL" width="1400" height="448" data-path="docs/images/cdy7uua7fh8z/ACUL/Final-Dark-ACUL.png" />

**ビルド時** は、独自の環境でカスタマイズした認証画面の構築を開始した時点で始まります。

[ACUL SDK](/docs/ja-jp/customize/login-pages/advanced-customizations/reference) を使用してカスタムコードを送信し、React や Angular など好みのフロントエンド技術スタックで、プロンプトや画面を定義します。コミットをプッシュすると、CI/CD パイプラインでビルドプロセスが実行され、アプリケーションは静的な JavaScript と CSS アセットにコンパイルされます。続いて、それらのアセットはプライベートクラウドストレージにアップロードされ、独自のコンテンツ配信ネットワーク (CDN) として配信されます。

**実行時** は、アプリケーションがエンドユーザーを Auth0 のログインページにリダイレクトした時点で始まります。

Auth0 は、ACUL を使用するよう設定された認証画面を認識し、最小限のホストページを配信します。ユーザーのブラウザーはこのページを読み込みます。このページには、CDN 上のアセット URL を指す HTML タグが含まれています。ブラウザーは JavaScript と CSS をダウンロードし、Subresource Integrity (SRI) ハッシュで整合性を検証して、カスタム UI を表示します。以降のユーザー操作は、アプリケーションコードと ACUL SDK が処理します。

<div id="requirements">
  ## 要件
</div>

Universal Login の高度なカスタマイズを始めるには、以下が必要です。

* [Universal Login](/docs/ja-jp/authenticate/login/auth0-universal-login) と [カスタムドメイン](/docs/ja-jp/customize/custom-domains) が設定された Auth0 開発テナント。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  適切な環境タグを付けた、テスト用、開発用、本番用のテナントを作成することをお勧めします。
</Callout>

* Auth0 の [First Party Application](/docs/ja-jp/get-started/auth0-overview/create-applications#create-applications)
  * アセットをホストするための、GitHub などの CI/CD パイプラインを備えた CDN。

| **読む**                                                                                                      | **学べること**                   |
| ----------------------------------------------------------------------------------------------------------- | --------------------------- |
| [Configure ACUL](/docs/ja-jp/customize/login-pages/advanced-customizations/configure/overview)              | Auth0 テナントで ACUL を設定する方法。   |
| [ACUL Quickstart](/docs/ja-jp/customize/login-pages/advanced-customizations/quickstart)                     | ACUL のサンプルアプリケーションを使った開始方法。 |
| [ACUL Development Workflow](/docs/ja-jp/customize/login-pages/advanced-customizations/development-workflow) | ACUL の開発ワークフローについて。         |
| [ACUL Deployment Workflow](/docs/ja-jp/customize/login-pages/advanced-customizations/deployment-workflow)   | ACUL のデプロイワークフローについて。       |
| [ACUL Use Cases](/docs/ja-jp/customize/login-pages/advanced-customizations/acul-use-cases)                  | ACUL のユースケースについて。           |
| [ACUL SDKs and resources](/docs/ja-jp/customize/login-pages/advanced-customizations/reference)              | ACUL の SDK と開発者向けリソースについて。  |