Passer au contenu principal
Dans ce tutoriel, nous allons expliquer comment utiliser auth0.js ou les API Auth0 pour obtenir des informations sur le consentement, puis enregistrer ces informations dans les métadonnées de l’utilisateur. Pour en savoir plus, lisez Comprendre le fonctionnement des métadonnées dans les profils utilisateurs. Si vous préférez suivre le consentement en utilisant Lock, consultez RGPD : Track Consent with Lock (Suivre le consentement avec Lock). 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.
Le contenu de ces documents ne constitue pas un avis juridique et ne doit pas être considéré comme un substitut à 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 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 :
  • consentGiven (true/false) indique si l’utilisateur a donné son consentement (true) ou non (false);
  • consentTimestamp (horodatage Unix) indique quand l’utilisateur a donné son consentement.
Par exemple : 
{
  "consentGiven": "true"
  "consentTimestamp": "1525101183"
}
Nous allons voir quatre implémentations différentes :
  1. Celle qui affiche un drapeau, fonctionne pour 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 apprendre davantage, consultez Auth0.js v9 Reference.
  2. Celle qui affiche un drapeau, fonctionne pour les connexions de base de données et utilise Authentication API pour créer l’utilisateur (utilisée par les applications Web classiques).
  3. Celle qui affiche un drapeau, fonctionne pour les connexions sociales et utilise Management API pour mettre à jour les informations de l’utilisateur (utilisée soit par des applications monopages ou des applications Web classiques).
  4. Celle qui redirige vers une autre page où les informations sur les conditions générales et/ou la politique de confidentialité peuvent être consultées et où les informations relatives au consentement peuvent être fournies (utilisée soit par des applications monopages soit par des applications Web classiques).

​
Option 1 : Utiliser auth0.js

