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

Comment activer et configurer la détection des robots lors de l’utilisation de 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 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.

La détection des robots n’est possible que 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é pour votre locataire.

​

Utiliser un modèle de page de connexion personnalisé

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

​

Personnaliser le formulaire de connexion

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;
           }
       }
   );
   

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

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

   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';
   }
   

​

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 à travers le paramètre options.

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

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

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.

​

Prise en charge des flux sans mot de passe

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')
   );
   

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: '[e-mail]',
     captcha: passwordlessCaptcha.getValue()
   }, function (err,res) {
     if (err) {
       passwordlessCaptcha.reload();
       // handle errors
     }
     // continue
   });
   

​

En savoir plus

• Ajouter la détection des robots aux applications natives