GDPR : Suivre le consentement avec une interface utilisateur personnalisée

Décrit comment utiliser auth0.js ou les API Auth0 pour recueillir des renseignements sur le consentement lorsque vous utilisez votre propre interface utilisateur personnalisée pour l’ouverture de session.

Dans ce tutoriel, nous verrons comment utiliser auth0.js ou les API Auth0 pour demander des renseignements sur le consentement et enregistrer les données saisies 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 assurer le suivi du consentement à l’aide de Lock, consultez GDPR : Assurer le suivi du consentement avec Lock.

Le contenu de ce document ne constitue pas un avis juridique et ne doit pas non plus être considéré comme une solution de rechange à une assistance juridique. Il vous incombe en dernier ressort de comprendre le GDPR et de vous y conformer, bien qu’Auth0 vous aide, dans la mesure du possible, à respecter ses exigences.

Le contenu de ces documents ne constitue pas un avis juridique et ne doit pas non plus être considéré comme une solution de rechange à une assistance juridique. Il vous incombe en dernier ressort de comprendre le GDPR et de vous y conformer, bien qu’Auth0 vous aide, dans la mesure du possible, à respecter ses exigences.

​

Vue d’ensemble

Nous recueillerons les renseignements liés au consentement dans différents scénarios et les enregistrerons 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 :

• consentGiven (true/false) indique si l’utilisateur a donné son consentement (true) ou non (false)
• consentTimestamp (horodatage Unix) indique à quel moment l’utilisateur a donné son consentement

Par exemple :

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

Nous verrons quatre mises en œuvre différentes pour cela :

1. une qui affiche un indicateur, fonctionne avec les connexions de base de données et utilise la bibliothèque auth0.js pour créer l’utilisateur (utilisée par les applications monopage). Pour en savoir plus, consultez la référence d’Auth0.js.
2. une qui affiche un indicateur, fonctionne avec les connexions de base de données et utilise l’Authentication API pour créer l’utilisateur (utilisée par les applications Web traditionnelles)
3. une qui affiche un indicateur, fonctionne avec les connexions sociales et utilise la Management API pour mettre à jour les renseignements de l’utilisateur (utilisée aussi bien par les SPA que par les applications Web traditionnelles)
4. une qui redirige vers une autre page où les Conditions générales et/ou la politique de confidentialité peuvent être consultées et où les renseignements sur le consentement peuvent être fournis (utilisée aussi bien par les SPA que par les applications Web traditionnelles)

​

Option 1 : Utiliser auth0.js

Dans cette section, nous utiliserons une application monopage simple et personnaliserons le widget de connexion pour y ajouter un indicateur que les utilisateurs pourront utiliser pour fournir des renseignements de consentement. Au lieu de créer une application à partir de zéro, nous utiliserons l’exemple JavaScript du Quickstart d’Auth0. Nous utiliserons également les pages Universal Login d’Auth0 pour mettre en œuvre Universal Login, plutôt que d’intégrer la connexion dans 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 la connexion intégrée, consultez Centralized Universal Login vs. Embedded Login.

Cela fonctionne uniquement avec les connexions de base de données (nous utiliserons l’infrastructure d’Auth0 au lieu de configurer notre propre base de données).

1. Accédez à Auth0 Dashboard > Applications > Applications et créez une nouvelle application. Choisissez Single Web Page Applications comme type. Accédez à Settings et définissez Allowed Callback URLs sur http://localhost:3000.

   Ce champ contient l’ensemble des URL vers lesquelles Auth0 est autorisé à rediriger les utilisateurs après leur authentification. Notre exemple d’application s’exécutera à http://localhost:3000, donc nous définissons cette valeur.

2. Copiez les valeurs Client Id et Domain. Vous en aurez besoin sous peu.

3. Accédez à 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. Accédez à l’onglet Applications de la connexion et assurez-vous que votre application nouvellement créée est activée.

4. Téléchargez l’exemple JavaScript SPA.

5. Définissez les valeurs de Client ID et Domain.

6. Accédez à Auth0 Dashboard > Branding > Universal Login. Dans l’onglet Login, activez le bouton bascule.

