> ## 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 la détection des robots lorsque vous utilisez des pages de connexion personnalisées créées avec la bibliothèque auth0.js.
# Ajouter la détection des 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 des robots afin d’afficher une étape CAPTCHA lorsqu’Auth0 détermine qu’une requête présente un risque élevé.
Le code de votre formulaire de connexion personnalisé doit gérer les cas où l’utilisateur doit passer une étape CAPTCHA. Si vous ne prévoyez pas ce cas, votre application peut générer une erreur.
La détection des robots est prise en charge uniquement pour les pages de connexion personnalisées hébergées par Auth0. Vous devrez peut-être communiquer avec le responsable de votre compte pour activer cette fonctionnalité pour votre locataire.
## Utiliser le modèle de page de connexion personnalisée
Auth0 fournit un modèle que vous pouvez utiliser avec votre code pour gérer les connexions à risque élevé.
1. Accédez à [Dashboard > Image de marque > Universal Login](https://manage.auth0.com/#/login_settings) et sélectionnez **Connexion classique**.
2. Cliquez sur l’onglet **Connexion** et activez le bouton **Personnaliser la page de connexion** s’il n’est pas déjà activé.
3. Repérez le menu déroulant **Modèles par défaut** et sélectionnez **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 gestion de versions pour gérer le code source de vos pages de connexion personnalisées. Pour en savoir plus, consultez [Contrôle de version des pages de connexion classiques](/fr-CA/docs/customize/login-pages/classic-login/version-control).
5. Si vous n’utilisez pas de logiciel de gestion de versions, vous pouvez remplacer le modèle par votre code source directement dans le Dashboard.
6. Sélectionnez **Aperçu** pour voir votre nouveau formulaire.
7. Sélectionnez **Enregistrer les modifications**.
## Personnaliser le formulaire de connexion
Si vous souhaitez prendre en charge la détection des robots, vous devez utiliser la version `9.28` ou une version ultérieure de la bibliothèque `auth0.js`.
``
1. Ajoutez un élément pour afficher le captcha sous le champ de mot de passe et au-dessus des boutons d’inscription et de connexion. Par exemple : ``
2. Initialisez les composants `loginCaptcha` et `signupCaptcha` après avoir appelé 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 de WebAuth dans 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 de WebAuth dans 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';
}
```
### Configurer les modèles de captcha
Lorsque vous appelez les méthodes `renderCaptcha` et `renderSignupCaptcha`, vous pouvez configurer le modèle pour chaque [fournisseur de captcha pris en charge](/fr-CA/docs/secure/attack-protection/bot-detection/configure-captcha) au moyen 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 le challenge et renvoie une chaîne. |
| `recaptcha_v2` | Fonction de modèle qui reçoit le challenge et renvoie une chaîne. |
| `recaptcha_enterprise` | Fonction de modèle qui reçoit le challenge et renvoie une chaîne. |
| `hcaptcha` | Fonction de modèle qui reçoit le challenge et renvoie une chaîne. |
| `friendly_captcha` | Fonction de modèle qui reçoit le challenge et renvoie une chaîne. |
| `arkose` | Fonction de modèle qui reçoit le challenge et renvoie une chaîne. |
| `auth0_v2` | Fonction de modèle qui reçoit le challenge et renvoie une chaîne. |
| `error` | Fonction de modèle qui renvoie un message d’erreur personnalisé lorsque le challenge n’a pas pu être récupéré et qui 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 on GitHub](https://github.com/auth0/auth0.js/blob/a3ddc0905a5da33aa190a9098467576976b95ec8/src/web-auth/captcha.js#L28).
## Prendre en charge les flux Passwordless
Si vous souhaitez prendre en charge la détection des robots pour les flux Passwordless, vous devez utiliser la version `9.24` ou ultérieure de la bibliothèque auth0.js.
``
1. Ajoutez un élément pour afficher le CAPTCHA au-dessus du bouton d’envoi. Si vous prenez aussi en charge une connexion avec nom d’utilisateur et mot de passe, vous devez créer un élément distinct pour le CAPTCHA Passwordless. Par exemple :
``
2. Initialisez le composant CAPTCHA pour les flux Passwordless 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 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
});
```
## En savoir plus
* [Ajouter la détection des robots à des applications natives](/fr-CA/docs/secure/attack-protection/bot-detection/bot-detection-native-apps)