> ## 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 クイックスタートの開始方法

# ACUL クイックスタート

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

  * [Universal Login](/ja/docs/authenticate/login/auth0-universal-login) と [カスタムドメイン](/ja/docs/customize/custom-domains) が設定された Auth0 の開発用テナント。
  * Auth0 の [First Party Application](/ja/docs/get-started/auth0-overview/create-applications#create-applications)。
  * Auth0 テナントで有効になっている [Identifier First Authentication](/ja/docs/authenticate/login/auth0-universal-login/identifier-first)。
  * [Node.js](http://Node.js) V22
  * 開発用テナントに対してインストールおよび設定済みの [Auth0 CLI](https://auth0.github.io/auth0-cli/)。
</Card>

Auth0 CLI を使用すると、Advanced Customization for Universal Login (ACUL) の画面を実装してテストできます。これにより、認証画面 (Login、Signup、Passwordless、Passkey の登録など) を、Web アプリケーションに正確に合わせて簡単にカスタマイズできます。

以下の手順に従って、Auth0 CLI を使用し、ACUL プロジェクトとカスタム `login_id` 画面を作成します。

<div id="1-initialize-an-acul-sample-application">
  ## 1. ACUL サンプルアプリケーションを初期化する
</div>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Auth0 CLI を使用して開発用テナントをまだ設定していない場合は、`auth0 login` コマンドでテナントを設定します。
</Callout>

プロジェクトを作成するディレクトリに移動し、次のコマンドを実行します。

```bash theme={null}
auth0 acul init "Your_App_Name"
```

1. **React (with ACUL React SDK)** を選択します。
2. **login-id** 画面を選択します。
3. **Would you like to proceed with installing the required dependencies using 'npm install'?** と表示されたら、**y** を入力します。

Auth0 CLI により、指定したアプリケーション名で新しいプロジェクトディレクトリが作成されます。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  必要な依存関係のインストール時に **y** を選択しなかった場合は、プロジェクトディレクトリに移動して `npm install` コマンドを実行します。
</Callout>

<div id="2-optional-add-additional-screens-to-your-project">
  ## 2.  (任意) プロジェクトに追加する画面を選択する
</div>

次のコマンドを実行して、プロジェクトに追加する画面を選択します。

```bash theme={null}
auth0 acul screen add SCREEN_NAME 
```

<div id="3-launch-the-login-id-screen-with-universal-login-context-inspector">
  ## 3. Universal Login Context Inspector で Login ID 画面を起動する
</div>

UL context inspector を使用して Login ID 画面を起動します。

1. プロジェクトディレクトリに移動し、次のコマンドを実行します。

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

2. プロジェクトディレクトリを確認します
3. ローカルアセットを共有するポートを選択します。デフォルトではポート `55444` が使用されます

Universal Login Context Inspector が新しいブラウザーウィンドウで開き、Login Id 画面が表示されます。

<div id="4-update-the-sample-login-id-screen">
  ## 4. サンプルの Login Id 画面を更新する
</div>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  `auth0 acul dev` コマンドは、ACUL の画面をビルドし、アセットをローカルでホストし、assets ディレクトリの更新を継続的に監視することで、画面をローカルでテストできるようにします。詳細については、[Auth0 CLI acul](https://auth0.github.io/auth0-cli/auth0_acul_dev.html) コマンドのドキュメントを参照してください。
</Callout>

1. プロジェクト ディレクトリで `/src/index.css` ファイルを編集し、ロゴ ウィジェットを自分のロゴ URL に更新します。

`--ul-theme-widget-logo-url: "Your-Logo-URL";`

2. 変更を保存します。

ローカル開発サーバーは最新の変更を自動的に反映します。

<div id="5-customize-the-context-data-for-your-authentication-screens">
  ## 5. 認証画面のコンテキストデータをカスタマイズする
</div>

Universal Login Context Inspector を使用すると、デフォルトのコンテキストデータをカスタマイズして、テナント固有の設定に対して認証画面をテストできます。

1. プロジェクト内で、画面用のモックコンテキストデータのローカル版を作成します。

モックコンテキストデータファイルをダウンロードするには、**Download JSON** アイコンを選択します。

<Frame>
  <img src="https://mintcdn.com/translations/mMSz-RNYLuOm2GmQ/docs/images/cdy7uua7fh8z/ACUL/ULContextInspectorDownload.png?fit=max&auto=format&n=mMSz-RNYLuOm2GmQ&q=85&s=b4b206e8dc882316712860b31b556db3" alt="Auth0 Dashboard ACUL ページ" width="547" height="239" data-path="docs/images/cdy7uua7fh8z/ACUL/ULContextInspectorDownload.png" />
</Frame>

2. ダウンロードしたファイル名を変更して `public/screens/{prompt}/{screen}` に移動し、プロジェクトディレクトリ内の `public/manifest.json` ファイルに追加します。

たとえば、ダウンロードした `login-id-login-id-context.json` ファイルを `login-id.json` にリネームし、`/public/screens/login-id/login-id.json` に移動します。

3. 画面のモックコンテキストのローカル版を読み込むには、Universal Login Context Inspector の **Data source** から **Local Development** を選択します。

詳細については、[Auth0 CLI ACUL](https://auth0.github.io/auth0-cli/auth0_acul_dev.html) のドキュメントを参照してください。