> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

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

# Ajouter Bot Detection 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 <Tooltip tip="Bot Detection : forme de protection contre les attaques dans laquelle Auth0 bloque le trafic de bots suspect en activant un CAPTCHA pendant le processus de connexion." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Bot+Detection">Bot Detection</Tooltip> 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.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  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.
</Callout>

<div id="use-custom-login-page-template">
  ## Utiliser le modèle de page de connexion personnalisée
</div>

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](https://manage.auth0.com/#/login_settings) 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**.

   <Frame>
     <img src="https://mintcdn.com/translations/pvjQqAy3EB2TK6NP/docs/images/cdy7uua7fh8z/4m3WA0sKMoR0C1KVnVmZ1G/b311bdbc6c48b4910eac49cc8f1b9ba8/2025-02-26_15-17-18.png?fit=max&auto=format&n=pvjQqAy3EB2TK6NP&q=85&s=56fab9e9b970808c2b646078137305ea" alt="Dashboard Branding Universal Login Classic Login Tab Custom Login Form" width="902" height="1350" data-path="docs/images/cdy7uua7fh8z/4m3WA0sKMoR0C1KVnVmZ1G/b311bdbc6c48b4910eac49cc8f1b9ba8/2025-02-26_15-17-18.png" />
   </Frame>
4. Utilisez le modèle fourni pour commencer à personnaliser votre page de connexion.

   <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
     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](/docs/fr-ca/customize/login-pages/classic-login/version-control).
   </Callout>
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**.

<div id="customize-the-login-form">
  ## Personnaliser le formulaire de connexion
</div>

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

   ```javascript lines theme={null}
   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()` :

   ```text lines theme={null}
   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](https://auth0.github.io/auth0.js/global.html#login).

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

   ```text lines theme={null}
   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](https://auth0.github.io/auth0.js/global.html#login).

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

   ```javascript lines theme={null}
   function displayError(err) {
     loginCaptcha.reload();
     signupCaptcha.reload();

     var errorMessage = document.getElementById('error-message');
     errorMessage.innerHTML = err.description;
     errorMessage.style.display = 'block';
   }
   ```

<div id="configure-captcha-templates">
  ### Configurer les modèles CAPTCHA
</div>

Lorsque vous appelez les méthodes `renderCaptcha` et `renderSignupCaptcha`, vous pouvez configurer le modèle pour chaque [fournisseur CAPTCHA pris en charge](/docs/fr-ca/secure/attack-protection/bot-detection/configure-captcha) à 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](https://github.com/auth0/auth0.js/blob/a3ddc0905a5da33aa190a9098467576976b95ec8/src/web-auth/captcha.js#L28).

<div id="support-passwordless-flows">
  ## Prise en charge des flux sans mot de passe
</div>

Si vous souhaitez assurer la prise en charge de Bot Detection pour les flux <Tooltip tip="Sans mot de passe : forme d’authentification qui ne repose pas sur un mot de passe comme premier facteur." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=passwordless">sans mot de passe</Tooltip>, 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.

   ```javascript lines theme={null}
   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.

   ```text lines theme={null}
   webAuth.passwordlessStart({
     connection: 'email',
     send: 'code',
     email: 'foo@bar.com',
     captcha: passwordlessCaptcha.getValue()
   }, function (err,res) {
     if (err) {
       passwordlessCaptcha.reload();
       // gérer les erreurs
     }
     // continuer
   });
   ```

<div id="learn-more">
  ## En savoir plus
</div>

* [Ajouter la fonctionnalité Bot Detection aux applications natives](/docs/fr-ca/secure/attack-protection/bot-detection/bot-detection-native-apps)