Menu

Como insertar un captcha en un formulario web

16 Junio, 2017 - captcha, Diseño & ASP.NET

Como insertar un captcha en un formulario web

 

Como diseñador/programador de aplicaciones y sitios Web, no hay nada más molesto y penoso, que te llamen los clientes quejándose por el bombardeo de correos basura que reciben a través de los formularios de contacto de las páginas Web que tú les has diseñado.

¿Qué puedo hacer? Nos dicen, aburridos por el aluvión incontrolado de spam que les hacen perder un buen rato de su tiempo laboral para revisar y poder discriminar lo útil de la basura y eliminarla.

Por esa razón, siempre que nos solicitan el diseño de una Web con formulario de contacto, implementamos un captcha.

¿Y que es un captcha? Te preguntarás

 

CAPTCHA son las siglas de “Completely Automated Public Turing test to tell Computers and Humans Apart” (prueba de Turing completamente automática y pública para diferenciar ordenadores de humanos), y se trata realmente de una prueba desafío-respuesta utilizada en computación para determinar cuándo el usuario es un robot o un ser humano.

Esta prueba consiste en que el usuario introduzca correctamente un conjunto de caracteres que se muestran en una imagen distorsionada que aparece en pantalla. Se supone que una máquina no es capaz de comprender e introducir la secuencia de forma correcta, por lo que solamente el humano podrá hacerlo.

reCAPTCHA es una extensión y mejora de Captcha que fue adquirida por la empresa Google.

A partir de 2012, Google empezó a incluir imágenes obtenidas de Google Street View, con el fin de que la palabra desconocida sean números o nombres de calles, para alimentar su base de datos y mejorar la precisión de direcciones.

 

Insertar un captcha

Vamos a la faena…

 

¿Como podemos implementar un reCaptcha en nuestra Web? Lo primero que necesitamos es ser usuario de Google y registrarte en google.com/recaptcha/

Una vez identificado e iniciado sesión en tu cuenta de Google te pedirá que registres un nuevo sitio donde incluir el reCaptcha.

 

Insertar un captcha

 

Etiqueta

 

Es el nombre con el que identificaras en el futuro el sitio o la sección que integrará el reCaptcha

A continuación, elegimos un tipo de reCaptcha.

La primera opción “reCAPTCHA v2” requiere que el usuario haga clic en una casilla de verificación que indica que el usuario no es un robot. Esta es la opción más sencilla para integrarse.

Insertar un captcha

 

Las otras opciones requieren llamadas a la API de JavaScript o a la Biblioteca Android reCAPTCHA. La implementación es más compleja que la primera opción y no las trataremos en este post.

 

Dominios

 

En este apartado incluiremos todos los dominios que estarán protegidos por el captcha. Se podrán añadir tantos como se quiera. Uno debajo de otro, es decir, uno por línea.

Al formar parte de un mismo sitio, todos ellos tendrán las mismas keys.

Por último habrá que aceptar los términos del servicio y solicitar, si quieres, que Google te  mande alertas si detecta algún problema con tu sitio, como errores de configuración o un aumento del tráfico sospechoso.

Pulsamos el botón de “Registrar” y listo.

 

Insertar un captcha

 

Fíjate que se han generado dos claves: Clave del sitio que hay que usar en el código HTML que muestra tu sitio a los usuarios, como veremos a continuación. Y la Clave secreta que se usará  para las comunicaciones entre tu sitio y Google.

Como el propio Google te recomienda, has de tener la precaución de no revelársela a nadie.

¡Enhorabuena! Ya estás en disposición de materializar el capctcha en tu formulario Web.

Vamos con ello. Después te explico algún detalle del código utilizado

Código HTML

 

 

 

Tendrás que incluir en el formulario la entrada al reCaptcha y la librería javscript.

¡Fíjate en el detalle de la URL, donde hemos incluido el idioma del recaptcha (hl=es)!

 

 

La pequeña función enviar(), se ejecutará cuando se envíe el formulario, con el evento “onSubmit

 

 

Esto es todo por hoy. Esperamos que te sea de ayuda. Y como siempre te dejo el link al ejemplo funcionando…

Nos vemos en el siguiente post.

¡Hasta la próxima!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *