Click sobre Google reCAPTCHA con JavaScript [SOLUCIONADO]

Implementación de Google reCAPTCHA con JavaScript

Uno de los desafíos más comunes que enfrentan los desarrolladores web al crear formularios es proteger su sitio contra bots y actividades maliciosas. Esto se consigue, en gran parte, mediante la implementación de sistemas CAPTCHA, que proporcionan una capa adicional de seguridad. Google reCAPTCHA es una herramienta popular que protege a los sitios web de spam y abuso.

Integración Básica de reCAPTCHA

Para incorporar reCAPTCHA en una página web, primero necesitas registrarte en el servicio de Google para obtener una clave de sitio y una clave secreta. A continuación detallamos los pasos necesarios para completar la integración.

Registro en el servicio de reCAPTCHA

Antes de añadir cualquier funcionalidad de reCAPTCHA en tu página, es imprescindible adquirir las claves que te identificarán como usuario legítimo del servicio. Esto se realiza accediendo a la página oficial de Google reCAPTCHA y registrando tu sitio web, seleccionando la versión de reCAPTCHA deseada y obteniendo las credenciales pertinentes.

Añadiendo reCAPTCHA a tu formulario HTML

Una vez obtengas las claves, el siguiente paso es integrar el widget de reCAPTCHA en el formulario de tu sitio. Aquí tienes un ejemplo sencillo de cómo hacerlo:

<form id="miFormulario" action="/submit" method="post">
    <div class="g-recaptcha" data-sitekey="TU_CLAVE_DE_SITIO_PUBLICA"></div>
    <input type="submit" value="Enviar">
</form>
<script src='https://www.google.com/recaptcha/api.js'></script>
        

Copiar

Validación en el lado del servidor

Después de implementar el widget en el lado del cliente, es importante también realizar una verificación en el lado del servidor. Esto asegura que la solicitud sea legítima y no se trate de un intento de evasión del CAPTCHA por parte de un bot. A continuación se muestra un ejemplo de cómo podrías gestionar esta validación utilizando Node.js:

const request = require('request');

const SECRET_KEY = 'TU_CLAVE_SECRETA';

app.post('/submit', function(req, res) {
  if(
    req.body['g-recaptcha-response'] === undefined ||
    req.body['g-recaptcha-response'] === '' ||
    req.body['g-recaptcha-response'] === null
  ) {
    return res.json({"responseCode" : 1, "responseDesc" : "Por favor, selecciona captcha"});
  }

  const verificationURL = "https://www.google.com/recaptcha/api/siteverify?secret=" + SECRET_KEY + "&response=" + req.body['g-recaptcha-response'] + "&remoteip=" + req.connection.remoteAddress;
  
  request(verificationURL, function(error, response, body) {
    body = JSON.parse(body);
    if(body.success !== undefined && !body.success) {
      return res.json({"responseCode" : 1, "responseDesc" : "Falló la verificación de CAPTCHA."});
    }
    res.json({"responseCode" : 0, "responseDesc" : "CAPTCHA pasado con éxito."});
  });
});
        

Copiar

Automatización de interacción con reCAPTCHA

Hay circunstancias donde un desarrollador podría querer automatizar o simular la interacción con el servicio de reCAPTCHA durante el proceso de desarrollo. Uno de los usos comunes para la automatización es el testing. Esto, por supuesto, debería hacerse con autorización y en un entorno controlado para no violar términos de servicio.

Simulación de clic en reCAPTCHA con JavaScript

Automatizar el clic en reCAPTCHA v2 puede ser relativamente sencillo. reCAPTCHA v2 posee un widget visible que los usuarios deben seleccionar. Para simular esta acción en un entorno de pruebas, se puede usar el siguiente bloque de código:

document.getElementById('g-recaptcha-response').click();
        

Copiar

Es importante mencionar que la automatización del clic en un reCAPTCHA real es contra las políticas de Google y puede tener repercusiones legales o técnicas, como el bloqueo de tu API o de tu dominio. Por lo tanto, este tipo de prácticas solo deben llevarse a cabo en ambientes de pruebas con la versión adecuada de reCAPTCHA que permite la automatización de pruebas.

Manejando el Callback de reCAPTCHA

Google reCAPTCHA permite el uso de un callback para gestionar eventos después de que un usuario completa el CAPTCHA. Esto puede ser muy útil para ejecutar ciertas acciones en tu aplicación web, como habilitar un botón de envío o validar otras partes del formulario. Ejemplo:

function recaptchaCallback() {
    document.getElementById('submitBtn').disabled = false;
}

<form id="miFormulario">
    <div class="g-recaptcha" data-sitekey="TU_CLAVE_DE_SITIO_PUBLICA" data-callback="recaptchaCallback"></div>
    <button id="submitBtn" disabled>Enviar</button>
</form>
        

Copiar

Prácticas recomendadas y consideraciones finales

Es fundamental comprender la importancia de implementar reCAPTCHA de forma correcta para prevenir el spam y otros tipos de abuso automatizado. Al usar reCAPTCHA, recuerda siempre:

• Registrarte y obtener las claves adecuadas para tu dominio.
• Insertar el widget de reCAPTCHA en los formularios que desees proteger.
• Validar las respuestas de reCAPTCHA en el lado del servidor para garantizar la máxima seguridad.
• Respetar las políticas de servicio, evitando simular interacciones con reCAPTCHA en el entorno de producción.
• Considerar la accesibilidad asegurándote de que los usuarios con diferentes capacidades puedan completar los retos CAPTCHA.

Implementar Google reCAPTCHA de manera adecuada no solo mejora la seguridad de tus formularios web, sino que también proporciona una mejor experiencia para los usuarios legítimos al minimizar las interrupciones durante la navegación.