Las captchas se han implantado en nuestro día a día y es que el spam en los formulario puede llegar a ser un problema, si no tenemos algún sistema que nos asegure que aquellas informaciones enviadas han sido escritas por personas y no por máquinas.

En este artículo vamos a mostrar cómo usar una librería llamada Retina Post, que nos ofrece una manera sencilla de implementar una captcha en páginas web con programación PHP y en el CMS Wordpress.

Seguramente sepamos qué es un captcha, porque los hayamos usado infinidad de veces. No obstante, en resumen, un captcha es un sistema que permite distinguir cuándo es un humano el que está realizando una acción sobre un sitio web y cuándo es una máquina.

Si te dedicas al desarrollo de páginas web, tarde o temprano vas a tener que implementar algún tipo de captcha para proteger tus formularios. Incluso es muy probable que el lector ya se haya visto en esa necesidad y simplemente esté buscando aquí una manera sencilla de crear ese captcha en su sitio web.

Retina Post es un captcha diferente

Comentamos esta librería porque nos ha resultado útil, sencilla y sobre todo, original. Retina Post sustituye al típico captcha que hemos visto mil veces, donde tenemos que escribir una palabra que aparece en una imagen, y que, desafortunadamente, algunos programas son capaces de burlar. Este captcha lo que hace es mostrar un texto donde aparecen coloreadas algunas letras. Luego aparecen unos huecos donde se deben escribir esas letras en sus colores correspondientes.

El sistema resulta cómodo, porque no tienes que escribir muchos caracteres y porque los textos no aparecen deformados, con lo que es difícil equivocarse al resolver el captcha. De ejecución en ejecución además el texto varía y también las letras que aparecen con los colores, con lo que resulta bastante aleatorio y por tanto poco predecible.

Para ver este captcha en funcionamiento te dejamos la página del ejemplo funcionando en DesarrolloWeb.com.

También puedes ver ejemplos en marcha en la propia home page de las librerías: http://retinapost.com/

Para conseguir textos que van variando en diferentes accesos a la página del captcha, RetinaPost utiliza el RSS de tu sitio web o bien una frase fija que tú le proporciones.

Cómo usar RetinaPost en páginas PHP

A continuación vamos a poner la receta, paso a paso para poder usar la captcha propuesta por RetinaPost. Ellos ofrecen versiones de las librerías para páginas PHP normales y para sitios web basados en Wordpress. Nosotros hemos descargado y probado la versión PHP.

1) Conseguir la llave del API de RetinaPost:
Cualquier persona que desee utilizar este captcha debe obtener previamente una key (llave) para poder comunicar de forma segura con los servidores de RetinaPost. Esa llave la consigues al instante.

Para obtener la llave tienes que registrarte en el sitio web de RetinaPost y te la mandan por correo electrónico al email que utilizaste en el registro. También debes decirles cuál es el dominio donde piensas usar esa llave.

La llave está compuesta por dos cadenas de caracteres, una es la llave pública y otra la llave privada. En el correo que te mandan está todo bien clarito.

2) Descargar las librerías
En segundo paso es descargar las librerías de RetinaPost, en la versión que necesites (PHP o Wordpress). En la versión PHP se trata de un archivo comprimido donde tienes varios ficheros. Uno es el código fuente de las librerías (Retina_Library.php) y varios archivos diferentes con el código de los ejemplos de uso.

Esos archivos los podemos descomprimir y subir por FTP a nuestro servidor. Podemos colocarlos donde deseemos, siempre que sepamos la ruta para acceder a ellos.

3) Modificar la página del ejemplo para adaptarla a tu sitio web
La forma de usar RetinaPost la podemos encontrar en el propio código de los ejemplos que hemos descargado. Para facilitarnos las cosas en esta primera prueba, podemos basarnos en ese código para alterar las cosas que sean necesarias para que funcione en nuestro sitio web.

Deberías cambiar dos archivos:

A) Puedes abrir el archivo "example_form_display.php". Allí debes editar las siguientes líneas:

require_once('PATH/Retina_Library.php');

