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

# カスタムサインアップ

> LockまたはAuth0 APIを使って、ユーザーサインアップフォームにフィールドを追加する方法。

LockまたはAuth0 APIを使うと、ユーザーサインアップフォームをカスタマイズして、メールアドレスとパスワード以外のフィールドを追加できます。

[LockかカスタムUIか](/docs/ja-jp/customize/login-pages/classic-login/customize-with-lock-sdk)を選択する前に、考慮すべき要素がたくさんあります。たとえば、Lockでは、別のページへリダイレクトしてデータをキャプチャしたり、プログレッシブプロファイリングを使用したりできます。Auth0 APIでは、カスタムフィールドをキャプチャし、データベースに保存することができます。目的に適した方法を選択する際、カスタマイズの制約も考慮する必要があります。カスタマイズの典型的な例として、ユーザー名の追加とパスワード強度の検証が挙げられます。

<Card title="ユニバーサルログインの推奨">
  Auth0は[ユニバーサルログイン](/docs/ja-jp/authenticate/login/auth0-universal-login)オプションを提供し、独自に作成したカスタムサインアップ・ログインページや、Auth0ライブラリーに埋め込みのものに代わって使用できるようにしています。サインアップ・ログインオプションを提供する予定で、アプリケーション名やロゴ、背景色だけをカスタマイズすればよい場合は、ユニバーサルログインを使えば実装が簡単になります。
</Card>

## Lockの使用

Lockは[カスタムフィールドでのサインアップ](/docs/ja-jp/libraries/lock/lock-configuration)をサポートします。

Lockの`additionalSignUpFields`オプションは、データベースサインアップでのみ機能します。ソーシャルIDプロバイダーを使ったサインアップの場合、Lockを使ってこれらのフィールドを同じ方法で収集することはできませんが、Lockを使ったソーシャル<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-2" href="/docs/ja-jp/glossary?term=idp" tip="IDプロバイダー（IdP）: デジタルIDを保存および管理するサービス。" cta="用語集の表示">IdP</Tooltip>サインアップでも追加カスタムフィールドの収集を可能にするオプションが2つあります。

### 別のページへリダイレクトする

ソーシャルプロバイダーのサインアップでLockを使い、カスタムフィールドデータを収集する1つ目の方法は、[リダイレクトルール](/docs/ja-jp/customize/rules/redirect-users)を使用して、追加情報を求める別のページにユーザーをリダイレクトしてから戻し、認証トランザクションを終了させる方法です。

### プログレッシブプロファイリング

もう1つの方法は、ユーザープロファイルを時間をかけて徐々に構築していく[プログレッシブプロファイリング](/docs/ja-jp/manage-users/user-accounts/user-profiles/progressive-profiling)を使用します。サインアップ時は必要最小限の情報を収集し、その後、ユーザーがアプリとやり取りする度に少しのデータ（たとえば、1つの質問で）を収集してプロファイルを完成させます。サインアップにソーシャルIdPを使用する目的は、簡単で効率的なサインアッププロセスをユーザーに提供することなので、この方法を使えば、負担を抑えながら欲しい情報を収集することができます。

## APIの使用

### カスタムフィールドをキャプチャするサインアップフォームを作成する

`name`はユーザープロファイル属性で、`color`はカスタムフィールドです。

現時点では、サインアップ時にユーザーが入力したカスタムフィールドを検証する方法がありません。検証は、ログイン時にAuth0 [Rule](/docs/ja-jp/customize/rules)から行うか、アプリケーションでカスタムの**server-side（サーバー側）** ロジックを使用して行わなければなりません。

### フォームデータを送信する

Auth0の[/dbconnections/signup](/docs/ja-jp/api/authentication/reference#signup)エンドポイントにPOST要求を送信します。

次のものを送信する必要があります：

* アプリケーションの`client_id`
* サインアップするユーザーの`email`と`password`
* ユーザーのデータを保存するデータベース`connection`の名前
* `given_name`、`family_name`、`name`、`nickname`、`picture`を含む、更新したい任意のユーザープロファイル属性
* `user_metadata`の一部として任意のカスタムフィールド

## カスタムフィールドの制限

ユーザーがサインアップすると、カスタムフィールドは`user_metadata`の一部として送信されます。このフィールドには次のような制限があります。

* `user_metadata`に含められるフィールドは10個まで
* `user_metadata.field`値は文字列でなければならない
* `user_metadata.field.value.length`は500文字未満
* `user_metadata.field.value.length`は100文字未満
* `user_metadata`の現在のサイズ制限は**16 MB**

## リダイレクトモード

ログインに成功すると、Auth0はユーザーを、クエリ文字列内の<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-3" href="/docs/ja-jp/glossary?term=json-web-token" tip="JSON Web Token（JWT）: 二者間のクレームを安全に表現するために使用される標準IDトークン形式（および多くの場合、アクセストークン形式）。" cta="用語集の表示">JWT</Tooltip>（`id_token`）とともに構成済みCallback URLにリダイレクトします。

サーバーは、その後、APIv2を呼び出して必要なカスタムフィールドをユーザープロファイルに追加します。

## サインアップフォームにユーザー名を追加する

よく行われるサインアップのカスタマイズは、ユーザー名を追加することです。

この機能を有効にするには、ダッシュボードの[［Connections（接続）］>［Database（データベース）］](https://manage.auth0.com/#/connections/database/)セクションに移動して、編集したい接続の **［Settings（設定）］** タブにある **［Requires Username（ユーザー名を必須にする）］** 設定をオンにします。

カスタムフォームで`username`フィールドをキャプチャして、要求本文に`username`を追加します。

## 任意：パスワード強度を検証する

データベース接続のパスワードポリシーは、ダッシュボードで設定できます。詳細については、「[Auth0データベース接続のパスワード強度](/docs/ja-jp/connections/database/password-strength)」を参照してください。

カスタムサインアップフォームの実装に必要な場合は、設定したパスワードポリシーを、その他の接続情報と一緒に、[Management v2 API](/docs/ja-jp/api/management/v2#!/Connections/get_connections_by_id)から取得できます。結果は、クライアント側で解析でき、ダッシュボードでその接続のために設定された現在のパスワードポリシーの情報を含みます。
