Aprende a configurar TurnsTile de Cloudflare

Cloudflare Turnstile es una alternativa moderna a los CAPTCHA tradicionales que permite proteger sitios web y aplicaciones contra bots, spam y actividades automatizadas sin obligar al usuario a resolver desafíos visuales. En este artículo aprenderás qué es Turnstile, cómo funciona, cómo integrarlo en una página web y cómo validar el token de seguridad desde el backend.

Empezaremos Creando la configuración en CloudFlare

creamos una cuenta en CloudFlare https://www.cloudflare.com/

luego iniciamos sesion con Google

en el Buscador digitamos TurnsTile

y damos click sobre la opción seleccionada

Ahora damos Click sobre el boton Add Widget Manually

agregamos en la configuración el nombre de tu aplicación
agregamos los dominios desde donde vamos a usar nuestra app en este caso localhost y tutorialesjavascript.com

en la opción widget Mode dejamos la opción recomendada

y ahora damos clic en el botón Create

esto te habrá generado el código para usar en frontend y el mas largo para usar en tu backend

ahora en tu lista tendra un registro como este

ahora configuremos las variables de entorno o archivos de configuración en tu backend

en nuestro caso se crearan en el archivo config.js que guarda todas las configuraciones y secretos

en el archivo app.js importamos la libreria de axios para poder validar el token de tunstile

luego creamos una carpeta en la raíz llamada utils

y creamos el archivo llamado turnsTile.js este archivo tendrá una función de validación de token

y agregamos el siguiente codigo

Luego en el api que usaremos la verificación de captcha ejemplo /usuarios/Login, usuarios/RecuperarComtraseña etc debemos importar la anterior utilidad de la siguiente manera

ahora dentro del controlador la usamos de la siguiente manera

hasta este punto lo podríamos probar con postman usando el campo token o llamado post.token usando la palabra "zambomba" o un token real el cual se genera en el frontend

Ahora creamos la configuración para frontend

en el archivo index agregamos el siguiente vinculo


<script  src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"  async  defer></script>

en la opción donde usaremos la captcha de verificación pondremos el siguiente div donde se pintara automáticamente la caja de verificacion

el el Typescript del componente usando la implementación del OnInit agregamos el siguiente código

y luego en la función que hace la petición al api debe tener una configuración similar a esta