En esa línea tenemos que colocar la ruta al archivo donde está el código fuente de las librerías.

$RetinaPost->publicKey = "desarrolloweb.com";
$RetinaPost->privateKey = "00000323b30000a1eeb70000c620005000";

En esas dos líneas debes colocar tu llave pública y llave privada, que recibiste al registrarte para recibir la "key" en el mail de confirmación que te enviaron.

$RetinaPost->message = 'A MESSAGE IN YOUR LANGUAGE, DEFAULT IS: Insert the colored letters';

En esa línea tienes que cambiar el valor de la propiedad message, para asignar una cadena de caracteres en tu idioma que signifique algo como "Inserta las letras coloreadas".

echo $RetinaPost->get_from_feed('YOUR FEED URL');

En esta línea debes colocar la URL absoluta donde está tu feed de RSS.

B) Ahora abre el archivo "example_form_action.php" donde tendrás que cambiar simplemente estas líneas:

require_once('PATH/Retina_Library.php');

De nuevo, ajustas el camino para llegar a la librería Retina_Library.php.

$RetinaPost->publicKey = "YOUR SITE PUBLIC KEY";
$RetinaPost->privateKey = "YOUR SITE PRIVATE KEY";

De nuevo, colocas tu llave pública y llave privada.

Eso es todo. Ahora los ejemplos deberían funcionarte perfectamente. Se trataría de entrar primero en la URL donde tengas el archivo "example_form_display.php" y probar a solucinar el captcha para ver si los resultados son los esperados.

Ejemplo de código del archivo example_form_action.php

Ahora voy a dejar el código fuente del archivo example_form_action.php, para que se pueda ver cómo quedaría después de modificado, por si hay alguna duda.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>RetinaPost example: Form Display</title>
</head>
<body>
   <div>
   <br/><a href="http://www.RetinaPost.com/">Página de RetinaPost</a><br/><br/>

   Aquí tienes RetinaPost funcionando. Los textos que verás escritos los está sacando del RSS de las novedades de DesarrolloWeb.com. Si actualizas la página el captcha se actualizará con otros textos.


   <form action="example_form_action.php" method="post">
      <?php         
      require_once('Retina_Library.php');
      $RetinaPost = new RetinaPost;
      
      $RetinaPost->publicKey = "desarrolloweb.com";
      $RetinaPost->privateKey = "ddddf00005f99767gffdf";
      
      $RetinaPost->message = 'Insertar las letras coloreadas';
               
      echo $RetinaPost->get_from_feed('http://www.desarrolloweb.com/rss/general_rss.php');
      ?>      
      
      <input type="submit" value=" Enviar " />
   </form>
   </div>
</body>
</html>

Para terminar simplemente quiero comentar una cosa. El código del ejemplo example_form_action.php que ellos nos proporcionan tiene definida la etiqueta META para la codificación de caracteres en UTF-8.

<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>

Si tu archivo lo has guardado con otra codificación, puede que los acentos los veas mal. En ese caso utiliza la etiqueta de tu juego de caracteres, o presta atención para guardar con codificación UTF-8 los archivos PHP del ejemplo. Por ejemplo, si usas ISO-8859-1, podrías cambiar esa etiqueta por esta otra:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">

Conclusión

Hemos visto cómo poner en marcha RetinaPost, una librería para implementar un captcha que puede venirnos muy bien para solucionar problemas de spam en formularios que se envían por mail o en los comentarios que publican los usuarios. El sistema es bastante simple de implementar, pero las ventajas son sin duda importantes.

Existen otros captcha que funcionan sobre PHP y algunos de ellos también bastante útiles, que hemos comentado anteriormente en DesarrolloWeb.com. RetinaPost es sin duda algo diferente, que puede aportar mayor facilidad para los usuarios que visitan tu web, pero nosotros también recomendamos ReCaptcha que es muy fácil de instalar o Securimage, que es un poco más compleja de poner en marcha pero tiene la ventaja que todo se hace desde tu propio servidor y no depende de APIs externas como RetinaPost o ReCaptcha.