Esta página se ha traducido con Cloud Translation API.
Switch to English

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:

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.

  1. 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>
    
  2. 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.

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.