Saltar al contenido principal
En este momento, los esfuerzos de desarrollo activo de Auth0 se centran en Universal Login, y Classic Login ya no recibe actualizaciones. Para personalizar tus 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 por Auth0 que se basa en JavaScript para la personalización avanzada. Implementar Classic Login es menos complejo que integrar el proceso de autenticación directamente en tu aplicación, y puede ayudar a evitar los riesgos de la autenticación de origen cruzado. De forma predeterminada, la página de Classic Login usa el widget Lock para autenticar usuarios. Sin embargo, también puedes personalizar plantillas para Lock en el modo o usar una interfaz de usuario personalizada creada con el SDK Auth0.js. Para personalizar las plantillas de tu página de Classic Login, primero debes habilitar la personalización avanzada. Para hacerlo, sigue estos pasos:
  1. En el Auth0 Dashboard, ve a Branding > Universal Login > pestaña Login.
  2. Activa el interruptor Customize Login Page.
  3. Encima del editor de código HTML, selecciona el menú Default Templates y elige la opción que quieras.
Las plantillas disponibles incluyen:
  • Lock
  • Lock (sin contraseña)
  • Formulario de inicio de sesión personalizado
Ambas plantillas de Lock te permiten personalizar el widget Lock que se usa para la autenticación. El widget Lock proporciona un conjunto estándar de comportamientos y una interfaz de usuario personalizable. Como alternativa, puedes usar la plantilla Custom Login Form para personalizar tu página de inicio de sesión con el SDK de Auth0 para Web o la Authentication API. Los SDK de Auth0 son bibliotecas del lado del cliente que no ofrecen una interfaz de usuario, pero permiten ampliar la personalización del comportamiento y la apariencia de la página de inicio de sesión. La Authentication API proporciona integración directa sin usar SDK de Auth0. La plantilla que uses para personalizar tu página de inicio de sesión dependerá de las necesidades específicas de tu aplicación. Las secciones siguientes ofrecen una descripción general de cada opción: Lock, los SDK de Auth0 o la Authentication API.

​
Uso del widget Lock

Lock es un formulario de inicio de sesión que facilita que sus usuarios se autentiquen con una conexión seleccionada. Lock gestiona automáticamente la mayoría de los detalles que implica la creación y autenticación de usuarios. Con Lock, implementará una interfaz de usuario que:
  • Es sólida y ofrece una excelente experiencia de usuario en cualquier dispositivo y resolución
  • Tiene un diseño sencillo que encaja con la mayoría de los sitios web con solo unos pequeños ajustes en su color personalizado
  • Se adapta a su configuración y muestra los controles de formulario adecuados para cada conexión disponible, y solo los que están permitidos (como registro o restablecimiento de contraseña)
  • Selecciona automáticamente la conexión correcta. Puede especificar un comportamiento predeterminado para los casos ambiguos
  • Recuerda la última conexión utilizada por un usuario determinado
  • Se adapta automáticamente a la internacionalización
  • Proporciona validación instantánea de la política de contraseñas durante el registro
Aunque no puede modificar significativamente el comportamiento de Lock, puede configurar varias opciones básicas para cambiar su apariencia y comportamiento. Considere usar Lock si:
  • Le gusta la estructura, la apariencia y la experiencia de uso del widget.
  • Prefiere una implementación simplificada de Classic Login con una interfaz de usuario responsive ya preparada.
  • Su proceso incluye muchos de los casos de uso que Lock admite de forma nativa:
    • Inicios de sesión empresariales
    • Bases de datos con políticas de contraseñas
    • Registro de usuarios y restablecimiento de contraseña
    • Autenticación mediante proveedores sociales
    • Avatares

​
Ejemplos de scripts para personalizar el inicio de sesión

El siguiente script de ejemplo personaliza el logotipo de cada aplicación, o bien puedes establecer un logotipo predeterminado. La resolución mínima recomendada es de 200 píxeles de ancho por 200 píxeles de alto. Agrega la configuración logouturl al bloque <scripts>: 
var logourl = "https://example.com/defaultlogo1.png"; //establecer logo predeterminado
if(config.clientID === "HUXwC72R3qr9JJo9ImPsdzJbtY8aD5kS")
{
    logourl = "https://example.com/defaultlogo2.png";
}
theme: {
    logo: logourl,
    primaryColor: colors.primary ? colors.primary : 'green'
},

​
Personaliza los términos de registro

El siguiente ejemplo personaliza los términos de registro de tu aplicación. Puedes agregar texto personalizado para que se muestre cuando los usuarios se registren. 
var languageDictionary;

languageDictionary = {
    signUpTerms: "I agree to the <a href='https://my-app-url.com/terms' target='_blank'>terms of service</a> and <a href='https://my-app-url.com/privacy' target='_blank'>privacy policy</a>."
};

​
Uso del SDK de Auth0 para Web

Si los requisitos de tu aplicación no pueden cubrirse con el comportamiento estandarizado de Lock, o si tienes un proceso de autenticación personalizado complejo, necesitarás una interfaz de usuario personalizada. También puedes preferir esta opción si ya cuentas con una interfaz de usuario que deseas utilizar. Con la biblioteca de Auth0 para Web, puedes personalizar el comportamiento y el flujo del proceso que se utiliza para iniciar el registro y la autenticación. Si lo prefieres, también puedes usar directamente la Authentication API, sin ningún wrapper. A diferencia de Lock, ninguna de estas opciones incluye una interfaz de usuario. Tendrás control total sobre la experiencia de usuario en el flujo de registro y autenticación, así como sobre aspectos de la UI como el diseño, la apariencia, la marca, la internacionalización, la compatibilidad con RTL y más. Considera implementar una interfaz de usuario personalizada junto con una biblioteca de Auth0 o la Authentication API para tu aplicación si:
  • Tienes requisitos estrictos en cuanto a la apariencia de la interfaz de usuario
  • Tienes requisitos estrictos en cuanto al tamaño de los archivos: las bibliotecas de Auth0 son considerablemente más pequeñas que Lock, y si optas por trabajar directamente con la API, no añadirás peso adicional.
  • Te sientes cómodo con HTML, CSS y JavaScript: crearás tu propia UI
  • Solo necesitas gestionar autenticación con username/password y con proveedores sociales
  • Tienes varias Conexiones de base de datos o de Active Directory
También puedes consultar ejemplos específicos del uso de Lock y de los SDK de Auth0 para una amplia variedad de lenguajes de programación y plataformas en nuestros Quickstarts. Estas guías pueden ayudarte aún más a decidir cuál usar según las necesidades específicas de tu aplicación.

​
Más información