Cas d’utilisation : Configurer des étapes d’inscription supplémentaires à l’aide de Forms

Forms for Actions vous permet d’ajouter des étapes supplémentaires à vos flux d’inscription ou de login, et de les rendre obligatoires avant que les utilisateurs puissent accéder à votre application. Les sections ci-dessous expliquent comment créer des formulaires pour ajouter des étapes d’inscription supplémentaires à l’aide de nœuds et de flux, ainsi que la marche à 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 afin de 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 visible par les utilisateurs. Ajoutez des champs au nœud Step pour recueillir le nom complet et le titre du poste de l’utilisateur en suivant ces étapes :

1. Faites glisser un champ Texte enrichi du menu Components vers le nœud Step.
   • Texte enrichi : Saisissez un message personnalisé.
   • Sélectionnez Enregistrer.
2. Faites glisser un champ Texte vers le nœud Step.
   • ID : Saisissez full_name.
   • Étiquette : Saisissez Full name.
   • Étiquette : Cochez la case.
   • Obligatoire : Cochez la case.
   • Sélectionnez Enregistrer.
3. Faites glisser un champ Texte vers le nœud Step.
   • ID : Saisissez job_title.
   • Étiquette : Saisissez Job title.
   • Étiquette : Cochez la case.
   • Obligatoire : Cochez la case.
   • Sélectionnez Enregistrer.
4. Sélectionnez Publier pour enregistrer.

​

Configurer le nœud Flow

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.
   • Entrez Update user_metadata dans le champ Name.
   • Sélectionnez Create.
   • Sélectionnez Save.
4. Liez 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 Flow Update user_metadata > Edit flow pour ouvrir l’éditeur de flux dans un nouvel onglet.
2. Sous StartAction, 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 vers votre application M2M.
   • User ID : Entrez {{context.user.user_id}}.
   • Body : Copiez-collez le code suivant pour mettre à jour user_metadata avec les propriétés full_name et job_title.
     {
       "user_metadata": {
         "full_name": "{{fields.full_name}}",
         "job_title": "{{fields.job_title}}"
       }
     }
     
   • Sélectionnez Save.
3. Sélectionnez Publish pour enregistrer.

​

Récupérez le code de rendu de votre formulaire

Récupérez le code de rendu de votre formulaire pour afficher le formulaire visuellement à 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 Additional Signup 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 de code.
2. Collez le code de rendu du formulaire dans l’éditeur de 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 du processus de connexion.
   */
   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) => { }
   
   L’exemple de code ci-dessus affichera le formulaire si les propriétés full_name et job_title sont absentes des métadonnées utilisateur.
4. Sélectionnez Deploy.
5. Glissez-déposez l’Action Render Additional Signup Form dans le flux Login.
   
6. Sélectionnez Apply.

​

Tester la mise en œuvre

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

• Inscrivez un nouvel utilisateur à une application.
• L’Action post-login dans le flux de Login affichera le formulaire et demandera ces renseignements.
• Sélectionnez Auth0 Dashboard > User Management > Users, repérez le nouvel utilisateur et vérifiez que ses attributs full_name et job_title contiennent les renseignements saisis à l’étape d’inscription supplémentaire.