サインアップとログインプロンプトをカスタマイズする

Before you start

  1. テナントにカスタムドメインが構成されていることを確認します。

  2. すべてのサインアップとログインのプロンプトにユニバーサルログインが使用されており、ログインプロンプトに［Customize Login Page（ログインページのカスタマイズ）］が無効になっていることを確認します。

  3. ［Custom Page Template（カスタムページテンプレート）］が構成されていることを確認します。

サインアップとログインプロンプトのカスタマイズ機能によって、カスタムドメインとカスタムページテンプレートが有効になっている顧客は、カスタムフィールドとコンテンツをアプリのサインアップとログインプロンプトに追加することができます。

ユースケース

サインアップとログインプロンプトのカスタマイズでは、custom contentとdata captureという2つのユースケースに対応しています。

カスタムコンテンツとは、テキストやリンク、画像などサインアップとログインプロンプトに直接配置された静的コンテンツのことです。

データキャプチャーは、サインアップとログインプロンプトに動的に追加されたフォーム要素を使用します。データキャプチャーは、ユーザーコンテンツや苗字などユーザーが生成したデータの収集と検証に役立ちます。データキャプチャーを利用できるのは、Passkeyを持っていないDatabase Connections認証ユーザーのみです。

Prompt（プロンプト）とは、ある認証フローでの特定のステップのことです。プロンプトにはそれぞれ、少なくとも1つのScreen（スクリーン）があり、テナントの構成に応じて、対応するスクリーンには4つか6つのEntry Points（エントリーポイント）カスタムコード（Partials（パーシャル））が挿入可能なスクリーン内の場所を指します。

用語

カスタマイズできるプロンプトは以下のとおりです。

パーシャルは、条件ロジックと動的変数を使用できるよう、HTML、CSS、Javascript、およびLiquid構文に対応しています。さらに、Page Template（ページテンプレート）にあるLiquid変数も使用することができます。

  • signup

  • signup-id

  • signup-password

  • login（ログイン）

  • login-id

  • login-password

  • login-passwordless

    • login-passwordless-sms-otp

    • login-passwordless-email-code

これらのエントリーポイントはデータベース接続が有効な場合に使用できます。

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

  • form-content-start

  • form-content-end

  • form-footer-start

  • form-footer-end

サインアップ サインアップID サインアップパスワード

  • secondary-actions-start

  • secondary-actions-end

パーシャルは最大10,000文字で指定し、/v2/prompts/{prompts_name}/partialsでAuth0 Management APIが管理することができます。プロンプトはそれぞれ、パーシャルを追加、更新、または削除するときに、スクリーンを指定する必要があります。以下の例は、プロンプトの既存のすべてのパーシャルを表示するために呼び出しを行ったものです。APIの呼び出しでエントリーポイントを参照する場合、ulp-container接頭辞が必要でないことに注意してください。

Management APIを使用してパーシャルを管理する

カスタムプロンプトは現在、Auth0のDeploy CLIツールまたはAuth0 CLIには対応していません。

GET /api/v2/prompts/signup-id/partials
# response
# success code: 200
# not found code: 404
body: {
  "signup-id": {
    "form-content-start": "<div>HTML or Liquid</div>...",
    "form-content-end": "<div>HTML or Liquid</div>..."
  }
}

Was this helpful?

/

サインアップとログインプロンプトのカスタマイズには、特定のHTMLフォーム要素に対して事前に構築されたスタイルとクライアント側の検証サポートが備わっています。以下の要素がサポートされています。

An image showing the command-line interface for Partials.

スタイルと検証フォームの入力

事前に構築された入力スタイルを使用するには、<div>内の希望するフォーム要素をulp-fieldクラスでラップします。同様に、事前に構築されたエラースタイルを使用するために、ulp-errorクラスを同じ<div>に追加します。ulp-error-info要素が存在する場合は、スタイル設定されたエラーメッセージも表示されます。

  • <input type="text">

  • <input type="number">

  • <input type="checkbox">

  • <input type="password">

  • <input type="email">

  • <input type="tel">

  • <input type="url">

  • <select>

  • <textarea>

機能のクライアント側検証フレームワークを使用すると、顧客はHTML属性を使ってユーザー入力を検証し、1つ以上のカスタム検証機能を実行することができます。検証機能はパーシャルに直接含まれているか、ページテンプレートの<head>に含まれています。

クライアント側検証

クライアント側検証をフォーム要素に追加するには、以下のようにします。

/

<div class="ulp-field">
  <label for="first-name">First Name</label>
  <input type="text" name="ulp-first-name" id="first-name">
  <div class="ulp-error-info">
    First Name is Required
  </div>
