> ## Documentation Index > Fetch the complete documentation index at: https://auth0-feat-init-gt-translations.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. > Auth0 Universal Login の Signup プロンプトと Login プロンプトにカスタムフィールドとテキストを追加する方法を説明します。 # Signup プロンプトと Login プロンプトをカスタマイズする 1. ご利用のテナントで [**カスタムドメイン**](/docs/ja-jp/customize/custom-domains) が設定されていることを確認します。 2. すべての Signup プロンプトと Login プロンプトで [**Universal Login**](/docs/ja-jp/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience) を使用していることを確認し、ログインプロンプトで **Customize Login Page** トグルが無効になっていることを確認します。 3. [Custom Page Template](/docs/ja-jp/customize/login-pages/universal-login/customize-templates#custom-sign-up-prompts) が設定されていることを確認します。 **Signup プロンプトと Login プロンプトをカスタマイズする** は、カスタムドメインと Custom Page Template を有効にしているお客様が、アプリの Signup プロンプトと Login プロンプトにカスタムフィールドやコンテンツを追加できる機能です。

ユースケース

Signup プロンプトと Login プロンプトのカスタマイズでは、**カスタムコンテンツ**と**データ取得**という 2 つのユースケースをサポートしています。 **カスタムコンテンツ**とは、Signup プロンプトと Login プロンプトに直接配置する、テキスト、リンク、画像などの静的コンテンツです。 **データ取得**では、Signup プロンプトと Login プロンプトにフォーム要素を動的に追加します。これは、ユーザーの同意や、姓のようなユーザーが入力したデータを収集して検証する場合に役立ちます。機微情報または規制対象データの伝達や収集を目的として Signup プロンプトと Login プロンプトのカスタマイズを使用する場合は、Okta との契約で許可されている範囲に限ってください。

用語

