Casos de uso: Configurar pasos adicionales de registro con Forms

Aprenda a configurar pasos adicionales de registro con Forms for Actions

Antes de empezar

1. Cree una aplicación de máquina a máquina con los siguientes alcances habilitados:

• read:users
• update:users
• create:users
• read:users_app_metadata
• update:users_app_metadata
• create:users_app_metadata

2. Agregue una conexión de Vault con las credenciales de la aplicación M2M.

Forms for Actions le permite crear pasos adicionales en los flujos de registro o inicio de sesión y hacerlos obligatorios antes de permitir que los usuarios accedan a su aplicación.

Las secciones siguientes describen cómo crear formularios con pasos adicionales de registro mediante nodos y flujos, junto con los pasos para agregar su formulario a una Action de Post Login.

​

Crear un formulario desde cero

Sigue estos pasos para crear un formulario y recopilar información:

1. Abre el editor de formularios seleccionando Auth0 Dashboard > Actions > Forms.
2. Selecciona Create Form > Start from scratch.

De forma predeterminada, un formulario nuevo contiene un nodo Start, un nodo Step y un nodo de pantalla final.

​

Configurar el nodo Step

El nodo Step es la interfaz gráfica que ven los usuarios. Agrega Fields al nodo Step para recopilar el nombre completo y el cargo del usuario siguiendo estos pasos:

1. Arrastra un campo de Rich text desde el menú Components hasta el nodo Step.

   • Rich text: Introduce un mensaje personalizado.
   • Selecciona Save.

2. Arrastra un campo de Text hasta el nodo Step.

   • ID: Introduce full_name.
   • Label: Introduce Full name.
   • Label: Activa la casilla.
   • Required: Activa la casilla.
   • Selecciona Save.

3. Arrastra un campo de Text hasta el nodo Step.

   • ID: Introduce job_title.
   • Label: Introduce Job title.
   • Label: Activa la casilla.
   • Required: Activa la casilla.
   • Selecciona Save.

4. Selecciona Publish para guardar.

​

Configura el nodo Flow

Agrega un nodo Flow después del nodo Step para actualizar user_metadata y reanudar el flujo de autenticación siguiendo estos pasos:

1. Selecciona Flow en la parte inferior del editor de formularios.

2. Elimina el vínculo existente entre los nodos Step y Ending Screen.

3. Selecciona el nuevo Flow > Click to add a flow > Create a new flow.

   • Ingresa Update user_metadata en el campo Name.
   • Selecciona Create.
   • Selecciona Save.

4. Vincula el nodo Flow con los nodos Step y Ending Screen, como se muestra en la siguiente imagen.

5. Selecciona Publish para guardar.

Agrega una Action de Auth0 para actualizar el usuario al flujo siguiendo estos pasos:

1. Selecciona Flow Update user_metadata > Edit flow para abrir el editor de Flow en una pestaña nueva.

2. Debajo de StartAction, selecciona el ícono + para agregar una Action de Update user. Completa los siguientes campos y luego selecciona Save para continuar.

   • Connection: Selecciona en la lista desplegable la conexión de Vault de tu aplicación M2M.

   • User ID: Ingresa {{context.user.user_id}}.

   • Body: Copia y pega el siguiente código para actualizar user_metadata con las propiedades full_name y job_title.

     {
       "user_metadata": {
         "full_name": "{{fields.full_name}}",
         "job_title": "{{fields.job_title}}"
       }
     }
     

   • Selecciona Save.

3. Selecciona Publish para guardar.

​

Obtén el código de renderizado de tu formulario

Obtén el código de renderizado de tu formulario para mostrarlo con una Action personalizada de Post Login siguiendo estos pasos:

• En el editor de formularios, selecciona <> Render.
• Selecciona Copy.

​

Crear una Action Post Login

Cree una Action de post-login para mostrar su formulario siguiendo estos pasos:

1. Vaya a Auth0 Dashboard > Actions > Flows > Login.

2. Seleccione el icono + y luego Build from scratch:

   • Nombre: Introduzca Render Additional Signup Form.
   • Trigger: Seleccione Login / Post Login.
   • Runtime: Seleccione la versión recomendada.

3. Seleccione Create.

Para configurar la Action de post-login:

1. Elimine el código existente del editor de código.

2. Pegue el código de renderizado del formulario en el editor de código.

3. Edite el código para definir la lógica condicional que mostrará el formulario.

   /**
   * @param {Event} event - Detalles sobre el usuario y el contexto en el que inicia sesión.
   * @param {PostLoginAPI} api - Interfaz cuyos métodos pueden usarse para cambiar el comportamiento del inicio de sesión.
   */
   exports.onExecutePostLogin = async (event, api) => {
     const FORM_ID = 'REPLACE_WITH_YOUR_FORM_ID';
   
     if (
       !event.user.user_metadata.full_name &&
       !event.user.user_metadata.job_title
     ) {
       api.prompt.render(FORM_ID);
     }
   }
   
   exports.onContinuePostLogin = async (event, api) => { }
   
   El código de ejemplo anterior mostrará el formulario cuando falten las propiedades full_name y job_title en los metadatos del usuario.

4. Seleccione Deploy.

5. Arrastre y suelte la Action Render Additional Signup Form en el flujo Login.

   

6. Seleccione Apply.

​

Probar la implementación

Pruebe la implementación siguiendo estos pasos:

• Registre un nuevo usuario en una aplicación.
• La Action de post-login en el flujo Login mostrará el formulario y solicitará esta información.
• Seleccione Auth0 Dashboard > User Management > Users, localice el nuevo usuario y verifique que sus atributos full_name y job_title contengan la información del paso adicional de registro.