RGPD : Suivre le consentement avec Lock

Dans ce tutoriel, nous allons expliquer comment utiliser Lock pour obtenir des informations sur le consentement, puis enregistrer ces informations dans les métadonnées de l’utilisateur. Pour en savoir plus, consultez Comprendre le fonctionnement des métadonnées dans les profils utilisateurs.

Si vous préférez suivre le consentement en utilisant une interface utilisateur personnalisée, consultez RGPD : Suivre le consentement avec l’interface utilisateur personnalisée.

Le contenu de ce document ne constitue pas un avis juridique et ne remplace pas l’assistance juridique. C’est à vous qu’il incombe en dernier ressort de comprendre et de respecter le RGPD, mais Auth0 vous aidera à satisfaire aux exigences du RGPD dans la mesure du possible.

Présentation

Nous allons configurer une application JavaScript à page unique simple et une connexion par base de données (nous utiliserons l’infrastructure Auth0 au lieu de configurer notre propre base de données).

Au lieu de créer une application de zéro, nous allons utiliser l’exemple Guide rapide JavaScript d’Auth0. Nous utiliserons d’autre part les pages Universal Login (Connexion universelle) d’Auth0 afin de pouvoir implémenter une expérience de connexion universelle au lieu d’intégrer la connexion dans notre application. Pour en savoir plus sur la connexion universelle, consultez Connexion universelle Auth0. Pour en savoir plus sur les différences entre la connexion universelle et la connexion intégrée, consultez Connexion universelle centralisée par rapport à la Connexion intégrée.

Nous capturerons les informations de consentement dans divers 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 :

  • une propriété consentGiven, avec valeurs true/false, qui indique si l’utilisateur a donné son consentement (true) ou non (false);

  • une propriété consentTimestamp, contenant l’horodatage Unix correspondant au moment où l’utilisateur a donné son consentement

Par exemple :

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

Was this helpful?

/

Nous allons voir trois implémentations différentes :

  • Une implémentation qui affiche des liens vers d’autres pages pour réviser les Conditions d’utilisation et/ou la politique de confidentialité.

  • Une implémentation qui ajoute des champs personnalisés au gadget logiciel d’inscription et qui fonctionne pour les connexions par base de données.

  • Une implémentation qui redirige vers une autre page dans laquelle l’utilisateur peut donner son consentement et qui peut servir pour les connexions par les réseaux sociaux.

Configurer l’application

  1. Accédez à Auth0 Dashboard > Applications > Applications et créez une nouvelle application. Choisissez le type Applications Web à page unique.

  2. Accédez à Paramètres et définissez les URL de rappel autorisées 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 sur http://localhost:3000 : c’est la raison pour laquelle nous définissons cette valeur.

  3. Copiez les valeurs ID client et Domaine. Vous en aurez bientôt besoin.

  4. Accédez à Auth0 Dashboard > Authentification > Base de données et créez à nouveau une connexion. Cliquez sur Créer une connexion par base de données, choisissez un nom pour la nouvelle connexion, puis cliquez sur Enregistrer. Vous pouvez aussi activer une connexion par les réseaux sociaux dans Auth0 Dashboard > Authentification > Social (nous activerons la connexion par Google pour les besoins de ce tutoriel).

  5. Accédez à l’onglet Applications de la connexion et vérifiez que l’application que vous venez de créer est bien activée.

  6. Téléchargez l’exemple d’application JavaScript à page unique.

Option 1 : Afficher le lien vers les Conditions d’utilisation

Dans cette section, nous allons personnaliser le gadget logiciel de connexion en y ajoutant une option que les utilisateurs doivent activer pour s’inscrire. Le libellé de cette option inclura des liens vers les pages qui affichent les Conditions d’utilisation et la politique de confidentialité.

