reCAPTCHA version 3

reCAPTCHA v3 renvoie un score pour chaque requête sans friction pour l'utilisateur. Ce score dépend des interactions avec votre site et vous permet de prendre les mesures qui s'imposent. Enregistrez les clés reCAPTCHA v3 dans la console d'administration reCAPTCHA.

Cette page explique comment activer et personnaliser reCAPTCHA v3 sur votre page Web.

Emplacement sur votre site Web

reCAPTCHA v3 n'interrompra jamais vos utilisateurs. Vous pouvez donc l'exécuter quand vous le souhaitez sans affecter la conversion. reCAPTCHA fonctionne de manière optimale lorsqu'il a le plus de contexte possible sur les interactions avec votre site, c'est-à-dire lorsqu'il s'agit de comportements légitimes et abusifs. C'est pourquoi nous vous recommandons d'inclure la validation reCAPTCHA dans les formulaires ou les actions, ainsi que dans l'arrière-plan des pages à des fins d'analyse.

Vous pouvez exécuter reCAPTCHA sur autant d'actions que vous le souhaitez sur une même page.

Associer automatiquement le défi à un bouton

La méthode la plus simple pour utiliser reCAPTCHA v3 sur votre page consiste à inclure la ressource JavaScript nécessaire et à ajouter quelques attributs à votre bouton HTML.

  1. Chargez l'API JavaScript.

     <script src="https://www.google.com/recaptcha/api.js"></script>

  2. Ajoutez une fonction de rappel pour gérer le jeton.

     <script>
   function onSubmit(token) {
     document.getElementById("demo-form").submit();
   }
 </script>

  3. Ajoutez des attributs à votre bouton HTML.

    <button class="g-recaptcha" 
        data-sitekey="reCAPTCHA_site_key" 
        data-callback='onSubmit' 
        data-action='submit'>Submit</button>

Défi programmatique lancé

Si vous souhaitez mieux contrôler l'exécution de reCAPTCHA, vous pouvez utiliser la méthode execute dans l'objet grecaptcha. Pour ce faire, vous devez ajouter un paramètre render au chargement du script reCAPTCHA.

  1. Chargez l'API JavaScript avec votre clé de site.

    <script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>

  2. Appelez grecaptcha.execute pour chaque action que vous souhaitez protéger.

       <script>
      function onClick(e) {
        e.preventDefault();
        grecaptcha.ready(function() {
          grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
              // Add your logic to submit to your backend server here.
          });
        });
      }
  </script>

  3. Envoyez le jeton immédiatement à votre backend avec la demande de validation.

Interpréter le score

reCAPTCHA v3 affiche un score (1,0 correspond très probablement à une bonne interaction, 0,0 est très probablement un bot). En fonction du taux, vous pouvez agir de façon variable dans le contexte de votre site. Chaque site est différent, mais vous trouverez ci-dessous quelques exemples d'utilisation du score. Comme dans les exemples ci-dessous, prenez des mesures en arrière-plan au lieu de bloquer le trafic pour mieux protéger votre site.

Cas d'utilisation Recommandation
Page d'accueil Affichez une vue cohérente de votre trafic sur la console d'administration lors du filtrage des scrapers.
login En cas de scores faibles, exigez l'authentification à deux facteurs ou la validation de l'adresse e-mail pour éviter les attaques de credential stuffing.
social Limitez les demandes d'amis sans réponse d'utilisateurs mal intentionnés et envoyez les commentaires à risque à modération.
Applications Faites passer vos ventes réelles avant les bots et identifiez les transactions risquées.

reCAPTCHA apprend en observant le trafic réel sur votre site. Pour cette raison, les scores dans un environnement de préproduction ou peu de temps après la mise en œuvre peuvent différer de la production. Comme reCAPTCHA v3 n'interrompt jamais le parcours utilisateur, vous pouvez d'abord exécuter reCAPTCHA sans prendre aucune mesure, puis définir des seuils en examinant votre trafic dans la console d'administration. Par défaut, vous pouvez utiliser un seuil de 0,5.

Actions

reCAPTCHA v3 introduit un nouveau concept: les actions. Lorsque vous spécifiez un nom d'action à chaque emplacement où vous exécutez reCAPTCHA, vous activez les nouvelles fonctionnalités suivantes:

  • Une répartition détaillée des données pour vos 10 actions principales dans la console d'administration
  • Analyse adaptative des risques basée sur le contexte de l'action, car le comportement abusif peut varier.

Il est important de noter que lorsque vous validez la réponse reCAPTCHA, vous devez vérifier que le nom de l'action est le nom attendu.

Réponse de validation du site

Envoyez la requête pour vérifier le jeton de réponse comme avec reCAPTCHA v2 ou Invisible CAPTCHA.

La réponse est un objet JSON:

{
  "success": true|false,      // whether this request was a valid reCAPTCHA token for your site
  "score": number             // the score for this request (0.0 - 1.0)
  "action": string            // the action name for this request (important to verify)
  "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
  "hostname": string,         // the hostname of the site where the reCAPTCHA was solved
  "error-codes": [...]        // optional
}

d'expert

  1. grecaptcha.ready() exécute votre fonction lors du chargement de la bibliothèque reCAPTCHA. Pour éviter les conditions de concurrence avec api.js, ajoutez api.js avant vos scripts qui appellent grecaptcha, ou continuez d'utiliser le rappel onload défini avec la version 2 de l'API.
  2. Essayez de connecter l'appel execute à des actions intéressantes ou sensibles telles que "Enregistrer", "Réinitialiser le mot de passe", "Acheter" ou "Jouer".
  3. Utilisez https://www.google.com/recaptcha/api.js?trustedtypes=true pour charger un code compatible avec les types de confiance.