Saltar al contenido principal

Antes de comenzar

Necesita lo siguiente:
Auth0 CLI le permite implementar y probar pantallas de personalización avanzada para Universal Login (ACUL). Facilita la personalización de las pantallas de autenticación (como Inicio de sesión, Registro, sin contraseña e inscripción de claves de acceso) para que coincidan a la perfección con sus aplicaciones web. Siga estos pasos para crear un proyecto de ACUL y una pantalla login_id personalizada con Auth0 CLI:

​
1. Inicializa una aplicación de ejemplo de ACUL

Si no has configurado tu inquilino de desarrollo con Auth0 CLI, usa el comando auth0 login para configurarlo.
Ve al directorio donde quieras crear tu proyecto y ejecuta el siguiente comando: 
auth0 acul init "Your_App_Name"
  1. Seleccione React (con el SDK de ACUL React).
  2. Seleccione la pantalla login-id.
  3. En Would you like to proceed with installing the required dependencies using ‘npm install’?, escriba y.
Auth0 CLI crea un nuevo directorio del proyecto con el nombre de la aplicación proporcionado.
Si no seleccionó y para instalar las dependencias necesarias, vaya al directorio del proyecto y ejecute el comando npm install.

​
2. (Opcional) Agrega pantallas adicionales a tu proyecto

Selecciona pantallas adicionales para tu proyecto ejecutando el siguiente comando: 
auth0 acul screen add SCREEN_NAME

​
3. Abra la pantalla Login ID con Universal Login Context Inspector

Use el Universal Login Context Inspector para abrir la pantalla Login ID:
  1. Vaya al directorio de su proyecto y ejecute el siguiente comando:
  auth0 acul dev
  1. Confirme el directorio del proyecto
  2. Seleccione el puerto para compartir los recursos locales; el predeterminado es el puerto 55444
El Universal Login Context Inspector abre una nueva ventana del navegador en la pantalla Login Id.

​
4. Actualiza la pantalla de ejemplo Login Id

El comando auth0 acul dev compila las pantallas de ACUL, aloja tus recursos localmente y detecta continuamente las actualizaciones en el directorio de recursos, lo que te permite probar tus pantallas en local. Para obtener más información, consulta la documentación del comando Auth0 CLI acul.
  1. En el directorio de tu proyecto, edita /src/index.css y actualiza el widget del logotipo con la URL de tu logotipo:
--ul-theme-widget-logo-url: "Your-Logo-URL";
  1. Guarda el cambio.
El servidor de desarrollo local se actualiza automáticamente con el cambio más reciente.

​
5. Personalice los datos de contexto para sus pantallas de autenticación

Con el Universal Login Context Inspector, puede personalizar los datos de contexto predeterminados para probar sus pantallas de autenticación con configuraciones específicas de su inquilino.
  1. Cree una versión local de los datos de contexto simulados para una pantalla de su proyecto:
Seleccione el icono Download JSON para descargar el archivo de datos de contexto simulados.
Página de ACUL de Auth0 Dashboard
  1. Cambie el nombre del archivo descargado, muévalo a public/screens/{prompt}/{screen} y agréguelo al archivo public/manifest.json en el directorio de su proyecto.
Por ejemplo, el archivo descargado login-id-login-id-context.json se cambia de nombre a login-id.json y se mueve a /public/screens/login-id/login-id.json.
  1. Seleccione Local Development en Data source del Universal Login Context Inspector para cargar la versión local del contexto simulado de la pantalla.
Para obtener más información, consulte la documentación de Auth0 CLI ACUL.