Cloudflare Turnstile
Cloudflare Turnstile es una alternativa inteligente de CAPTCHA proporcionado por Cloudflare que se utiliza para proteger formularios en sitios web contra ataques automatizados, como bots maliciosos o intentos de spam. Para utilizar este servicio es necesario crear una cuenta de usuario y añadir nuestro sitio web al apartado de Turnstile.
https://www.cloudflare.com/es-es/products/turnstile/
Turnstile
En el apartado de menú Turnstile, debemos de agregar el dominio (puede ser más de uno) de nuestro proyecto. Basta con añadirle un nombre y la url de la app. Las siguientes opciones las dejamos como siguen:
Una vez añadida nuestra app, Cloudflare nos genera un Site Key (una clave que identifica unívocamente nuestro/s dominio/s ) y una Secret key (la clave privada para validar el token referido a nuestro dominio).
Gitlab
Por seguridad, las variables no deben hardcodearse en el código, por ello una vez generadas en Cloudflare, las metemos en gitlab para poder utilizarlas en nuestro proyecto.
Setting -> ci/cd ->variables
- TURNSTILE_SECRET_KEY
- TURNSTILE_SITE_KEY
No olvidar que tiene que haber una por cada entorno y que hay que meter las variables genéricas a la LISTA_SECRET
Una vez creadas, ya podemos meterlas en los filtros del proyecto para utilizarlas. La URL de validación, al ser única y pública podemos meterla directamente hardcodeada en los filtros.
Parte del cliente
Usamos la renderización implícita: el widget Turnstile se inicializa automáticamente escaneando el HTML de la página en busca de elementos con la clase cf-turnstile.
El campo cf-turnstile-response contendrá la información necesaria para que el servidor realice esta verificación.
Los pasos básicos a seguir son:
- Añadimos la librería de cloudflare turnstile (Si utilizamos una plantilla, hay que meterlo en el head)
- Añadimos el div del captcha: tiene que tener la clase “cf-turnstile” y el atributo data-sitekey con el site-key que representa nuestro dominio.
- Añadimos un h:input oculto (type=hidden) con el nombre “cf-turnstile response”. Le asignamos un value del manejador para recoger el valor del token.
- Definimos una función javascript que renderiza nuestro div del captcha y asigna el valor del token de respuesta a la variable de nuestro manejador.
Con esto, el token queda implementado en el cliente y el token generado, a la espera de la validación en la parte del servidor
Parte del servidor
El captcha ya está puesto en el cliente con el token generado, ahora hay que validarlo frente a la URL de validación ofrecida por Cloudflare.
Los parámetros requeridos en la solicitud son:
- Secret (site secret key)
- Response (token)
La API acepta solicitudes/x-www-form-urlencoded y aplicaciones/json, pero el tipo de respuesta siempre será aplicación/json.
La respuesta, siempre contiene una propiedad “success”, ya sea verdadera o falsa, indicando si la operación fue exitosa o no (Es la que utilizamos para comprobar que el token es válido)
Los pasos básicos a seguir son:
Si la respuesta no es nula y todo ha ido bien (200 OK), entonces obtenemos CaptchaResponse y devolvemos la propiedad success.
Resumen final con esquema general
| Tabla de contenidos |
|---|
Para poder poner el Capta de Google en nuestros formularios necesitaremos tener:
- Fundeweb 2.x con primefaces 8.0 o superior.
- Acceso a una cuenta que permita crear Captcha de Google.
Una vez tenemos ambas cosas deberemos hacer dos tareas: Configurar el Capta dentro del espacio de Google y configurar y poner el componente captcha de Primefaces en nuestra aplicación.
Alta de Google Capta
Para dar de alta nuestro Captcha deberemos entrar en la web de gestión de recapta de Google en el sitio de gestión
Para crear un nuevo Captcha deberemos darle al botón 
tras ello iremos iremos a la pantalla de configuración para un nuevo captcha donde deberemos indicar los siguientes valores:
- Etiqueta: El nombre para identificarlo dentro de Google Captcha
- Tipo de reCaptcha: Deberemos indicar v2 y elegir la opción "Casilla No soy un robot".
- Dominios: Deberemos indicar los dominios sobre los que actuará:
- Servidores: miaplicacion.um.es, miaplicaciontest.um.es, miaplicaciondesa.um.es
- Local: miequipo.dev.atica.um.es
| Advertencia |
|---|
Cuando demos de alta un nuevo dominio tendremos que esperar 30 min hasta que esté activo. Si ejecutamos antes de ese tiempo nuestra aplicación nos dará el error ERROR: Invalid domain for site key |
Una vez lo hayamos creado se nos facilitará el par de claves pública/privada para usar Captcha
A partir de este punto ya solo quedará configurar nuestra aplicación para que use el componente de primefaces con la configuración dada de alta en Google reCaptcha
Configuración y uso en nuestra aplicación
La configuración y uso es bastante sencillo, para configurarlo deberemos abrir nuestro fichero web.xml y añadir la configuración que indica la wiki de Primefaces para dar de alta las claves de Captcha
| Bloque de código |
|---|
<context-param>
<param-name>primefaces.PRIVATE_CAPTCHA_KEY</param-name>
<param-value>YOUR_PRIVATE_KEY</param-value>
</context-param>
<context-param>
<param-name>primefaces.PUBLIC_CAPTCHA_KEY</param-name>
<param-value>YOUR_PUBLIC_KEY</param-value>
</context-param> |
Una vez configuradas correctamente las claves crearemos nuestro formulario con el elemento captcha de primefaces.
| Bloque de código |
|---|
<p:panel header="captcha">
<h:form>
<!-- Elemento captcha -->
<p:captcha></p:captcha>
...
...
...
<p:commandButton value="Guardar" ajax="false"></p:commandButton>
<!--Importante: el botón o elemento que haga submit NO puede ser ajax, en primefaces hay que indicar ajax="false" -->
</h:form>
</p:panel> |
El resultado sería el siguiente
