Signup プロンプト と Login プロンプトをカスタマイズする

Auth0 Universal Login の Signup プロンプト と Login プロンプトにカスタムフィールドとテキストを追加する方法を説明します。

始める前に

1. ご利用のテナントで カスタムドメイン が設定されていることを確認します。
2. すべての Signup プロンプト と Login プロンプトで Universal Login を使用していることを確認し、ログインプロンプトで Customize Login Page トグルが無効になっていることを確認します。
3. Custom Page Template が設定されていることを確認します。

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 構文を使用できます。さらに、Page Templateで利用可能な Liquid 変数もすべてサポートされています。

これらのエントリポイントは、データベース接続またはパスワードレス接続が有効になっている場合に利用できます。

• form-content-start
• form-content-end
• form-footer-start
• form-footer-end

少なくとも 1 つのソーシャル接続またはエンタープライズ接続が有効になっている場合は、次のエントリポイントを利用できます。

• secondary-actions-start
• secondary-actions-end

​

Auth0 DashboardでPartialsを管理する

Auth0 Dashboardでは、partials を使用して Login 画面や Signup 画面にカスタムフィールドやコンテンツを挿入できます。

1. Auth0 Dashboard > Branding > Universal Login に移動し、Enhance screens with partials を選択します。
2. partials エディターでカスタマイズする 画面 を選択します。

画面 では、次の レンダリングモード を使用できます。

• STANDARD: screen はデフォルトの Universal Login UI を使用してレンダリングされます。partials を使うと、コードスニペットや template variables を挿入できます。
• ADVANCED: screen は ACUL を使用してレンダリングされるため、partials は適用されません。
• ADVANCED (FILTERED): screen は、特定のアプリケーションと組織に対して ACUL を適用した状態でレンダリングされます。partials は、ACUL フィルターの対象外となる screens にのみ適用されます。

3. コードスニペットとテンプレート変数を挿入するには、 ENTRY POINTS を選択します。

4. 選択したエントリポイントに CODE SNIPPETS を追加するには、 を選択します。

5. 選択したエントリポイントに TEMPLATE VARIABLES を追加するには、{ } を選択します。

6. Actions を追加し、partials のフィールドとコンテンツを使ってカスタムロジックを適用するには、 ACTIONS を選択します。

7. 画面 を更新するには、Save and Publish を選択します。

​

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

Auth0 Management API (GET /prompts/{prompts_name}/partials) を使用して Partials を管理できます。partial を追加、更新、または削除する際は、各 プロンプト で screen を指定する必要があります。Partials は最大 10,000 文字までです。

Partials は、ターミナルで auth0 ul customize を実行して、Auth0 CLI の Universal Login Customize Interface から管理することもできます。

​

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

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

• <input type="text">
• <input type="number">
• <input type="checkbox">
• <input type="password">
• <input type="email">
• <input type="tel">
• <input type="url">
• <select>
• <textarea>

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

partials エディターを使用すると、あらかじめ用意されたコードスニペットを確認できます。

​

クライアントサイドのバリデーション

この機能のクライアントサイドのバリデーションフレームワークでは、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" を使用し、スクリーンリーダーがバリデーションエラーを読み上げられるようにします。

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

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

​

コンテンツをローカライズする

Custom Text API を使用して新しいカスタムテキスト変数を定義すると、コンテンツの一部をローカライズできます。画面と言語の組み合わせごとに、最大 30 個のカスタムテキスト変数を定義できます。

​

カスタムテキスト変数を作成または更新する

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

以下は、英語とスペイン語の利用規約チェックボックスラベルのテキストに変数を追加する呼び出し例です。詳しくは、Management API を参照してください。

# 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)"
  }
}

​

Partial でカスタムテキスト変数を使用する

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

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

​

キャプチャしたデータを検証して保存する

カスタムフォーム要素でキャプチャしたデータはアクションで利用できます。Auth0では、収集したデータを保存または送信する前に検証することを推奨しています。

カスタムフォーム要素を使用する場合、データをアクションで利用できるようにするには、すべての入力名にulp-プレフィックスを付ける必要があります。

各アクションは、キャプチャされたデータをevent.request.bodyのオブジェクトとして受け取ります。バリデーションエラーを返すには、api.validation.error関数を使用します。

データベース接続を使用する場合：

• サインアッププロンプトのデータには、pre-user-registrationトリガーでアクセスできます。トリガーでバリデーションエラーが返されると、ユーザーは登録できません。
• ログインプロンプトのデータには、post-loginトリガーでアクセスできます。バリデーションエラーは、顧客のアプリケーションのエラーページに転送されます。

ソーシャル接続またはエンタープライズ接続を使用する場合：

• ログインプロンプトのデータには、post-loginトリガーでアクセスできます。バリデーションエラーは、顧客のアプリケーションのエラーページに転送されます。

カスタムデータベース接続を使用する場合：

• サインアッププロンプトのデータには、Create UserおよびLoginのカスタムデータベースアクションスクリプトを使用すると、pre-user-registrationトリガーでアクセスできます。

• ログインプロンプトのデータには、LoginおよびChange Passwordのカスタムデータベースアクションスクリプトを使用すると、post-loginトリガーでアクセスできます。

カスタムデータベースアクションスクリプトを使用するには、カスタムデータベース接続でContext objects in database scriptsを有効にします。詳細については、「コンテキストオブジェクトを有効にする」をお読みください。

パスワードレス接続を使用する場合：

• サインアッププロンプトとログインプロンプトのデータには、どちらもpost-loginトリガーでアクセスできます。バリデーションエラーは、顧客のアプリケーションのエラーページに転送されます。

パスキープロンプトを使用する場合：

• passkey-enrollmentプロンプトのデータには、pre-user-registrationトリガーでアクセスできます。トリガーでバリデーションエラーが返されると、ユーザーは登録できません。
• passkey-enrollmentプロンプトとpasskey-enrollment-localプロンプトのデータが、Post Loginトリガーでキャプチャされることはありません。
• passkey-enrollment-localプロンプトは常にpost-loginトリガーの実行後に表示されるため、そのデータにはアクセスできません。

フォームで収集したデータは、保存またはレンダリングする前にサニタイズしてください。

• 保存するデータは、必ずLiquidの{{escape}}ヘルパー関数で処理してください
• メールテンプレートでデータをレンダリングする場合は、Liquid構文を除去してください
• Webページでデータをレンダリングする場合は、HTMLエンティティをエスケープしてください
• データベースにデータを保存する場合は、パラメーター化クエリを使用してください
• クエリ文字列にデータを渡す場合は、{{encodeURI}}や{{encodeURIParam}}などでエンコードしてください

リスク軽減やデータを安全に保存するためのベストプラクティスの詳細については、こちらのチートシートを参照してください。

​

ユーザーのメタデータに保存

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

// サインアップフォームに以下のコードがある場合
// <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);
};

​

詳しくはこちら

• 動的変数を使用してカスタムフォーム要素を国際化する