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

# ユニバーサルログインの高度なカスタマイズ

> Auth0が提供するユニバーサルログインの高度なカスタマイズの概要を説明します。

\*\*ユニバーサルログインの高度なカスタマイズ（ACUL）\*\*は、[ユニバーサルログイン](/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/docs-dev-actions-triggers-prototype/MNtBkzvZfEbOLfRS/docs/images/videos/ACUL.mp4?fit=max&auto=format&n=MNtBkzvZfEbOLfRS&q=85&s=f55395a130d0276b5457458da1f189fc" data-path="docs/images/videos/ACUL.mp4" />

ACULを使用すると、お好みのフレームワークでコードを記述し、お使いの分析プラットフォームとA/Bテストのプラットフォームを統合し、ユーザーエクスペリエンスを定義できます。[ACUL SDK](/docs/ja-jp/customize/login-pages/advanced-customizations/reference)は、カスタムコードとユニバーサルログインをつなぐ役割を果たします。

## 利点

* 1つのテナントで複数のブランドに対応できるよう、Auth0のユニバーサルログインの機能を拡張します。
* 認証ロジックを再構築することなく、[パスキー](/docs/ja-jp/authenticate/database-connections/passkeys)や[ボット検知](/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など、好みのフロントエンドフレームワークでの構築

## ユースケース

次の場合は、ユニバーサルログインの実装でACULの使用をおすすめします。

* 認証フローに特定のブランド標準を適用する必要がある場合。
* 複数ブランドのエクスペリエンスを提供する必要がある場合。
* UIレベルのA/Bテストまたは詳細な分析を提供する必要がある場合。
* Auth0が現在サポートしていない言語で、ローカライズされたユニバーサルログインを提供する必要がある場合。
* 認証フローに複雑なロジックやカスタムロジックを追加する必要がある場合。

詳しくは、「 \[ACULのユースケース]」(/docs/ja-jp/customize/login-pages/advanced-customizations/acul-use-cases)をご覧ください。

## 仕組み

<img className="block dark:hidden" src="https://mintcdn.com/docs-dev-actions-triggers-prototype/nRTYX19FsgfcTLla/docs/images/cdy7uua7fh8z/ACUL/Final-Light-ACUL.png?fit=max&auto=format&n=nRTYX19FsgfcTLla&q=85&s=c6400d7c22fe9522c89556b348dde8a1" alt="How it works ACUL" width="1400" height="449" data-path="docs/images/cdy7uua7fh8z/ACUL/Final-Light-ACUL.png" />

<img className="hidden dark:block" src="https://mintcdn.com/docs-dev-actions-triggers-prototype/nRTYX19FsgfcTLla/docs/images/cdy7uua7fh8z/ACUL/Final-Dark-ACUL.png?fit=max&auto=format&n=nRTYX19FsgfcTLla&q=85&s=4d1660d2c1e1f9fe624d4325bcca754a" alt="How it works 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をダウンロードし、SRIハッシュを使用して整合性を検証し、カスタムUIをレンダリングします。ここから、アプリケーションコードとACUL SDKがユーザーとの残りの対話を管理します。

## 必要なもの

ユニバーサルログインの高度なカスタマイズを開始するには、以下が必要です。

* [ユニバーサルログイン](/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の[ファーストパーティアプリケーション](/docs/ja-jp/get-started/auth0-overview/create-applications#create-applications)
* GitHubなどのCI/CDパイプラインがある、アセットをホストするためのCDN。

| 読む...                                                                                              | 詳細情報...                  |
| -------------------------------------------------------------------------------------------------- | ------------------------ |
| [ACULの構成](/docs/ja-jp/customize/login-pages/advanced-customizations/configure)                     | Auth0テナントでACULを構成する方法。   |
| [ACULクイックスタート](/docs/ja-jp/customize/login-pages/advanced-customizations/quickstart)               | ACULサンプルアプリケーションを開始する方法。 |
| [ACUL開発ワークフロー](/docs/ja-jp/customize/login-pages/advanced-customizations/development-workflow)     | ACUL開発ワークフローについて。        |
| [ACULデプロイメントワークフロー](/docs/ja-jp/customize/login-pages/advanced-customizations/deployment-workflow) | ACULデプロイメントワークフローについて。   |
| [ACULユースケース](/docs/ja-jp/customize/login-pages/advanced-customizations/acul-use-cases)             | ACULユースケースについて。          |
| [ACUL SDKとリソース](/docs/ja-jp/customize/login-pages/advanced-customizations/reference)               | ACUL SDKと開発者向けリソースについて   |