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 vos utilisateurs. la conversion. reCAPTCHA fonctionne mieux lorsqu'il fournit le plus de contexte possible sur les interactions avec votre site. en voyant des comportements à la fois légitimes et abusifs. C'est pourquoi nous vous recommandons y compris la validation reCAPTCHA sur les formulaires ou les actions, ainsi que dans l'arrière-plan des pages pour 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 le ressource JavaScript nécessaire et ajoutez 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 destinée à verify.

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 de la façon dont les sites utilisent le score. Comme dans les exemples ci-dessous, prenez 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 d'une séquence ou peu de temps après l'implémentation peuvent différer de l'environnement de production. reCAPTCHA v3 ne le fait jamais interrompre le flux utilisateur, vous pouvez d'abord exécuter reCAPTCHA sans prendre de mesures, puis décider seuils en examinant votre trafic dans la console d'administration. Par 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 fois que vous exécutez reCAPTCHA, vous activez les nouvelles fonctionnalités suivantes:

  • Une ventilation détaillée des données pour vos 10 actions principales dans le Console d'administration
  • Une analyse adaptative des risques basée sur le contexte de l'action, car les abus le comportement peut varier.

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

Réponse de validation du site

Envoyez la requête de validation du 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. À évitez les conditions de concurrence avec api.js, incluez api.js avant votre des scripts qui appellent "grecaptcha" ou qui continuent à utiliser rappel onload défini avec l'API v2.
  2. Essayez d'associer l'appel execute à des actions intéressantes ou sensibles, par exemple S'inscrire, réinitialiser le mot de passe, effectuer un achat ou jouer.
  3. Utilisez https://www.google.com/recaptcha/api.js?trustedtypes=true pour charger un code compatible avec les Trusted Types.