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

Dans ce tutoriel, nous verrons comment utiliser auth0.js ou les API Auth0 pour demander des informations sur le consentement et enregistrer la réponse dans les métadonnées de l’utilisateur. Pour en savoir plus, consultez Comprendre le fonctionnement des métadonnées dans les profils d’utilisateur. Si vous souhaitez plutôt faire le suivi du consentement avec Lock, consultez RGPD : faire le suivi du consentement avec Lock. Le contenu de ce document n’est pas destiné à fournir des conseils juridiques 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 à satisfaire aux exigences du RGPD lorsque cela est possible.

Le contenu de ces documents n’est pas destiné à fournir des conseils juridiques 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 à satisfaire aux exigences du RGPD lorsque cela est possible.

Vue d’ensemble

Nous recueillerons les informations relatives 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 (vrai/faux) indique si l’utilisateur a donné son consentement (vrai) ou non (faux)
consentTimestamp (horodatage Unix) indique à quel moment l’utilisateur a donné son consentement

Par exemple :

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

Nous verrons quatre implémentations différentes pour cela :

une qui affiche un drapeau, 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 monopages). Pour en savoir plus, consultez la référence Auth0.js v9.
une qui affiche un drapeau, 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)
une qui affiche un drapeau, fonctionne avec les connexions sociales et utilise la Management API pour mettre à jour les renseignements de l’utilisateur (utilisée par les applications monopages ou les applications Web traditionnelles)
une qui redirige vers une autre page où les conditions générales et/ou les renseignements sur la politique de confidentialité peuvent être consultés et où les renseignements relatifs au consentement peuvent être fournis (utilisée par les applications monopages ou les applications Web traditionnelles)

Option 1 : Utiliser auth0.js

Dans cette section, nous utiliserons une application monopage simple et personnaliserons le widget de connexion afin d’ajouter un indicateur que les utilisateurs pourront utiliser pour fournir leur consentement. Au lieu de créer une application à partir de zéro, nous allons utiliser l’exemple de démarrage rapide JavaScript d’Auth0. Nous utiliserons aussi les pages d’Auth0 afin d’implémenter Universal Login, plutôt que 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 la connexion intégrée, consultez Centralized Universal Login vs. Embedded Login. Cela fonctionne uniquement pour les connexions de base de données (nous utiliserons l’infrastructure d’Auth0 plutôt que de configurer notre propre base de données).

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 la valeur de Allowed Callback URLs à http://localhost:3000. Ce champ contient l’ensemble des URL vers lesquelles Auth0 est autorisé à rediriger les utilisateurs après leur authentification. Notre application d’exemple s’exécutera à http://localhost:3000 ; nous définissons donc cette valeur.
Copiez les valeurs Client Id et Domain. Vous en aurez besoin sous peu.
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 nouvelle application est activée.
Téléchargez l’exemple JavaScript SPA.
Définissez les valeurs de Client ID et de Domain.
Accédez à Auth0 Dashboard > Branding > Universal Login. Dans l’onglet Login, activez le bouton bascule.
Dans la liste déroulante Default Templates, assurez-vous que Custom Login Form est sélectionné. Le code est déjà prérempli.
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
```

Pour ajouter un champ pour la métadonnée consentGiven, ajoutez une case à cocher au formulaire. Dans notre exemple, nous configurerons cette case comme 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">Je consens au traitement des données</label>
      <input
        type="checkbox"
        id="userConsent"
        checked disabled>
    </div>
    //code réduit pour simplifier

Modifiez la fonction d’inscription pour définir la métadonnée. Notez que nous définissons la valeur de la métadonnée comme une chaîne de caractères 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 du point de terminaison 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
```
Pour voir à quoi ressemblera le widget de connexion, cliquez sur l’onglet Preview.

Dashboard Branding Universal Login Classic Login Tab Custom Login Form

