Configurar reCAPTCHA v3 en formularios
¿Qué es reCAPTCHA v3?
reCAPTCHA es un “validador” o un “anti-spammer” que diferencia a los humanos de las máquinas, en los procesos en los que se requiere la entrada de datos; normalmente formularios.
La versión v3 de reCAPTCHA valida la entrada de datos según una puntuación obtenida, dependiendo de cómo se hayan introducido los datos. Si esa puntuación supera un umbral (que se configura), el usuario puede seguir adelante, sino, será sometido a un “Challenge” o prueba para certificar que es humano.
Instalar e integrar
Para disponer de la API de reCAPTCHA v3, necesitamos:
- Conexión a internet.
- Una cuenta de Google.
- Vender nuestra alma (datos) a Google.
Si cumplimos los 3 requisitos, podemos conseguir una API Key de reCAPTCHA en el siguiente enlace: https://www.google.com/recaptcha/admin/create
El formulario es muy sencillo, y lo más importante es seleccionar reCAPTCHA v3 e indicar el/los dominio/s en los que desees usar reCAPTCHA.
Una vez hecho, Google nos dará la CLAVE DEL SITIO WEB y la CLAVE SECRETA, como puedes ver en la imagen.
Bueno y ahora… ¡volvamos a Drupal! Para este caso en particular me he tomado el placer de instalar Drupal 9.3.6 con docker4drupal.
Para la integración de reCAPTCHA v3 en Drupal, usaremos el módulo contribuido reCAPTCHA v3, que a su vez tiene dependencia de captcha, y que a su vez éste tiene dependencia de recaptcha. En fin… solo tómate un minuto para imaginar un mundo sombrío sin composer.
Ahora nos dirigimos a la configuración del módulo, y pegamos las credenciales que Google nos ha facilitado para reCAPTCHA v3.
El siguiente paso es crear una “Acción”, que será la medida que el anti-spam de Google tomará en caso de que la puntuación obtenida por la persona/bot que rellene nuestro formulario, no supere la media que nosotros digamos (Theshold).
Y ahora finalizamos con el plato fuerte: ¿cómo integrar reCAPTCHA v3 en un formulario custom? Vamos allá…
Nos movemos a la pestaña “Form settings” y, posiblemente, muy posiblemente de hecho, NO aparezca nuestro formulario custom en el listado.
Por suerte para nosotros tenemos un botón azul que nos deja añadir formularios custom mediante su Form ID, y es aquí donde surge una rotura espacio-temporal de dudas, problemas y preguntas, al no escribir el FORM ID correcto, que se requiere para localizar el formulario. Localizar este form id es muy sencillo, sólo tenemos que abrir nuestra consola o inspector de elementos desde nuestro navegador favorito, y buscar entre los elementos del formulario un campo hidden llamado “form_id”.
El resto ya sabes cómo va, copiamos y pegamos en nuestro nuevo “CAPTCHA point”. Aquí es importante seleccionar como “Challenge type” la acción que previamente hemos creado.
Y así de fácil y rápido, tenemos el anti-spammer más odiado por los bots y agencias de publicidad engañosas configurado correctamente en nuestro formulario custom. Podemos darnos cuenta de esto al ver en la esquina inferior derecha el logo de reCAPTCHA, o simplemente buscando en la consola del navegador el nombre de la librería.
Si estás implementando reCAPTCHA v3 en un dominio que no está en la whitelist que hemos configurado en los primeros pasos, te saldrá el logo pero con un mensaje en rojo indicándolo.
