Como utilizar el nuevo reCAPTCHA v3 de Google en nuestro proyecto web

Como utilizar el nuevo reCAPTCHA v3 de Google en nuestro proyecto web

Hace unos meses llego la tercera versión de reCAPTCHA, el sistema creado por Google para identificar si un usuario es real o se trata de un bot, donde no tendremos que demostrar que somos humanos, como en la versión 2, ya que el sistema sería capaz de saberlo gracias a nuestro comportamiento dentro del sitio web.

Este nuevo sistema, ya no pedirá a los usuarios que realicen pruebas interactivas, ya que ahora todo se basará en un sistema de puntuación asignado de forma automática a cada usuario. Esta puntuación se basará en los comportamientos e interacciones con su sitio web y se clasificará en base a una puntuación de 0.0 a 1.0, donde un 1.0 es una buena interacción que debería de hacer un usuario normal, mientras que una puntuación más cercana a 0.0 indicará que el comportamiento y el trafico muy posiblemente fue generado por un bots.

Google reCAPTCHA v3 se podrá habilitar en diversas secciones de los sitios web, desde un inicio se sesión, un formulario de contacto, sección de comentarios en un blog, así como en una plataforma e-commerce. Por defecto, este sistema usará un umbral de 0.5 puntos, y todo aquel usuario / visitante con una puntuación inferior necesitará demostrar que es un humano, pero este umbral se puede personalizar, bajando o aumentando el umbral por defecto.

Veamos cómo utilizarlo:

Primero, deberemos acceder a la API de reCATPCHA v3 desde el sitio de desarrolladores de Google, desde aquí:

Deberemos primero añadir la etiqueta con la que identificaremos nuestro dominio en la consola de Google, escogeremos la versión reCAPTCHA v3, añadiremos nuestro dominio, aceptaremos todas las condiciones del servicio de reCAPTCHA y presionamos Enviar.

Nos asignará unas claves, que deberemos de integrar en nuestro sitio web. Tendremos una clave pública y otra secreta, que utilizaremos en los siguientes pasos.

Necesitaremos algún conocimiento básico en HTML, JavaScript y PHP, pero no te asustes, que si sigues estos pasos, no te costará tanto:

Abriremos con nuestro editor de código favorito, el html donde tengamos nuestro footer (pie de página) e ingresaremos el siguiente código:

Pegaremos este código en nuestro footer cambiando la CLAVE_PUBLICA

En "CLAVE_PUBLICA" pegaremos la clave pública que nos facilita google reCAPTCHA, que mencionamos en el paso anterior. Básicamente lo que hace esta función de JavaScript es enviar un token oculto dentro del elemento del formulario con id "g-recaptcha-response" en el momento de validar los datos del lado servidor.

Formulario de ejemplo con el input oculto que enviará el token

En el formulario de ejemplo, enviaremos un input de tipo email y un input oculto con un token que validaremos a continuación.

En este ejemplo de PHP, primero crearemos un objeto llamado Captcha, que retornara una respuesta de la API de Google con la puntuación en un archivo JSON, que utilizaremos para verificar si se trata de un visitante real o de un bots. En "CLAVE_SECRETA" tendremos que pegar clave secreta que nos proporciona Google a la hora de registrar el dominio.

Pegaremos la CLAVE_SECRETA dentro de nuestro objeto

Por ultimo verificaremos si está definido el campo email, el valor lo almacenara en una variable llamada $email. A continuación creamos un condicional en el que primero verifica si el campo email no está vacío, luego verifica si la puntuación recibida en el archivo JSON es correcta y si la puntuación es mayor a 0.5. (Esta puntuación se puede modificar entre los valores 0.0 y 1.0). En caso de ser superior continuaría el script con el envió de datos y en caso contrario, el script acabará mostrando el mensaje "Eres un robots!", impidiendo que se envíen los datos previniendo el uso de bots.

Este es un ejemplo básico para ver como es el funcionamiento de este mágico reCAPTCHA, adaptado a las nuevas tecnologías. Espero les haya gustado. Podéis verlo funcionando en nuestra sección de contactos.

Si desean revisar la documentación oficial de google reCAPTCHA v3, lo podéis hacer desde aquí.