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:
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 la clave de tu sitio en la
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ámetrorender
enexplicit
.<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 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. | |
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 | Default | Descripción |
---|---|---|---|---|
data-sitekey | sitekey | Tu clave del 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>