Use variables dinámicas para internacionalizar elementos de formulario personalizados

Aprenda cómo las variables dinámicas pueden crear pantallas de inicio de sesión en varios idiomas.

Puede renderizar Personalizaciones de la pantalla de registro de forma diferente según los datos contextuales. Usa la variable locale para renderizar condicionalmente los campos del formulario y definir el comportamiento de validación.

El siguiente caso de uso funciona con la variable locale para renderizar un mensaje de Términos del servicio y una casilla de verificación. Se puede sustituir cualquier variable expuesta a Plantillas de página.

​

Requisitos previos

• Tenant tiene un Dominio personalizado verificado
• Tenant tiene configurada una plantilla de página

​

Habilita las configuraciones regionales fr y es

Ve a tu Auth0 Dashboard y, luego, navega a Settings > General para habilitar las configuraciones regionales:

​

Renderizar Custom Fields de forma condicional

Usa Management API para agregar un parcial de plantilla al contenedor form-content-end de la pantalla de registro de Universal Login. Si la configuración regional es es o fr, quizá quieras renderizar un mensaje de Términos del servicio y una casilla de verificación.

{% 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 %}

La siguiente solicitud se envía al endpoint Configurar texto personalizado para una pantalla específica de la Management API:

// PUT prompts/signup/partials

{
  "signup": {
    "form-content-end": "{% if locale..."
  }
}

Tu pantalla de registro ahora muestra un mensaje de Términos del servicio y una casilla de verificación solo cuando la configuración regional está establecida en fr o es:

Para probar el resultado, ve a Manage Dashboard y navega a Branding > Universal Login > Customization Options. Luego, haz clic con el botón derecho en el botón Try y copia la dirección del enlace. Agrega los siguientes parámetros de consulta a la URL copiada y ve a la nueva URL: &screen_hint=signup&ui_locales=fr (o es).

​

Agregar validación

Si la configuración regional es fr,, puede validar que la casilla esté marcada antes de continuar. Actualice la plantilla parcial con el siguiente código de validación:

{% 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>

    <!-- NUEVO -->
    <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>
    <!-- FIN NUEVO -->
  </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 %}

<!-- NUEVO -->
<script>
  function requiredFunction(element, formSubmitted) {
    if (! formSubmitted) {
      return true;
    }
    return element.checked;
  }
</script>
<!-- FIN NUEVO -->

Con esta validación implementada, solo los usuarios con la configuración regional fr deben aceptar los ToS.

Las validaciones de este caso de uso se realizan del lado del cliente y están pensadas para mayor comodidad del usuario. No se garantiza que se ejecuten; por ejemplo, el navegador del usuario puede tener Javascript desactivado. Además, las validaciones pueden ser modificadas por actores curiosos o maliciosos. Para garantizar la integridad de la lógica de validación, las validaciones del lado del cliente deben complementarse con validaciones del lado del servidor.