Aprenda a personalizar la página de inicio de sesión para la experiencia 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 Personalizaciones avanzadas para Universal Login.
Classic Login es una experiencia de inicio de sesión alojada en Auth0 que se basa en JavaScript para personalizar las páginas.Desde el , puede configurar opciones básicas de personalización que se aplican a todas las páginas de inicio de sesión. Para una personalización avanzada, puede modificar directamente la plantilla HTML de una o varias páginas.Además, puede administrar el contenido de su página mediante el sistema de control de versiones que prefiera.
Logotipo de la empresa (tamaño recomendado: 150 x 150 píxeles)
Color principal
Color de fondo
De forma predeterminada, esta configuración afecta a todas las páginas de Classic Login, como la pantalla de inicio de sesión o la página de restablecimiento de contraseña. Si modifica directamente la plantilla HTML de una o más páginas y edita algún atributo relacionado con estas opciones, esos atributos tendrán prioridad sobre esta configuración.
Cuando habilita la personalización para una página específica, asume la responsabilidad de mantener esa página, ya que dejará de recibir actualizaciones automáticas de Auth0. Este mantenimiento incluye actualizar los números de versión de los SDK o widgets de Auth0 incluidos.Dado que la página de inicio de sesión suele procesar información confidencial relacionada con la seguridad, la introducción de vulnerabilidades de secuencias de comandos entre sitios (XSS) es motivo de preocupación. Además, si su organización usa home realm discovery junto con Classic Login, una lista de las conexiones disponibles queda visible públicamente en la propiedad Auth0.setClient. Teniendo esto en cuenta, Auth0 le recomienda extremar la precaución al usar JavaScript de terceros en su página de inicio de sesión.
Active el interruptor Customize Page ubicado en la parte superior de la pestaña.
Repita los pasos 2 y 3 según sea necesario.
Después de habilitar la personalización de una página, puede modificar su plantilla HTML en el editor de código ubicado debajo del interruptor.
Si habilita la personalización para inspeccionar el código de la página, pero decide no personalizarla, asegúrese de desactivar el interruptor Customize Page al finalizar para que Auth0 pueda mostrar las páginas predeterminadas.
Puede usar estas bibliotecas en Classic Login o integrarlas directamente en una aplicación. Para comprender mejor cómo puede personalizar la experiencia de inicio de sesión, consulte la documentación de la biblioteca que prefiera.
Si planea usar la página de inicio de sesión predeterminada y solo necesita realizar cambios mínimos, puede usar la plantilla de Lock para modificar el comportamiento del widget Lock en la página de inicio de sesión.Por ejemplo, puede configurar el widget Lock para que:
Dirija a los usuarios a la página de registro en lugar de a la página de inicio de sesión de forma predeterminada
Personalice la página de inicio de sesión con distintos colores, textos o idiomas predeterminados
Muestre a los usuarios solo uno o varios métodos de inicio de sesión específicos
Para obtener más información sobre cómo personalizar el widget Lock, consulte Lock Configuration Options.
Plantilla de formulario de inicio de sesión personalizado
Si desea modificar significativamente la página de inicio de sesión, puede usar la plantilla Custom Login Form como guía. Esta plantilla le muestra cómo obtener los valores que necesita con el SDK de Auth0.js. Luego, puede modificar el estilo y el diseño de la página de inicio de sesión como desee. Cualquier personalización de CSS debe estar en línea, ya que no puede alojar un archivo CSS independiente en su inquilino de Auth0.
Autenticar
Administrar usuarios
Personalizar
Auth0 AI
Plataforma