7. Dans la liste déroulante Default Templates, assurez-vous que Custom Login Form est sélectionné. Le code est prérempli pour vous.

8. Définissez la valeur de la variable databaseConnection sur le nom de la connexion de base de données utilisée par votre application.

   //code réduit pour simplifier
   	var databaseConnection = 'test-db';
   	//code réduit pour simplifier
   

9. Pour ajouter un champ pour les métadonnées consentGiven, ajoutez une case à cocher au formulaire. Dans notre exemple, nous configurerons la case à cocher pour qu’elle soit cochée par défaut et désactivée, afin que l’utilisateur ne puisse pas la décocher. Vous pouvez ajuster cela selon les besoins de votre entreprise.

   //code réduit pour simplifier
       <div class="form-group">
         <label for="name">I consent with data processing</label>
         <input
           type="checkbox"
           id="userConsent"
           checked disabled>
       </div>
       //code réduit pour simplifier
   

10. Modifiez la fonction d’inscription afin de définir les métadonnées. Notez que nous définissons la valeur des métadonnées comme une chaîne ayant la valeur true, et non comme une valeur booléenne, et que nous utilisons toString pour convertir le nombre en chaîne. Cela est dû à une restriction de l’endpoint Signup de l’Authentication API, qui n’accepte que des chaînes comme valeurs.

    //code réduit pour simplifier
        webAuth.redirect.signupAndLogin({
          connection: databaseConnection,
          email: email,
          password: password,
          user_metadata: { consentGiven: 'true', consentTimestamp: Date.now().toString() }
        }, function(err) {
          if (err) displayError(err);
        });
        //code réduit pour simplifier
    

11. Pour voir à quoi ressemblera le widget de connexion, cliquez sur l’onglet Preview.

1. Pour tester cette configuration, exécutez l’application et accédez à http://localhost:3000. Créez un compte avec un nouvel utilisateur. Ensuite, accédez à Auth0 Dashboard > User Management > Users et recherchez ce nouvel utilisateur. Ouvrez User Details et faites défiler jusqu’à la section Metadata. Dans la zone de texte user_metadata, vous devriez voir la métadonnée consentGiven définie à true.

​

Option 2 : Utiliser l’API (base de données)

Si votre page de connexion est hébergée sur votre propre serveur, vous pouvez alors appeler directement le point de terminaison Signup de l’Authentication API une fois que l’utilisateur s’inscrit.

Dans le même scénario que celui dont nous parlons depuis le début, après l’inscription d’un nouvel utilisateur, vous pouvez utiliser l’extrait suivant pour créer l’utilisateur dans Auth0 et définir les métadonnées. N’oubliez pas de remplacer la valeur du paramètre de requête consentTimestamp par l’horodatage correspondant au moment où l’utilisateur a donné son consentement.

Notez que nous définissons la valeur des métadonnées comme une chaîne de caractères ayant la valeur true, et non comme une valeur booléenne, en raison de la restriction de l’API, qui accepte des chaînes de caractères comme valeurs, et non des booléens.

Si vous devez utiliser des valeurs booléennes, vous pouvez plutôt utiliser la Management API. Dans ce scénario, vous inscrivez votre utilisateur comme d’habitude, puis vous effectuez une requête vers l’point de terminaison Update User de la Management API pour définir les métadonnées requises une fois l’utilisateur créé. Pour savoir comment faire, poursuivez votre lecture : le paragraphe suivant utilise ce point de terminaison.

​

Option 3 : Utiliser l’API (social)

Si vous utilisez des connexions sociales, vous ne pouvez pas utiliser l’Authentication API pour créer l’utilisateur dans Auth0, puisque ce point de terminaison fonctionne uniquement pour les connexions de base de données.

Vous devez plutôt laisser l’utilisateur s’inscrire auprès du fournisseur social (ce qui créera un enregistrement utilisateur dans Auth0), puis utiliser la Management API pour mettre à jour les renseignements de l’utilisateur.

Avant d’appeler la Management API, vous devez obtenir un jeton valide. Pour en savoir plus, consultez Get Management API Access Tokens for Production.

