Como implementar reCAPTCHA v3 de Google en un Formulario HTML

6 minuto(s)

Demo Github

Los sistemas de seguridad en Internet cada vez son mas complejos y sofisticados, esto se debe se su mayoría a que los usuarios con malas intenciones o hackers suelen utilizar nuevas técnicas y métodos para romper los sistemas de seguridad en internet, Google es una de las empresas de tecnología que trabaja en mejorar la seguridad de Internet, lanzo el sistema antispam reCAPTCHA v3 y en este Post te enseñaré como implementarlo en un formulario HTML.

Antes de continuar te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Herramientas Online Para El Trabajo En Equipo”:

Spotify: Sound Cloud:

Bien ahora continuemos con el Post: Como implementar reCAPTCHA v3 de Google en un Formulario HTML.

¿ Que es reCAPTCHA v3 ?

Es un sistema para proteger sitios webs y aplicaciones contra ataques de spam y bots, normalmente se suelen colocar en un formulario de registro, login, contacto, etc. reCAPTCHA v3 fue lanzado por la empresa Google en Octubre de 2018.

A diferencia de reCAPTCHA v2 este nuevo sistema analiza el comportamiento del usuario que esta navegando en el sitio web o aplicación, y detecta si este usuario es humano o un robot.

En reCAPTCHA v2 el usuario debía de confirmar si era humano, escribiendo palabras legibles y marcando imágenes (bicicletas, semáforos, etc.).

Con reCAPTCHA v3 se omiten los métodos que emplea reCAPTCHA v2, el sistema trabaja en segundo plano mientras el usuario esta navegando o usando la aplicación, según lo que este usuario realice, reCAPTCHA v3 le asigna una puntuación con la cual detecta si es humano o un robot.

El sistema reCAPTCHA v3 mejora la experiencia del usuario en un sitio web o aplicación, ya que promueve la navegación y el uso fluido de la aplicación a los usuarios.

¿ Como implementar reCAPTCHA v3 de Google en un Formulario HTML ?

Primero debes de generar una SITE KEY y una SECRET KEY, para esto nos vamos a este enlace y creamos un nuevo reCAPTCHA v3, colocamos el nombre de dominio al cual queremos proteger con reCAPTCHA v3, colocamos nuestro correo, aceptamos las condiciones, activamos la opción Enviar alertas a los propietarios y presionamos el botón Enviar para continuar.

En la siguiente ventana me aparecerán 2 keys, una es la Clave del Sitio (SITE KEY) y la otra es la Clave Secreta (SECRET KEY), estas 2 keys las usaré para implementar reCAPTCHA v3 en el formulario.

Ahora creo el formulario HTML, hago uso de clases de Bootstrap 4.


Para este tutorial luego de enviar el formulario, recibo los mensajes de validación con PHP.


En el formulario he colocado dos campos ocultos, en estos campos pasamos el valor del action y el token, el valor del token lo agrego en la función JavaScript.


Cuando el formulario es enviado, llamamos a la función JavaScript enviarFormulario() la cual crearemos a continuación.

Antes de la etiqueta de cierre </body> instancio la url de la api de reCAPTCHA v3 y en esta url paso mi SITE KEY o Clave del Sitio que generamos anteriormente y debajo creo mi función JavaScript enviarFormulario()

En la función JavaScript enviarFormulario() también le pasamos la SITE KEY luego continua el proceso (He colocado comentarios en el código para explicar que hace cada porción del código).


Bien con esto hemos configurado la validación del formulario con reCAPTCHA v3 pero de lado del cliente (Front), pero ahora falta la  validación de lado del servidor (Backen), yo usaré PHP tu puedes optar por usar otro lenguaje como Python, Ruby, etc.

En el formulario HTML en el atributo action he colocado que se envíe el formulario al archivo procesar.php, pues creamos este archivo y le agregamos lo siguiente (He colocado comentarios en el código para explicar que hace cada porción del código).


Básicamente estamos pasando desde la vista al servidor los siguientes datos:


Algo importante que recalcar, en mi archivo PHP procesar.php estoy validando que si la puntuación es mayor o igual que 0.4, pues valido que no es un robot y todo ok. Tu puedes validar según la puntuación que desees, es recomendable usar un punto intermedio, puedes usar 0.4, 0.5 o 0.6

Al inicio de este tutorial he colocado una Demo para ver el reCAPTCHA v3 en acción, asimismo he colocado el código fuente, en un repositorio GitHub.

Conclusión

Hemos aprendido a configurar reCAPTCHA v3 de Google en un Formulario HTML, conforme vayas trabajando con esta herramienta, lograrás dominarla. 

Nota(s)

  • Los pasos mencionados en este tutorial, puede cambiar, esto no depende de mi, si no dereCAPTCHA v3 de Google, que suele cambiar el orden de sus opciones de configuración.
  • No olvides que debemos utilizar la tecnología para hacer cosas buenas por el mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.