Instalar claves de casillas (desafío de casillas) en sitios web

En esta página se explica cómo instalar una clave de casilla con la prueba de casilla No soy un robot en su sitio web. En función de cómo hayas configurado la opción de seguridad de la prueba al crear la clave de la casilla, es posible que reCAPTCHA requiera que el usuario final resuelva una prueba CAPTCHA antes de generar un token válido.

Antes de empezar

  1. Prepara tu entorno para reCAPTCHA.

  2. Crea una clave de casilla.

    También puede copiar el ID de una clave de casilla de verificació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.

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:

Renderizar el widget automáticamente

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

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

En el elemento con la clase g-recaptcha, incluya también el atributo data-sitekey y asígnale el valor de su clave de casilla.

Para especificar una acción, incluye el atributo data-action y asígnale el nombre de la acción. Para obtener más información, consulta Acciones.

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

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.

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="KEY_ID" data-action="LOGIN"></div>
          <br/>
          <input type="submit" value="Submit">
        </form>
      </body>
    </html>

Renderizar el widget de forma explícita

Con este método, puedes renderizar el widget a través de una secuencia de comandos de JavaScript que ya tengas mediante el método grecaptcha.enterprise.render(). Usa este método para evitar condiciones de carrera o si quieres mostrar el widget en función de la lógica de JavaScript.

Para asegurarte de que no haya condiciones de carrera al renderizar el widget de forma explícita, ten en cuenta lo siguiente:

  • Ordena tus secuencias de comandos con la función de retrollamada primero y, después, la API de reCAPTCHA.
  • Use los parámetros async y defer en las etiquetas script.

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

  1. Para aplazar la renderización del widget, sigue estos pasos:

    1. Especifica tu función de retrollamada onload antes de que se carguen la API de reCAPTCHA y otras dependencias.

       <script type="text/javascript">
 var onloadCallback = function() {
    alert("grecaptcha is ready!");
 };
 </script>

    2. Una vez que se haya ejecutado la función de retrollamada, llama al método grecaptcha.enterprise.render() con los siguientes parámetros de la API de JavaScript.

      • container: el elemento HTML en el que se renderizará el widget reCAPTCHA. Especifica el ID del contenedor (cadena) o el elemento DOM.

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

      • action: especifica el nombre de la acción asociada al elemento protegido.

      grecaptcha.enterprise.render('html_element', {
   'sitekey' : 'KEY_ID',
   'action': 'LOGIN',
 });

  2. Para renderizar el widget, inserta el recurso de JavaScript. Asigna a onload el nombre de tu función de retrollamada onload e incluye render=explicit.

    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.

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

Ejemplo 1

En el siguiente código de ejemplo 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' : 'KEY_ID',
        });
      };
    </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 el siguiente código de ejemplo se muestra 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' : 'KEY_ID',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.enterprise.render(document.getElementById('example2'), {
          'sitekey' : 'KEY_ID',
        });
        grecaptcha.enterprise.render('example3', {
          'sitekey' : 'KEY_ID',
          '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>

Siguientes pasos