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. A menos que tu caso de uso específico requiera la experiencia de Classic Login, se recomienda implementar Universal Login. Para consultar una comparación de funcionalidades entre las experiencias de inicio de sesión, revisa Universal Login vs. Classic Login.
Recomendamos migrar la implementación de tu pantalla de Classic Login a Universal Login mediante personalización avanzada para Universal Login (ACUL).

Antes de comenzar

Necesitas:
  • Un inquilino de desarrollo de Auth0 configurado con Universal Login y un dominio personalizado.
  • Auth0 CLI instalado y configurado con tu inquilino de desarrollo.
  • Un repositorio de GitHub para alojar tus pantallas de inicio de sesión personalizadas de ACUL.
  • Un inventario de los recursos de tu experiencia de Classic Login:
    • Componentes de la interfaz de usuario.
    • Tokens de CSS o del tema y recursos de marca.
    • Reglas de validación (formato del correo electrónico, campos obligatorios).
    • Comportamiento del manejo de errores.

Inicializa un proyecto de ACUL

Si no has configurado tu inquilino de desarrollo con Auth0 CLI, usa el comando auth0 login.
Ve a la ubicación donde quieras crear tu proyecto de ACUL y ejecuta el siguiente comando:
auth0 acul init acul-login --screens login-id,login-password
Auth0 CLI inicializa su proyecto con las pantallas de autenticación login-id y login-password predefinidas. Para obtener más información, consulte Auth0 ACUL en GitHub.

Personaliza las pantallas de ACUL

Personaliza las pantallas login-id y login-password para ajustarlas a los estándares de tu organización. Debes tener en cuenta lo siguiente:
  • Reutiliza el CSS/tema y los componentes de React existentes.
    • Aplica la marca (recursos, tipografía, diseño).
    • Agrega validación básica del lado del cliente (correo electrónico obligatorio y con formato válido; contraseña obligatoria).
    • Estandariza la presentación de errores (uniforme y accesible).
Puedes desarrollar tus pantallas de ACUL localmente para personalizarlas mediante el comando:
auth0 acul dev
Para obtener más información, lea Flujo de trabajo de desarrollo de ACUL.

Validar la migración de ACUL

Para validar la experiencia completa de inicio de sesión del usuario, puede usar el comando auth0 acul:
auth0 acul dev --connected
Debe probar y asegurarse de lo siguiente:
  • Que el flujo de autenticación use su interfaz de usuario personalizada para las pantallas login-id y login-password, y que estas se muestren correctamente.
    • Que los mensajes de error por contraseña incorrecta y otros errores del lado del servidor se muestren claramente.
    • Que los usuarios sean redirigidos correctamente de vuelta a su aplicación.
    • Que la validación del correo electrónico, si está habilitada, funcione como se espera.
Para obtener más información, lea pruebas de integración de ACUL con un inquilino activo.

Implementa las pantallas de ACUL en el inquilino de producción

El proyecto de pantallas de ACUL incluye una configuración de implementación que puedes usar como punto de partida para implementar tus pantallas en producción. Los pasos de implementación de ACUL incluyen:
  • Compilar los paquetes de recursos de tus pantallas.
    • Publicarlos en tu CDN.
    • Habilitar ACUL en tu inquilino de producción de Auth0.
Para obtener más información, consulta el flujo de trabajo de implementación de ACUL.

Más información