RGPD : Consigner le consentement avec Lock

Décrit comment personnaliser Lock pour recueillir des renseignements sur le consentement

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.

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.

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. 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. Pour en savoir plus sur les différences entre Universal Login et Embedded Login, consultez Centralized Universal Login 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 :

{
  "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 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 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 (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.

​

Option 1 : Afficher un lien vers les conditions générales

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.

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. 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 :

   //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 <a href='https://my-app-url.com/terms' target='_blank'>terms of service</a> and <a href='https://my-app-url.com/privacy' target='_blank'>privacy policy</a>."
         },
         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. 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 :

   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.

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. Pour apprendre à rattacher des Actions à des Flows, consultez la section « Attach the Action to a flow » dans 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.

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. 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.

   //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. 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. 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. 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 :

   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.

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. Pour apprendre à rattacher des Actions à des Flows, consultez la section « Attach the Action to a flow » dans 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 et 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.

   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.

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 :

   {
         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 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 :

   {
         "consentGiven": "true"
         "consentTimestamp": "1525101183"
       }
   

C’est tout, vous avez terminé !