> ## 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 の高度なカスタマイズ の概要

**Universal Login の高度なカスタマイズ (ACUL)** は、[Universal Login](/ja/docs/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 SDKs](/ja/docs/customize/login-pages/advanced-customizations/reference) は、カスタムコードと Universal Login をつなぐ橋渡しとして機能します。

<div id="benefits">
  ## メリット
</div>

* Auth0 の Universal Login の機能を拡張し、1 つのテナントで複数のブランドをサポートできます。
* 認証ロジックを作り直すことなく、[Passkeys](/ja/docs/authenticate/database-connections/passkeys)、[Bot Detection](/ja/docs/secure/attack-protection/bot-detection)、[MFA](/ja/docs/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 のユースケース](/ja/docs/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](/ja/docs/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](/ja/docs/authenticate/login/auth0-universal-login) と [カスタムドメイン](/ja/docs/customize/custom-domains) が設定された Auth0 の開発用テナント。

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

* Auth0 の [ファーストパーティアプリケーション](/ja/docs/get-started/auth0-overview/create-applications#create-applications)
  * アセットをホストするための、GitHub などの CI/CD パイプラインを備えた CDN。

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