Instala claves de sitios basadas en puntuaciones (sin desafíos) en sitios web

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

Después de instalar una clave de sitio basada en puntuaciones, se muestra una puntuación para cada solicitud sin inconvenientes para los usuarios. En función de la puntuación, puedes comprender el nivel de riesgo que presentan las interacciones del usuario y configurar una o varias respuestas adecuadas. Además, la clave de sitio basada en la puntuación puede recopilar la telemetría de actividad de los bots para generar advertencias tempranas contra nuevos objetivos o ataques.

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

Antes de comenzar

  1. Elige el mejor método para configurar reCAPTCHA Enterprise en tu entorno y completa la configuración.

  2. Crea una clave de sitio basada en la puntuación. Como alternativa, puedes copiar el ID de una clave de sitio existente basada en la puntuación mediante uno de los siguientes pasos:

    • Para copiar el ID de una clave de sitio existente basada en la puntuación de Google Cloud Console, haz lo siguiente:

      1. Ve a la página de reCAPTCHA Enterprise.

        Ir a reCAPTCHA Enterprise

      2. En la lista de claves de reCAPTCHA, mantén el puntero sobre el ID de clave que deseas copiar y haz clic en .

    • Para copiar el ID de una clave de sitio existente basada en puntuaciones con la API de REST, usa el método projects.keys.list.

    • Para copiar el ID de una clave de sitio existente basada en puntuaciones con la CLI de gcloud, usa el comando gcloud recaptcha keys list.

Coloca la llave en tu sitio web

reCAPTCHA Enterprise funciona mejor cuando tiene contexto sobre las interacciones en tu sitio. reCAPTCHA Enterprise supervisa el comportamiento legítimo y abusivo para obtener información sobre las interacciones en tu sitio.

Para obtener mejores resultados, instala claves de sitio basadas en puntuaciones en los siguientes lugares de tu sitio web:

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

Las claves de sitios basadas en puntuaciones no interrumpen a tus usuarios, por lo que puedes ejecutar reCAPTCHA Enterprise con claves de sitios basadas en puntuaciones siempre que sea necesario sin afectar las conversiones.

Integrar la clave en el frontend

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

Cómo agregar la verificación a una interacción del usuario

  1. Para cargar reCAPTCHA Enterprise en tu página web, agrega la API de JavaScript con tu clave del sitio 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=site_key"></script>
        ....
        </head>
      

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

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

    2. Llama a grecaptcha.enterprise.execute() en cada interacción que quieras proteger con la clave de sitio basada en la puntuación. Especifica un nombre significativo para la interacción de un usuario en el parámetro action. Para obtener más informació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('site_key', {action: 'LOGIN'});
          // IMPORTANT: The 'token' that results from execute is an encrypted response sent by
          // reCAPTCHA Enterprise to the end user's browser.
          // This token must be validated by creating an assessment.
          // See https://cloud.google.com/recaptcha-enterprise/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 el transcurso de dos minutos.

Cómo agregar la verificación cuando se cargue la página

  1. Para cargar reCAPTCHA Enterprise en tu página web, agrega la API de JavaScript con tu clave del sitio 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=site_key"></script>
        ....
        </head>
      

  2. Para agregar la verificación de reCAPTCHA Enterprise cuando se cargue la página, haz lo siguiente:

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

    2. Llama a grecaptcha.enterprise.execute() con tu clave del sitio basada en la puntuación y especifica un nombre significativo para la interacción del usuario en el parámetro action. Para obtener más información, consulta Acciones.

      En el siguiente ejemplo, se muestra cómo llamar a grecaptcha.enterprise.execute() cuando se carga una página web:

      <script  src="https://www.google.com/recaptcha/enterprise.js?render=site_key"></script>
      <script>
        grecaptcha.enterprise.ready(async () => {
          const token = await grecaptcha.enterprise.execute('site_key', {action: 'homepage'});
          // IMPORTANT: The 'token' that results from execute is an encrypted response sent by
          // reCAPTCHA Enterprise to the end user's browser.
          // This token must be validated by creating an assessment.
          // See https://cloud.google.com/recaptcha-enterprise/docs/create-assessment
        });
      </script>
      
  3. Después de generar el token, envía el token de reCAPTCHA a tu backend y crea una evaluación en el transcurso de dos minutos.

Cómo agregar reCAPTCHA en un botón HTML

  1. Para cargar reCAPTCHA Enterprise en tu página web, agrega la API de JavaScript con tu clave del sitio 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=site_key"></script>
        ....
        </head>
      

  2. Para agregar reCAPTCHA Enterprise 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();
         }
      </script>
      
    2. Agrega atributos a tu botón HTML.

      <button class="g-recaptcha"
      data-sitekey="site_key"
      data-callback='onSubmit'
      data-action='submit'>Submit</button>
      
    3. Cuando se usa este botón para enviar un formulario en el sitio, el parámetro POST de 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 el transcurso de dos minutos.

¿Qué sigue?