Se usó la API de Cloud Translation para traducir esta página.

reCAPTCHA v2

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

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.

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

Procesa automáticamente el widget de reCAPTCHA

El método más fácil para renderizar el widget de 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.

Procesa 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.

Especifica la función de devolución de llamada onload. Se llamará a esta función cuando se cargaron 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/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.
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 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.
`render`	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.
`data-theme`	`theme`	`dark light`	`light`	Opcional. El tema de color del widget.
`data-size`	`size`	`compact normal`	`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>