reCAPTCHA v3

reCAPTCHA v3 muestra una puntuación para cada solicitud sin inconvenientes para el usuario. La puntuación se basa en las interacciones con su sitio y le permite tomar las medidas adecuadas para su 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 la conversión. reCAPTCHA funciona mejor cuando tiene el mayor contexto sobre las interacciones con tu sitio, que proviene de ver comportamientos legítimos y abusivos. Por este motivo, recomendamos incluir la verificación de reCAPTCHA en formularios o acciones, así como en segundo plano de páginas para las estadísticas.

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

Cómo vincular automáticamente el desafío a un botón

El método más sencillo para usar reCAPTCHA v3 en tu página es incluir el recurso 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 a tu botón HTML.

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

Cómo invocar el desafío de manera programática

Si deseas 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 de 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 quieras 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.

Interpretación de la puntuación

reCAPTCHA v3 muestra una puntuación (1.0 es probablemente una buena interacción, 0.0 es muy probable que sea un bot). Según la puntuación, puedes tomar medidas variables en el contexto de tu sitio. Cada sitio es diferente, pero a continuación se incluyen algunos ejemplos de cómo los sitios utilizan la puntuación. Al igual que 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
página principal Obtén una vista coherente de tu tráfico en la Consola del administrador mientras filtras los mensajes para el bloc de notas.
acceder Con puntuaciones bajas, debes utilizar la autenticación de dos factores o la verificación por correo electrónico para evitar ataques de uso excesivo de credenciales.
social Limitar las solicitudes de amistad sin respuesta de los usuarios con comportamiento inadecuado y enviar comentarios riesgosos a moderación.
Comercio electrónico Ponga sus ventas reales por delante de los bots e identifique las transacciones riesgosas.

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

Acciones

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

  • Un desglose detallado de los datos de tus 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 verificar que el nombre de la acción sea el nombre que esperas.

Respuesta de verificación de sitios

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
}

Sugerencias

  1. grecaptcha.ready() ejecuta tu función cuando se carga la biblioteca de reCAPTCHA. Para evitar las 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 capturar la llamada a execute a acciones interesantes o sensibles, como Registrarse, Restablecer contraseña, Comprar o Play.
  3. Usa https://www.google.com/recaptcha/api.js?trustedtypes=true para cargar un código compatible con los tipos de confianza.