Personalizar la página de restablecimiento de contraseña de Classic Login

Aprenda a personalizar una página de restablecimiento de contraseña de Classic Login.

En este momento, los esfuerzos de desarrollo activo de Auth0 se centran en Universal Login, y Classic Login ya no recibe actualizaciones. Para personalizar sus páginas de inicio de sesión, Auth0 recomienda Advanced Customizations for Universal Login.

¿Necesita restablecer una contraseña?

En esta página se explica cómo personalizar una página de restablecimiento de contraseña de Classic Login.

Si necesita ayuda para restablecer una contraseña, consulte la siguiente documentación en su lugar:

• Para administradores del inquilino que restablecen las contraseñas de otros usuarios: Cambiar las contraseñas de los usuarios
• Para personas que restablecen sus propias contraseñas: Restablecer la contraseña de la cuenta de Auth0

Si usa Classic Login, la página de restablecimiento de contraseña ofrece a sus usuarios una forma de cambiar sus contraseñas si no pueden iniciar sesión. En la página de restablecimiento de contraseña, Auth0 gestiona toda la funcionalidad necesaria, incluidas:

• Alojar la propia página
• Redirigir al usuario que quiere restablecer su contraseña cuando sea necesario
• Garantizar que la contraseña del usuario cumpla los requisitos que haya definido
• Redirigir automáticamente al usuario después de que restablezca su contraseña

Para crear una experiencia de marca coherente durante todo el flujo de inicio de sesión, puede personalizar cómo se muestra a los usuarios la pantalla de restablecimiento de contraseña. También puede actualizar la página de restablecimiento de contraseña para mostrar determinada información personal, si corresponde.

​

Habilitar la personalización de la página de restablecimiento de contraseña

La página de restablecimiento de contraseña viene habilitada de forma predeterminada para todos los usuarios de Auth0 y no requiere personalización. Sin embargo, puede habilitar la personalización avanzada si desea actualizar la marca y otros elementos de la página de restablecimiento de contraseña.

Para habilitar la personalización avanzada desde el Auth0 Dashboard:

1. Vaya a Branding > Universal Login > pestaña Password Reset.
2. Active el selector Customize Password Reset Page.

En el editor de código que aparece debajo del selector, ahora puede modificar directamente la plantilla de la página.

​

Editar la página de restablecimiento de contraseña

Después de habilitar la personalización de la página de restablecimiento de contraseña, puedes usar el editor de code integrado para modificar su HTML, dar estilo a la página con CSS y cambiar el JavaScript que se usa para recuperar y mostrar variables personalizadas. Asegúrate de seleccionar Guardar cambios debajo del editor de code para guardar los cambios.

​

Mostrar información personalizada en la página de restablecimiento de contraseña

Puede mostrar información personalizada en la página de restablecimiento de contraseña. Para ello, edite el JavaScript incrustado con el editor de la página de restablecimiento de contraseña:

new Auth0ChangePassword({
      container:         "change-password-widget-container",     // obligatorio
      email:             "{{email}}",                            // NO MODIFICAR
      csrf_token:        '{{csrf_token}}',                       // NO MODIFICAR
      ticket:            '{{ticket}}',                           // NO MODIFICAR
      password_policy:   '{{password_policy}}',                  // NO MODIFICAR
      theme: {
        icon: "{{tenant.picture_url | default: '//cdn.auth0.com/styleguide/1.0.0/img/badge.png'}}",
        primaryColor: "#ea5323"
      },
      dict: {
        // passwordPlaceholder: "your new password",
        // passwordConfirmationPlaceholder: "confirm your new password",
        // passwordConfirmationMatchError: "Please ensure the password and the confirmation are the same.",
        // passwordStrength: {
        //   containsAtLeast: "Contain at least %d of the following %d types of characters:",
        //   identicalChars: "No more than %d identical characters in a row (such as, \"%s\" not allowed)",
        //   nonEmpty: "Non-empty password required",
        //   numbers: "Numbers (such as 0-9)",
        //   lengthAtLeast: "At least %d characters in length",
        //   lowerCase: "Lower case letters (a-z)",
        //   shouldContain: "Should contain:",
        //   specialCharacters: "Special characters (such as !@#$%^&*)",
        //   upperCase: "Upper case letters (A-Z)"
        // },
        // successMessage: "Your password has been reset successfully.",
        // configurationError: "An error occurred. There appears to be a misconfiguration in the form.",
        // networkError: "The server cannot be reached, there is a problem with the network.",
        // timeoutError: "The server cannot be reached, please try again.",
        // serverError: "There was an error processing the password reset.",
        // headerText: "Enter a new password for<br />{email}",
        // title: "Change Password",
        // weakPasswordError: "Password is too weak."
        // passwordHistoryError: "Password has previously been used."
      }
    });