Pour tester cette configuration, exécutez l’application et accédez à http://localhost:3000. Créez un compte pour un nouvel utilisateur. Ensuite, accédez à Auth0 Dashboard > User Management > Users et recherchez ce nouvel utilisateur. Accédez à 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 vous hébergez votre page de connexion sur votre propre serveur, vous pouvez appeler directement le point de terminaison Signup de la Authentication API une fois que l’utilisateur s’est inscrit. Dans le même scénario que celui décrit jusqu’ici, 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 ayant la valeur true et non comme une valeur booléenne, en raison de la restriction de l’API, qui accepte des chaînes comme valeurs, et non des booléens. Si vous devez absolument définir des valeurs booléennes, vous pouvez plutôt utiliser la . Dans ce scénario, vous inscrivez l’utilisateur comme d’habitude, puis vous appelez le 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. Si vous utilisez des connexions sociales, vous ne pouvez pas utiliser l’Authentication API pour créer l’utilisateur sur Auth0, car ce point de terminaison fonctionne uniquement avec 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 d’utilisateur dans Auth0), puis utiliser la Management API pour mettre à jour les informations 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 en lien utilise le Client Credentials Flow pour obtenir un jeton, mais vous ne pouvez pas l’utiliser à partir d’une application qui s’exécute 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 sur https://YOUR_DOMAIN/api/v2/ et le paramètre scope sur create:current_user_metadata. Vous pouvez utiliser le que vous recevrez dans la réponse pour appeler le point de terminaison Update User endpoint 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 cet appel, vous devez connaître le user_id unique. Vous pouvez l’obtenir à partir de la revendication sub du , si vous en avez reçu un dans la réponse. Pour en savoir plus, consultez ID Tokens. Sinon, si vous n’avez que le courriel, vous pouvez récupérer l’identifiant en appelant un autre point de terminaison du Management API. Pour en savoir plus, consultez User Search Best Practices.

Option 4 : Rediriger vers une autre page

Si vous souhaitez afficher davantage d’informations à votre utilisateur, vous pouvez, au moment de l’inscription, le rediriger vers une autre page où vous lui demanderez son consentement ainsi que tout renseignement supplémentaire, puis le rediriger de nouveau afin de terminer la transaction d’authentification. Cela peut se faire à l’aide de règles de redirection. Cette même règle peut servir à enregistrer l’information de consentement dans les métadonnées de l’utilisateur afin que vous puissiez en assurer le suivi et ne pas redemander le consentement lors de 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.

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 descriptif (par ex., Redirect to consent form).

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'on ne lui redemande pas
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");
  }
};

Revenez à Auth0 Dashboard > Auth0 Pipeline > Rules et faites défiler jusqu’au bas de la page, à la section Settings. Créez une paire clé/valeur comme suit :
1. Key : CONSENT_FORM_URL
2. Value : 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 une utilisation dans un environnement de production, assurez-vous de consulter Trusted Callback URLs et Data Integrity pour connaître les considérations de sécurité. Si vous avez besoin d’une demande de consentement particulière, par exemple un consentement parental, vous devez créer votre propre formulaire de consentement personnalisé. Sachez que les lois varient selon les pays. La configuration est maintenant terminée, passons au test !

Tester la configuration

Exécutez l’application, puis accédez à https://localhost:3000.
Inscrivez-vous avec un nouvel utilisateur. Vous serez redirigé vers le formulaire de consentement.
Cochez l’option I agree, puis cliquez sur Submit.
Accédez à Auth0 Dashboard > User Management > Users, puis recherchez votre nouvel utilisateur.
Accédez à User Details, puis faites défiler la page jusqu’à la section Metadata.
Dans la zone de texte user_metadata, vous devriez voir la métadonnée consentGiven définie sur true et consentTimestamp définie sur l’horodatage Unix correspondant au moment où l’utilisateur a donné son consentement.

C’est tout, vous avez terminé !

​Vue d’ensemble

​Option 1 : Utiliser auth0.js

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

​Option 3 : Utiliser l’API (social)

​Option 4 : Rediriger vers une autre page

​Tester la configuration

Vue d’ensemble

Option 1 : Utiliser auth0.js

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

Option 3 : Utiliser l’API (social)

Option 4 : Rediriger vers une autre page

Tester la configuration