Instalación de claves de casillas de verificación (desafío de la casilla de verificación) en sitios web

En esta página, se explica cómo instalar una clave de sitio con casilla de verificación No soy un robot en tu sitio web. Según cómo hayas configurado la opción de seguridad del desafío cuando creaste la clave del sitio con casilla de verificación, reCAPTCHA Enterprise podría requerir que el usuario final resuelva un desafío CAPTCHA antes de generar un token válido.

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 de casilla de verificación. Como alternativa, puedes copiar el ID de una clave de sitio de casilla de verificación existente mediante uno de los siguientes pasos:

    • Para copiar el ID de una clave de sitio de casilla de verificación 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 de casilla de verificación existente con la API de REST, usa el método projects.keys.list.

    • Para copiar el ID de una clave de sitio de casilla de verificación existente con la CLI de gcloud, usa el comando gcloud recaptcha keys list.

Cómo renderizar el widget de reCAPTCHA en el frontend

Para mostrar el widget de reCAPTCHA en tu página web, usa uno de los siguientes métodos:

Cómo renderizar automáticamente el widget

Con este método, puedes renderizar el widget en cualquier objeto (como div o span) con la clase g-recaptcha.

En tu página web, incluye el recurso JavaScript necesario y un elemento HTML con la clase g-recaptcha.

En el elemento con la clase g-recaptcha, también incluye el atributo data-sitekey y establécelo en la clave del sitio de la casilla de verificación.

La secuencia de comandos debe cargarse mediante el protocolo HTTPS y puede incluirse desde cualquier punto de la página sin restricciones.

El siguiente ejemplo es un fragmento de código de muestra:

    <html>
      <head>
        <title>reCAPTCHA demo: Simple page</title>
        <script src="https://www.google.com/recaptcha/enterprise.js" async defer></script>
      </head>
      <body>
        <form action="?" method="POST">
          <div class="g-recaptcha" data-sitekey="site_key"></div>
          <br/>
          <input type="submit" value="Submit">
        </form>
      </body>
    </html>

Renderiza explícitamente el widget

Con este método, puedes renderizar el widget mediante una secuencia de comandos de JavaScript existente con el método grecaptcha.enterprise.render(). Usa este método para evitar las condiciones de carrera o si quieres mostrar el widget según la lógica de JavaScript existente.

Para asegurarte de que no haya condiciones de carrera cuando renderices el widget de forma explícita, revisa las siguientes consideraciones:

  • Ordena tus secuencias de comandos con la función de devolución de llamada primero y, luego, a la API de reCAPTCHA Enterprise.
  • Usa los parámetros async y defer en las etiquetas script.

Para renderizar el widget de forma explícita, sigue estos pasos:

  1. Para diferir la renderización del widget, haz lo siguiente:

    1. Especifica tu función de devolución de llamada onload antes de que se cargue la API de reCAPTCHA Enterprise y otras dependencias.

       <script type="text/javascript">
       var onloadCallback = function() {
          alert("grecaptcha is ready!");
       };
       </script>
      
    2. Después de ejecutar tu función de devolución de llamada, llama al método grecaptcha.enterprise.render() con los siguientes parámetros de la API de JavaScript.

      • conteiner: El elemento HTML para renderizar el widget reCAPTCHA. Especifica el ID del contenedor (string) o el elemento DOM mismo.

      • parameters: Un objeto que contiene parámetros como pares clave-valor, por ejemplo, {"sitekey": "your_site_key", "theme": "light"}.

      grecaptcha.enterprise.render('html_element', {
         'sitekey' : ' site_key',
       });
      
  2. Para procesar el widget, inserta el recurso JavaScript. Configura onload con el nombre de tu función de devolución de llamada de carga y, además, incluye render=explicit.

     <script src="https://www.google.com/recaptcha/enterprise.js?onload=onload_Callback_function&render=explicit"
        async defer>
     </script>
    

Ejemplo 1

En la siguiente muestra de código, se muestra la renderización explícita después de una devolución de llamada onload:

<html>
   <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
     <script type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.enterprise.render('html_element', {
          'sitekey' : ' site_key',
        });
      };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <div id="html_element"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
      <script src="https://www.google.com/recaptcha/enterprise.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Ejemplo 2

En la siguiente muestra de código, se observa la renderización explícita de varios widgets:

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render for multiple widgets</title>
        <script type="text/javascript">
      var verifyCallback = function(response) {
        alert(response);
      };
      var widgetId1;
      var widgetId2;
      var onloadCallback = function() {
        // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
        // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
        widgetId1 = grecaptcha.enterprise.render('example1', {
          'sitekey' : 'site_key',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.enterprise.render(document.getElementById('example2'), {
          'sitekey' : 'site_key',
        });
        grecaptcha.enterprise.render('example3', {
          'sitekey' : 'site_key',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
    </script>
  </head>
  <body>
    <!-- The g-recaptcha-response string displays in an alert message upon submit. -->
    <form action="javascript:alert(grecaptcha.enterprise.getResponse(widgetId1));">
      <div id="example1"></div>
      <br>
      <input type="submit" value="getResponse">
    </form>
    <br>
    <!-- Resets reCAPTCHA widgetId2 upon submit. -->
    <form action="javascript:grecaptcha.enterprise.reset(widgetId2);">
      <div id="example2"></div>
      <br>
      <input type="submit" value="reset">
    </form>
    <br>
    <!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
    <form action="?" method="POST">
      <div id="example3"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
     <script src="https://www.google.com/recaptcha/enterprise.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

¿Qué sigue?