Por ejemplo, el fragmento de plantilla de ejemplo a continuación muestra la variable tenant.picture_url. Esta variable devuelve el valor de la URL del logotipo definido en Dashboard > Settings.

new Auth0ChangePassword({
      theme: {
        icon: "{{tenant.picture_url | default: '//cdn.auth0.com/styleguide/1.0.0/img/badge.png'}}",
      }
    });

Auth0 obtiene el logotipo de la URL y lo muestra en la pantalla de restablecimiento de contraseña. Si Auth0 no puede acceder a la URL, mostrará la imagen predeterminada.

​

Variables personalizadas

Puedes usar las siguientes variables personalizadas para mostrar información personalizada en la página de restablecimiento de contraseña:

Variable	Descripción
email	La dirección de correo electrónico del usuario que solicita el cambio de contraseña
ticket	El ticket que representa la solicitud de restablecimiento de contraseña dada
csrf_token	Token usado para evitar actividad de CSRF
tenant.name	El nombre asociado a tu inquilino de Auth0
tenant.friendly_name	El nombre que se muestra para tu inquilino de Auth0
tenant.picture_url	La URL que lleva al logotipo que te representa en Auth0
tenant.support_email	La dirección de correo electrónico de soporte de tu empresa que se muestra a tus usuarios de Auth0
tenant.support_url	La URL de soporte de tu empresa que se muestra a tus usuarios de Auth0
lang	El idioma del usuario
password_policy	La política de seguridad de la conexión activa. Puedes ver cuál es en https://manage.auth0.com/#/connections/database/con_YOUR-CONNECTION-ID/security. Asegúrate de proporcionar el ID de tu conexión en la URL.)
password_complexity_options	Objeto que contiene la configuración de los requisitos de complejidad de la contraseña
min_length	La longitud mínima requerida para las contraseñas recién creadas. Puede variar entre 1 y 128 caracteres

Notas:

• Puedes establecer o comprobar los valores de las variables de tu inquilino en la sección Settings de Dashboard > Settings.
• No puedes hacer que las personalizaciones sean condicionales en función del ID de la aplicación (client_id).

​

Mensajes de error personalizados

Si el script de tu base de datos personalizada devuelve un error personalizado, puedes asignarle una descripción mediante la propiedad dict:

new Auth0ChangePassword({
  // ...otras opciones
  dict: {
    yourCustomError: 'This is a custom error message'
  }
});

function changePassword(email, newPassword, callback) {
  callback(new ValidationError('yourCustomError'));
}

​

Actualizar la pantalla de restablecimiento de contraseña

Si no habilita la personalización de la página de restablecimiento de contraseña, Auth0 se encargará de las actualizaciones necesarias del script, incluidos los cambios en el número de versión de la pantalla de restablecimiento de contraseña incluida.

Cuando habilita la personalización de la página de restablecimiento de contraseña, asume la responsabilidad de actualizar y mantener el script. Esto incluye actualizar el número de versión de la pantalla de restablecimiento de contraseña. Con la personalización habilitada, Auth0 no puede actualizar su script automáticamente sin correr el riesgo de interferir con los cambios que haya realizado.

La versión actual de la pantalla de restablecimiento de contraseña es la 1.5.5. Use este enlace para cargar la versión más reciente, incluidas las futuras actualizaciones de versiones secundarias:

https://cdn.auth0.com/js/change-password-1.5.min.js

​

Revertir cambios

Para restablecer la página de restablecimiento de contraseña a un diseño anterior, puedes:

• Volver a la última plantilla guardada haciendo clic en Reset to Last.
• Volver a la plantilla predeterminada proporcionada por Auth0 haciendo clic en Reset to Default.

​

Más información

• Personalice las páginas de Classic Login
• Personalice MFA para Classic Login