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

> Lock または Auth0 API を使用して、追加フィールドでユーザーのサインアップフォームをカスタマイズする方法。

# Lock または Auth0 API を使用したカスタムサインアップ。

Lock または Auth0 API を使用すると、メールアドレスとパスワードに加えて、さらに多くの項目を含めてユーザーのサインアップフォームをカスタマイズできます。

[Lock vs. Custom UI](/docs/ja-jp/customize/login-pages/classic-login/customize-with-lock-sdk) を選ぶ前に、考慮すべき点は数多くあります。たとえば、Lock を使用する場合は、別のページにリダイレクトしてデータを取得したり、段階的プロファイリングを利用したりできます。Auth0 API を使用する場合は、カスタム項目を取得してデータベースに保存できます。どの方法が目的に最も適しているかを選ぶ際には、こうしたカスタマイズに関するいくつかの制限も考慮する必要があります。代表的なカスタマイズには、ユーザー名の追加やパスワード強度の確認があります。

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

<div id="using-lock">
  ## Lock の使用
</div>

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

Lock の `additionalSignUpFields` オプションが使えるのは、Database のサインアップのみです。ソーシャル <Tooltip tip="IDプロバイダー（IdP）: デジタルアイデンティティを保存および管理するサービス。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=identity+providers">アイデンティティプロバイダー</Tooltip> を使用したサインアップでは、Lock で同じ方法でこれらのフィールドを収集することはできません。ただし、追加のカスタムフィールドを収集しつつ、Lock でソーシャル IDP サインアップを可能にする方法が 2 つあります。

<div id="redirect-to-another-page">
  ### 別のページにリダイレクトする
</div>

Lock でソーシャルプロバイダーのサインアップを利用し、追加の情報を収集する方法の 1 つとして、[redirect rules](/docs/ja-jp/customize/rules/redirect-users) を使い、ユーザーを別のページにリダイレクトして追加情報を入力してもらい、その後リダイレクトで戻して認証トランザクションを完了させる方法があります。

<div id="progressive-profiling">
  ### 段階的プロファイリング
</div>

ソーシャルプロバイダーでユーザーを登録する際にカスタムフィールドのデータを収集する別の方法として、[段階的プロファイリング](/docs/ja-jp/manage-users/user-accounts/user-profiles/progressive-profiling)があります。これにより、時間をかけてユーザープロファイルのデータを徐々に充実させていくことができます。登録時には必要最小限の情報だけを収集し、その後ユーザーがアプリを利用するたびに、少量のデータ (たとえば質問を1つ) ずつ集めて、最終的にプロファイルを完成させます。こうすることで、必要な情報を集めながらも、ユーザーの負担を抑えることができます。というのも、登録時にソーシャルIdPを使う目的は、ユーザーにとってその過程をより手軽でスムーズにすることにあるからです。

<div id="using-the-api">
  ## API の利用
</div>

<div id="create-a-signup-form-to-capture-custom-fields">
  ### カスタムフィールドを収集するサインアップフォームを作成する
</div>

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

現在、サインアップ時にユーザーが入力したカスタムフィールドをバリデーションする方法はありません。バリデーションは、ログイン時に Auth0 の [Rule](/docs/ja-jp/customize/rules) で行うか、アプリケーション内のカスタムの**サーバーサイド**ロジックで行う必要があります。

<div id="send-the-form-data">
  ### フォームデータを送信する
</div>

Auth0 の [/dbconnections/signup](https://auth0.com/docs/api/authentication/reference#signup) エンドポイントに POST リクエストを送信します。

送信する内容は次のとおりです。

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

<div id="custom-fields-limitations">
  ## カスタムフィールドの制限事項
</div>

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

* `user_metadata` に含められるフィールドは最大 10 個です
* `user_metadata.field` は文字列である必要があります
* `user_metadata.field.value.length` は 500 文字未満である必要があります
* `user_metadata.field.length` は 100 文字未満である必要があります
* `user_metadata` の現在のサイズ上限は **16 MB** です

<div id="redirect-mode">
  ## リダイレクトモード
</div>

ログインに成功すると、Auth0 は、<Tooltip tip="JSON Web トークン（JWT）: 2 者間でクレームを安全に表現するために使用される標準的な ID トークン形式（また、多くの場合は Access Token 形式でもあります）。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=JWT">JWT</Tooltip> (`id_token`) をクエリ文字列に付けて、設定済みのコールバック URL にユーザーをリダイレクトします。

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

<div id="add-username-to-the-signup-form">
  ## サインアップフォームにユーザー名を追加する
</div>

よくあるサインアップのカスタマイズとして、サインアップ時にユーザー名を追加する方法があります。

この機能を有効にするには、編集する接続の **設定** タブで、Auth0 Dashboard の [Connections > Database](https://manage.auth0.com/#/connections/database/) セクションにある **Requires Username** 設定をオンにします。

カスタムフォームで `username` フィールドを取得し、リクエストボディに `username` を追加します。

<div id="optional-verify-password-strength">
  ## 任意: パスワード強度を確認する
</div>

データベース接続のパスワードポリシーは、Auth0 Dashboard で設定できます。詳しくは、[Auth0のデータベース接続における Password Strength](/docs/ja-jp/authenticate/database-connections/password-strength)を参照してください。

カスタムのサインアップフォームを実装する際に必要であれば、設定されているパスワードポリシーは、他の接続情報とあわせて [Management v2 API](https://auth0.com/docs/api/management/v2#!/Connections/get_connections_by_id) から取得できます。取得結果はクライアント側で解析でき、その接続について Auth0 Dashboard に現在設定されているパスワードポリシーに関する情報が含まれます。