> ## 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écrit comment personnaliser Lock pour recueillir des renseignements sur le consentement # RGPD : Consigner le consentement avec Lock Dans ce tutoriel, nous verrons comment utiliser Lock pour demander des renseignements sur le consentement, puis enregistrer ces données dans les métadonnées de l’utilisateur. Pour en savoir plus, consultez [Comprendre le fonctionnement des métadonnées dans les profils utilisateur](/docs/fr-ca/manage-users/user-accounts/metadata). Si vous souhaitez plutôt consigner le consentement à l’aide d’une interface utilisateur personnalisée, consultez [RGPD : Consigner le consentement avec une interface utilisateur personnalisée](/docs/fr-ca/secure/data-privacy-and-compliance/gdpr/gdpr-track-consent-with-custom-ui). Le contenu de ce document ne constitue **pas** un avis juridique et ne doit pas non plus être considéré comme un substitut à une assistance juridique. Il vous incombe en dernier ressort de comprendre le RGPD et de vous y conformer, bien qu’Auth0 vous aide, dans la mesure du possible, à respecter les exigences du RGPD. Le contenu de ces documents ne constitue pas un avis juridique et ne doit pas non plus être considéré comme un substitut à une assistance juridique. Il vous incombe en dernier ressort de comprendre le RGPD et de vous y conformer, bien qu’Auth0 vous aide, dans la mesure du possible, à respecter les exigences du RGPD.
## Vue d’ensemble
Nous allons configurer une application monopage JavaScript simple et une connexion de base de données (nous utiliserons l’infrastructure d’Auth0 au lieu de configurer notre propre base de données). Au lieu de créer une application à partir de zéro, nous allons [utiliser l’exemple Quickstart JavaScript d’Auth0](/docs/fr-ca/quickstart/spa/vanillajs). Nous utiliserons aussi les pages Universal Login d’Auth0 afin de mettre en place une expérience Universal Login, au lieu d’intégrer la connexion à notre application. Pour en savoir plus sur Universal Login, consultez [Auth0 Universal Login](/docs/fr-ca/authenticate/login/auth0-universal-login). Pour en savoir plus sur les différences entre Universal Login et Embedded Login, consultez [Centralized Universal Login vs. Embedded Login](/docs/fr-ca/authenticate/login/universal-vs-embedded-login). Nous allons recueillir des renseignements sur le consentement dans divers scénarios et les enregistrer dans les métadonnées de l’utilisateur. Tous les scénarios enregistreront les propriétés suivantes dans les métadonnées de l’utilisateur : * une propriété `consentGiven`, avec des valeurs true/false, indique si l’utilisateur a donné son consentement (true) ou non (false) * une propriété `consentTimestamp`, contenant l’horodatage Unix du moment où l’utilisateur a donné son consentement Par exemple : ```json lines theme={null} { "consentGiven": "true" "consentTimestamp": "1525101183" } ``` Nous verrons trois mises en œuvre différentes pour cela : * une qui affiche des liens vers d’autres pages où l’on peut consulter les Conditions générales et/ou la politique de confidentialité * une qui ajoute des champs personnalisés dans le widget d’inscription et qui fonctionne avec les connexions de base de données * une qui redirige vers une autre page où l’utilisateur peut donner son consentement et qui fonctionne avec les connexions sociales
## Configurer l’application
1. Allez à [Auth0 Dashboard > Applications > Applications](https://manage.auth0.com/#/applications) et créez une nouvelle application. Choisissez le type `Single Web Page Applications`. 2. Allez à **Settings** et définissez les **Allowed Callback URLs** à `http://localhost:3000`. Ce champ contient l’ensemble des URL vers lesquelles Auth0 est autorisé à rediriger les utilisateurs après l’authentification. Notre application d’exemple s’exécutera à `http://localhost:3000`, donc nous définissons cette valeur. 3. Copiez les valeurs **Client Id** et **Domain**. Vous en aurez besoin dans un instant. 4. Allez à [Auth0 Dashboard > Authentication > Database](https://manage.auth0.com/#/connections/database) et créez une nouvelle connexion. Cliquez sur **Create DB Connection**, donnez un nom à la nouvelle connexion, puis cliquez sur **Save**. Vous pouvez aussi activer une connexion sociale à [Auth0 Dashboard > Authentication > Social](https://manage.auth0.com/#/connections/social) (nous allons activer la connexion Google dans le cadre de ce tutoriel). 5. Allez dans l’onglet **Applications** de la connexion et assurez-vous que votre nouvelle application est activée. 6. [Téléchargez l’exemple JavaScript SPA](/docs/fr-ca/quickstart/spa/vanillajs). Dans cette section, nous allons personnaliser le widget de connexion pour ajouter une case que les utilisateurs doivent cocher afin de s’inscrire. Le libellé de cette case comprendra des liens vers des pages affichant les conditions générales et la politique de confidentialité. Cela fonctionne à la fois pour les connexions de base de données et les connexions sociales. 1. Accédez à [Auth0 Dashboard > Branding > Universal Login](https://manage.auth0.com/#/login_page). 2. Sélectionnez la vue **Login** et activez la bascule **Customize Login Page**. 3. Repérez la liste déroulante **Default Templates**, puis sélectionnez `Lock`. Le bloc de code sera prérempli pour vous. 4. Pour ajouter un champ pour la métadonnée `consentGiven`, utilisez l’option `mustAcceptTerms`. Pour inclure des liens vers vos pages de conditions générales et/ou de politique de confidentialité, utilisez l’option `languageDictionary`. Pour en savoir plus, consultez [Lock Configuration Options](/docs/fr-ca/libraries/lock/lock-configuration). L’exemple ci-dessous affiche le texte `I agree to the terms of service and privacy policy` (y compris les liens vers les deux pages) à côté de la case : ```javascript lines theme={null} //code réduit pour simplifier var lock = new Auth0Lock(config.clientID, config.auth0Domain, { auth: { //code réduit pour simplifier }, languageDictionary: { signUpTerms: "I agree to the terms of service and privacy policy." }, mustAcceptTerms: true, //code réduit pour simplifier }); ``` Pour voir le résultat, sélectionnez la vue **Preview** ; une fois Lock chargé, sélectionnez **Sign Up**. 5. Cette case oblige les utilisateurs à accepter les conditions avant de pouvoir s’inscrire, mais elle ne définit aucune métadonnée. Pour enregistrer le choix de l’utilisateur dans la propriété de métadonnées `consentGiven`, [créez une nouvelle Action](/docs/fr-ca/customize/actions/write-your-first-action). Entrez un **Name** descriptif pour votre Action (par exemple, `Set consent flag upon signup`), sélectionnez le trigger `Login / Post Login` puisque vous ajouterez l’Action au Login flow, puis sélectionnez **Create**. 6. L’écran suivant correspond à l’Actions Code Editor. Copiez-y le code JavaScript suivant, puis sélectionnez **Save Draft** pour enregistrer vos modifications : ```text lines theme={null} exports.onExecutePostLogin = async (event, api) => { const { consentGiven } = event.user.user_metadata || {}; // arrêter immédiatement si l’utilisateur est déjà inscrit if ( consentGiven ) { return; } // première connexion/inscription api.user.setUserMetadata("consentGiven", true); api.user.setUserMetadata("consentTimestamp", Date.now()); return; } ``` Ce code définit la métadonnée `consentGiven` à `true` si elle n’est pas déjà définie (ce qui signifie qu’il s’agit de la première connexion après l’inscription). 7. Dans la barre latérale de l’Actions Code Editor, sélectionnez Test (icône de lecture), puis sélectionnez **Run** pour [tester votre code](/docs/fr-ca/customize/actions/test-actions). 8. Lorsque vous êtes prêt à déployer l’Action, sélectionnez **Deploy**. Enfin, ajoutez l’Action que vous avez créée au [Login Flow](https://manage.auth0.com/#/actions/flows/login/). Pour apprendre à rattacher des Actions à des Flows, consultez la section « Attach the Action to a flow » dans [Write Your First Action](/docs/fr-ca/customize/actions/write-your-first-action).
## Option 2 : Ajouter des champs personnalisés pour les connexions de base de données
Dans cette section, nous allons personnaliser le widget de connexion pour ajouter une case que les utilisateurs cocheront s’ils acceptent le traitement de leurs renseignements. Cette option fonctionne uniquement pour les connexions de base de données (si vous utilisez des connexions sociales, consultez le paragraphe suivant). 1. Accédez à [Auth0 Dashboard > Branding > Universal Login](https://manage.auth0.com/#/login_page). 2. Sélectionnez la vue **Login** et activez la bascule **Customize Login Page**. 3. Repérez la liste déroulante **Default Templates** et sélectionnez `Lock`. Le bloc de code sera prérempli. 4. Pour ajouter un champ aux métadonnées `consentGiven`, utilisez l’option `additionalSignUpFields`. Pour en savoir plus, consultez [Lock Configuration Options](/docs/fr-ca/libraries/lock/lock-configuration). Dans l’exemple ci-dessous, le type est défini sur `checkbox` (afin d’avoir un indicateur), le libellé sur `I consent to data processing` et la valeur par défaut sur `checked`. ```javascript lines theme={null} //code réduit pour simplifier var lock = new Auth0Lock(config.clientID, config.auth0Domain, { auth: { //code réduit pour simplifier }, additionalSignUpFields: [{ type: "checkbox", name: "consentGiven", prefill: "true", placeholder: "I consent to data processing" }], //code réduit pour simplifier }); ``` 5. Pour voir le résultat, sélectionnez la vue **Preview** et, lorsque Lock se charge, sélectionnez **Sign Up**. Notez que, dans cette option, nous définissons uniquement l’indicateur, et non l’horodatage. Afficher l’heure actuelle dans le widget de connexion n’est pas idéal; c’est pourquoi nous n’avons pas ajouté de champ d’inscription supplémentaire. Il est préférable de définir l’horodatage en arrière-plan, avec une Rule qui vérifiera la valeur de `consentGiven` et ajoutera aux métadonnées `consentTimestamp` l’horodatage actuel.
## Option 3 : Rediriger vers une autre page
Si vous utilisez des connexions sociales, il n’est pas possible d’ajouter des champs personnalisés, mais vous pouvez rediriger l’utilisateur vers une autre page pour lui demander son consentement et tout renseignement supplémentaire, puis le rediriger de nouveau afin de terminer la transaction d’authentification. Cela peut se faire avec les Actions de redirection. Pour en savoir plus, consultez [Redirect with Actions](/docs/fr-ca/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/redirect-with-actions). Nous utiliserons cette même Action pour enregistrer les renseignements de consentement dans les métadonnées de l’utilisateur, afin de pouvoir les suivre et d’éviter de redemander le consentement lors de la prochaine connexion. Par souci de simplicité, nous utiliserons un [exemple de formulaire de consentement](https://github.com/auth0/rules/blob/master/redirect-rules/simple/webtask.js#L31). Vous devrez héberger ce formulaire, et son URL devra être accessible publiquement. Vous devrez fournir à Auth0 l’URL à laquelle le formulaire est accessible à l’étape 2. Si vous avez besoin d’un écran de consentement spécialisé (par exemple, un consentement parental), vous devez créer votre propre formulaire de consentement personnalisé. Sachez que les lois varient selon le pays. 1. [Créez une nouvelle Action](/docs/fr-ca/customize/actions/write-your-first-action). Entrez un **nom** descriptif pour votre Action (par exemple, `Redirect to consent form`), sélectionnez le déclencheur `Login / Post Login` puisque vous ajouterez l’Action au Login flow, puis sélectionnez **Create**. 2. Repérez le Actions Code Editor, puis sélectionnez l’icône **Secrets** (clé) dans sa barre latérale. Ajoutez l’URL du formulaire de consentement comme Secret en créant une paire clé-valeur : * **Clé** : `CONSENT_FORM_URL` * **Valeur** : `your-consent-form-url.com` (Assurez-vous de fournir l’URL accessible publiquement où se trouve votre formulaire de consentement.) 3. Copiez le code JavaScript suivant dans le Actions Code Editor, puis sélectionnez **Save Draft** pour enregistrer vos modifications : ```text lines theme={null} exports.onExecutePostLogin = async (event, api) => { const { consentGiven } = event.user.user_metadata || {}; // rediriger vers le formulaire de consentement si l’utilisateur n’a pas encore consenti if (!consentGiven && api.redirect.canRedirect()) { const options = { query: { auth0_domain: `${event.tenant.id}.auth0.com`, }, }; api.redirect.sendUserTo(event.secrets.CONSENT_FORM_URL, options); } }; // si l’utilisateur clique sur 'I agree' dans le formulaire de consentement, l’enregistrer dans son profil afin qu’il ne reçoive plus l’invite exports.onContinuePostLogin = async (event, api) => { if (event.request.body.confirm === "yes") { api.user.setUserMetadata("consentGiven", true); api.user.setUserMetadata("consentTimestamp", Date.now()); return; } else { return api.access.deny("User did not consent"); } }; ``` 4. Dans la barre latérale du Actions Code Editor, sélectionnez Test (icône de lecture), puis sélectionnez **Run** pour [tester votre code](/docs/fr-ca/customize/actions/test-actions). 5. Lorsque vous êtes prêt à mettre l’Action en service, sélectionnez **Deploy**. Enfin, ajoutez l’Action que vous avez créée au [Login Flow](https://manage.auth0.com/#/actions/flows/login/). Pour apprendre à rattacher des Actions à des Flows, consultez la section « Attach the Action to a flow » dans [Write Your First Action](/docs/fr-ca/customize/actions/write-your-first-action). Lorsque vous configurez la redirection vers votre formulaire de consentement pour une utilisation dans un environnement Production, assurez-vous de consulter [Trusted Callback URLs](https://github.com/auth0/rules/tree/master/redirect-rules/simple#trusted-callback-urls) et [Data Integrity](https://github.com/auth0/rules/tree/master/redirect-rules/simple#data-integrity) pour les considérations de sécurité. Nous avons terminé la partie configuration; passons au test !
## Testez la configuration
1. Accédez au dossier où vous avez téléchargé l’application et exécutez-la. ```text lines theme={null} npm install npm run ``` 2. Allez à `http://localhost:3000`. Cliquez sur **Login**. Une fois que Lock s’affiche, cliquez sur **Sign Up**. La login page sera accessible par défaut à l’adresse `YOUR_DOMAIN/login`. Pour savoir comment utiliser votre propre domain, consultez [Custom Domains](/docs/fr-ca/customize/custom-domains). 3. Si vous avez suivi la première option de mise en œuvre, vous devriez voir la case à cocher pour accepter les conditions d’utilisation et la politique de confidentialité. Notez que le bouton **Sign Up** reste désactivé tant que vous n’avez pas coché la case. Suivez les liens pour vérifier qu’ils fonctionnent. Saisissez une adresse courriel et un mot de passe, acceptez les conditions, puis cliquez sur **Sign Up**. Sinon, si vous utilisez une connexion sociale, acceptez les conditions et choisissez **Sign Up with Google**. 4. Si vous avez suivi la deuxième option de mise en œuvre, vous devriez voir le nouveau champ personnalisé que nous avons ajouté. Saisissez une adresse courriel et un mot de passe, puis laissez cochée la case `I consent to data processing`. Cliquez sur **Sign Up**. 5. Si vous avez suivi la troisième option de mise en œuvre, choisissez **Sign Up with Google**. Vous serez redirigé vers le formulaire de consentement. Cochez la case **I agree** et cliquez sur **Submit**. Si vous ne cochez pas la case **I agree** avant de cliquer sur **Submit**, une erreur dans une fenêtre contextuelle s’affichera : `Unauthorized. Check the console for details.`. Dans la console, vous verrez ce JSON : ```json lines theme={null} { error: "unauthorized", errorDescription: "User did not consent!", state: "q0GjMwzZN_q5r8XPHvfakkMYcYM2q1N3" } ``` Notez que l’utilisateur est créé, mais il ne pourra pas se connecter. S’il essaie, il sera de nouveau invité à donner son consentement. 6. Accédez à [Auth0 Dashboard > User Management > Users](https://manage.auth0.com/#/users) et recherchez le nouvel utilisateur. 7. Accédez à **User Details** et faites défiler jusqu’à la section **Metadata**. Dans la zone de texte **user\_metadata**, vous devriez voir ce qui suit : ```json lines theme={null} { "consentGiven": "true" "consentTimestamp": "1525101183" } ``` C’est tout, vous avez terminé !