Instrumenta páginas web con la casilla de verificación

Esta página explica cómo habilitar y personalizar la API de reCAPTCHA Enterprise en tu página web. Para obtener más información sobre reCAPTCHA Enterprise, consulta la descripción general de reCAPTCHA Enterprise

La API de reCAPTCHA Enterprise, cuando se usa una Clave configurada con la opción CHECKBOX, mostrará la casilla de verificación "No soy un robot". reCAPTCHA puede requerir que el usuario final resuelva un desafío CAPTCHA antes de generar un token válido.

Antes de comenzar

Completa los pasos de la Guía de inicio rápido para obtener acceso a la API.
Asegúrate de tener una Key con el tipo de integración CHECKBOX.

Integración de frontend

Para mostrar el widget, puedes hacer lo siguiente:

Renderizar automáticamente el widget o
Renderizar explícitamente el widget

Consulta Configuración para aprender a personalizar tu widget. Por ejemplo, es posible que desees especificar el idioma o el tema para el widget.

Renderiza automáticamente el widget de casilla de verificación

El método más sencillo para renderizar el widget de casilla de verificación en tu página es incluir el recurso JavaScript necesario y una etiqueta g-recaptcha. La etiqueta g-recaptcha es un elemento DIV con el nombre de clase g-recaptcha y tu Key en el atributo data-sitekey:

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

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

Renderiza explícitamente el widget

Se puede diferir el renderizado si se especifica su función de devolución de llamada de carga y si se agregan parámetros al recurso de JavaScript.

Especifica la función de devolución de llamada onload. Se llamará a esta función cuando se hayan cargado todas las dependencias.
```
<script type="text/javascript">
  var onloadCallback = function() {
    alert("grecaptcha is ready!");
  };
</script>
```
Inserta el recurso de JavaScript, mediante la configuración del parámetro onload en el nombre de tu función de devolución de llamada de carga y el parámetro render en explicit.
```
<script src="https://www.google.com/recaptcha/enterprise.js?onload=onloadCallback&render=explicit"
    async defer>
</script>
```
Cuando se ejecuta la devolución de llamada, puedes llamar al método grecaptcha.enterprise.render desde la API de JavaScript.
Tu función de devolución de llamada onload debe definirse antes de que se cargue la API de reCAPTCHA. Para garantizar que no haya condiciones de carrera:
- Ordena tus secuencias de comandos con la devolución de llamada primero, y luego reCAPTCHA
- Usa los parámetros async y defer en las etiquetas `script`

Configuración

Parámetros de recursos JavaScript (enterprise.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 de grecaptcha.enterprise.render

Atributo de la etiqueta g-reCAPTCHA	Parámetro grecaptcha.enterprise.render	Valor	Default	Descripción
data-sitekey	sitekey			clave de reCAPTCHA.
data-action	acción			Opcional. Secuencia de comandos que describe la acción actual.
data-theme	Tema	luz oscura	Leve	Opcional. El tema de color del widget.
data-size	size	normal compacto	Normal	Opcional. El tamaño del widget.
data-tabindex	tabindex		0	Opcional El tabindex del widget y el 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.

API de JavaScript

Método	Descripción
grecaptcha.enterprise.render( container, Parámetros )	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"}.
grecaptcha.enterprise.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.enterprise.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 type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.enterprise.render('html_element', {
          'sitekey' : 'your_site_key',
          'action'  : 'homepage',
        });
      };
    </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>

Renderizado explícito para múltiples 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' : 'your_site_key',
          'action': 'action1',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.enterprise.render(document.getElementById('example2'), {
          'sitekey' : 'your_site_key',
          'action': 'action2',
        });
        grecaptcha.enterprise.render('example3', {
          'sitekey' : 'your_site_key',
          'action': 'action3',
          '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>

Acciones

Lee sobre el concepto de Acciones.

Crea una evaluación

Haz la solicitud para crear una evaluación.