Como implementar el Sistema Anti Spam Google no Captcha reCaptcha V2 (Actualizado 10-09-2019)

4 minuto(s)

Demo Github

En muchas oportunidades nos ha pasado que nuestra Bandeja de correos se ha llenado de Correos con Contenido spam y los correos no cesan de ingresar a nuestra bandeja de entrada. Google antes nos daba una solución llamada Google reCaptcha, la cual con escuchar un audio o digitar el número que aparecía en el cuadro nos validaba si la persona que llenaba el formulario era un robot o un humano.

Ahora el sistema de Google ha evolucionado y Google lo denomina como Google No Captcha reCaptcha, este sistema valida si el que llena el formulario es o no un robot, mostrando imágenes y audio.

Este nuevo sistema usa fotos de Google Street View, Google Imágenes, Google Maps, etc.

NOTA: El sistema de imágenes clickable y audio aparecerá cuando intentes llenar el formulario de entre 6 a 10 intentos.

En este tutorial te voy a mostrar como implementarlo y hacer la validación del lado de Servidor.

Primero nos dirigimos a: https://www.google.com/recaptcha/admin y creamos una cuenta de Google reCaptcha, si no has creado nunca una cuenta de Google reCaptcha con tu  cuenta de gmail, te aparecerá la siguiente ventana en donde debes de llenar los datos para crear una.

Selecciona el tipo de reCaptcha para la versión 2 (v2), coloca el dominio de tu sitio web, puedes configurar con otras opciones, eso depende de ti, yo te recomiendo la configures como la siguiente imagen que es es lo suficiente para que tu cuenta de Google reCaptcha funcione sin problemas


No olvides activar la casilla Enviar alertas a los propietarios, para que recibas en tu correo un reporte con los intentos de ataques por parte de los Robots.

Dale clic en el  botón Enviar para continuar y en la siguiente pantalla te mostrará 2 claves, una es para colocarla en el código HTML y Javascript y la otra clave es para colocarla en el código PHP

Luego de crear la cuenta de Google reCaptcha, instanciamos la librería Javascript para que funcione la API de Google reCaptcha:


Paso seguido creamos el código jQuery para validar los datos que se ingresan en el formulario, así mismo colocaré la 1ra Clave (Clave de Sitio) que se me ha generado al crear la cuenta de Google reCaptcha


Bien, ahora creamos nuestra vista con el siguiente formulario


Puedes ver que antes del botón para enviar el formulario he colocado el siguiente div con la clase g-recaptcha y el atributo data-sitekey en donde colocaré la 1ra clave (Clave de Sitio) que se generó al crear mi cuenta de Google reCaptcha


Ahora Google nos aconseja la validación de lado del servidor, para eso usaremos PHP y creamos el siguiente código, acá colocaremos la 2da clave (Clave Secreta) que se nos generó al crear la cuenta de Google reCaptcha

Conclusión

Como puedes ver, con PHP u otro lenguaje de Programación que funcione de lado del Servidor, puedes procesar cualquier tipo de formulario, como el proceso de pago de un carro de compras u otros.

Por ejemplo en un archivo aparte, digamos en un archivo pagar.php puedes validar si el sistema reCaptcha ha verificado correctamente que no sea un robot y luego continuar la ejecución del código que ejecuta la tarea determinada


Y en el formulario HTML llamamos a este archivo en el atributo action


Eso es todo, puedes hacer click en el botón GitHub que esta al inicio de este tutorial al costado del botón Demo, para obtener el código fuente en el repositorio Git.

Nota

  • Algunos de los pasos mencionados pueden variar en futuras versiones de Google re Captcha, esto no depende de nosotros si no de los desarrolladores que dan soporte a esta herramienta de seguridad y cambian el orden de las opciones y pasos mencionados en este tutorial. 

 

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