Ajouter la détection des robots aux pages de connexion personnalisées

Découvrez comment activer et configurer la détection des robots lorsque vous utilisez des pages de connexion personnalisées créées avec la bibliothèque auth0.js.

Si vous créez une page de connexion personnalisée à l’aide de la bibliothèque auth0.js, vous pouvez activer la détection des robots afin d’afficher une étape CAPTCHA lorsqu’Auth0 détermine qu’une requête présente un risque élevé.

Le code de votre formulaire de connexion personnalisé doit gérer les cas où l’utilisateur doit passer une étape CAPTCHA. Si vous ne prévoyez pas ce cas, votre application peut générer une erreur.

La détection des robots est prise en charge uniquement pour les pages de connexion personnalisées hébergées par Auth0. Vous devrez peut-être communiquer avec le responsable de votre compte pour activer cette fonctionnalité pour votre locataire.

​

Utiliser le modèle de page de connexion personnalisée

Auth0 fournit un modèle que vous pouvez utiliser avec votre code pour gérer les connexions à risque élevé.

1. Accédez à Dashboard > Image de marque > Universal Login et sélectionnez Connexion classique.

2. Cliquez sur l’onglet Connexion et activez le bouton Personnaliser la page de connexion s’il n’est pas déjà activé.

3. Repérez le menu déroulant Modèles par défaut et sélectionnez Formulaire de connexion personnalisé.

   

4. Utilisez le modèle fourni pour commencer à personnaliser votre page de connexion.

   Nous vous recommandons d’utiliser un logiciel de gestion de versions pour gérer le code source de vos pages de connexion personnalisées. Pour en savoir plus, consultez Contrôle de version des pages de connexion classiques.

5. Si vous n’utilisez pas de logiciel de gestion de versions, vous pouvez remplacer le modèle par votre code source directement dans le Dashboard.

6. Sélectionnez Aperçu pour voir votre nouveau formulaire.

7. Sélectionnez Enregistrer les modifications.

​

Personnaliser le formulaire de connexion

Si vous souhaitez prendre en charge la détection des robots, vous devez utiliser la version 9.28 ou une version ultérieure de la bibliothèque auth0.js.

<script src="https://cdn.auth0.com/js/auth0/9.28/auth0.min.js"></script>

1. Ajoutez un élément pour afficher le captcha sous le champ de mot de passe et au-dessus des boutons d’inscription et de connexion. Par exemple : <div class="captcha-container"></div>

2. Initialisez les composants loginCaptcha et signupCaptcha après avoir appelé le constructeur WebAuth.

   var webAuth = new auth0.WebAuth(params);
   
   var loginCaptcha = webAuth.renderCaptcha(
       document.querySelector('.captcha-container'),
       null,
       (error, payload) => {
           if (payload) {
               triggerCaptcha = payload.triggerCaptcha;
           }
       }
   );
   
   var signupCaptcha = webAuth.renderSignupCaptcha(
       document.querySelector('.captcha-container'),
       null,
       (error, payload) => {
           if (payload) {
               triggerCaptcha = payload.triggerCaptcha;
           }
       }
   );
   

3. Lorsque vous appelez la méthode login, attribuez à la propriété captcha la valeur loginCaptcha.getValue() :

   webAuth.login({
       realm: connection,
       username: username,
       password: password,
       captcha: loginCaptcha.getValue()
   }, function(err) {
       displayError(err);
       //...
   });
   

   Pour en savoir plus sur le paramètre de fonction de rappel (cb) de la méthode login, consultez la documentation de WebAuth dans auth0.js.

4. Lorsque vous appelez la méthode signupAndLogin, attribuez à la propriété captcha la valeur signupCaptcha.getValue() :

   webAuth.redirect.signupAndLogin({
       connection: databaseConnection,
       email: email,
       password: password,
       captcha: signupCaptcha.getValue()
   }, function(err) {
       displayError(err);
       //...
   });
   

   Pour en savoir plus sur le paramètre de fonction de rappel (cb) de la méthode signupAndLogin, consultez la documentation de WebAuth dans auth0.js.

5. Rechargez les composants loginCaptcha et signupCaptcha dans votre logique générale de gestion des erreurs.

   function displayError(err) {
     loginCaptcha.reload();
     signupCaptcha.reload();
   
     var errorMessage = document.getElementById('error-message');
     errorMessage.innerHTML = err.description;
     errorMessage.style.display = 'block';
   }
   

​

Configurer les modèles de captcha

Lorsque vous appelez les méthodes renderCaptcha et renderSignupCaptcha, vous pouvez configurer le modèle pour chaque fournisseur de captcha pris en charge au moyen du paramètre options.

La propriété templates du paramètre options prend en charge les propriétés suivantes :

Nom	Description
auth0	Fonction de modèle qui reçoit le challenge et renvoie une chaîne.
recaptcha_v2	Fonction de modèle qui reçoit le challenge et renvoie une chaîne.
recaptcha_enterprise	Fonction de modèle qui reçoit le challenge et renvoie une chaîne.
hcaptcha	Fonction de modèle qui reçoit le challenge et renvoie une chaîne.
friendly_captcha	Fonction de modèle qui reçoit le challenge et renvoie une chaîne.
arkose	Fonction de modèle qui reçoit le challenge et renvoie une chaîne.
auth0_v2	Fonction de modèle qui reçoit le challenge et renvoie une chaîne.
error	Fonction de modèle qui renvoie un message d’erreur personnalisé lorsque le challenge n’a pas pu être récupéré et qui reçoit l’erreur comme premier argument.

Pour en savoir plus sur les fonctions de modèle par défaut de chaque fournisseur, consultez auth0.js/src/web-auth/captcha.js on GitHub.

​

Prendre en charge les flux Passwordless

Si vous souhaitez prendre en charge la détection des robots pour les flux Passwordless, vous devez utiliser la version 9.24 ou ultérieure de la bibliothèque auth0.js.

<script src="https://cdn.auth0.com/js/auth0/9.24/auth0.min.js"></script>

1. Ajoutez un élément pour afficher le CAPTCHA au-dessus du bouton d’envoi. Si vous prenez aussi en charge une connexion avec nom d’utilisateur et mot de passe, vous devez créer un élément distinct pour le CAPTCHA Passwordless. Par exemple : <div class="passwordless-captcha-container"></div>

2. Initialisez le composant CAPTCHA pour les flux Passwordless après le constructeur WebAuth.

   var passwordlessCaptcha = webAuth.renderPasswordlessCaptcha(
     document.querySelector('.passwordless-captcha-container')
   );
   

3. Ajoutez la propriété captcha à l’appel Passwordless, puis rechargez le composant CAPTCHA en cas d’erreur.

   webAuth.passwordlessStart({
     connection: 'email',
     send: 'code',
     email: '[e-mail]',
     captcha: passwordlessCaptcha.getValue()
   }, function (err,res) {
     if (err) {
       passwordlessCaptcha.reload();
       // gérer les erreurs
     }
     // continuer
   });
   

​

En savoir plus

• Ajouter la détection des robots à des applications natives