メインコンテンツへスキップ
サインアップ画面のカスタマイズはコンテキストデータに合わせて異なるように表示できます。locale変数を使用して、特定の条件が満たされた場合にフォームの入力を表示し、検証動作を定義します。 以下のユースケースでは、localeを使用して、利用規約とチェックボックスを表示します。ページテンプレートに公開されている変数であれば何でも置き換えられます。

​
前提条件

  • テナントに検証済みのカスタムドメインがある
  • テナントにページテンプレートが設定されている

​
ロケールとしてfrとesを有効化する

ロケールを有効にします。

​
条件が満たされた場合にカスタムフィールドを表示する

を使用して、テンプレート部分をform-content-endサインアップ画面のユニバーサルログイン画面コンテナーに追加します。ロケールがesまたはfrの場合には、利用規約とチェックボックスを表示します。 
{% if locale == 'fr' %}
  <div class="ulp-field">
    <input
      type="checkbox"
      name="ulp-terms-of-service"
      id="terms-of-service">
    <label for="terms-of-service">
      J'accepte les
      <a href="https://fr.example.com/tos">termes et conditions</a>
    </label>
  </div>
{% endif %}
{% if locale == 'es' %}
  <div class="ulp-field">
    <input
      type="checkbox"
      name="ulp-terms-of-service"
      id="terms-of-service">
    <label for="terms-of-service">
      Estoy de acuerdo con los
      <a href="https://es.example.com/tos">términos y condiciones</a>
    </label>
  </div>
{% endif %}
以下の要求をManagement APIの特定プロンプトのカスタムテキスト設定 に送信します。 
// PUT prompts/signup/partials

{
  "signup": {
    "form-content-end": "{% if locale..."
  }
}
ロケールがfrまたはesに設定されると、サインアップ画面に利用規約とチェックボックスのみが表示されるようになります。
出力をテストするには、［Manage Dashboard（管理ダッシュボード）］ を表示して、［Branding（ブランディング）］>［Universal Login（ユニバーサルログイン）］>［Customization Options（カスタマイズのオプション）］に移動し、［Try（試す）］ ボタンを右クリックしてリンクのアドレスをコピーします。コピーしたURLに次のクエリパラメーターを追加して、新しいURLにアクセスします：&screen_hint=signup&ui_locales=fr（またはes）

​
確認を追加する

ロケールがfrの場合には、続行する前にチェックボックスの選択を確認することができます。以下の確認コードでテンプレート部分を更新します。 
{% if locale == 'fr' %}
  <div class="ulp-field">
    <input
      type="checkbox"
      name="ulp-terms-of-service"
      id="terms-of-service">
    <label for="terms-of-service">
      J'accepte les
      <a href="https://fr.example.com/tos">termes et conditions</a>
    </label>

    <!-- NEW -->
    <div
      class="ulp-error-info"
      data-ulp-validation-function="requiredFunction"
      data-ulp-validation-event-listeners="change">
      Vous devez accepter les termes et conditions pour continuer
    </div>
    <!-- END NEW -->
  </div>
{% endif %}
{% if locale == 'es' %}
  <div class="ulp-field">
    <input
      type="checkbox"
      name="ulp-terms-of-service"
      id="terms-of-service">
    <label for="terms-of-service">
      Estoy de acuerdo con los
      <a href="https://es.example.com/tos">términos y condiciones</a>
    </label>
  </div>
{% endif %}

<!-- NEW -->
<script>
  function requiredFunction(element, formSubmitted) {
    if (! formSubmitted) {
      return true;
    }
    return element.checked;
  }
</script>
<!-- END NEW -->
fr
このユースケースでは、ユーザーの利便性を考えて検証がクライアント側で行われます。検証は確実に実行されるわけではなく、たとえば、ユーザーのブラウザーでJavascriptが無効化されている場合には実行されません。また、好奇心や悪意のある行為者によって検証が変更される可能性もあります。検証ロジックの整合性を保証するために、クライアント側の検証には必ずサーバー側の検証を組み合わせてください。
⌘I