**プロンプト** は、特定の認証フロー内の 1 つのステップです。各プロンプトには少なくとも 1 つの**画面**があり、テナントの設定に応じて、サポートされる各画面には 4 つまたは 6 つの**エントリポイント**があります。エントリポイントとは、カスタムコード (**partials**) を画面内に挿入できる位置のことです。次のプロンプトはカスタマイズできます。 **ログイン画面** * `login` * `login-id` * `login-password` * `login-passwordless-sms-otp` * `login-passwordless-email-code` * `passkey-enrollment` * `passkey-enrollment-local` **Signup 画面** * `signup` * `signup-id` * `signup-password` * `passkey-enrollment` * `passkey-enrollment-local` partials では、条件分岐や動的変数を扱うために、HTML、CSS、JavaScript、[Liquid 構文](https://github.com/Shopify/liquid/wiki/Liquid-for-Designers)を使用できます。さらに、[Page Template](/docs/ja-jp/customize/login-pages/universal-login/customize-templates)で利用可能な Liquid 変数もすべてサポートされています。これらのエントリポイントは、データベース接続またはパスワードレス接続が有効になっている場合に利用できます。 * `form-content-start` * `form-content-end` * `form-footer-start` * `form-footer-end` 少なくとも 1 つのソーシャル接続またはエンタープライズ接続が有効になっている場合は、次のエントリポイントを利用できます。 * `secondary-actions-start` * `secondary-actions-end` 各 Custom プロンプトオプションとその partials のスクリーンショット

各 Custom プロンプトオプションとその partials のスクリーンショット

Auth0 DashboardでPartialsを管理する

Auth0 Dashboardでは、partials を使用して Login 画面や Signup 画面にカスタムフィールドやコンテンツを挿入できます。 1. [Auth0 Dashboard > Branding > Universal Login](https://manage.auth0.com/#/universal-login/customize-partials) に移動し、**Enhance screens with partials** を選択します。 2. partials エディターでカスタマイズする **画面** を選択します。 **画面** では、次の **レンダリングモード** を使用できます。 * **STANDARD**: `screen` はデフォルトの [Universal Login](/docs/ja-jp/customize/login-pages/universal-login) UI を使用してレンダリングされます。partials を使うと、コードスニペットや [template variables](/docs/ja-jp/customize/login-pages/universal-login/customize-templates#page-template-variables) を挿入できます。 * **ADVANCED**: `screen` は [ACUL](/docs/ja-jp/customize/login-pages/advanced-customizations) を使用してレンダリングされるため、partials は適用されません。 * **ADVANCED (FILTERED)**: `screen` は、特定のアプリケーションと組織に対して ACUL を適用した状態でレンダリングされます。partials は、ACUL フィルターの対象外となる `screens` にのみ適用されます。 3. コードスニペットとテンプレート変数を挿入するには、**** **ENTRY POINTS** を選択します。 4. 選択したエントリポイントに **CODE SNIPPETS** を追加するには、**** を選択します。 5. 選択したエントリポイントに **TEMPLATE VARIABLES** を追加するには、**\{ }** を選択します。 6. [Actions](/docs/ja-jp/customize/actions/actions-overview) を追加し、partials のフィールドとコンテンツを使ってカスタムロジックを適用するには、**** **ACTIONS** を選択します。 7. **画面** を更新するには、**Save and Publish** を選択します。 [partials]

Partials をプログラムで管理する

[Auth0 Management API](https://auth0.com/docs/api/management/v2/prompts/put-partials) (`GET /prompts/{prompts_name}/partials`) を使用して Partials を管理できます。partial を追加、更新、または削除する際は、各 prompt で `screen` を指定する必要があります。Partials は最大 10,000 文字までです。 Partials は、ターミナルで `auth0 ul customize` を実行して、Auth0 CLI の Universal Login Customize Interface から管理することもできます。 Partials のコマンドラインインターフェースを示す画像。

Form 入力のスタイル設定とバリデーション

Signup プロンプトと Login プロンプトのカスタマイズでは、あらかじめ用意されたスタイルに加え、特定の HTML フォーム要素に対するクライアントサイドのバリデーションも利用できます。サポート対象の要素は次のとおりです。 * `` * `` * `` * `` * `` * `` * `` * `

あらかじめ用意された入力スタイルを使用するには、対象のフォーム要素を `ulp-field` クラスを持つ `<div>` で囲みます。同様に、あらかじめ用意されたエラースタイルを使用するには、同じ `<div>` に `ulp-error` クラスを追加します。`ulp-error-info` 要素が存在する場合は、スタイル付きのエラーメッセージも表示されます。

[partials](#use-the-auth0-dashboard-to-manage-partials) エディターを使用すると、あらかじめ用意されたコードスニペットを確認できます。

<h3 id="client-side-validation">
  クライアントサイドのバリデーション
</h3>

この機能のクライアントサイドのバリデーションフレームワークでは、HTML 属性を使って 1 つ以上のカスタムバリデーション関数を実行し、ユーザー入力をバリデーションできます。バリデーション関数は Partial に直接含めることも、ページテンプレートの `<head>` に含めることもできます。

フォーム要素にクライアントサイドのバリデーションを追加するには、次のようにします。

* `<div class="ulp-error-info">` 要素の `data-ulp-validation-function` 属性を使って、バリデーション関数を参照します。
* `<div class="ulp-error-info">` 要素の `data-ulp-validation-event-listeners` 属性を使って、どの DOM イベントでバリデーション関数を実行するかを指定します。なお、バリデーションは送信時にも自動的に実行されます。
* WCAG に準拠するには、入力欄を対応するエラーメッセージにプログラムで関連付ける必要があります。たとえば、`aria-describedby="error-id"` や `aria-invalid="true"` を使用し、スクリーンリーダーがバリデーションエラーを読み上げられるようにします。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  サインアップページでサードパーティの JavaScript を使用する場合は注意してください。サインアップページでは機密性の高いセキュリティ関連情報が扱われることが多く、クロスサイトスクリプティングの影響を受けやすくなります。

可能であれば、Auth0 は送信前にユーザーが提供したデータをバリデーションすることを推奨しています。
</Callout>

<h2 id="localize-content">
  コンテンツをローカライズする
</h2>

[Custom Text API](/docs/ja-jp/api/management/v2/prompts/put-custom-text-by-language) を使用して新しいカスタムテキスト変数を定義すると、コンテンツの一部をローカライズできます。画面と言語の組み合わせごとに、最大 30 個のカスタムテキスト変数を定義できます。

<h3 id="create-or-update-a-custom-text-variable">
  カスタムテキスト変数を作成または更新する
</h3>

カスタムテキスト変数は、[Custom Text API](/docs/ja-jp/api/management/v2/prompts/get-custom-text-by-language) で管理します。カスタムテキスト変数を追加、更新、削除する場合、呼び出しで `screen` を指定する必要があります。カスタムテキスト変数は、`var-<name>` という命名規則に従います。Markdown リンクはサポートされており、ユーザーに表示される前に HTML の `<a>` 要素に変換されます。

以下は、英語とスペイン語の利用規約チェックボックスラベルのテキストに変数を追加する呼び出し例です。詳しくは、<Tooltip tip="Management API: お客様が管理タスクを実行できるようにする製品です。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Management+API">Management API</Tooltip> を参照してください。

```json lines theme={null}
# PUT /api/v2/prompts/signup-id/custom-text/en（英語）
{
  "signup": {
    "var-tos": "I agree with the [Terms of Service](https://en.example.com/tos)"
  }
}

# PUT /api/v2/prompts/signup-id/custom-text/es（スペイン語）
{
  "signup": {
    "var-tos": "Estoy de acuerdo con los [Términos de Servicio](https://es.example.com/tos)"
  }
}
```

<h3 id="use-a-custom-text-variable-in-a-partial">
  Partial でカスタムテキスト変数を使用する
</h3>

カスタムテキスト変数は、Partial 内で `prompts.screen.text` オブジェクトを使用して参照します。前のセクションの `var-tos` の例では、参照先は `prompt.screen.text.varTos` です。以下に、以前作成した変数を Signup ID Prompt の Partial で使用する例を示します。なお、Management API の `var-tos` 変数は、Partial 内では `varTos` として参照されます。

```html theme={null}
# PUT api/v2/prompts/signup/partials
<div class='ulp-field'>
  <input type='checkbox' name='ulp-terms-of-service' id='terms-of-service'>
  <label for='terms-of-service'>{{ prompt.screen.text.varTos }}</label>
</div>
```

<h2 id="validate-and-save-captured-data">
  取得したデータをバリデーションして保存する
</h2>

カスタムフォーム要素で取得したデータは Actions で利用できます。Auth0 では、収集したデータを保存または送信する前にバリデーションすることを推奨しています。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  カスタムフォーム要素を使用する場合、データを [Actions](/docs/ja-jp/customize/actions/actions-overview) で利用できるようにするには、すべての入力名に `ulp-` プレフィックスを付ける必要があります。
</Callout>

各 Action は、取得したデータを `event.request.body` 上のオブジェクトとして受け取ります。お客様は `api.validation.error` 関数を使用してバリデーションエラーを返すことができます。

[データベース接続](/docs/ja-jp/authenticate/database-connections#use-auth0-user-store)を使用する場合:

* Signup プロンプト のデータは [`pre-user-registration`](/docs/ja-jp/customize/actions/explore-triggers/signup-and-login-triggers/pre-user-registration-trigger) トリガーで利用できます。トリガーでバリデーションエラーが返されると、ユーザーは登録できません。
* Login プロンプト のデータは [`post-login`](/docs/ja-jp/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger) トリガーで利用できます。バリデーションエラーは、お客様のアプリケーションのエラーページに転送されます。

[ソーシャル](/docs/ja-jp/authenticate/identity-providers/social-identity-providers) 接続または [エンタープライズ](/docs/ja-jp/authenticate/identity-providers/enterprise-identity-providers/enable-enterprise-connections) 接続を使用する場合:

* Login プロンプト のデータは [`post-login`](/docs/ja-jp/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger) トリガーで利用できます。バリデーションエラーは、お客様のアプリケーションのエラーページに転送されます。

[カスタムデータベース接続](/docs/ja-jp/authenticate/database-connections/custom-db)を使用する場合:

* Signup プロンプト のデータは、次のカスタムデータベースのアクションスクリプトとともに [`pre-user-registration`](/docs/ja-jp/customize/actions/explore-triggers/signup-and-login-triggers/pre-user-registration-trigger) トリガーで利用できます: [Create User](/docs/ja-jp/authenticate/database-connections/custom-db/templates/create) および [Login](/docs/ja-jp/authenticate/database-connections/custom-db/templates/login)。

* Login プロンプト のデータは、次のカスタムデータベースのアクションスクリプトとともに [`post-login`](/docs/ja-jp/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger) トリガーで利用できます: [Login](/docs/ja-jp/authenticate/database-connections/custom-db/templates/login) および [Change Password](/docs/ja-jp/authenticate/database-connections/custom-db/templates/change-password)。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  カスタムデータベースのアクションスクリプトを使用するには、カスタムデータベース接続で **Context objects in database scripts** を有効にしてください。詳細については、[Enable context object](https://auth0.com/docs/authenticate/database-connections/custom-db/create-db-connection#enable-context-object) を参照してください。
</Callout>

[パスワードレス接続](/docs/ja-jp/authenticate/passwordless/passwordless-with-universal-login)を使用する場合:

* Signup プロンプト と Login プロンプト の両方のデータは [`post-login`](/docs/ja-jp/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger) トリガーで利用できます。バリデーションエラーは、お客様のアプリケーションのエラーページに転送されます。

[パスキー](/docs/ja-jp/authenticate/database-connections/passkeys) プロンプトを使用する場合:

* `passkey-enrollment` プロンプトのデータは [`pre-user-registration`](/docs/ja-jp/customize/actions/explore-triggers/signup-and-login-triggers/pre-user-registration-trigger) トリガーで利用できます。トリガーでバリデーションエラーが返されると、ユーザーは登録できません。
* `passkey-enrollment` と `passkey-enrollment-local` の各プロンプトでは、Post Login トリガーでデータが取得されることはありません。
* `passkey-enrollment-local` プロンプトのデータは利用できません。これは、このプロンプトが常に [`post-login`](/docs/ja-jp/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger) トリガーの実行後に表示されるためです。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  フォームで収集したデータは、保存またはレンダリングする前にサニタイズしてください。

* 保存するデータは必ず [Liquid の `{{escape}}` ヘルパー関数](https://shopify.github.io/liquid/filters/escape/) を通してください
  * データを Email Template でレンダリングする場合は、Liquid 構文を削除してください
  * データをウェブページでレンダリングする場合は、HTML エンティティをエスケープしてください
  * データをデータベースに保存する場合は、パラメータ化されたクエリを使用してください
  * データを query string に渡す場合は、たとえば `{{encodeURI}}` または `{{encodeURIParam}}` でエンコードしてください

リスクの軽減やデータを安全に保存するためのベストプラクティスについて詳しくは、[このチートシート](https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html) を参照してください。
</Callout>

<h3 id="save-to-user-metadata">
  ユーザーのメタデータに保存
</h3>

Action では、取得したデータを外部 API に送信してバリデーションや保存を行うことも、`api.user.setUserMetadata` を使用してユーザーの `user_metadata` に保存することもできます。

```js lines theme={null}
// サインアップフォームに以下のコードがある場合
// <div class="ulp-field">
//   <label for="full-name">フルネーム</label>
//   <input type="text" name="ulp-full-name" id="full-name">
// </div>

exports.onExecutePreUserRegistration = async (event, api) => {
  const fullName = event.request.body['ulp-full-name'];
  if(!fullName) {
    api.validation.error("invalid_payload", "Missing Name");
    return;
  }

api.user.setUserMetadata("fullName", fullName);
};
```

<h2 id="learn-more">
  詳しくはこちら
</h2>

* [動的変数を使用してカスタムフォーム要素を国際化する](/docs/ja-jp/customize/login-pages/universal-login/customize-signup-and-login-prompts/use-dynamic-variables-to-internationalize-custom-form-elements)