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

Si vous créez une page de connexion personnalisée à l’aide de la bibliothèque auth0.js, vous pouvez activer la détection de robots pour afficher une étape CAPTCHA dans les scénarios où une demande est déterminée comme présentant un risque élevé par Auth0.

Le code de votre formulaire de connexion personnalisé doit gérer les scénarios dans lesquels l’utilisateur est invité à passer une étape CAPTCHA. Si vous ne tenez pas compte de ce scénario, votre application peut provoquer une erreur.

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

1. Accédez à Tableau de bord > Image de marque > Connexion universelle et sélectionnez Classique.

2. Cliquez sur l’onglet Connection (Connexion) et activez le commutateur Customize Login Page (Personnaliser la page de connexion) s’il n’est pas déjà activé.

3. Localisez le menu déroulant Default Templates (Modèles par défaut) et sélectionnez Custom Login Form (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 contrôle des versions pour gérer le code source de vos pages de connexion personnalisées. Pour en savoir plus, lisez Contrôle des versions des pages de connexion classiques.

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 Dashboard.

6. Cliquez sur Preview (Aperçu) pour afficher votre nouveau formulaire.

7. Sélectionnez Save Changes (Sauvegarder les changements).

Si vous souhaitez prendre en charge la détection de robots, vous devez utiliser la version 9.28 ou supé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 mot de passe saisi et au-dessus de vos boutons d’inscription et de connexion. Par exemple : <div class="captcha-container"></div>

2. Initialiser 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;
           }
       }
   );

   Was this helpful?

   Yes /No

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

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

   Was this helpful?

   Yes /No
   Pour en savoir plus sur le paramètre de fonction de la méthode de Callback login, (cb), veuillez consulter la Documentation de WebAuth sur auth0.js.

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

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

   Was this helpful?

   Yes /No
   Pour en savoir plus sur le paramètre de fonction de la méthode de Callback signupAndLogin, (cb), veuillez consulter la Documentation de WebAuth sur auth0.js.

5. Recharger les composants loginCaptcha et signupCaptcha de votre logique de gestion des erreurs générique.

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

   Was this helpful?

   Yes /No

Lorsque vous appelez les méthodes renderCaptcha et renderSignupCaptcha, vous pouvez configurer le modèle pour chaque fournisseur CAPTCHA pris en charge à travers le paramètre options.

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

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

Si vous souhaitez prendre en charge la détection de robots pour les flux sans mot de passe, vous devez utiliser la version 9.24 ou supé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 également en charge une connexion par nom d’utilisateur/mot de passe, un élément distinct doit être créé 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')
   );

   Was this helpful?

   Yes /No

3. Ajoutez la propriété captcha à l’appel sans mot de passe et rechargez le composant CAPTCHA en cas d’erreurs.

   webAuth.passwordlessStart({
     connection: 'email',
     send: 'code',
     email: 'foo@bar.com',
     captcha: passwordlessCaptcha.getValue()
   }, function (err,res) {
     if (err) {
       passwordlessCaptcha.reload();
       // handle errors
     }
     // continue
   });

   Was this helpful?

   Yes /No

• Ajouter la détection des robots aux applications natives