Ajouter Bot Detection aux pages de connexion personnalisées

Découvrez comment activer et configurer Bot Detection 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 Bot Detection pour afficher une étape CAPTCHA lorsqu’Auth0 juge qu’une requête présente un risque élevé.

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

Bot Detection est pris en charge uniquement pour les pages de connexion personnalisées hébergées par Auth0. Vous devrez peut-être communiquer avec votre représentant de compte pour activer cette fonctionnalité dans votre tenant.

​

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

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

1. Accédez à Dashboard > Branding > Universal Login et sélectionnez Classic.

2. Cliquez sur l’onglet Login et activez le commutateur Customize Login Page s’il n’est pas déjà activé.

3. Repérez le menu déroulant Default Templates et sélectionnez Custom Login Form.

   

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

   Nous recommandons d’utiliser un logiciel de contrôle de version pour gérer le code source de vos pages de connexion personnalisées. Pour en savoir plus, consultez Contrôle de version de la page de connexion Classic.

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

6. Sélectionnez Preview pour voir votre nouveau formulaire.

7. Sélectionnez Save Changes.

​

Personnaliser le formulaire de connexion

Si vous souhaitez utiliser Bot Detection, vous devez utiliser la version 9.28 ou 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 votre champ de mot de passe et au-dessus de vos boutons d’inscription et de connexion. Par exemple : <div class="captcha-container"></div>

2. Initialisez les composants loginCaptcha et signupCaptcha après 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 WebAuth sur 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 WebAuth sur 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 CAPTCHA

Lorsque vous appelez les méthodes renderCaptcha et renderSignupCaptcha, vous pouvez configurer le modèle pour chaque fournisseur CAPTCHA pris en charge à l’aide 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 l’épreuve et renvoie une chaîne.
recaptcha_v2	Fonction de modèle qui reçoit l’épreuve et renvoie une chaîne.
recaptcha_enterprise	Fonction de modèle qui reçoit l’épreuve et renvoie une chaîne.
hcaptcha	Fonction de modèle qui reçoit l’épreuve et renvoie une chaîne.
friendly_captcha	Fonction de modèle qui reçoit l’épreuve et renvoie une chaîne.
arkose	Fonction de modèle qui reçoit l’épreuve et renvoie une chaîne.
auth0_v2	Fonction de modèle qui reçoit l’épreuve et renvoie une chaîne.
error	Fonction de modèle qui renvoie un message d’erreur personnalisé lorsque l’épreuve n’a pas pu être récupérée; elle 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 sur Github.

​

Prise en charge des flux sans mot de passe

Si vous souhaitez assurer la prise en charge de Bot Detection pour les flux sans mot de passe, vous devez utiliser la version 9.24 ou une version 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 de soumission. Si vous prenez aussi en charge une connexion par nom d’utilisateur et mot de passe, vous devez créer un élément distinct pour le CAPTCHA sans mot de passe. Par exemple : <div class="passwordless-captcha-container"></div>

2. Initialisez le composant CAPTCHA pour les flux sans mot de passe après le constructeur WebAuth.

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

3. Ajoutez la propriété captcha à la requête 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 fonctionnalité Bot Detection aux applications natives