L’article lié utilise le Client Credentials Flow pour obtenir un jeton, mais vous ne pouvez pas l’utiliser à partir d’une application exécutée dans le navigateur. Vous pouvez plutôt utiliser l’Implicit Flow. Pour en savoir plus sur le Client Credentials Flow, consultez Client Credentials Flow. Pour en savoir plus sur l’Implicit Flow, consultez Implicit Flow.

Définissez le paramètre de requête audience à https://YOUR_DOMAIN/api/v2/ et le paramètre scope sur la portée create:current_user_metadata. Vous pouvez utiliser le Access Token que vous recevrez dans la réponse pour appeler le point de terminaison Update User de la Management API.

Une fois que vous avez un jeton valide, utilisez l’extrait suivant pour mettre à jour les métadonnées de l’utilisateur.

Notez que, pour effectuer cette requête, vous devez connaître le user_id unique. Vous pouvez l’obtenir à partir de la revendication sub du ID Token, si vous en avez reçu un dans la réponse. Pour en savoir plus, consultez ID Tokens. Autrement, si vous n’avez que l’adresse courriel, vous pouvez récupérer l’ID en envoyant une requête à un autre point de terminaison de la Management API. Pour en savoir plus, consultez Pratiques exemplaires de User Search.

​

Option 4 : Rediriger vers une autre page

Si vous souhaitez afficher plus d’information à l’utilisateur, vous pouvez, au moment de l’inscription, le rediriger vers une autre page pour lui demander son consentement ainsi que tout renseignement supplémentaire, puis le rediriger de nouveau afin de terminer la transaction d’authentication. Cela peut se faire à l’aide de règles de redirection. Cette même règle peut aussi servir à enregistrer l’information de consentement dans les métadonnées de l’utilisateur afin d’en faire le suivi et d’éviter de redemander son consentement à la prochaine connexion. Pour en savoir plus, consultez Redirect Users from Within Rules.

Vous devrez héberger ce formulaire, et son URL doit être accessible publiquement. Vous devrez fournir à Auth0 l’URL à laquelle le formulaire est accessible à une étape ultérieure de ce tutoriel.

1. Ajoutez la règle de redirection. Accédez à Auth0 Dashboard > Auth Pipeline > Rules, puis cliquez sur Create Rule. Dans Rules Templates, sélectionnez empty rule. Remplacez le nom par défaut de la règle, empty rule, par un nom plus descriptif (par exemple, Redirect to consent form).

2. Ajoutez le code Javascript suivant dans l’éditeur de script, puis cliquez sur Save 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 pour 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");
     }
   };
   

3. Retournez à Auth0 Dashboard > Auth0 Pipeline > Rules, puis faites défiler jusqu’au bas de la page, à la section Settings. Créez une paire clé-valeur comme suit :

   1. Clé : CONSENT_FORM_URL
   2. Valeur : your-consent-form-url.com

Assurez-vous de fournir l’URL accessible publiquement où se trouve votre formulaire de consentement.

Lorsque vous configurez la redirection vers votre formulaire de consentement pour un environnement Production, assurez-vous de consulter Trusted Callback URLs et Data Integrity en ce qui concerne les considérations de sécurité.

Si vous avez besoin d’un consent prompt spécialisé, par exemple un consentement parental, vous devrez créer votre propre formulaire de consentement personnalisé. Notez que les lois varient d’un pays à l’autre.

La configuration est maintenant terminée, passons au test !

​

Testez la configuration

1. Exécutez l’application et allez à https://localhost:3000.
2. Créez un compte avec un nouvel utilisateur. Vous serez redirigé vers le formulaire de consentement.
3. Cochez la case I agree, puis cliquez sur Submit.
4. Allez à Auth0 Dashboard > User Management > Users, puis recherchez votre nouvel utilisateur.
5. Allez à User Details, puis faites défiler jusqu’à la section Metadata.
6. Dans la zone de texte user_metadata, vous devriez voir la métadonnée consentGiven définie à true et la valeur consentTimestamp définie à l’horodatage Unix du moment où l’utilisateur a donné son consentement.

C’est tout, vous avez terminé !