Instalación de claves de sitios basadas en la puntuación (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 dificultades en tu sitio web. Con la clave de sitio basada en la puntuación, puedes incluir reCAPTCHA Enterprise en todo tu sitio sin que los usuarios deban resolver desafíos de CAPTCHA.

Después de instalar una clave de sitio basada en la puntuación, se muestra una puntuación por cada solicitud sin inconvenientes del usuario. En función de la puntuación, puedes comprender el nivel de riesgo que representan las interacciones del usuario y configurar una o más respuestas apropiadas. Además, la clave de sitio basada en la puntuación puede recopilar la telemetría de actividad de un bot a fin de recibir alertas tempranas sobre nuevos ataques o objetivos.

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 basada en puntuaciones existente desde 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, luego, haz clic en .

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

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

Cómo colocar la clave en su 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 el sitio.

Para obtener mejores resultados, instala las claves de sitios basadas en la puntuación 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 la puntuación no interrumpen a los usuarios, por lo que puedes ejecutar reCAPTCHA Enterprise con claves de sitio basadas en puntuaciones siempre que sea necesario sin afectar la conversión.

Integra la clave en el frontend

  1. Para cargar reCAPTCHA Enterprise en tu página web, agrega la API de JavaScript con tu clave de sitio basada en la puntuación dentro del elemento <head></head> de la página web.
        <head>
        <script src="https://www.google.com/recaptcha/enterprise.js?render=site_key"></script>
        ....
        </head>
      
  2. Agrega la verificación de reCAPTCHA Enterprise a una interacción específica (como un clic en un botón o varias interacciones) o cuando se carga la página web.

    Cuando especificas el parámetro action, se habilitan las siguientes funciones:

    • Análisis de riesgo adaptable según el contexto de la acción, ya que el comportamiento abusivo puede variar.
    • Filtrado y agrupación de las métricas de puntuación por acción en Stackdriver.

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

    • Si deseas agregar la verificación de reCAPTCHA Enterprise a una interacción del usuario, haz lo siguiente:

      1. Para garantizar 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 desees proteger con tu 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. Si quieres agregar la verificación de reCAPTCHA Enterprise cuando se carga la página, haz lo siguiente:

        1. Para garantizar 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 de sitio basada en la puntuación y especifica un nombre significativo para una 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(function() {
                    grecaptcha.enterprise.execute('site_key', {action: 'homepage'}).then(function(token) {
                       // 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>
              

      4. Si quieres agregar reCAPTCHA Enterprise en un solo botón HTML, haz lo siguiente:

        1. Para controlar el token, agrega una función callback().

              <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. Después de generar el token, envía el token de reCAPTCHA en dos minutos a tu backend para crear una evaluación.

¿Qué sigue?