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ó el CAPTCHA correctamente.

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

El método más sencillo para usar el widget de reCAPTCHA invisible en tu página es incluir el recurso de JavaScript necesario y agregar algunos atributos a tu 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 usando 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 postergar la vinculación, se puede especificar la función de devolución de llamada en carga y agregar 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 forma programática, renderiza el desafío en un elemento div con un atributo data-size="invisible" y llama a ejecución de manera programática.

  1. Crea un elemento 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 ejecuta tu devolución de llamada, puedes llamar al método grecaptcha.render desde la API de JavaScript.

Configuración

Parámetros de recurso 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 Predeterminada Descripción
data-sitekey sitekey Tu clave de sitio.
insignia de datos insignia parte inferior derecha en línea esquina inferior derecha Opcional. Cambia la posición de la insignia de reCAPTCHA. “inline” te permite posicionarlo con CSS.
data-size size invisible Opcional. Se usa para crear un widget invisible vinculado a un elemento div y que se ejecute 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.
aislada false 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 formará 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.
Inherit
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 la verificación de reCAPTCHA de forma 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.restablecer(
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>

Invocación del 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>