Conectar reCAPTCHA v3 en tu sitio web

¿Por qué el reCaptcha v3?

Porque el usuario no tiene que hacer nada, es el backend junto con google quien hace los cálculos. Los otros no están mal pero rompen la experiencia de usuario (quién no ha odiado alguna vez en su vida las bocas de incendio) y puede crear una barrera a la hora de ponerte en contacto con leads si tu formulario tiene esa fricción.

Por otra parte la protección del v2 se ha visto lastrada, dado que los bots pueden resolverlo más facilmente en la actualidad.

En cambio reCAPTCHA v3 te devuelve una puntuación que va de 0.0 a 1.0 en función del comportamiento del usuario y te deja decidir en el backend qué hacer.

Ejemplos:

• si la puntuación es alta ( > 0,6 ), dejas mandar el formulario
• si es baja ( < 0,5 ) bloqueas
• si es intermedia pides una segunda acción por ejemplo mostrar un reCAPTCHA v2.

A la larga es algo que mejora la experiencia del usuario, lo que te puede reportar mayores conversiones y por tanto mayores beneficios.

No es suficiente solo con reCAPTCHA

Comentar también que esto por si solo no es la panacea, y lo mejor es combinarlo con una validación de formulario: si dejas entrar basura, basura tendrás (Frase del gran Fernando Herrera), tanto en cliente como en servidor. Además de un rate limiting, en el entorno de NestJs podría ser 'Throttler' → esto sirve para limitar en un tiempo la cantidad de peticiones que te pueden hacer a un endpoint.

Implementación reCAPTCHA paso a paso

1- Crear un proyecto en google cloud

https://console.cloud.google.com/cloud-resource-manager

1.1 Regístrate si no lo estás:

https://cloud.google.com/

1.2 Dale un nombre que esté alineado con tu proyecto, a mi me gusta hacerlo con kebab-case, aunque también están las opciones de CamelCase.

Ejemplos:

• BarberiaCaballerosWebRecaptchaV3
• BarberiaDonCarlos-WebRecaptchaV3

2- Registrar reCAPTCHA v3

Una vez creado el proyecto, hay que ir a la consola específica de reCAPTCHA, NO Cloud Console.

Introduce dominios:

• tudominio.com
• localhost

importante: no usar https://localhost:4200.

Seleccionar reCAPTCHA v3 basado en puntuación.

2.2 claves

Se generan 2 claves:

• clave sitio web
• clave secreta

Frontend Angular:

ng generate environments

Nombre clave sitio web:

recaptchaSiteKey

En backend .env:

RECAPTCHA_SECRET_KEY

3 pasos completos

3.1 frontend

npm install ng-recaptcha

import { ReCaptchaV3Service } from 'ng-recaptcha';

constructor(private recaptchaV3Service: ReCaptchaV3Service) {}

onSubmit() {
  this.recaptchaV3Service.execute(environment.recaptchaSiteKey, 'contact')
    .subscribe((token) => {

      const payload = {
        ...this.contactForm.value,
        recaptchaToken: token
      };

      this.http.post('/api/contact', payload).subscribe(...)
    });
}

3.2 backend

async validateRecaptcha(token: string) {
  const response = await fetch(
    `https://www.google.com/recaptcha/api/siteverify?secret=${process.env.RECAPTCHA_SECRET_KEY}&response=${token}`,
    { method: 'POST' }
  );

  const data = await response.json();

  return data.success && data.score > 0.5;
}

3.3 condicionar

if (!await this.validateRecaptcha(dto.recaptchaToken)) {
  throw new BadRequestException("Captcha inválido");
}

await resend.emails.send({ ...contenido });

Tip práctico badge

private recaptchaService = inject(RecaptchaService);

async ngOnInit() {
  document.body.classList.add('contact-page-example');
  await this.recaptchaService.loadRecaptchaScript();
}

body:not(.contact-page-example) .grecaptcha-badge {
  display: none !important;
}

Para terminar

Mucho éxito en esos formularios, que aunque no se usan tanto como hace unos años, sigue siendo algo muy importante que toda web deba tener.

Si te ha servido dale me gusta y comparte.

Saludos!