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.

Nos vemos en el siguiente post.

¡Hasta la próxima!

Gráfico ASP.NET con datos MySQL de un blog WordPress

Gráfico ASP.NET con datos MySQL de un blog WordPress

Gráfico ASP.NET con datos MySQL de un blog WordPress

Continuamos con la serie de artículos sobre ASP.NET, pero esta vez, vamos a prescindir de SQL Server y aprovecharemos el proveedor de datos MySQL de un BLOG de WordPress, para utilizarla como fuente de datos en un control de servidor “Chart”.

Como siempre, al final del post, encontrarás un link al programa funcional del código que te iremos mostraremos a continuación.

Y te preguntarás ¿qué provecho podemos obtener de la BD de un BLOG para nuestros intereses con ASP.NET?

Eso mismo nos preguntamos nosotros cuando planteamos utilizar ambos sistemas (el framework ASP.NET y la estructura WordPress), y te aseguro que podemos sacar mucho provecho de ello si nos lo proponemos.

En nuestro caso, y a modo de ejemplo, decidimos obtener una simple estadística de los 10 post más leídos del Blog TerapiaConPerros (Centro de asistencia y formación para realizar terapia y actividades asistidas con perros).

Con esa información, obtenida del proveedor de datos MySQL del Blog, pretendemos crear un gráfico estadístico de barras utilizando un control de servidor “Chart”.

Pero mira por donde, al comenzar el proyecto, nos encontramos con una mala noticia y una buena.

La mala: que la estructura original de la Base de Datos que se genera cuando configuramos un tema de WordPress, no contiene ninguna tabla que permita obtener la información que nos interesa.

La buena: que existen infinidad de plugin que al ser instalados, crean las tablas necesarias y las gestiona de forma automática, sin tener que hacer ningún esfuerzo por nuestra parte, más allá de configurar el plugin en cuestión. En nuestro caso hemos utilizado “WordPress Popular Posts”, pero como te digo, hay muchos más…

 

ASP.NET y MySQL

 

El plugin al ser instalado, añade en la BD varias tablas más, y entre ellas, la que vamos a utilizar para el programa: wp_popularpostsdata. Otra tabla, que si es original de la estructura WP y que nos servirá para la finalidad del proyecto será wp_posts.

 

ASP.NET y MySQL

 

Con la ejecución del programa queremos que se muestre un gráfico donde el “eje Y” contenga los títulos de los post más leídos, y el “eje X” los valores, es decir la cantidad de veces que se ha visto cada artículo, tal y como lo muestra la imagen siguiente:

 

ASP.NET y MySQL

Vamos a ello

Como has leído hasta ahora, la cuestión resumida consiste en utilizar dos tablas de la BD MySQL de un BLOG WordPress para obtener una información que alimentará a un control de servidor “Chart”, para mostrar un gráfico estadístico de barras, por lo que habrá que seguir los siguientes pasos:

  1. Utilizar un BLOG del que queramos extraer los post más vistos
  2. Instalar el plugin “WordPress Popular Posts”
  3. Añadir al proyecto la librería “MySql.Data.dll”. Puedes hacerlo desde el administrador de paquetes NuGet, en el menú HERRAMIENTAS/Administrador de paquetes NuGet/Administrar paquetes NuGet para la solución (img. 2)
  4. Crear la cadena de conexión en el fichero web.config
  5. Añadir un control de servidor “Chart”
  6. Enlazar la BD con el control

 

Evidentemente, no obtendremos los resultados de forma inmediata a la instalación del plugin, pues requerirá que pase algo de tiempo para que la BD vaya almacenando información de las visitas al Blog.

 

ASP.NET y MySQL

Img. 2

Diseño y Code behind

Una vez añadida la librería MySql.Data.dell al proyecto, habrá que incluir en el fichero web.config la cadena de conexión con los datos del fichero de datos MySQL.

Fíjate que en el parámetro connectionString, hay que indicar el Servidor, puerto, nombre de la BD, usuario y password

Ejemplo9.aspx

 

Ejemplo9.aspx.vb

 

Como puedes ver en el código anterior, lo que hacemos es generar la conexión con la base de datos MySQL en el evento Page_Load de la página. Creamos una consulta SQL para obtener los 10 primeros registros de los post más leídos.

Utilizamos las tablas wp_popularpostsdatawp_posts. Con la primera, contabilizamos la cantidad de visitas que ha tenido cada post del blog. Para ello, utilizamos el campo pageviews, que va totalizando dichas visitas. Con la segunda, y en concreto con su campo title, obtenemos los títulos de los post, para que nos anuncien el eje Y.

La consulta SQL sería: “SELECT wp_popularpostsdata.pageviews, wp_posts.post_title FROM (wp_popularpostsdata INNER JOIN wp_posts ON wp_popularpostsdata.postid=wp_posts.ID) ORDER BY pageviews DESC LIMIT 10;

Declaramos y creamos dos listas: datosX y datosY, para almacenar la serie de datos que obtenemos del DataReader generado por la consulta SQL. Y le ponemos título al gráfico: “Los 10 post más vistos del blog TerapiaConPerros”

Por último, prevemos la posibilidad de un error en la carga de los datos, y para eso utilizamos la función Alerta(), que ya vimos en el post “alert y confirm mejorados utilizando jQueryUI.Dialog y ASP.NET“, se trata de la clásica función javascript alert(), pero mejorada notablemente. Si no leíste el artículo de como crear la función Alerta(), te aconsejo que lo hagas ahora.

 

….

Ejemplo funcionando: http://siinet.com/tutoriales/ejemplo9.aspx

 

Este es un simple ejemplo de como combinar blog/Web desarrollados con WordPress y ASP.NET. ¡Ahora es cuestión de imaginación el darte utilidad!

Hasta la próxima. Espero que te haya gustado.