Personalizar las pantallas de registro e inicio de sesión

Aprenda a personalizar las pantallas de registro e inicio de sesión para Universal Login

Antes de comenzar

1. Asegúrese de que su inquilino tenga configurado un dominio personalizado.
2. Confirme que está usando Universal Login para todas las pantallas de registro e inicio de sesión, y asegúrese de que la opción Customize Login Page esté deshabilitada para las pantallas de inicio de sesión.
3. Verifique que tenga configurada una plantilla de página personalizada.

Personalizar las pantallas de registro e inicio de sesión es una función que permite a los clientes con dominio personalizado y la plantilla de página personalizada habilitados agregar campos y contenido personalizados a las pantallas de registro e inicio de sesión de su aplicación.

​

Casos de uso

La personalización de las pantallas de registro e inicio de sesión admite dos casos de uso: contenido personalizado y captura de datos.

El contenido personalizado consiste en contenido estático, como texto, enlaces o imágenes, que se coloca directamente en las pantallas de registro e inicio de sesión.

La captura de datos utiliza elementos de formulario agregados dinámicamente a las pantallas de registro e inicio de sesión, lo que resulta útil para recopilar y validar el consentimiento del usuario o datos proporcionados por este, como el apellido.

Use las personalizaciones de las pantallas de registro e inicio de sesión para transmitir o recopilar datos sensibles o regulados solo en la medida en que lo permita su acuerdo con Okta.

​

Terminología

Una pantalla es un paso específico dentro de un flujo de autenticación determinado. Cada prompt tiene al menos una pantalla y, según la configuración del inquilino, cada pantalla compatible tiene cuatro o seis puntos de entrada, que son ubicaciones dentro de la pantalla donde se puede insertar código personalizado (parciales).

Se pueden personalizar los siguientes prompts:

Pantallas de inicio de sesión

• login
• login-id
• login-password
• login-passwordless-sms-otp
• login-passwordless-email-code
• passkey-enrollment
• passkey-enrollment-local

Pantallas de registro

• signup
• signup-id
• signup-password
• passkey-enrollment
• passkey-enrollment-local

Los parciales admiten HTML, CSS, JavaScript y la sintaxis Liquid para habilitar lógica condicional y variables dinámicas. Además, también admiten cualquier variable Liquid que esté disponible para la Plantilla de página.

Estos puntos de entrada están disponibles cuando hay habilitada una conexión de base de datos o sin contraseña:

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

Los siguientes puntos de entrada están disponibles cuando hay habilitada al menos una conexión social o empresarial:

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

​

Usa el Auth0 Dashboard para administrar parciales

Usa el Auth0 Dashboard para insertar campos y contenido personalizados en las pantallas de inicio de sesión y registro mediante parciales.

1. Ve a Auth0 Dashboard > Branding > Universal Login y selecciona Mejorar pantallas con parciales.
2. Selecciona la pantalla que quieras personalizar con el editor de parciales.

Las pantallas pueden tener los siguientes modos de renderizado:

• STANDARD: La pantalla se renderiza con la interfaz de usuario predeterminada de Universal Login; puedes usar parciales para insertar fragmentos de código y variables de plantilla.
• ADVANCED: La pantalla se renderiza con ACUL y los parciales no se aplican.
• ADVANCED (FILTERED): La pantalla se renderiza con ACUL aplicado a aplicaciones y organizaciones específicas; los parciales solo se aplican a las pantallas excluidas de los filtros de ACUL.

3. Selecciona PUNTOS DE ENTRADA para insertar fragmentos de código y variables de plantilla.

4. Selecciona para agregar FRAGMENTOS DE CÓDIGO al punto de entrada seleccionado.

5. Selecciona { } para agregar VARIABLES DE PLANTILLA al punto de entrada seleccionado.

6. Selecciona ACTIONS para agregar Actions y aplicar lógica personalizada usando los campos y el contenido de tus parciales.

7. Selecciona Save and Publish para actualizar tu pantalla.

​

Gestionar parciales de forma programática

Puede gestionar parciales con la Auth0 Management API (GET /prompts/{prompts_name}/partials). Cada pantalla debe especificar screen al agregar, actualizar o eliminar un parcial. Los parciales pueden tener un máximo de 10.000 caracteres.

Los parciales también pueden gestionarse desde la interfaz Customize de Universal Login en Auth0 CLI ejecutando auth0 ul customize en la terminal.

​

Aplicar estilo y validar campos de formulario

La personalización de las pantallas de registro e inicio de sesión ofrece estilos predefinidos y compatibilidad con validaciones del lado del cliente para determinados elementos de formulario HTML. Se admiten los siguientes elementos:

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

Para usar los estilos predefinidos de los campos, envuelva el elemento de formulario que prefiera en un <div> con la clase ulp-field. Del mismo modo, agregue la clase ulp-error al mismo <div> para usar los estilos de error predefinidos. Si el elemento ulp-error-info está presente, también se mostrará un mensaje de error con estilo.

Puede encontrar fragmentos de código predefinidos al usar el editor de partials.

​

Validación en el cliente

El marco de validación en el cliente de esta funcionalidad permite a los clientes validar los datos introducidos por el usuario mediante atributos HTML para ejecutar una o varias funciones de validación personalizadas. Las funciones de validación pueden incluirse directamente en el Partial o en el <head> de la plantilla de la página.

Para añadir validación en el cliente a un elemento de formulario:

• Haga referencia a la función de validación mediante el atributo data-ulp-validation-function en el elemento <div class="ulp-error-info">.
• Indique en qué eventos del DOM debe ejecutarse la función de validación mediante el atributo data-ulp-validation-event-listeners en el elemento <div class="ulp-error-info">, teniendo en cuenta que las validaciones se ejecutan automáticamente al enviar el formulario.
• Para cumplir con las WCAG, los campos de entrada deben vincularse de forma programática a sus mensajes de error; por ejemplo, mediante aria-describedby="error-id" y aria-invalid="true", para garantizar que los lectores de pantalla anuncien los errores de validación.

Tenga cuidado al usar JavaScript de terceros en su página de registro. La información confidencial relacionada con la seguridad suele pasar por la página de registro, lo que la hace vulnerable a ataques de cross-site scripting.

Siempre que sea posible, Auth0 recomienda validar los datos proporcionados por el usuario antes de enviarlos.

​

Localizar contenido

Es posible localizar contenido parcial definiendo nuevas variables de texto personalizadas mediante la Custom Text API. Se pueden definir hasta treinta variables de texto personalizadas por combinación de pantalla e idioma.

​

Crear o actualizar una variable de texto personalizada

Gestione las variables de texto personalizadas con la Custom Text API. Las llamadas deben especificar la screen al agregar, actualizar o eliminar una variable de texto personalizada. Las variables de texto personalizadas siguen la convención de nomenclatura var-<name>. Se admiten enlaces de Markdown y se convierten en elementos HTML <a> antes de mostrarse a los usuarios.

A continuación se muestra un ejemplo de llamada para agregar una variable para el texto de la etiqueta de una casilla de verificación de términos del servicio en inglés y español. Consulte la Management API para obtener más información.

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

​

Usa una variable de texto personalizada en un Partial

Se hace referencia a las variables de texto personalizadas en los parciales mediante el objeto prompts.screen.text; la referencia para el ejemplo var-tos de la sección anterior es prompt.screen.text.varTos. A continuación, se muestra un ejemplo de cómo usar una variable creada previamente en un parcial de la pantalla Signup ID, teniendo en cuenta que la variable var-tos de la Management API se referencia como varTos en el parcial.

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

​

Validar y guardar los datos capturados

Los datos capturados por elementos de formulario personalizados están disponibles en Actions, y Auth0 recomienda validar los datos recopilados antes de guardarlos o enviarlos.

Al usar elementos de formulario personalizados, debes incluir el prefijo ulp- en todos los nombres de entrada para garantizar que los datos estén disponibles en Actions.

Cada Action recibe los datos capturados como un objeto en event.request.body. Los clientes pueden devolver un error de validación mediante la función api.validation.error.

Al usar una conexión de base de datos:

• Se puede acceder a los datos de las pantallas de registro en el trigger pre-user-registration. Un error de validación del trigger impide que el usuario se registre.
• Se puede acceder a los datos de las pantallas de inicio de sesión en el trigger post-login. Los errores de validación se reenvían a la página de error de la aplicación del cliente.

Al usar una conexión de base de datos personalizada:

• Se puede acceder a los datos de las pantallas de registro en el trigger pre-user-registration con los siguientes scripts de acción de base de datos personalizada: Create User y Login.

• Se puede acceder a los datos de las pantallas de inicio de sesión en el trigger post-login con los siguientes scripts de acción de base de datos personalizada: Login y Change Password.

Para usar scripts de acción de base de datos personalizada, habilita Context objects in database scripts en tu conexión de base de datos personalizada. Para obtener más información, consulta Enable context object.

Al usar una conexión sin contraseña:

• Se puede acceder a los datos de las pantallas de registro e inicio de sesión en el trigger post-login. Los errores de validación se reenvían a la página de error de la aplicación del cliente.

Al usar pantallas de passkey:

• Se puede acceder a los datos de la pantalla passkey-enrollment en el trigger pre-user-registration. Un error de validación del trigger impide que el usuario se registre.
• Las pantallas passkey-enrollment y passkey-enrollment-local nunca capturan datos en el trigger Post Login.
• No se puede acceder a los datos de la pantalla passkey-enrollment-local, ya que siempre se muestra después de que se ejecuta el trigger post-login.

Al usar conexiones sociales o empresariales:

• Los datos no se capturan cuando un usuario inicia sesión con una conexión social o empresarial.

Sanea cualquier dato que recopiles en el formulario antes de guardarlo o mostrarlo.

• Asegúrate de que cualquier dato que se guarde haya pasado por la función auxiliar {{escape}} de Liquid
• Si muestras datos en una plantilla de correo electrónico, elimina la sintaxis de Liquid
• Si muestras datos en una página web, escapa las entidades HTML
• Si guardas datos en una base de datos, usa consultas parametrizadas
• Si pasas datos en una cadena de consulta, codifícalos con, por ejemplo: {{encodeURI}} o {{encodeURIParam}}

Para obtener más información sobre mitigación de riesgos y prácticas recomendadas para almacenar datos de forma segura, consulta esta hoja de referencia.

​

Guardar en los metadatos del usuario

Desde la Action, los datos capturados pueden enviarse a una API externa para su validación y almacenamiento, o guardarse en user_metadata del usuario mediante api.user.setUserMetadata.

// Dado este código en el formulario de registro
// <div class="ulp-field">
//   <label for="full-name">Nombre completo</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);
};

​

Más información

• Usa variables dinámicas para internacionalizar elementos de formulario personalizados