Cela concerne les connexions par bases de données et les connexions par réseaux sociaux.

  1. Accédez à Auth0 Dashboard > Image de marque > Connexion universelle.

  2. Sélectionnez la vue Connexion, puis activez la bascule Personnaliser la page de connexion.

  3. Repérez le menu déroulant Modèles par défaut et sélectionnez Lock. Le bloc de code sera prérempli.

  4. Pour ajouter un champ pour les métadonnées consentGiven, choisissez l’option mustAcceptTerms. Pour inclure des liens dans vos pages Conditions d’utilisation et/ou Politique de confidentialité, utilisez l’option languageDictionary. Pour en savoir plus, lisez Configuration de Lock. L’exemple ci-dessous affiche le texte J’accepte les conditions de service et la politique de confidentialité (avec des liens à ces deux pages) se rapportant au drapeau :

    //code reducted for simplicity
    var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      auth: {
        //code reducted for simplicity
      },
      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 reducted for simplicity
    });

    Was this helpful?

    /
    Pour voir à quoi cela ressemblera, sélectionnez la vue Aperçu puis, quand Lock se charge, sélectionnez S’inscrire.

  5. Cette option oblige les utilisateurs à accepter les conditions avant de s’inscrire, mais elle ne définit aucune métadonnée. Pour enregistrer la sélection de l’utilisateur dans la propriété de métadonnée consentGiven, créez une nouvelle action. Saisissez un Nom descriptif pour votre Action (par exemple, Set consent flag upon signup), sélectionnez le déclencheur Login / Post Login car vous allez ajouter l’Action au flux de connexion, puis sélectionnez Créer.

  6. L’écran suivant présente l’éditeur de code des actions. Copiez le code JavaScript suivant à l’intérieur et sélectionnez Enregistrer le brouillon pour enregistrer vos modifications : 

    exports.onExecutePostLogin = async (event, api) => {
  const { consentGiven } = event.user.user_metadata || {};

  // short-circuit if the user signed up already
  if ( consentGiven ) {
    return;
  }

  // first time login/signup
  api.user.setUserMetadata("consentGiven", true);
  api.user.setUserMetadata("consentTimestamp", Date.now());
  return;
}

    Was this helpful?

    /
    Ce code définit les métadonnées consentGiven sur true si ce n’est déjà fait (ce qui signifie qu’il s’agit de la première connexion après une inscription).

  7. Dans la barre latérale de l’éditeur de code des actions, sélectionnez Test (icône de lecture), puis sélectionnez Exécuter pour  tester votre code.

  8. Lorsque vous êtes prêt à lancer l’action, sélectionnez Déployer.

Enfin, ajoutez l’action que vous avez créée dans le flux de connexion. Pour savoir comment attacher des actions à des flux, lisez la section Attacher l’action à un flux dans Écrire votre première action.

Option 2 : Ajouter des champs personnalisés à des connexions par bases de données

Dans cette section, nous allons personnaliser le gadget logiciel de connexion pour ajouter une case à cocher que les utilisateurs devront sélectionner s’ils acceptent le traitement de leurs informations.

Cela ne concerne que les connexions par bases de données. Pour les connexions par réseaux sociaux, voir le paragraphe suivant.

  1. Accédez à Auth0 Dashboard > Image de marque > Connexion universelle.

  2. Sélectionnez la vue Connexion, puis activez la bascule Personnaliser la page de connexion.

  3. Repérez le menu déroulant Modèles par défaut et sélectionnez Lock. Le bloc de code sera prérempli.

  4. Pour ajouter un champ pour les métadonnées consentGiven, choisissez l’option additionalSignUpFields. Pour en savoir plus, lisez Configuration de Lock. L’exemple ci-dessous définit le type sur checkbox (un drapeau est donc créé), le libellé sur I consent to data processing et la valeur par défaut sur checked. 

    //code reducted for simplicity
    var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      auth: {
        //code reducted for simplicity
      },
      additionalSignUpFields: [{
        type: "checkbox",
        name: "consentGiven",
        prefill: "true",
        placeholder: "I consent to data processing"
      }],
      //code reducted for simplicity
    });

    Was this helpful?

    /

  5. Pour voir à quoi cela ressemblera, sélectionnez la vue Aperçu puis, quand Lock se charge, sélectionnez S’inscrire.

Notez que dans ce scénario, nous ne définissons que l’option, et non pas l’horodatage. Nous ne conseillons pas d’afficher la date/heure dans le gadget logiciel de connexion. Nous n’avons donc pas ajouté de champ d’inscription supplémentaire. Vous pouvez cependant définir l’horodatage en arrière-plan, avec une règle qui vérifiera la valeur de consentGiven et définira les métadonnées consentTimestamp supplémentaires avec l’horodatage actuel.

Option 3 : Rediriger vers une autre page

Si vous utilisez des connexions à des réseaux sociaux, l’ajout de champs personnalisés n’est pas une option, mais vous pouvez rediriger l’utilisateur vers une autre page où vous demandez son consentement et des informations supplémentaires, puis vous le redirigez pour terminer la transaction d’authentification. Cela peut être fait avec des Actions de redirection. Pour en savoir plus, consultez Rediriger avec des actions. Nous allons utiliser cette même Action pour enregistrer les informations de consentement dans les métadonnées de l’utilisateur, afin de suivre ces informations et ne pas avoir à les demander lors de la prochaine connexion.

