Passer au contenu principal
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 d’utilisateur. Si vous souhaitez plutôt suivre le consentement à l’aide d’une interface utilisateur personnalisée, consultez RGPD : Suivre le consentement avec une interface utilisateur personnalisée. Le contenu du présent document ne constitue pas un avis juridique et ne doit pas être considéré comme un remplacement d’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, à satisfaire aux exigences du RGPD.
Le contenu de ces documents ne constitue pas un avis juridique et ne doit pas être considéré comme un remplacement d’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, à satisfaire aux exigences du RGPD.

​
Aperçu

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 du guide de démarrage JavaScript d’Auth0. Nous utiliserons aussi les pages d’Auth0 afin d’offrir une expérience Universal Login, plutôt que d’intégrer l’écran de 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. Nous recueillerons des renseignements sur le 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 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 implémentations différentes pour cela :
  • une qui affiche des liens vers d’autres pages où il est possible de consulter les Conditions générales et/ou la politique de confidentialité
  • une qui ajoute des champs personnalisés au 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. Accédez à Auth0 Dashboard > Applications > Applications et créez une nouvelle application. Choisissez Single Web Page Applications comme type.
  2. Accédez à Settings et définissez la valeur de 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 application d’exemple s’exécutera à http://localhost:3000 ; nous définissons donc cette valeur.
  3. Copiez les valeurs ID client et Domaine. Vous en aurez besoin sous peu.
  4. Accédez à Auth0 Dashboard > Authentication > Database et créez une nouvelle connexion. Cliquez sur Create DB Connection, attribuez un nom à la nouvelle connexion, puis cliquez sur Save. Vous pouvez aussi activer une connexion sociale dans Auth0 Dashboard > Authentication > Social (nous activerons la connexion Google aux fins de ce tutoriel).
  5. Accédez à l’onglet Applications de la connexion et assurez-vous que l’application que vous venez de créer est activée.
  6. Téléchargez l’exemple JavaScript SPA.
Dans cette section, nous allons personnaliser le widget de connexion pour ajouter une case à cocher que les utilisateurs devront sélectionner pour 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, puis activez le bouton bascule Customize Login Page.
  3. Repérez la liste déroulante Default Templates, puis sélectionnez Lock. Le bloc de code sera prérempli.
  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 des liens vers les deux pages) à côté de la case à cocher : 
    //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, puis, lorsque Lock se charge, sélectionnez Sign Up.
  5. Cette case à cocher oblige les utilisateurs à accepter les conditions avant de pouvoir s’inscrire, mais elle n’enregistre 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. Saisissez un nom descriptif pour votre Action (par exemple, Set consent flag upon signup), sélectionnez le déclencheur Login / Post Login puisque vous ajouterez l’Action au flux Login, puis sélectionnez Create.
  6. L’écran suivant est l’éditeur de code Actions. 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 || {};

  // quitter 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’éditeur de code Actions, sélectionnez Test (icône de lecture), puis sélectionnez Run pour tester votre code.
  8. Lorsque vous êtes prêt à mettre l’Action en ligne, sélectionnez Deploy.
Enfin, ajoutez l’Action que vous avez créée au Login Flow. Pour savoir comment attacher des Actions aux flux, consultez la section « Attach the Action to a flow » de 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 consentent au traitement de leurs renseignements. Cela 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, puis activez le bouton Customize Login Page.
  3. Repérez la liste déroulante Default Templates, puis sélectionnez Lock. Le bloc de code sera prérempli.
  4. Pour ajouter un champ pour la métadonnée consentGiven, utilisez l’option additionalSignUpFields. Pour en savoir plus, consultez Lock Configuration Options. L’exemple ci-dessous définit le type sur checkbox (pour ajouter une case à cocher), 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, puis, une fois Lock chargé, sélectionnez Sign Up.
Notez que dans cette option, nous définissons uniquement l’indicateur, pas l’horodatage. Afficher l’heure actuelle dans le widget de connexion n’est pas optimal, 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, à l’aide d’une Rule qui vérifiera la valeur de consentGiven et définira la métadonnée supplémentaire consentTimestamp avec 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. Vous pouvez toutefois 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. Vous pouvez le faire avec des Redirect Actions. 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 d’en assurer le suivi et de ne pas redemander le consentement à la prochaine connexion. Par souci de simplicité, nous utiliserons un exemple de formulaire de consentement. Vous devrez héberger ce formulaire, et son URL doit être accessible publiquement. Vous devrez fournir à Auth0, à l’étape 2, l’URL à laquelle le formulaire peut être consulté. 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 d’un pays à l’autre.
  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 flux de connexion, puis sélectionnez Create.
  2. Repérez l’éditeur de code Actions, 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 :
    • Key : CONSENT_FORM_URL
    • Value : 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 l’éditeur de code Actions, 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 donné son consentement
    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 de l’éditeur de code Actions, 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 ligne, sélectionnez Deploy.
Enfin, ajoutez l’Action que vous avez créée au Login Flow. Pour savoir comment associer des Actions aux flux, 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 l’utiliser dans un environnement de production, assurez-vous de consulter Trusted Callback URLs et Data Integrity concernant les considérations de sécurité. Nous avons terminé la 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
  2. Accédez à http://localhost:3000. Cliquez sur Login. Une fois Lock affiché, cliquez sur Sign Up. La page de connexion est affichée par défaut à l’adresse YOUR_DOMAIN/login. Pour savoir comment utiliser votre propre domaine, consultez Custom Domains.
  3. Si vous avez suivi la première option d’implémentation, 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. Entrez un courriel et un mot de passe, acceptez les conditions, puis cliquez sur Sign Up. Sinon, si vous utilisez une connexion sociale, acceptez les conditions, puis choisissez Sign Up with Google.
  4. Si vous avez suivi la deuxième option d’implémentation, vous devriez voir le nouveau champ personnalisé que nous avons ajouté. Entrez un courriel et un mot de passe, puis laissez la case I consent to data processing cochée. Cliquez sur Sign Up.
  5. Si vous avez suivi la troisième option d’implémentation, 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 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 de le faire, il devra de nouveau 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 la page 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é !