</div>

Was this helpful?

/

<div class="ulp-field">
  <label for="preferred-language">Preferred Language</label>
  <select name="ulp-preferred-language" id="preferred-language">
    <option></option>
    <option value="english">English</option>
    <option value="french">French</option>
    <option value="spanish">Spanish</option>
  </select>
  <div class="ulp-error-info">
    Please Select a Language.
  </div>
</div>

Was this helpful?

/

<div class="ulp-field">
  <label for="comments">Comments</label>
  <textarea type="text" name="ulp-comments" id="comments"></textarea>
  <div class="ulp-error-info">
    Please provide an answer.
  </div>
</div>

Was this helpful?

/

<div class="ulp-field">
  <input type="checkbox" name="ulp-terms-of-service" id="terms-of-service">
  <label for="terms-of-service">
    I agree to the <a href="#">Terms of Service</a>
  </label>
  <div class="ulp-error-info">
    Please agree to the Terms of Service.
  </div>
</div>

Was this helpful?

/

// Validation Function
<script>
  function validatePhoneFunction(element, formSubmitted) {
    if (!formSubmitted) {
      return true;
    }
    return element.value.replace(/\D/g, '').length === 10;
  }
</script>

// Custom Input Field including the validation error HTML
<div class="ulp-field">
  <label for="ulp-field-phone">Phone Number</label>
  <input type="text" name="ulp-field-phone" id="ulp-field-phone">
  <div
    class="ulp-error-info"
    data-ulp-validation-function="validatePhoneFunction"
    data-ulp-validation-event-listeners="blur,change,input,focus">
    Invalid phone number
  </div>
</div>

Was this helpful?

/

  • <div class="ulp-error-info">要素のdata-ulp-validation-function属性を使用して、検証機能を参照します。

  • どのDOMイベント上で、検証機能を<div class="ulp-error-info">要素のdata-ulp-validation-event-listeners属性を使用して実行する必要があるかを宣言します。検証は提出時に自動的に実行されることに注意します。

パーシャルコンテンツをローカライズするには、カスタムテキストAPIを使用して、新しいカスタムテキスト変数を定義します。スクリーン/言語の組み合わせごとに定義できるカスタムテキスト変数の数は最大30です。

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

カスタムテキストAPIはこちらから入手でき、各変数はvar-<name>命名規則に従っています。APIへの呼び出しは、カスタムテキスト変数を追加、更新、または削除するときに、Screen（スクリーン）を指定する必要があります。マークダウンリンクはサポートされており、ユーザーに表示される前に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)"
  }
}

Was this helpful?

/

カスタムテキスト変数は、prompts.screen.textオブジェクトを使用して、パーシャルで参照されます。前のセクションで示したvar-tosの例に対する参照は、prompt.screen.texts.varTosです。Signup ID Prompt,（サインアップIDプロンプト）のパーシャルで前に作成した変数を使用する方法の例については、以下を参照してください。Management APIのvar-tos変数がパーシャルでvarTosとして参照されることに注意します。

カスタムテキスト変数をパーシャルで使用する

# PUT api/v2/prompts/signup/partials
{
  "signup": {
    "form-content-end": "<div class='ulp-field'><input type='checkbox' name='ulp-terms-of-service' id='terms-of-service'><label for='terms-of-service'>{{ prompt.screen.texts.varTos }}</label></div>"
  }
}

Was this helpful?

/

カスタムフォーム要素でキャプチャーしたデータはActions（アクション）で使用できます。Auth0では、収集したデータを検証することを推奨します。

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

Actionはそれぞれ、キャプチャしたデータをevent.request.body上のオブジェクトとして受け取ります。顧客は、api.validation.error関数を使用して、検証エラーを返すことができます。

Actionから、キャプチャーされたデータは外部APIに送信されて検証および保管されるか、api.user.setUserMetadataを通じてユーザーのuser_metadataに保存されます。

  • サインアッププロンプトからのデータは、ユーザー登録前トリガーでアクセスできます。検証エラーが返さると、ユーザーは登録できません。

  • ログインプロンプトからのデータは、ログイン後トリガーでアクセスできます。検証エラーが返されると、顧客のアプリケーションのエラーページに転送されます。

# Given this code in the signup form
# <div class="ulp-field">
#   <label for="full-name">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);
};

Was this helpful?

/

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

ユーザーメタデータに保存する

取得したデータは検証と保管のためにActionから外部APIに送信されるか、api.user.setUserMetadataを通してユーザーのuser_metadataに保存されます。

# Given this code in the signup form
# <div class="ulp-field">
#   <label for="full-name">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);
};

Was this helpful?

/

もっと詳しく