Presentamos reCAPTCHA, un servicio de captcha gratuito para integrar fácilmente en cualquier página, en PHP o cualquier otro lenguaje.
Integrar un captcha a un formulario nunca ha sido tan fácil como utilizar reCAPTCHA, un servicio gratuito para implementar un captcha en cualquier sitio web.
Primero habría que decir lo que es un captcha y para qué sirve. Se trata de un sistema para comprobar que un formulario ha sido escrito por un humano y no una máquina. Sirve para evitar que robots, bots o máquinas envíen información a través de los formularios que tenemos en una web. Posiblemente ya sepas lo que es un captcha, pero si quieres más información accede a la FAQ: Qué es una captcha?
En este artículo vamos a mostrar una manera de implementar un captcha en nuestro sitio web PHP en muy pocos y sencillos pasos. Para ello nos vamos a ayudar de un servicio llamado reCAPTCHA, que ofrecen gratis en la web http://recaptcha.net/. Gracias a este servicio podremos olvidarnos de casi toda la complejidad de instalar y configurar la captcha en nuestro servidor y además contar con la seguridad de disponer de una captcha en continua revisión y actualización.
Paso 1: Registrarse en reCAPTCHA
Nos tenemos que dirigir a http://recaptcha.net/ y registrarnos como usuarios. Nos solicitarán unos pocos datos personales para darnos de alta.
Una vez registrados debemos obtener unas claves para utilizar el sistema de captcha. Estas claves son específicas para cada dominio donde quieras utilizarlo. Las claves no son más que una llave pública y otra privada, que utilizaremos luego para poner la captcha en nuestra web.
Son algo como esto:
Public Key: 5LfCABCDEFGHIJUNDSBOejHq-5n5StSWawBpCAMX
Private Key: 6LfCAAAFHJSDFGHHJHDeju3a-Z5lomjShHKaGh9g
Esas claves son, lógicamente, secretas y debemos mantenerlas así. Yo me he inventado estas claves para no mostrar las mias ;)
En el sitio de reCAPTCHA tendremos que descargarnos unos códigos PHP con una librería PHP para poner en nuestro servidor y unos ejemplos de uso del sistema. Esto lo podemos conseguir en el apartado "Resources". Veremos que tienen un plugin o librería para trabajar con PHP, que además está perfectamente documentado.
Una vez descargado el zip que contiene la librería PHP, la tenemos que poner en algún lugar de nuestro servidor. Recuerda luego donde la has puesto, porque tendrás que hacer un include con PHP de esa librería.
Por ejemplo, podríamos colocar dicha librería en el mismo directorio donde está la página PHP que va a hacer uso de ella. Entonces la incluiríamos con algo como esto:
require_once('recaptchalib.php');
Paso 2: Incluir el captcha en el formulario
En la librería descargada ('recaptchalib.php') Hay una función que sirve para mostrar la captcha. Simplemente tenemos que llamarla con los parámetros correctos. La función devuelve el código HTML que tenemos que colocar en la página para que se vea la captcha.
recaptcha_get_html($captcha_publickey, $error_captcha);
Los parámetros que recibe son la llave pública que conseguimos anteriormente y un código de error, que es opcional. Luego veremos de dónde podría venir ese código de error.
El código del formulario sería algo como esto:
<?
require_once('recaptchalib.php');
//Llaves de la captcha
$captcha_publickey = "6LfC?.";
$captcha_privatekey = "6LfC? ";
//por ahora ponemos a null el error de la captcha
$error_captcha=null;
?>
<form action="miejemplo_formulario.php" method="post">
Nombre: <input type="text" name="nombre" size="30">
<br>
Edad: <input type="text" name="edad" size="3">
<br>
<?
//escribimos en la página lo que nos devuelve recaptcha_get_html()
echo recaptcha_get_html($captcha_publickey, $error_captcha);
?>
<br>
<input type="submit" value="Enviar">
</form>
Paso 3: Validar la captcha
Existe otra función para validar la captcha, llamada recaptcha_check_answer(). Esta función recibe también varios parámetros: La llave privada, la IP del usuario, y dos campos que contienen los valores que envía la captcha dentro del formulario $_POST["recaptcha_challenge_field"] y $_POST["recaptcha_response_field"].
Esta función devuelve un objeto que tiene dos propiedades:
is_valid, un boleano para decir si es se ha validado correctamente la captcha. error, un código de error que especifica qué ha ido mal si no se validó correctamente el texto.
Podríamos validar la captcha con algo como esto:
$captcha_respuesta = recaptcha_check_answer ($captcha_privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);
if ($captcha_respuesta->is_valid) {
//todo correcto
//hacemos lo que se deba hacer una vez recibido el formulario válido
}else{
//El código de validación de la imagen está mal escrito.
$error_captcha = $captcha_respuesta->error;
}
Llamamos a la función recaptcha_check_answer() enviando los parámetros comentados y guardamos el valor devuelto por la función en la variable $captcha_respuesta.
Luego comprobamos si el atributo $captcha_respuesta->is_valid es true. En ese caso sabemos que el texto escrito de la imagen se ha validado correctamente y hacemos lo que haya que hacer en el formulario.
Si $captcha_respuesta->is_valid era falso, entonces quiere decir que no estaba bien escrito el texto de la imagen. Podemos entonces actualizar la variable $error_captcha para que cuando mostremos de nuevo la captcha podamos pasarle el error generado y que avise al usuario.
Tenemos nuestra captcha funcionando!
El código completo de este ejemplo es el siguiente:
<html>
<head>
<title>Página con formulario protegido por captcha</title>
</head>
<body>
<?
require_once('recaptchalib.php');
//Llaves de la captcha
$captcha_publickey = "6LfC?.";
$captcha_privatekey = "6LfC? ";
$error_captcha=null;
if ($_POST){
$captcha_respuesta = recaptcha_check_answer ($captcha_privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);
if ($captcha_respuesta->is_valid) {
//todo correcto
//hacemos lo que se deba hacer una vez recibido el formulario válido
echo "Todo correcto!";
}else{
//El código de validación de la imagen está mal escrito.
echo "Has escrito mal el texto";
$error_captcha = $captcha_respuesta->error;
}
}
?>
<form action="miejemplo_formulario.php" method="post">
Nombre: <input type="text" name="nombre" size="30">
<br>
Edad: <input type="text" name="edad" size="3">
<br>
<?
//escribimos en la página lo que nos devuelve recaptcha_get_html()
echo recaptcha_get_html($captcha_publickey, $error_captcha);
?>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
El ejemplo se puede ver en una página aparte.
Conclusión
Hemos visto en 3 pasos como hacer un formulario seguro con un captcha, apoyándonos en la tecnología desarrollada por reCAPTCHA. Hemos utilizado PHP para el ejemplo, y lo hemos simplificado al máximo. Aunque hay que señalar que este sistema dispone de un API para poder implementar captchas en otros entornos, incluso con Javascript, y poder personalizar el aspecto del cuadro que solicita introducir el texto de la imagen. También disponen de plugins para integrar reCAPTCHA en aplicaciones web populares como phpBB, MediaWiki o WordPress.
Primero habría que decir lo que es un captcha y para qué sirve. Se trata de un sistema para comprobar que un formulario ha sido escrito por un humano y no una máquina. Sirve para evitar que robots, bots o máquinas envíen información a través de los formularios que tenemos en una web. Posiblemente ya sepas lo que es un captcha, pero si quieres más información accede a la FAQ: Qué es una captcha?
En este artículo vamos a mostrar una manera de implementar un captcha en nuestro sitio web PHP en muy pocos y sencillos pasos. Para ello nos vamos a ayudar de un servicio llamado reCAPTCHA, que ofrecen gratis en la web http://recaptcha.net/. Gracias a este servicio podremos olvidarnos de casi toda la complejidad de instalar y configurar la captcha en nuestro servidor y además contar con la seguridad de disponer de una captcha en continua revisión y actualización.
Paso 1: Registrarse en reCAPTCHA
Nos tenemos que dirigir a http://recaptcha.net/ y registrarnos como usuarios. Nos solicitarán unos pocos datos personales para darnos de alta.
Una vez registrados debemos obtener unas claves para utilizar el sistema de captcha. Estas claves son específicas para cada dominio donde quieras utilizarlo. Las claves no son más que una llave pública y otra privada, que utilizaremos luego para poner la captcha en nuestra web.
Son algo como esto:
Public Key: 5LfCABCDEFGHIJUNDSBOejHq-5n5StSWawBpCAMX
Private Key: 6LfCAAAFHJSDFGHHJHDeju3a-Z5lomjShHKaGh9g
Esas claves son, lógicamente, secretas y debemos mantenerlas así. Yo me he inventado estas claves para no mostrar las mias ;)
En el sitio de reCAPTCHA tendremos que descargarnos unos códigos PHP con una librería PHP para poner en nuestro servidor y unos ejemplos de uso del sistema. Esto lo podemos conseguir en el apartado "Resources". Veremos que tienen un plugin o librería para trabajar con PHP, que además está perfectamente documentado.
Una vez descargado el zip que contiene la librería PHP, la tenemos que poner en algún lugar de nuestro servidor. Recuerda luego donde la has puesto, porque tendrás que hacer un include con PHP de esa librería.
Por ejemplo, podríamos colocar dicha librería en el mismo directorio donde está la página PHP que va a hacer uso de ella. Entonces la incluiríamos con algo como esto:
require_once('recaptchalib.php');
Paso 2: Incluir el captcha en el formulario
En la librería descargada ('recaptchalib.php') Hay una función que sirve para mostrar la captcha. Simplemente tenemos que llamarla con los parámetros correctos. La función devuelve el código HTML que tenemos que colocar en la página para que se vea la captcha.
recaptcha_get_html($captcha_publickey, $error_captcha);
Los parámetros que recibe son la llave pública que conseguimos anteriormente y un código de error, que es opcional. Luego veremos de dónde podría venir ese código de error.
El código del formulario sería algo como esto:
<?
require_once('recaptchalib.php');
//Llaves de la captcha
$captcha_publickey = "6LfC?.";
$captcha_privatekey = "6LfC? ";
//por ahora ponemos a null el error de la captcha
$error_captcha=null;
?>
<form action="miejemplo_formulario.php" method="post">
Nombre: <input type="text" name="nombre" size="30">
<br>
Edad: <input type="text" name="edad" size="3">
<br>
<?
//escribimos en la página lo que nos devuelve recaptcha_get_html()
echo recaptcha_get_html($captcha_publickey, $error_captcha);
?>
<br>
<input type="submit" value="Enviar">
</form>
Paso 3: Validar la captcha
Existe otra función para validar la captcha, llamada recaptcha_check_answer(). Esta función recibe también varios parámetros: La llave privada, la IP del usuario, y dos campos que contienen los valores que envía la captcha dentro del formulario $_POST["recaptcha_challenge_field"] y $_POST["recaptcha_response_field"].
Esta función devuelve un objeto que tiene dos propiedades:
is_valid, un boleano para decir si es se ha validado correctamente la captcha. error, un código de error que especifica qué ha ido mal si no se validó correctamente el texto.
Podríamos validar la captcha con algo como esto:
$captcha_respuesta = recaptcha_check_answer ($captcha_privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);
if ($captcha_respuesta->is_valid) {
//todo correcto
//hacemos lo que se deba hacer una vez recibido el formulario válido
}else{
//El código de validación de la imagen está mal escrito.
$error_captcha = $captcha_respuesta->error;
}
Llamamos a la función recaptcha_check_answer() enviando los parámetros comentados y guardamos el valor devuelto por la función en la variable $captcha_respuesta.
Luego comprobamos si el atributo $captcha_respuesta->is_valid es true. En ese caso sabemos que el texto escrito de la imagen se ha validado correctamente y hacemos lo que haya que hacer en el formulario.
Si $captcha_respuesta->is_valid era falso, entonces quiere decir que no estaba bien escrito el texto de la imagen. Podemos entonces actualizar la variable $error_captcha para que cuando mostremos de nuevo la captcha podamos pasarle el error generado y que avise al usuario.
Tenemos nuestra captcha funcionando!
El código completo de este ejemplo es el siguiente:
<html>
<head>
<title>Página con formulario protegido por captcha</title>
</head>
<body>
<?
require_once('recaptchalib.php');
//Llaves de la captcha
$captcha_publickey = "6LfC?.";
$captcha_privatekey = "6LfC? ";
$error_captcha=null;
if ($_POST){
$captcha_respuesta = recaptcha_check_answer ($captcha_privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);
if ($captcha_respuesta->is_valid) {
//todo correcto
//hacemos lo que se deba hacer una vez recibido el formulario válido
echo "Todo correcto!";
}else{
//El código de validación de la imagen está mal escrito.
echo "Has escrito mal el texto";
$error_captcha = $captcha_respuesta->error;
}
}
?>
<form action="miejemplo_formulario.php" method="post">
Nombre: <input type="text" name="nombre" size="30">
<br>
Edad: <input type="text" name="edad" size="3">
<br>
<?
//escribimos en la página lo que nos devuelve recaptcha_get_html()
echo recaptcha_get_html($captcha_publickey, $error_captcha);
?>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
El ejemplo se puede ver en una página aparte.
Conclusión
Hemos visto en 3 pasos como hacer un formulario seguro con un captcha, apoyándonos en la tecnología desarrollada por reCAPTCHA. Hemos utilizado PHP para el ejemplo, y lo hemos simplificado al máximo. Aunque hay que señalar que este sistema dispone de un API para poder implementar captchas en otros entornos, incluso con Javascript, y poder personalizar el aspecto del cuadro que solicita introducir el texto de la imagen. También disponen de plugins para integrar reCAPTCHA en aplicaciones web populares como phpBB, MediaWiki o WordPress.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...