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.

Nos vemos en el siguiente post.

¡Hasta la próxima!