reCAPTCHA version 3

reCAPTCHA v3 renvoie un score pour chaque requête sans friction pour l'utilisateur. Ce score est basé sur les interactions avec votre site et vous permet de prendre les mesures appropriées pour celui-ci. Enregistrez des 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'interrompt jamais vos utilisateurs. Vous pouvez donc l'exécuter quand vous le souhaitez sans affecter les conversions. reCAPTCHA fonctionne mieux lorsqu'il dispose du plus de contexte possible sur les interactions avec votre site, car il provient de comportements à la fois légitimes et abusifs. C'est pourquoi nous vous recommandons d'inclure la validation reCAPTCHA dans les formulaires ou les actions, ainsi que en 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 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>

Invoquer le défi par programmation

Si vous souhaitez mieux contrôler le moment où reCAPTCHA s'exécute, 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 immédiatement le jeton à votre backend avec la requête de validation.

Interpréter le score

reCAPTCHA v3 renvoie un score (1,0 correspond très probablement à une interaction de bonne qualité, 0,0 correspond très probablement à un bot). En fonction du score, vous pouvez effectuer des actions variables dans le contexte de votre site. Chaque site est différent, mais vous trouverez ci-dessous quelques exemples d'utilisation de ce score. Comme dans les exemples ci-dessous, agissez en arrière-plan au lieu de bloquer le trafic afin de mieux protéger votre site.

Cas d'utilisation Recommandation
Page d'accueil Obtenez une vue cohérente de votre trafic dans la console d'administration lorsque vous filtrez les scrapers.
connexion En cas de scores faibles, exigez l'authentification à deux facteurs ou la validation de l'adresse e-mail pour empêcher les attaques de credential stuffing.
social Limitez les demandes d'amis sans réponse des utilisateurs mal intentionnés et envoyez les commentaires risqués à la modération.
e-commerce Faites passer vos ventes réelles avant les bots et identifiez les transactions risquées.

reCAPTCHA s'appuie sur le trafic réel sur votre site. Pour cette raison, les scores obtenus dans un environnement de préproduction ou peu de temps après la mise en œuvre peuvent différer de ceux de 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 endroit où vous exécutez reCAPTCHA, vous activez les nouvelles fonctionnalités suivantes:

  • Répartition détaillée des données pour vos dix actions principales dans la console d'administration
  • Analyse adaptative des risques basée sur le contexte de l'action, car les comportements abusifs peuvent varier.

Il est important de noter que lorsque vous vérifiez la réponse reCAPTCHA, vous devez vous assurer que le nom de l'action est bien celui attendu.

Réponse de validation du site

Envoyez la requête pour valider le jeton de réponse, comme avec reCAPTCHA v2 ou reCAPTCHA invisible.

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
}

Conseils

  1. grecaptcha.ready() exécute votre fonction lors du chargement de la bibliothèque reCAPTCHA. Pour éviter les conditions de concurrence avec api.js, incluez api.js avant vos scripts qui appellent grecaptcha ou continuez à utiliser le rappel onload défini avec l'API v2.
  2. Essayez d'associer l'appel execute à des actions intéressantes ou sensibles telles que l'enregistrement, la réinitialisation du mot de passe, l'achat ou la lecture.
  3. Utilisez https://www.google.com/recaptcha/api.js?trustedtypes=true pour charger du code compatible avec les Trusted Types.