Cas d’utilisation : configurer un formulaire de profil progressif avec Forms

Forms for Actions vous permet de créer des flux de profil progressif afin de déterminer à quel moment demander aux utilisateurs de fournir les renseignements manquants, comme le nom de l’entreprise et le titre du poste, et de les stocker comme attributs user_metadata. Les sections ci-dessous expliquent comment créer un formulaire de profil progressif à l’aide de nœuds et de flux, ainsi que les étapes à suivre pour ajouter votre formulaire à une Action Post Login.

​

Créer un formulaire à partir de zéro

Suivez ces étapes pour créer un formulaire et recueillir des renseignements :

1. Ouvrez l’éditeur de formulaires en sélectionnant Auth0 Dashboard > Actions > Forms.
2. Sélectionnez Create Form > Start from scratch.

Par défaut, un nouveau formulaire contient un nœud Start, un nœud Step et un nœud Ending screen.

​

Configurer le nœud Step

Le nœud Step est l’interface graphique que voient les utilisateurs. Ajoutez des champs au nœud Step pour recueillir le nom de l’entreprise et l’intitulé du poste de l’utilisateur en suivant ces étapes :

1. Faites glisser un champ Rich text du menu Components vers le nœud Step.
   • Rich text : Saisissez un message personnalisé.
     • Exemple : Complétez votre profil ! Nous avons besoin de quelques renseignements pour personnaliser votre expérience.
   • Sélectionnez Enregistrer.
2. Faites glisser un champ Text vers le nœud Step.
   • ID : Saisissez company_name.
   • Label : Cochez la case.
   • Label : Saisissez Nom de l’entreprise.
   • Required : Cochez la case.
   • Sélectionnez Enregistrer.
3. Faites glisser un champ Text vers le nœud Step.
   1. ID : Saisissez job_title.
   2. Label : Saisissez Titre du poste.
   3. Label : Cochez la case.
   4. Required : Cochez la case.
   5. Sélectionnez Enregistrer.
4. Sélectionnez Publier pour enregistrer.

​

Configurer le nœud de flux

Ajoutez un nœud Flow après le nœud Step pour mettre à jour user_metadata et reprendre le flux d’authentification en suivant ces étapes :

1. Sélectionnez Flow au bas de l’éditeur de formulaires.
2. Supprimez le lien existant entre les nœuds Step et Ending Screen.
3. Sélectionnez le nouveau Flow > Click to add a flow > Create a new flow.
   • Saisissez Update user_metadata dans le champ Name.
   • Sélectionnez Create.
   • Sélectionnez Save.
4. Reliez le nœud Flow aux nœuds Step et Ending Screen, comme illustré ci-dessous.
5. Sélectionnez Publish pour enregistrer.

Ajoutez une action Auth0 Update user au flux en suivant ces étapes :

1. Sélectionnez le flux Update user_metadata, puis sélectionnez Edit Flow pour ouvrir l’éditeur de flux dans un nouvel onglet.
2. Sous l’action Start, sélectionnez l’icône + pour ajouter une action Update user. Remplissez les champs ci-dessous, puis sélectionnez Save pour continuer.
   • Connection : Dans la liste déroulante, sélectionnez la connexion Vault de votre application M2M.
   • User ID : Saisissez {{context.user.user_id}}.
   • Body : Copiez-collez le code suivant pour mettre à jour user_metadata avec les propriétés job_title et company_name.
     {
        "user_metadata": {
           "job_title": "{{fields.job_title}}",
           "company_name": "{{fields.company_name}}"
        }
     }
     
   • Sélectionnez Save.
3. Sélectionnez Publish pour enregistrer.

​

Récupérer le code de rendu du formulaire

Récupérez le code de rendu du formulaire pour l’afficher à l’aide d’une Action Post Login personnalisée en suivant ces étapes :

• Dans l’éditeur de formulaires, sélectionnez <> Render.
• Sélectionnez Copy.

​

Créer une Action Post Login

Créez une Action post-login pour afficher votre formulaire en suivant ces étapes :

1. Accédez à Auth0 Dashboard > Actions > Flows > Login.
2. Sélectionnez l’icône +, puis Build from scratch :
   • Name : Entrez Render Progressive Profile Form.
   • Trigger : Sélectionnez Login / Post Login.
   • Runtime : Sélectionnez la version recommandée.
3. Sélectionnez Create.

Pour configurer l’Action post-login :

1. Supprimez le code existant dans l’éditeur Code.
2. Collez le code d’intégration du formulaire dans l’éditeur Code.
3. Modifiez le code pour définir la logique conditionnelle qui affichera le formulaire.
   /**
   * @param {Event} event - Détails sur l’utilisateur et le contexte dans lequel il se connecte.
   * @param {PostLoginAPI} api - Interface dont les méthodes peuvent être utilisées pour modifier le comportement de la connexion.
   */
   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) => { }
   
   L’exemple de code ci-dessus affiche le formulaire lorsqu’un utilisateur a un nombre de connexions > 2 et que les propriétés de métadonnées utilisateur company_name et job_title sont absentes.
4. Sélectionnez Deploy.
5. Glissez-déposez l’Action Render Progressive Profile Form dans le Login flow.
   
6. Sélectionnez Apply.

​

Tester la mise en œuvre

Testez la mise en œuvre en suivant ces étapes :

1. Connectez-vous avec un utilisateur existant dont le nombre de connexions est supérieur à 2 et dont les attributs user_metadata company_name et job_title sont vides.
2. L’action post-login du Login flow affichera le formulaire et demandera ces renseignements.
3. Sélectionnez Auth0 Dashboard > User Management > Users, repérez l’utilisateur et vérifiez que les attributs user_metadata company_name et job_title contiennent bien des renseignements.