Instala claves basadas en puntuaciones en sitios web

En esta página, se explica cómo instalar una clave basada en la puntuación sin desafío en tu sitio web. Con una clave basada en la puntuación, puedes incluir reCAPTCHA en todo tu sitio sin requerir que los usuarios resuelvan los desafíos de CAPTCHA.

Cuando se instala una clave basada en puntuaciones, reCAPTCHA envía una respuesta encriptada, el token de respuesta de reCAPTCHA (también conocido como token), cuando un usuario final activa una interacción. Después de generar el token, debes crear una evaluación en un plazo de dos minutos para recibir una puntuación para cada solicitud. Según la puntuación, puedes comprender el nivel de riesgo que representan las interacciones de los usuarios y configurar una respuesta (o respuestas) adecuada. Además, la clave basada en la puntuación puede recopilar datos de telemetría de la actividad de los bots para advertir de forma anticipada sobre nuevos ataques o destinos.

Para mejorar el modelo de riesgo de reCAPTCHA, te recomendamos que incluyas reCAPTCHA en cada página de tu sitio, ya que ayuda a comprender cómo los usuarios reales y los bots realizan la transición entre diferentes páginas y acciones.

Antes de comenzar

  1. Prepara tu entorno para reCAPTCHA.

  2. Crea una clave basada en la puntuación.

    Como alternativa, puedes copiar el ID de una clave existente basada en la puntuación siguiendo uno de estos pasos:

    • Para copiar el ID de una clave existente desde la consola deGoogle Cloud , haz lo siguiente:

      1. Ve a la página de reCAPTCHA.

        Ir a reCAPTCHA

      2. Selecciona la pestaña Keys.
      3. En la lista de claves de reCAPTCHA, busca la clave que deseas copiar y, luego, haz clic en .
    • Para copiar el ID de una clave existente con la API de REST, usa el método projects.keys.list.
    • Para copiar el ID de una clave existente con la CLI de gcloud, usa el comando gcloud recaptcha keys list.

Coloca la clave en tu sitio web

reCAPTCHA funciona mejor cuando tiene contexto sobre las interacciones en tu sitio. reCAPTCHA supervisa el comportamiento legítimo y abusivo para aprender sobre las interacciones en tu sitio.

Para obtener los mejores resultados, instala las claves basadas en la puntuación en los siguientes lugares de tu sitio web:

  • Formularios
  • Acciones (interacciones del usuario)
  • En el fondo de todas las páginas web

Las claves basadas en la puntuación no interrumpen a los usuarios, por lo que puedes ejecutar reCAPTCHA con ellas cuando sea necesario sin afectar las conversiones.

Integra la clave con el frontend

Te recomendamos que agregues la verificación de reCAPTCHA en una interacción del usuario que deba verificarse. Por ejemplo, si deseas verificar la acción de envío de un formulario, debes agregar la verificación de reCAPTCHA en la acción de envío.

Según dónde quieras agregar la verificación de reCAPTCHA, elige la opción adecuada:

Puedes ver un ejemplo de cada opción en el código fuente del sitio web de demostración.

Agrega verificación en una interacción del usuario

  1. Para cargar reCAPTCHA en tu página web, agrega la API de JavaScript con tu clave basada en la puntuación dentro del elemento <head></head> de tu página web.

        <head>
    <script src="https://www.google.com/recaptcha/enterprise.js?render=KEY_ID"></script>
    ....
    </head>

    De forma predeterminada, reCAPTCHA usa el idioma del navegador. Si quieres especificar un idioma diferente, usa el atributo hl=LANG en tu secuencia de comandos. Por ejemplo, para usar francés, especifica lo siguiente: <script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>. Para obtener información sobre los idiomas admitidos, consulta los códigos de idioma para reCAPTCHA.

    Si deseas especificar una ubicación para la insignia, usa badge=LOCATION como parámetro de consulta en la etiqueta de secuencia de comandos. Por ejemplo, www.google.com/recaptcha/enterprise.js?render=KEY_ID&badge=bottomleft De forma predeterminada, la ubicación se establece en bottomright. Los otros valores posibles son inline y bottomleft.

  2. Para agregar la verificación de reCAPTCHA en una interacción del usuario, haz lo siguiente:

    1. Para asegurarte de que grecaptcha.enterprise.execute() se ejecute después de que se cargue la biblioteca de reCAPTCHA, usa grecaptcha.enterprise.ready().

    2. Llama a grecaptcha.enterprise.execute() en cada interacción que quieras proteger con tu clave basada en la puntuación. Especifica un nombre significativo para una interacción del usuario en el parámetro action. Para obtener más orientación, consulta Acciones.

      En el siguiente ejemplo, se muestra cómo llamar a grecaptcha.enterprise.execute() en una acción de acceso:

      <script>
