Casos de uso: Configura un formulario de perfil progresivo con Forms

Aprende a configurar un formulario de perfil progresivo con Forms for Actions

Antes de comenzar

1. Crea 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. Agrega una conexión de Vault con las credenciales de la aplicación M2M.

Forms for Actions te permite crear flujos de perfil progresivo para decidir cuándo solicitar a los usuarios información faltante, como el nombre de la empresa y el cargo, y almacenarla como atributos de user_metadata.

En las siguientes secciones se describe cómo crear un formulario de perfil progresivo con nodos y flujos, junto con los pasos para agregarlo a una Action Post Login.

​

Crear un formulario desde cero

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

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

De forma predeterminada, un formulario nuevo contiene un nodo Start, un nodo Step y un nodo de pantalla de finalización.

​

Configurar el nodo Step

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

1. Arrastre un campo de Rich text desde el menú Components al nodo Step.

   • Rich text: Introduzca un mensaje personalizado.

     • Ejemplo: ¡Complete su perfil! Necesitamos que complete su perfil para personalizar su experiencia.

   • Seleccione Save.

2. Arrastre un campo de Text al nodo Step.

   • ID: Introduzca company_name.
   • Label: Active la casilla.
   • Label: Introduzca Company name.
   • Required: Active la casilla.
   • Seleccione Save.

3. Arrastre un campo de Text al nodo Step.

   1. ID: Introduzca job_title.
   2. Label: Introduzca Job title.
   3. Label: Active la casilla.
   4. Required: Active la casilla.
   5. Seleccione Save.

4. Seleccione Publish para guardar.

​

Configura el nodo de flujo

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.

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

4. Vincula el nodo Flow a los nodos Step y Ending Screen, como se muestra a continuación.

5. Selecciona Publish para guardar.

Agrega una acción de Auth0 para actualizar el usuario al flujo siguiendo estos pasos:

1. Selecciona el flujo Update user_metadata y, a continuación, selecciona Edit Flow para abrir el editor de flujo en una pestaña nueva.

2. Debajo de la acción Start, selecciona el icono + para agregar una acción Update user. Completa los siguientes campos y, luego, selecciona Save para continuar.

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

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

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

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

   • Selecciona Save.

3. Selecciona Publish para guardar.

​

Obtén el código de renderizado del formulario

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

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

​

Crear una Action de Post Login

Cree una Action de post-login para renderizar el formulario siguiendo estos pasos:

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

2. Seleccione el icono + y, a continuación, Build from scratch:

   • Nombre: Escriba Render Progressive Profile 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 inserción del formulario en el editor de código.

3. Edite el código para definir la lógica condicional que renderizará 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 se pueden usar para cambiar el comportamiento del inicio de sesión.
   */
   exports.onExecutePostLogin = async (event, api) => {
     const FORM_ID = 'REPLACE_WITH_YOUR_FORM_ID';
   
     if (
       event.stats.logins_count > 2 &&
       !event.user.user_metadata.company_name &&
       !event.user.user_metadata.job_title
     ) {
       api.prompt.render(FORM_ID);
     }
   }
   
   exports.onContinuePostLogin = async (event, api) => { }
   
   El código de ejemplo anterior renderizará el formulario cuando un usuario tenga más de 2 inicios de sesión y no tenga las propiedades company_name y job_title en los metadatos del usuario.

4. Seleccione Deploy.

5. Arrastre y suelte la Action Render Progressive Profile Form en el flujo Login.

   

6. Seleccione Apply.

​

Probar la implementación

Pruebe la implementación siguiendo estos pasos:

1. Inicie sesión con un usuario existente cuyo número de inicios de sesión sea mayor que 2 y cuyos atributos user_metadata company_name y job_title no tengan valor.
2. La Action de post-login en el flujo Login mostrará el formulario y solicitará la información.
3. Seleccione Auth0 Dashboard > User Management > Users, busque al usuario y verifique que los atributos user_metadata company_name y job_title contengan información.