> ## 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.
> Apprenez à configurer un formulaire de profil progressif à l’aide de Forms for Actions
# Cas d’utilisation : configurer un formulaire de profil progressif avec Forms
1. Créez une [application machine-to-machine](/docs/fr-ca/get-started/auth0-overview/create-applications/machine-to-machine-apps) avec les portées suivantes activées :
* `read:users`
* `update:users`
* `create:users`
* `read:users_app_metadata`
* `update:users_app_metadata`
* `create:users_app_metadata`
2. Ajoutez une [connexion Vault](/docs/fr-ca/customize/forms/vault) à l’aide des informations d’identification de l’application M2M.
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](/docs/fr-ca/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 **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](/docs/fr-ca/customize/forms/nodes-and-components) 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`.
```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 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.
```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 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.