reCAPTCHA v2

En esta página, se explica cómo mostrar y personalizar el widget reCAPTCHA v2 en tu página web.

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.

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

Cómo renderizar automáticamente el widget de reCAPTCHA

El método más sencillo para procesar el widget reCAPTCHA en tu página es incluir el recurso de JavaScript necesario y una etiqueta g-recaptcha. La etiqueta g-recaptcha es un elemento DIV con el nombre de clase g-recaptcha y tu clave de sitio en el atributo data-sitekey:

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></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.

Cómo renderizar de forma explícita el widget de reCAPTCHA

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 carguen 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/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
    

    Cuando se ejecuta la devolución de llamada, puedes 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.
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.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"}. Consulta los parámetros de grecaptcha.render.
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 type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.render('html_element', {
          'sitekey' : 'your_site_key'
        });
      };
    </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/api.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.render('example1', {
          'sitekey' : 'your_site_key',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.render(document.getElementById('example2'), {
          'sitekey' : 'your_site_key'
        });
        grecaptcha.render('example3', {
          'sitekey' : 'your_site_key',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
    </script>
  </head>
  <body>
    <!-- The g-recaptcha-response string displays in an alert message upon submit. -->
    <form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
      <div id="example1"></div>
      <br>
      <input type="submit" value="getResponse">
    </form>
    <br>
    <!-- Resets reCAPTCHA widgetId2 upon submit. -->
    <form action="javascript:grecaptcha.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/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>