Dans cette section, nous utiliserons une simple application monopage et personnaliserons le gadget logiciel de connexion pour ajouter un drapeau que les utilisateurs pourront utiliser pour fournir des informations relatives au consentement. Au lieu de créer une application de zéro, nous allons utiliser l’exemple Guide rapide JavaScript d’Auth0. Nous utiliserons également les pages Connexion universelle 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. Cela fonctionne uniquement pour les connexions de base de données (nous utiliserons l’infrastructure Auth0, au lieu de définir notre propre base de données).
  1. Accédez à Auth0 Dashboard > Applications > Applications et créez une nouvelle application. Choisissez le type Applications Web à page unique. 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.
  2. Copiez les valeurs ID client et Domaine. Vous en aurez bientôt besoin.
  3. Accédez à Auth0 Dashboard > Authentication (Authentification) > Database (Base de données) et créez à nouveau une connexion. Cliquez sur Create DB Connection (Créer une connexion par base de données), choisissez un nom pour la nouvelle connexion, puis cliquez sur Save (Enregistrer). Accédez à l’onglet Applications de la connexion et vérifiez que l’application que vous venez de créer est bien activée.
  4. Téléchargez l’exemple d’application JavaScript à page unique.
  5. Définissez les valeurs d’ID client et de domaine.
  6. Accédez à Auth0 Dashboard > Branding (Image de marque) > Universal Login (Connexion universelle. Dans l’ongletLogin (Connexion), activez le bouton bascule.
  7. Dans le menu déroulant  Default Templates (Modèles par défaut) assurez-vous que Custom Login Form (Formulaire de connexion personnalisé) 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 reducted for simplicity
	var databaseConnection = 'test-db';
	//code reducted for simplicity
  9. Pour ajouter un champ pour les métadonnées consentGiven , ajoutez une case à cocher dans le formulaire. Dans le cadre de notre exemple, nous configurerons la case à cocher comme étant cochée par défaut et désactivée afin que l’utilisateur ne puisse pas la décocher. Vous pouvez ajuster cela en fonction des besoins de votre entreprise. 
    //code reducted for simplicity
    <div class="form-group">
      <label for="name">I consent with data processing</label>
      <input
        type="checkbox"
        id="userConsent"
        checked disabled>
    </div>
    //code reducted for simplicity
  10. Modifiez la fonction d’inscription pour définir les métadonnées. Notez que nous définissons la valeur des métadonnées sur une chaîne avec la valeur true et non sur une valeur booléenne, et que nous utilisons toString pour convertir le nombre en chaîne. Cela est dû à une restriction du point de terminaisonSignup endpoint d’Authentication API qui n’accepte que des chaînes comme valeurs. 
    //code reducted for simplicity
    webAuth.redirect.signupAndLogin({
      connection: databaseConnection,
      email: email,
      password: password,
      user_metadata: { consentGiven: 'true', consentTimestamp: Date.now().toString() }
    }, function(err) {
      if (err) displayError(err);
    });
    //code reducted for simplicity
  11. Pour voir à quoi ressemblera le gadget logiciel de connexion, cliquez sur l](/docs/images/Preview (Aperçu)** .
Dashboard Branding Universal Login Classic Login Tab Custom Login Form
  1. Pour tester cette configuration, exécutez l’application et allez à http://localhost:3000. Inscrivez-vous en tant que nouvel utilisateur. Ensuite, accédez à Auth0 Dashboard > User Management (Gestion des utilisateurs) > Users (Utilisateurs), et recherchez votre nouvel utilisateur. Accédez à User Details (Détails de l’utilisateur) et faites défiler l’écran vers le bas jusqu’à la section Metadata (Métadonnées). Dans la zone de texte user_metadata vous devez voir les métadonnées consentGiven définies sur true.

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

Si vous servez votre page de connexion à partir de votre propre serveur, alors vous pouvez appeler directement le point de terminaison Signup d’Authentication API une fois l’utilisateur inscrit. En ce qui concerne le même scénario dont nous avons discuté jusqu’à présent, une fois que vous inscrivez un nouvel utilisateur, vous pouvez utiliser le fragment de code 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 la date/heure à laquelle l’utilisateur a donné son consentement. Notez que nous définissons la valeur des métadonnées sur une chaîne avec la valeur true et non sur une valeur booléenne en raison de la restriction d’API qui admet les chaînes comme valeurs et pas les booléens. Si la définition de valeurs booléennes est une exigence pour vous, vous pouvez plutôt utiliser . Dans ce scénario, vous inscrivez votre utilisateur comme d’habitude puis vous appelez le point de terminaison Update User (Mettre à jour l’utilisateur) de Management API pour définir les métadonnées requises après création de l’utilisateur. Pour plus d’informations sur la façon de procéder, lisez le paragraphe suivant.

​
Option 3 : Utiliser l’API (social)

Si vous utilisez des connexions sociales, alors vous ne pouvez pas utiliser Authentication API pour créer l’utilisateur sur Auth0, vu que ce point de terminaison ne fonctionne que pour les connexions de base de données. Ce que vous devez plutôt faire, c’est permettre à votre utilisateur de s’inscrire auprès du fournisseur social (ce qui créera un enregistrement d’utilisateur dans Auth0), puis utiliser Management API pour mettre à jour les informations de l’utilisateur. Avant d’appeler Management API, vous devez disposer d’un jeton d’accès. Pour en savoir plus, lisez Obtenir des jetons d’accès à Management API pour la production. L’article cité utilise le Flux des identifiants client pour obtenir un jeton, que vous ne pouvez pas utiliser à partir d’une application fonctionnant sur le navigateur. Le flux Implicite est recommandé. Pour en savoir plus sur le Flux des identifiants client, consultez Flux des identifiants client. Pour en savoir plus sur le flux Implicite, lisez Flux implicite. Définissez le paramètre de requête  sur https://YOUR_DOMAIN/api/v2/ et le paramètre scope sur la permission create:current_user_metadata. Vous pouvez utiliser le jeton d’accès que vous recevrez dans la réponse pour appeler le point de terminaison Mettre à jour l’utilisateur de Management API. Une fois que vous disposez d’un jeton valide, utilisez le fragment de code suivant pour mettre à jour les métadonnées de l’utilisateur. Notez que pour effectuer cet appel, vous devez connaître l’user_id unique. Vous pouvez le récupérer à partir de la demande sub du jeton d’ID, si vous en avez reçue une dans la réponse. Pour en savoir plus, lisez Jetons d’ID. Si vous ne disposez que de l’adresse courriel, vous pouvez récupérer l’ID en appelant un autre point de terminaison de Management API. Pour en savoir plus, lisez Meilleures pratiques de recherche d’utilisateurs.

​
Option 4 : Rediriger vers une autre page

Si vous souhaitez afficher plus d’informations à votre utilisateur, vous pouvez le rediriger vers une autre page lors de l’inscription, où vous demanderez son consentement et toute information supplémentaire, puis le rediriger à nouveau pour finaliser le processus d’authentification. Cela peut être fait avec des règles de redirection. Cette même règle peut être utilisée pour enregistrer les informations de consentement dans les métadonnées de l’utilisateur, afin que vous puissiez suivre ces informations et ne pas demander de consentement lors de la prochaine connexion. Pour en savoir plus, veuillez consulter l’article Rediriger les utilisateurs à partir des règles. Vous devrez héberger ce formulaire, et l’URL de ce formulaire devra être accessible publiquement. Vous allez devoir fournir l’URL où le formulaire peut être accessible à Auth0 à une étape ultérieure de ce tutoriel.
  1. Ajoutez la règle de redirection. Accédez à Auth0 Dashboard > Auth Pipeline (Pipeline Auth) > Rules (Règles), et cliquez sur Create Rule (Créer une règle). Dans Rules Templates (Modèles de règles), sélectionnez empty rule (règle vide). Changez le nom de la règle par défaut de règle vide à quelque chose de descriptif (par exemple, Rediriger vers le formulaire de consentement.
  2. Ajoutez le code JavaScript suivant dans l’éditeur de scripts, puis sélectionnez Save (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");
  }
};
  3. Revenez à Auth0 Dashboard > Auth0 Pipeline > Rules (Règles) et faites défiler vers le bas de la page jusqu’à la section Settings (Paramètres). Créez une paire clé/valeur comme suit :
    1. Clé : CONSENT_FORM_URL
    2. Valeur : your-consent-form-url.com
Veillez à fournir l’URL de votre formulaire de consentement accessible publiquement. 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 Intégrité des données portant sur les questions de sécurité. 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. Nous avons terminé la partie portant sur la configuration, passons au test!

​
Tester la configuration

  1. Exécutez l’application et allez à https://localhost:3000.
  2. Inscrivez-vous en tant que nouvel utilisateur. Vous serez redirigé vers le formulaire de consentement.
  3. Cochez l’option I agree (J’accepte) et cliquez sur Submit (Soumettre).
  4. Allez à Auth0 Dashboard > User Management (Gestion des utilisateurs) > Users (Utilisateurs), et recherchez votre nouvel utilisateur.
  5. Allez à User Details (Détails de l’utilisateur) et faites défiler l’écran vers le bas jusqu’à la section Metadata (Métadonnées).
  6. Dans la zone de texte user_metadata, vous devez voir les métadonnées consentGiven définies sur true et consentTimestamp définies sur l’horodatage Unix du moment où l’utilisateur a consenti.
Vous avez terminé!