Instalar claves basadas en una puntuación en sitios web

En esta página se explica cómo instalar una clave basada en una puntuación sin verificación en su sitio web. Con una clave basada en puntuación, puedes incluir reCAPTCHA en todo tu sitio sin que los usuarios tengan que resolver desafíos CAPTCHA.

Cuando se instala una clave basada en puntuación, reCAPTCHA envía una respuesta cifrada, el token de respuesta de reCAPTCHA (también conocido como token), cuando un usuario final activa una interacción. Una vez generado el token, debes crear una evaluación en un plazo de dos minutos para recibir una puntuación por cada solicitud. En función de la puntuación, puede determinar el nivel de riesgo que suponen las interacciones de los usuarios y configurar una o varias respuestas adecuadas. Además, la clave basada en la puntuación puede recoger telemetría de actividad de bots para alertar con antelación sobre nuevos ataques u objetivos.

Para mejorar el modelo de riesgo de reCAPTCHA, le recomendamos que incluya reCAPTCHA en todas las páginas de su sitio, ya que así podrá saber cómo se desplazan los usuarios reales y los bots entre las diferentes páginas y acciones.

Antes de empezar

  1. Prepara tu entorno para reCAPTCHA.

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

    También puede copiar el ID de una clave basada en puntuación siguiendo uno de estos pasos:

    • Para copiar el ID de una clave ya creada desde la consola deGoogle Cloud , sigue estos pasos:

      1. Ve a la página reCAPTCHA.

        Ir a reCAPTCHA

      2. En la lista de claves de reCAPTCHA, coloca el puntero sobre la clave que quieras copiar y, a continuación, haz clic en .
    • Para copiar el ID de una clave que ya tengas mediante la API REST, usa el método projects.keys.list.
    • Para copiar el ID de una clave que ya tengas con gcloud CLI, 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. Monitoriza tanto el comportamiento legítimo como el inadecuado para aprender sobre las interacciones en tu sitio.

Para obtener los mejores resultados, instale claves basadas en puntuación en los siguientes lugares de su sitio web:

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

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

Integrar la clave con el frontend

Le recomendamos que añada la verificación reCAPTCHA en una interacción de usuario que deba verificarse. Por ejemplo, si quiere verificar la acción de envío de un formulario, debe añadir la verificación reCAPTCHA a la acción de envío.

En función de dónde quieras añadir la verificación 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.

Añadir una verificación en una interacción de usuario

  1. Para cargar reCAPTCHA en tu página web, añade la API de JavaScript con tu clave basada en puntuaciones en el elemento <head></head> de tu página web.

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

    reCAPTCHA usa el idioma del navegador de forma predeterminada. Si quiere especificar otro idioma, utilice el atributo hl=LANG en su secuencia de comandos. Por ejemplo, para usar el 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 de reCAPTCHA.

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

  2. Para añadir la verificación reCAPTCHA en una interacción de usuario, sigue estos pasos:

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

    2. Llama a grecaptcha.enterprise.execute() en cada interacción que quieras proteger con tu clave basada en puntuación. Especifica un nombre significativo para una interacción de 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 inicio de sesión:

      <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. Una vez generado el token, envíalo a tu backend y crea una evaluación en un plazo de dos minutos.

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

Añadir reCAPTCHA a un botón HTML

  1. Para cargar reCAPTCHA en tu página web, añade la API de JavaScript con tu clave basada en puntuaciones en el elemento <head></head> de tu página web.

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

    reCAPTCHA usa el idioma del navegador de forma predeterminada. Si quiere especificar otro idioma, utilice el atributo hl=LANG en su secuencia de comandos. Por ejemplo, para usar el 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 de reCAPTCHA.

  2. Para añadir reCAPTCHA a un botón HTML sencillo, siga estos pasos:

    1. Define una función de retrollamada para gestionar 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. Añade atributos al botón HTML.

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

      Si quiere especificar una ubicación para la insignia, utilice el atributo data-badge=LOCATION en el elemento que tenga class=g-recaptcha. De forma predeterminada, la ubicación es 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. Una vez generado el token, envíalo a tu backend y crea una evaluación en un plazo de dos minutos.

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

Siguientes pasos