reCAPTCHA invisible

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, puedes especificar el idioma o la ubicación de la insignia.

Consulta Cómo verificar la respuesta del usuario para comprobar si el usuario resolvió correctamente el CAPTCHA.

Vincular automáticamente el desafío a un botón

El método más fácil para usar el widget de reCAPTCHA invisible en tu página es incluir el recurso JavaScript necesario y agregar algunos atributos al botón HTML. Los atributos necesarios son un nombre de clase "g-recaptcha", la clave de tu 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.

Vincula el desafío a un botón de manera programática o invoca el desafío.

Para posponer la vinculación, especifica la función de devolución de llamada en carga y agrega parámetros al recurso JavaScript. Esto funciona igual que el desafío normal de reCAPTCHA.

Invoca el desafío de forma programática.

Para invocar la verificación de reCAPTCHA de manera programática, se puede renderizar el desafío en un elemento div con un atributo data-size="invisible" y llamar 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 de JavaScript.

    grecaptcha.execute();

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

Configuración

Parámetros de recursos de 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 Default Descripción
data-sitekey sitekey Tu clave del sitio.
insignia de datos insignia inferior derecha, inferior izquierda intercalada abajo a la derecha Opcional. Cambia la posición de la insignia de reCAPTCHA. "intercalado" te permite posicionarla con CSS.
data-size tamaño invisible Opcional. Se usa para crear un widget invisible vinculado a un elemento 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 en las instalaciones de reCAPTCHA existentes en una página. Si es verdadero, esta instancia de reCAPTCHA será parte de un espacio de ID independiente.

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.
heredar
Usa 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 de manera programática la verificación de reCAPTCHA. Se usa si el reCAPTCHA invisible está en un 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 de reCAPTCHA invisible después de la validación del lado 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>