> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> Découvrez comment configurer un formulaire de profil progressif à l’aide de Forms pour Actions
# Cas d’utilisation : Configurer un formulaire de profil progressif à l’aide de Forms
1. Créez une [application Machine-to-Machine](/fr-CA/docs/get-started/auth0-overview/create-applications/machine-to-machine-apps) avec les scopes suivants activés :
* `read:users`
* `update:users`
* `create:users`
* `read:users_app_metadata`
* `update:users_app_metadata`
* `create:users_app_metadata`
2. Ajoutez une [connexion Vault](/fr-CA/docs/customize/forms/vault) à l’aide des identifiants de l’application M2M.
Forms pour Actions vous permet de créer des flux de profilage progressif afin de déterminer à quel moment demander aux utilisateurs de fournir les renseignements manquants, comme le nom de leur entreprise et leur titre de poste, puis de les stocker dans des 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](/fr-CA/docs/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger).
## 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 **Créer un formulaire** > **Partir de zéro**.
Par défaut, un nouveau formulaire contient un nœud Start, un nœud Step et un nœud d’écran de fin.
### Configurer le nœud Step
Le nœud Step est l’interface graphique que les utilisateurs voient. Ajoutez des [champs](/fr-CA/docs/customize/forms/nodes-and-components) au nœud Step pour recueillir le nom de l’entreprise de l’utilisateur et son titre de poste en suivant les étapes ci-dessous :
1. Faites glisser un champ **Rich text** du **menu Components** dans le nœud **Step**.
* **Rich text** : Entrez un message personnalisé.
* **Exemple** : `Complete your profile! We need you to complete your profile to personalize your experience.`
* Sélectionnez **Save**.
2. Faites glisser un champ **Text** dans le nœud **Step**.
* **ID** : Entrez `company_name`.
* **Label** : Cochez la case.
* **Label** : Entrez `Company name`.
* **Required** : Cochez la case.
* Sélectionnez **Save**.
3. Faites glisser un champ **Text** dans le nœud **Step**.
1. **ID** : Entrez `job_title`.
2. **Label** : Entrez `Job title`.
3. **Label** : Cochez la case.
4. **Required** : Cochez la case.
5. Sélectionnez **Save**.
4. Sélectionnez **Publish** 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 du **éditeur de formulaire**.
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. 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 de mise à jour de l’utilisateur au flux en suivant ces étapes :
1. Sélectionnez le flux **Update user\_metadata**, puis sélectionnez **Edit Flow** pour ouvrir le **Flow editor** 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.
* **Connexion** : Dans la liste déroulante, sélectionnez la connexion Vault de votre application M2M.
* **ID utilisateur** : 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`.
```json lines theme={null}
{
"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 afficher le formulaire avec une Action Post Login personnalisée en suivant les étapes suivantes :
* Dans l’éditeur de formulaires, sélectionnez **`<> Render`**.
* Sélectionnez **Copier**.
## 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** :
* **Nom** : Entrez `Render Progressive Profile Form`.
* **Déclencheur** : Sélectionnez `Login / Post Login`.
* **Environnement d’exécution** : 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 d’intégration du formulaire dans l’éditeur de code.
3. Modifiez le code pour définir la logique conditionnelle qui affichera le formulaire.
```javascript lines theme={null}
/**
* @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.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 affichera le formulaire lorsqu’un utilisateur s’est connecté plus de deux fois et que les propriétés `company_name` et `job_title` sont absentes des métadonnées utilisateur.
4. Sélectionnez **Deploy.**
5. Faites glisser l’Action **Render Progressive Profile Form** dans le flux **Login**.
6. Sélectionnez **Apply**.
### Tester l’implémentation
Testez l’implémentation 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 dans le flux de connexion affichera le formulaire et demandera ces renseignements.
3. Sélectionnez **Auth0 Dashboard > Gestion des utilisateurs > Utilisateurs,** repérez l’utilisateur et vérifiez que les attributs `user_metadata` `company_name` et `job_title` contiennent des renseignements.