reCAPTCHA v3

reCAPTCHA v3 muestra una puntuación por cada solicitud sin inconvenientes para el usuario. La puntuación se basa en las interacciones con tu sitio y te permite tomar las medidas adecuadas para tu sitio. Registra las claves de reCAPTCHA v3 en la Consola del administrador de reCAPTCHA.

En esta página, se explica cómo habilitar y personalizar reCAPTCHA v3 en tu página web.

Ubicación en tu sitio web

reCAPTCHA v3 nunca interrumpirá a tus usuarios, por lo que puedes ejecutarlo cuando quieras sin afectar las conversiones. reCAPTCHA funciona mejor cuando tiene el mayor contexto sobre las interacciones con tu sitio, que proviene de ver un comportamiento legítimo y abusivo. Por este motivo, recomendamos incluir la verificación de reCAPTCHA en los formularios o acciones, así como en segundo plano de las páginas para las estadísticas.

Puedes ejecutar reCAPTCHA en tantas acciones como desees en la misma página.

Vincular automáticamente el desafío a un botón

El método más fácil para usar reCAPTCHA v3 en tu página es incluir el recurso de JavaScript necesario y agregar algunos atributos a tu botón HTML.

  1. Carga la API de JavaScript.

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

  2. Agrega una función de devolución de llamada para controlar el token.

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

  3. Agrega atributos al botón HTML.

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

Invoca el desafío de forma programática

Si quieres tener más control sobre cuándo se ejecuta reCAPTCHA, puedes usar el método execute en el objeto grecaptcha. Para ello, debes agregar un parámetro render a la carga de la secuencia de comandos de reCAPTCHA.

  1. Carga la API de JavaScript con tu clave del sitio.

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

  2. Llama a grecaptcha.execute en cada acción que desees proteger.

       <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. Envía el token de inmediato a tu backend con la solicitud de verificación.

Interpreta la puntuación

reCAPTCHA v3 devuelve una puntuación (1.0 es muy probable que sea una interacción buena, 0.0 es muy probable que sea un bot). Según la puntuación, puedes tomar medidas variables según el contexto de tu sitio. Cada sitio es diferente, pero a continuación se incluyen algunos ejemplos de cómo los sitios usan esta puntuación. Como en los siguientes ejemplos, toma medidas detrás de escena en lugar de bloquear el tráfico para proteger mejor tu sitio.

Caso de uso Recomendación
homepage Obtén una vista coherente de tu tráfico en la Consola del administrador mientras filtras los scrapers.
acceder Con puntuaciones bajas, se requiere autenticación de 2 factores o verificación por correo electrónico para evitar ataques de uso excesivo de credenciales.
social Limita las solicitudes de amistad sin responder de usuarios con comportamiento inadecuado y envía los comentarios riesgosos con moderación.
Comercio electrónico Priorice sus ventas reales con las de los bots e identifique las transacciones riesgosas.

reCAPTCHA observa el tráfico real en tu sitio para aprender. Por este motivo, las puntuaciones en un entorno de etapa de pruebas o poco después de la implementación pueden diferir de las de producción. Como reCAPTCHA v3 nunca interrumpe el flujo de usuarios, primero puedes ejecutar reCAPTCHA sin tomar medidas y, luego, decidir los límites. Para ello, consulta el tráfico en la Consola del administrador. De forma predeterminada, puedes usar un umbral de 0.5.

Acciones

reCAPTCHA v3 presenta un concepto nuevo: las acciones. Cuando especificas un nombre de acción en cada lugar en el que ejecutas reCAPTCHA, se habilitan las siguientes funciones nuevas:

  • Un desglose detallado de los datos de las diez acciones principales en la Consola del administrador
  • Análisis de riesgo adaptable basado en el contexto de la acción, ya que el comportamiento abusivo puede variar.

Es importante destacar que, cuando verificas la respuesta de reCAPTCHA, debes comprobar que el nombre de la acción sea el que esperas.

Respuesta de verificación del sitio

Realiza la solicitud para verificar el token de respuesta como con reCAPTCHA v2 o reCAPTCHA invisible.

La respuesta es un objeto 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
}

Sugerencia

  1. grecaptcha.ready() ejecuta tu función cuando se carga la biblioteca de reCAPTCHA. Para evitar condiciones de carrera con el api.js, incluye el api.js antes de las secuencias de comandos que llaman a grecaptcha o continúa usando la devolución de llamada de carga que se define con la API v2.
  2. Intenta conectar la llamada a execute a acciones interesantes o sensibles, como Registrarse, Restablecer la contraseña, Comprar o Jugar.
  3. Usa https://www.google.com/recaptcha/api.js?trustedtypes=true para cargar código compatible con Trusted Types.