function onClick(e) {
  e.preventDefault();
  grecaptcha.enterprise.ready(async () => {
    const token = await grecaptcha.enterprise.execute('KEY_ID', {action: 'LOGIN'});
    // IMPORTANT: The 'token' that results from execute is an encrypted response sent by
    // reCAPTCHA to the end user's browser.
    // This token must be validated by creating an assessment.
    // See https://cloud.google.com/recaptcha/docs/create-assessment
  });
}
</script>

      grecaptcha.enterprise.execute() genera un token como se muestra en el siguiente ejemplo: 

      03AGdBq27tvcDrfiRuxQnyKs-SarXVzPODXLlpiwNsLqdm9BSQQRtxhkD-Wv6l2vBSnL_JQd80FZp3IeeF_TxNMrqhyQchk7hmg_ypDctt_F5RTr9zNO9TSDX3Fy0qHQTuaM9E3hrAkA1v1l7D-fCreg7uq8zoudfh1ZRmN49-2iAMAn4E8_ff-nmlLTNGVZmCSyeze-5xM24pM_JhhUVcCMIDKYtDUnr2imxg2ubIqMscCZGUtdXNUO_LRSzuwWDlLyAr3V2nVn29Z48PQa2QzbymEXzO9pCtoGQmY7kiZ8ILfD9DAJSSyUTMwJXVJptUeBmLM341fq_STYZBbPQJ0zYOEDvJoFsIwGMfuphkDet0nK56b0mkzaL8RCRy2oK31Mcx6n3PhGkCnQ6QIhiV5ZVmV1Hz9M3w99zYw6ekc3wPCNMZ6V6x1ApVpIk3reFfByRQ0C0_pRWwbKZHLXQ_oSTI1UI7kyH1VeXngsJAx2l7zcp0hQNipajC4YwL7Jb8X4cCD0NeiaY1YCrI5j87mK5axcMikq460I4niIFeDBlHGF-ndqu3CJstosAur-C_x827f-dPPjA9Vrw8MDb3x4KUb0vbA8xE9mJxPYGY0rPCR27vJ38Voa7DjEBGX9c-iufv5_wfj-yIfIAHy0iijnRLI0CVkWF2-iPdWv7LnkTwL3WKbF_MrEGZXmtyLX9dEZArfxmToeMuSdYkfikkgR2-k4Xzxlz15RbHJuWSAYqEyTTnpUXmOvDuTN92b0kYqbRelcLUI_Shm-8dq9e-L7K6YWQv32gV6NukZKY15dyrJaW10frBgTOGSTTpIyB7MNEL8S27WjWtOb-zWsgimIhoRNfS8BiJWkmK4gTj51m7Wur-qsDbHgV6gXlMvjJs_B7oXX-mKsKhY9ACtwukotBelGYQOvf1RDHjH3Yi1RDfELBY6AkwUK4tq8cACVGpCwa0gKUo-sbORTsGu_r7VTzYo1AaZD5HV4XUm8yoqszel6DmIfkJcI7PfzzvfUJuvMQ1itZSzpzuth3glbKBYsIjbKqG-q8cxtZ7u0l32j46ASo2zlCJWUjwP3W1P7MUenEoIZtjlyTB_tT6Fk8RxGgRv3oLP7NPFJGs9ZGOAl6tBHpZF8Y_FqEOCMKtBl2JYOE5h6_Es3buSdiMm7mtLr64pboGiEColF1vbVvYpyaaqGFPXBM6ekZSXEXLAI0_7rj_fCLgnB21KXfac95vZbM9vyJCASvDcWKwqajQwy5aGMNe9GtbMogYbZfz5UGWAIi24Vd8KSv3qKOOwvzbcw4H0HYdsBXA

  3. Después de generar el token, envía el token de reCAPTCHA a tu backend y crea una evaluación en un plazo de dos minutos.

    En el caso de las integraciones del WAF, si integras una clave de token de acción, debes adjuntar el token a un encabezado de la solicitud predefinido y no es necesario que crees una evaluación. Para obtener más detalles, consulta Implementa tokens de acción de reCAPTCHA.

Agrega reCAPTCHA a un botón HTML

  1. Para cargar reCAPTCHA en tu página web, agrega la API de JavaScript con tu clave basada en la puntuación dentro del elemento <head></head> de tu página web.

        <head>
    <script src="https://www.google.com/recaptcha/enterprise.js?render=KEY_ID"></script>
    ....
    </head>

    De forma predeterminada, reCAPTCHA usa el idioma del navegador. Si quieres especificar un idioma diferente, usa el atributo hl=LANG en tu secuencia de comandos. Por ejemplo, para usar francés, especifica lo siguiente: <script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>. Para obtener información sobre los idiomas admitidos, consulta los códigos de idioma para reCAPTCHA.

  2. Para agregar reCAPTCHA a un botón HTML simple, haz lo siguiente:

    1. Define una función de devolución de llamada para controlar el token.

      <script>
   function onSubmit(token) {
     document.getElementById("demo-form").submit();
   } // Use `requestSubmit()` for extra features like browser input validation.
</script>

      Para obtener más información, consulta el método requestSubmit().

    2. Agrega atributos a tu botón HTML.

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

      Si deseas especificar una ubicación para la insignia, usa el atributo data-badge=LOCATION en el elemento que tiene class=g-recaptcha. De forma predeterminada, la ubicación se establece en bottomright. Los otros valores posibles son inline y bottomleft.

    3. Cuando se usa este botón para enviar un formulario en tu sitio, el parámetro POST g-recaptcha-response contiene el token de respuesta.

  3. Después de generar el token, envía el token de reCAPTCHA a tu backend y crea una evaluación en un plazo de dos minutos.

    En el caso de las integraciones del WAF, si integras una clave de token de acción, debes adjuntar el token a un encabezado de la solicitud predefinido y no es necesario que crees una evaluación. Para obtener más detalles, consulta Implementa tokens de acción de reCAPTCHA.

¿Qué sigue?