Instalacion de hCaptcha en Angular con validacion backend.
Como ya sabreis, es imprescindible tener en los formularios publicos un sistema para reducir spam, usuarios falsos y abuso automatizado. Google reCAPTCHA, hCaptcha y Cloudflare Turnstile resuelven un problema parecido, pero con diferencias en privacidad, friccion para el usuario, ecosistema del proveedor y validacion backend. Esta guia conserva el ejemplo original con hCaptcha, pero la lectura actual debe ser mas amplia: elige el proveedor antibot segun el riesgo del formulario, los requisitos de privacidad y el backend que puedas mantener. En este articulo vamos a enseñar a instalar hCaptcha paso a paso en un proyecto Angular y a mantener la parte segura de la decision en el backend.hCaptcha, reCAPTCHA y Turnstile
Estas herramientas resuelven un problema parecido, pero no tienen los mismos compromisos. Google reCAPTCHA es conocido y esta muy documentado, hCaptcha se posiciona como alternativa con otro enfoque de privacidad e infraestructura, y Cloudflare Turnstile intenta reducir los retos visibles usando senales del navegador y de riesgo. En todos los casos, el patron seguro es el mismo: Angular recibe un token, pero el backend debe verificarlo antes de confiar en la peticion.
En una app Angular con SSR, el widget debe renderizarse solo en navegador. El HTML generado en servidor puede conservar el contenido del tutorial, pero el script del captcha y el componente dependiente de navegador deben retrasarse hasta la hidratacion.
La verificacion de hCaptcha debe seguir la misma regla de produccion que reCAPTCHA y Turnstile: Angular envia el token de respuesta a tu backend, y el backend lo valida con el endpoint siteverify de hCaptcha antes de procesar el formulario. No expongas la clave secreta en Angular, ni siquiera en ejemplos.
Por que evaluar hCaptcha
La siguiente lista resume motivos habituales para evaluar hCaptcha en lugar de usar reCAPTCHA por defecto.- Independencia de proveedor: es una alternativa cuando no quieres depender solo de Google reCAPTCHA.
- Enfoque de privacidad: suele evaluarse en proyectos que buscan otro perfil de privacidad.
- Verificacion backend: como cualquier captcha, el resultado debe verificarse en servidor antes de confiar en el envio de un formulario.
Alta en hCaptcha.
En este articulo partimos con la premisa de que posees una cuenta de Gmail. El primer paso es darse de alta en la url https://hCaptcha.com/?r=335d4419fb51. Una vez accedamos y estemos logueados en la cuenta de Gmail aparecerá la siguiente vista.
- Site Key: 10000000-ffff-ffff-ffff-000000000001
- Secret Key: 0x0000000000000000000000000000000000000000
Instalación
Para realizar esta instalación, hay que dividir el proyecto entre un front-end y un back-end. El front realizará la interacción con el usuario y el backend se comunicará con hCaptcha. Desde Angular realizaremos la instalación del paquete ng-hcaptcha con el siguiente comando:
Ejemplo en ejecución
¿Eres un robot?. Según recaptcha de hCaptcha:
Eres un robot, resuelve el Captcha
Para Angular Universal
En el caso de querer realizar una instalacion en una aplicacion Angular con SSR, anadid una pequena comprobacion para evitar problemas de renderización en el servidor. En proyectos Angular Universal antiguos este comando era habitual. En proyectos Angular actuales, preferid la configuracion oficial con@angular/ssr: ng add @nguniversal/express-engine
Si os da un error tipo ERESOLVE unable to resolve dependency tree No os preocupéis, toca jugar entre este comandonpm install --force @nguniversal/express-engine
Y posteriormenteng add @nguniversal/express-engine
Estos dos últimos pasos los tenéis que aplicar tantas cómo sea necesario hasta que no aparezca un error. Primero os comparto el código del component.ts dónde se añade el código necesario para interpretar si se reproduce en la parte del servidor o del navegador.