Nuxt 3 y Cloudflare: mismo mensaje

Cloudflare Turnstile es una solución ligera sin CAPTCHA visual que valida formularios y protege aplicaciones contra bots. En Nuxt 3 su integración es sencilla gracias al módulo nuxt-turnstile, ideal para proyectos de software a medida y aplicaciones a medida que buscan mejorar la seguridad sin sacrificar la experiencia de usuario.

1 Instalación del módulo

Ejecuta en el terminal dentro del proyecto npm install nuxt-turnstile o yarn add nuxt-turnstile

2 Configuración en Cloudflare

Crea una cuenta gratuita en Cloudflare, accede a Turnstile, selecciona Añadir widget y configura el widget. Añade los nombres de host de tu aplicación para que solo funcione en tu dominio. Si aún no dispones de un dominio propio puedes usar uno de pruebas en un servicio de hosting gratuito y registrarlo en Añadir nombres de host. Al finalizar obtendrás dos claves, una pública site key y otra privada secret key.

3 Variables de entorno en tu proyecto

Crea un archivo .env si no existe e introduce tus claves

TURNSTILE_SITE_KEY = 1x00000000000000000000AA

TURNSTILE_SECRET_KEY = 0x4XXXXXXXXXXXXXXS_aacaDSD

4 Configuración en nuxt.config.ts

Activa el módulo y referencia las variables de entorno en runtimeConfig para mantener la secret en el servidor y la site en la parte pública

modules: [ @nuxtjs/turnstile ]

runtimeConfig: { turnstile: { secretKey: process.env.TURNSTILE_SECRET_KEY }, public: { turnstile: { siteKey: process.env.TURNSTILE_SITE_KEY } } }

5 Uso en un componente

En el formulario crea un estado para los campos y otro para el token de Turnstile. Renderiza el componente NuxtTurnstile con enlace bidireccional del token y define opciones como tema, tamaño, acción y idioma. Antes de enviar valida que el token exista.

Ejemplo de opciones theme auto, size normal, action login, language es-ES

Con esto se mostrará el widget ligero de Turnstile y, al completar la verificación, obtendrás un token asociado a la sesión del usuario.

6 Verificación del token en el backend

Debes validar siempre el token en el servidor con la secret key. Realiza un POST al endpoint de verificación de Cloudflare

URL https://challenges.cloudflare.com/turnstile/v0/siteverify

Parámetros secret tu_secret_key response token_recibido_del_cliente remoteip ip_opcional_del_usuario

La respuesta incluirá un campo success que debe ser verdadero para considerar válido el envío. No expongas la secret key en el cliente, almacénala en runtimeConfig del servidor o en el entorno seguro de tu despliegue.

Consejos prácticos

Asocia la opción action al contexto del formulario como login registro o contacto para mejorar la detección. Configura el idioma a es-ES para una experiencia localizada. En SSR asegúrate de renderizar el widget del lado del cliente y gestionar la hidratación del token antes de enviar el formulario.

Q2BSTUDIO es tu socio tecnológico para llevar tus proyectos al siguiente nivel. Desarrollamos software a medida y aplicaciones a medida con foco en rendimiento, seguridad y escalabilidad, integrando soluciones modernas como Nuxt 3 y Cloudflare Turnstile. Somos especialistas en inteligencia artificial e IA para empresas, creación de agentes IA, automatización de procesos, ciberseguridad y pentesting, servicios cloud AWS y Azure, así como servicios de inteligencia de negocio y analítica avanzada con Power BI.

Si necesitas reforzar la protección de tus formularios, auditar tu plataforma o incorporar buenas prácticas de seguridad de extremo a extremo, nuestro equipo de ciberseguridad puede ayudarte con pruebas de intrusión, hardening y monitoreo continuo. Conoce más en nuestra página de ciberseguridad y pentesting.

Integramos Turnstile en flujos críticos como autenticación, alta de clientes o pagos, y lo combinamos con arquitectura serverless, cachés y pipelines CI CD para que tu plataforma escale de forma segura. Además, aplicamos inteligencia de negocio con modelos de datos optimizados y cuadros de mando en Power BI para apoyar la toma de decisiones, y desplegamos soluciones cloud nativas en AWS y Azure cuando el proyecto lo requiere.

Palabras clave recomendadas para tu estrategia digital aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi.

Referencias Nuxt Turnstile Module Repositorio del módulo en GitHub