Pour des raisons de simplicité, nous utiliserons un exemple de formulaire de consentement. Vous devrez héberger ce formulaire, et l’URL de ce formulaire devra être accessible publiquement. Vous devrez indiquer l’URL où le formulaire sera accessible par Auth0 à l’Étape 2. Si vous avez besoin d’une invite de consentement spécialisée (par exemple, le consentement parental), vous devez créer votre propre formulaire de consentement personnalisé. Sachez que les lois varient selon les pays.

  1. Créer à nouveau une Action. Saisissez un Nom descriptif pour votre Action (par exemple, Redirect to consent form), sélectionnez le déclencheur Login/Post Login , car vous allez ajouter l’Action au flux de connexion, puis sélectionnez Créer.

  2. Repérez l’éditeur de code des actions et sélectionnez l’icône Secrets (clé) dans la barre latérale correspondante. Ajoutez l’URL du formulaire de consentement en tant que Secret en créant une paire clé/valeur :

    • Clé : CONSENT_FORM_URL

    • Valeur : your-consent-form-url.com (veillez à fournir l’URL de votre formulaire de consentement accessible publiquement).

  3. Copiez le code JavaScript suivant dans l’éditeur de code des actions, puis sélectionnez Enregistrer le brouillon pour enregistrer vos modifications :

    exports.onExecutePostLogin = async (event, api) => {
    const { consentGiven } = event.user.user_metadata || {};

    // redirect to consent form if user has not yet consented
    if (!consentGiven && api.redirect.canRedirect()) {
      const options = {
        query: {
          auth0_domain: `${event.tenant.id}.auth0.com`,
        },
      };
      api.redirect.sendUserTo(event.secrets.CONSENT_FORM_URL, options);
    }
};

// if user clicks 'I agree' on the consent form, save it to their profile so they don't get prompted again
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");
  }
};

    Was this helpful?

    /

  4. Dans la barre latérale de l’éditeur de code des actions, sélectionnez Test (icône de lecture), puis sélectionnez Exécuter pour  tester votre code.

  5. Lorsque vous êtes prêt à lancer l’action, sélectionnez Déployer.

Enfin, ajoutez l’action que vous avez créée dans le flux de connexion. Pour savoir comment attacher des actions à des flux, lisez la section Attacher l’action à un flux dans Écrire votre première action.

Lorsque vous définissez la redirection vers votre formulaire de consentement pour une utilisation en environnement de production, n’oubliez pas de consulter URL de rappel de confiance) et Data Integrity (Intégrité des données) portant sur les questions de sécurité.

Nous avons terminé la partie configuration, passons au test!

Tester la configuration

  1. Accédez au dossier où vous avez téléchargé l’application et exécutez-la. 

    npm install
    npm run

    Was this helpful?

    /

  2. Affichez http://localhost:3000. Cliquez sur Connexion. Une fois Lock affiché, cliquez sur S’inscrire. La page de connexion sera présentée par défaut sur YOUR_DOMAIN/login. Pour apprendre à utiliser votre propre domaine, consultez Domaines personnalisés.

  3. Si vous avez suivi la première option d’implémentation, vous devriez voir l’option permettant d’accepter les conditions de service et la politique de confidentialité. Notez que le bouton S’inscrire reste désactivé tant que vous n’avez pas activé l’option. Suivez les liens pour vérifier leur fonctionnement. Définissez une adresse courriel et un mot de passe, puis acceptez les conditions et cliquez sur S’inscrire. Autre option : si vous utilisez une connexion par réseau social, acceptez les conditions et choisissez S’inscrire avec Google.

  4. Si vous avez suivi la deuxième option d’implémentation, le nouveau champ personnalisé que nous avons ajouté devrait apparaître. Définissez une adresse courriel et un mot de passe, puis laissez l’option I consent to data processing activée. Cliquez sur S’inscrire.

  5. Si vous avez suivi la troisième option d’implémentation, choisissez S’inscrire avec Google. Vous serez dirigé vers le formulaire de consentement. Cochez l’option J’accepte et cliquez sur Soumettre.

    Si vous ne cochez pas l’option J’accepte avant de cliquer sur Soumettre, vous verrez s’afficher l’erreur contextuelle Unauthorized. Check the console for details. Sur la console, vous verrez ce JSON : 

    {
      error: "unauthorized", 
      errorDescription: "User did not consent!", 
      state: "q0GjMwzZN_q5r8XPHvfakkMYcYM2q1N3"
    }

    Was this helpful?

    /
    Notez que l’utilisateur est créé mais qu’il ne pourra pas se connecter. S’il essaie de se connecter, il lui sera demandé de donner à nouveau son consentement.

  6. Accédez à Auth0 Dashboard > Gestion des utilisateurs > Utilisateurs, et recherchez le nouvel utilisateur.

  7. Accédez à Détails de l’utilisateur et faites défiler l’écran vers le bas jusqu’à la section Métadonnées. Dans la zone de texte user_metadata, vous devriez voir ce qui suit : 

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

    Was this helpful?

    /

Vous avez terminé!