reCAPTCHA invisible

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

En esta página, se explica cómo habilitar y personalizar el reCAPTCHA invisible en tu página web.

Para invocar el reCAPTCHA invisible, puedes hacer lo siguiente:

Consulta Configuraciones para aprender a personalizar el reCAPTCHA invisible. Por ejemplo, puede especificar la ubicación de la insignia o el idioma.

Consulta Verifica la respuesta del usuario para comprobar si resolvió el problema con el CAPTCHA.

Cómo vincular automáticamente el desafío a un botón

El método más sencillo para usar el widget reCAPTCHA invisible en tu página es incluir el recurso JavaScript necesario y agregar algunos atributos a tu botón HTML. Los atributos necesarios son un nombre de clase "g-recaptcha", tu clave de sitio en el atributo data-sitekey y el nombre de una devolución de llamada de JavaScript para controlar la finalización del captcha en el atributo data-callback.

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>
  </head>
  <body>
    <form id="demo-form" action="?" method="POST">
      <button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit">Submit</button>
      <br/>
    </form>
  </body>
</html>

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

Vincular el desafío de manera programática a un botón o invocarlo

Para ello, puedes especificar la función de devolución de llamada de carga y agregar parámetros al recurso JavaScript. Esto funciona igual que el desafío normal de reCAPTCHA.

Invocar el desafío de manera programática

Para invocar de manera programática la verificación de reCAPTCHA, renderiza el desafío en un elemento div con un atributo data-size="invisible" y llama a la ejecución de manera programática.

  1. Crea un div con data-size="invisible".

    <div class="g-recaptcha"
      data-sitekey="_your_site_key_"
      data-callback="onSubmit"
      data-size="invisible">
</div>

  2. Llama a grecaptcha.execute desde un método JavaScript.

    grecaptcha.execute();

    Cuando se ejecute tu devolución de llamada, podrás llamar al método grecaptcha.render desde la API de JavaScript.

Configuración

Parámetros del recurso JavaScript (api.js)

Parámetro Valor Descripción
OnLoad Opcional. El nombre de tu función de devolución de llamada que se ejecutará una vez que se hayan cargado todas las dependencias.
Renderizar carga
explícita		 Opcional. Establece si se debe representar el widget de forma explícita. La configuración predeterminada es OnLoad, que procesará el widget en la primera etiqueta g-recaptcha que encuentre.
hl Ver códigos de lenguajes Opcional. Obliga al widget a renderizarse en un lenguaje específico. Detecta automáticamente el lenguaje del usuario si no se especifica.

Atributos de la etiqueta g-recaptcha y parámetros grecaptcha.render

Atributo de la etiqueta g-reCAPTCHA Parámetro grecaptcha.render Valor Predeterminado Descripción
data-sitekey sitekey Tu clave de sitio.
insignia de datos insignia abajo a la derecha abajo a la izquierda parte inferior derecha Opcional. Cambia la posición de la insignia de reCAPTCHA. “inline” le permite posicionarla con CSS.
data-size size invisible Opcional. Se usa para crear un widget invisible vinculado a un div y ejecutado de manera programática.
data-tabindex tabindex 0 Opcional. El tabindex del desafío. Si otros elementos en tu página usan tabindex, debe configurarse para facilitar la navegación del usuario.
data-callback callback Opcional. El nombre de tu función de devolución de llamada, ejecutada cuando el usuario envía una respuesta exitosa. El token g-recaptcha-response se pasa a tu devolución de llamada.
data-expired-callback expired-callback Opcional. El nombre de tu función de devolución de llamada, ejecutada cuando la respuesta reCAPTCHA caduca y el usuario necesita volver a verificar.
data-error-callback error-callback Opcional. El nombre de tu función de devolución de llamada, ejecutada cuando reCAPTCHA encuentra un error (generalmente conectividad de red) y no puede continuar hasta que se restablezca la conectividad. Si especificas una función aquí, eres responsable de informar al usuario que debe volver a intentarlo.
aisladas falso Opcional. Para que los propietarios de complementos no interfieran con las instalaciones existentes de reCAPTCHA en una página. Si es verdadero, esta instancia de reCAPTCHA formará parte de un espacio de ID separado.

API de JavaScript

Método Descripción
grecaptcha.render(
container,
parámetros,
heredado
) 		Representa el contenedor como un widget reCAPTCHA y muestra el ID del widget recién creado.
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"}. Consulta los parámetros de grecaptcha.render.
inherit
Use los atributos data-* existentes en el elemento si no se especifica el parámetro correspondiente. Los parámetros tendrán prioridad sobre los atributos.
grecaptcha.execute(
opt_widget_id
) 		Invoca la verificación de reCAPTCHA de manera programática. Se usa si el reCAPTCHA invisible está en un elemento div, en lugar de un botón.
opt_widget_id
  ID opcional del widget, predeterminado del primer widget creado si no se especifica.
grecaptcha.reset(
opt_widget_id
) 		Restablece el widget de reCAPTCHA.
opt_widget_id
  ID opcional del widget, predeterminado del primer widget creado si no se especifica.
grecaptcha.getResponse(
opt_widget_id
) 		Obtiene la respuesta para el widget de reCAPTCHA.
opt_widget_id
  ID opcional del widget, predeterminado del primer widget creado si no se especifica.

Ejemplos

Renderizado explícito después de una devolución de llamada de carga

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
    <script>
        var onSubmit = function(token) {
          console.log('success!');
        };

        var onloadCallback = function() {
          grecaptcha.render('submit', {
            'sitekey' : 'your_site_key',
            'callback' : onSubmit
          });
        };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <input id="submit" type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Invocar el desafío invisible de reCAPTCHA después de la validación del cliente

<html>
  <head>
  <script>
    function onSubmit(token) {
      alert('thanks ' + document.getElementById('field').value);
    }

    function validate(event) {
      event.preventDefault();
      if (!document.getElementById('field').value) {
        alert("You must add text to the required field");
      } else {
        grecaptcha.execute();
      }
    }

    function onload() {
      var element = document.getElementById('submit');
      element.onclick = validate;
    }
  </script>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form>
      Name: (required) <input id="field" name="field">
      <div id="recaptcha" class="g-recaptcha"
          data-sitekey="_your_site_key_"
          data-callback="onSubmit"
          data-size="invisible"></div>
      <button id="submit">submit</button>
    </form>
    <script>onload();</script>
  </body>
</html>