カスタムサインアップ

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

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

ユニバーサルログインの推奨

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

Lockの使用

Lockはカスタムフィールドでのサインアップをサポートします。

LockのadditionalSignUpFieldsオプションは、データベースサインアップでのみ機能します。ソーシャルIDプロバイダーを使ったサインアップの場合、Lockを使ってこれらのフィールドを同じ方法で収集することはできませんが、Lockを使ったソーシャルIdPサインアップでも追加カスタムフィールドの収集を可能にするオプションが2つあります。

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

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

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

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

APIの使用

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

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

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

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

Auth0の/dbconnections/signupエンドポイントにPOST要求を送信します。

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

  • アプリケーションのclient_id

  • サインアップするユーザーのemailpassword

  • ユーザーのデータを保存するデータベースconnectionの名前

  • given_namefamily_namenamenicknamepictureを含む、更新したい任意のユーザープロファイル属性

  • 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はユーザーを、クエリ文字列内のJWTid_token)とともに構成済みCallback URLにリダイレクトします。

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

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

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

この機能を有効にするには、ダッシュボードの[Connections(接続)]>[Database(データベース)]セクションに移動して、編集したい接続の[Settings(設定)]タブにある[Requires Username(ユーザー名を必須にする)]設定をオンにします。

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

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

データベース接続のパスワードポリシーは、ダッシュボードで設定できます。詳細については、「Auth0データベース接続のパスワード強度」を参照してください。

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