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

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

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

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

Universal Login を推奨

Auth0 では、独自のカスタムログインページやサインアップページを作成したり、Auth0 ライブラリに埋め込まれたものを使用したりする代わりに利用できる Universal Login を提供しています。サインアップとログインのオプションを提供したいだけで、カスタマイズがアプリケーション名、ロゴ、背景色のみで済むのであれば、Universal Login のほうが簡単に実装できる場合があります。

Lock の使用

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

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

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

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

段階的プロファイリング

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

API の利用

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

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

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

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

Auth0 の /dbconnections/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.length は 100 文字未満である必要があります
• user_metadata の現在のサイズ上限は 16 MB です

リダイレクトモード

ログインに成功すると、Auth0 は、JWT (id_token) をクエリ文字列に付けて、設定済みのコールバック URL にユーザーをリダイレクトします。

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

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

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

この機能を有効にするには、編集する接続の 設定 タブで、Auth0 Dashboard の Connections > Database セクションにある Requires Username 設定をオンにします。

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

任意: パスワード強度を確認する

データベース接続のパスワードポリシーは、Auth0 Dashboard で設定できます。詳しくは、Auth0のデータベース接続における Password Strengthを参照してください。

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