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

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

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

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

   <Frame>
     <img src="https://mintcdn.com/docs-dev-actions-triggers-prototype/6JN7GvC_uhcSr-i5/docs/images/fr-ca/cdy7uua7fh8z/4m3WA0sKMoR0C1KVnVmZ1G/9eb874ba2619b71f57e7fff80f84cc01/2025-02-26_15-23-14.png?fit=max&auto=format&n=6JN7GvC_uhcSr-i5&q=85&s=85c17f2dbad4be45e38410689c050365" alt="Dashboard Branding Universal Login Classic Login Tab Custom Login Form" width="902" height="1425" data-path="docs/images/fr-ca/cdy7uua7fh8z/4m3WA0sKMoR0C1KVnVmZ1G/9eb874ba2619b71f57e7fff80f84cc01/2025-02-26_15-23-14.png" />
   </Frame>

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

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

   ```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`, affectez à 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 la méthode de Callback `login`, (`cb`), veuillez consulter la [Documentation de WebAuth sur auth0.js](https://auth0.github.io/auth0.js/global.html#login).

4. Lorsque vous appelez la méthode `signupAndLogin`, affectez à 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 la méthode de Callback `signupAndLogin`, (`cb`), veuillez consulter la [Documentation de WebAuth sur auth0.js](https://auth0.github.io/auth0.js/global.html#login).

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

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

### 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](/docs/fr-ca/secure/attack-protection/bot-detection/configure-captcha) à 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](https://github.com/auth0/auth0.js/blob/a3ddc0905a5da33aa190a9098467576976b95ec8/src/web-auth/captcha.js#L28).

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

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

   ```javascript lines theme={null}
   webAuth.passwordlessStart({
     connection: 'email',
     send: 'code',
     email: 'foo@bar.com',
     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](/docs/fr-ca/secure/attack-protection/bot-detection/bot-detection-native-apps)