# ivirtual networks » captcha

Como hacer un formulario de contacto con PHP utilizando captcha

Bony — Sun, 20 Dec 2009 07:00:19 +0000

Luego del post de mnosh, se me vino a la cabeza postear un formulario de contacto en PHP que yo tenia, empleando su captcha, para asi ya de paso, dar un ejemplo de como incorporarlo a un formulario, y usarlo correctamente.

En la carpeta “contacto” tenemos los siguientes archivos:

bauhs93.ttf
contacto.php
captcha.php (archivo de este post)

Vamos a usar una fuente nueva para nuestro captcha, asi que ya tenemos una linea que modificar en captcha.php.

Pero primero, vamos a ir con el codigo de contacto.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

//iniciamos session para poder acceder a ella a la hora de comprobar el codigo del captcha
session_start();

// $errores comienza en 0, se incrementaria si algo no va bien.
$errores=0;
// preparamos mensaje de salida como un string vacio, iremos agregando lineas a medida que vayamos encontrando errores.
$errMessage='';

//Chequeamos si se ha enviado el formulario.
if(isset($_POST['enviar'])){

//iniciamos y formateamos variables
$nombre=isset($_POST['nombre'])? ucwords(strtolower(trim($_POST['nombre']))) : '';
$email=isset($_POST['email'])? $_POST['email'] : '';
$texto=isset($_POST['texto'])? $_POST['texto'] : '';
$captcha = isset($_POST['captcha'])? $_POST['captcha'] : '';

// usamos el filtro para validar emails
if(!filter_var($email, FILTER_VALIDATE_EMAIL)){
// si no es valido, sumamos 1 a la cantidad de errores, y le agregamos a errMessage
// el error.
$errores++;
$errMessage.='el mail no parece valido
';
}
// comprobamos que el nombre contenga solo letras
if(!ereg('^[a-zA-Z]{3,40}$', $nombre)){
$errores++;
$errMessage.='a escrito un nombre incorrecto
';
}

// si el largo de la variable texto es mayor a 200...
if(strlen($texto)>200 || empty($texto)){
// sumamos 1 a la cantidad de errores, y le agregamos a errMessage el error.
$errores++;
$errMessage.='comentario demasiado largo
';
}

if($captcha != $_SESSION['cache_string']) {
// sumamos 1 a la cantidad de errores y agregamos el tipo de error a errMessage
$errores++;
$errMessage.='captcha ingresado invalido
';
}

// si no hay errores, entonces procedemos a armar, y enviar el mail..
if (!$errores) {
// armamos los headers del mensaje... el from, y etc..
$headers = "From: ".$email." ".$nombre. " <" .$email. ">";
//armamos el cuerpo del mensaje
$mensaje = "Administrador, han mandado un mail desde la web XXXXXXXX, el nombre del visitante es: {$nombre}, su email es: {$email} y el mensaje es el siguiente: \n\n {$texto}";
// @mail(...), devuelve true si la funcion no tiro ningun error (o sea, se mando el mail)
// si tu hosting no tiene smpt, te dara el error del else

if (@mail("matias.a18@gmail.com", "Asunto de nuestro mensaje", $mensaje, $headers)) {
echo '

Mensaje enviado satisfactoriamente

';
} else {
// el mensaje no ha podido ser enviado, mostramos el texto en la clase error de la css
// las razones por las que puede aparecer este mensaje es porque el puerto smpt no esta abierto
// en el servidor.
echo '

El mensaje no ha podido ser enviado

';
}
}else{
// como hubieron errores, los mostramos en la clase (definida en la .css) error.
echo '

' . $errMessage . '

';
}

}
?>

Como podran ver, usamos el archivo captcha.php, aunque, le cambiamos algo del anterior codigo, en la linea 16, en vez de ponerle:

1	$fontFile ="my_special_font.ttf";

Le ponemos:

1	$fontFile ="bauhs93.ttf";

Y listo, si el mensaje ha sido enviado correctamente, deberiamos recibir esta notificacion:

“Mensaje enviado satisfactoriamente”

Si el SMTP de nuestro hosting no esta activado, nos deberia de mostrar este mensaje:

“El mensaje no ha podido ser enviado”

Y, si hubo algun error, podriamos recibir alguno de los siguientes mensajes:

“captcha ingresado invalido” y/o “comentario demasiado largo” y/o “a escrito un nombre incorrecto” y/o “el mail no parece valido”.

Y listo, tenemos nuestro formulario de contacto hecho.. y listo.

Cualquier duda, en los comentarios.

Creando un sistema simple para manejo de captcha en php

mnosh — Mon, 14 Dec 2009 05:31:05 +0000

Un sistema de captcha (Completely Automated Public Turing test to tell Computers and Humans Apart) es la solución frecuente para evitar que robots spamers que visiten nuestro sitio puedan registrarse, enviar comentarios, participar en encuestas o cualquier yuyo en cuestión. Si bien esto no nos garantiza un 100% de efectividad , de seguro nos vale.

Supongamos un sitio web desarrollado en php al cual queremos implementarle una solución para frenar bots spamers, bien entonces instalamos re-captcha y listo, gracias por participar…

Ok, si bien nos sirve, quizás queramos saber cómo funciona y por ahí crear el nuestro propio, así que de eso va este post… comencemos.

Para generar imágenes en php nos valemos de la librería GD el cual está presente en la mayoría de los web hosting. En caso de utilizar localhost, instalando wamp para Windows ya nos viene incluido, y desde Linux bastaría con compilar php con la opción de gd, así como las librerías de libpng y libjpeg ( ./configure –with-gd=/… –with-png-dir=/… –with-jpeg-dir=… ).

Básicamente lo que necesitamos es generar una cadena de texto con letras y números al azar, almacenarlo en la sesión y luego comprobar con lo que el usuario inserto en la caja del formulario, en caso de coincidir se salto el captcha, caso contrario regresamos con un mensaje de error y con una nueva imagen para intentar.

/** Archivo captcha.php **/

//iniciamos session
session_start();

// cantidad de letras en nuestro captcha
$passLength = 4;

// tamaño para la caja de captcha
$width = 200;
$height = 80;
// tamaño para el texto en pixceles
$textSize=30;
// archivo ttf que vamos a utilizar
// para escribir el texto en cuestion.
$fontFile ="my_special_font.ttf";

/**
* Genera un string con la cantidad de caracteres pasado.
* @param int $size cantidad de caracteres.
* @return $string mayusculas y numeros
*/
function randomCH($size){
$i=0;
$keyString='';
while ($i < $size) {
// AZ (65-90) 0-9 (48-57)
$str = rand(48, 90);
if($str<65 && $str>57){
continue;
}else{
$keyString .= chr($str);
$i++;
}
}
return $keyString;
}
// almacenamos un strign aleatorio
$cacheString=randomCH($passLength);

// almacenamos en la session la frase de la imagen
$_SESSION['cache_string']=$cacheString;

// creamos una imagen utilizando las medidas setteadas
$imgCaptcha = imagecreatetruecolor($width, $height);

// definimos algunos colores
//(esto debe hacerse luego de generar la imagen ya que debemos pasarle el recurso).
$blue = imagecolorallocate($imgCaptcha, 0, 0, 80);
$black = imagecolorallocate($imgCaptcha, 0, 0, 0);
$white = imagecolorallocate($imgCaptcha, 255,255,255);
$grey = imagecolorallocate($imgCaptcha, 100, 100, 100);

// creamos un par de rectangulos para simular un borde azul
imagefilledrectangle($imgCaptcha, 10, 10, $width-10, $height-10, $blue);
imagefilledrectangle($imgCaptcha, 20, 20, $width-20, $height-20, $black);

// cada texto se inclinara algunos pixceles de forma aleatoria
$rotationLetter = rand(-10, 10);

// escribimos en las canvas utilizando como parametros nuestra imagen, el tamaño de texto
// la rotacion aleatoria, posicion x, posicion y, color, archivo ttf y por ultimo el string
// utilizamos 2 textos para simular una sombra en gris por encima de las letras blancas
imagettftext($imgCaptcha, $textSize, $rotationLetter, 50, 55, $grey, $fontFile, $cacheString);
imagettftext($imgCaptcha, $textSize, $rotationLetter, 52, 57, $white, $fontFile, $cacheString);

// enviar cabezeras (para que no se cachee la imagen y el navegador siempre pida una nueva)
header("Expires: Tue, 20 Jul 2001 17:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

// enviar cabezera de imagen
header("Content-Type: image/png");

// utilizando imagejpeg o imagepng enviamos la imagen generada dinamicamente.
//imagejpeg($imgCaptcha);
imagepng($imgCaptcha);

// luego liberamos recursos en el sistema.
imagedestroy($imgCaptcha);
?>

Bien, leyendo los comentarios en el código se puede ir siguiendo paso a paso.
Ahora solo nos resta crear un formulario y llamar a la imagen como lo haríamos con una imagen estática desde HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/** Archivo form.php **/
// iniciamos session
session_start();

// comprobamos si se envio el formulario y si lo que se envio coincide con el string guardado en session
if (isset($_POST["captcha"])) {
if ($_REQUEST["captcha"] == $_SESSION['cache_string']) {
echo "los caracteres ingresados son correctos..";
} else {
echo "error al ingresar los caracteres.";
}
exit(0);
}
?>

Bien, con eso ya estaríamos, y bastaría adaptarlo a nuestras necesidades.
Como comentarios finales, hay que prestar atención a algún par de cosirijillas, como por ejemplo:
1. debe iniciarse session en ambos archivos, (si el cliente no acepta cookies no nos servirá).

2. las cabeceras para evitar que la imagen sea cacheada por el navegador, y las cabeceras para decirle al navegador que es una imagen lo que debe esperar deben ser enviadas antes que nada, es decir que no nos vale generar ningún tipo de salida y luego intentar enviar cabeceras, esto produciría un error.

3. hay que revisar las rutas, pueden utilizar __FILE__ para referirse al path absoluto donde se encuentra en el servidor y luego concatenar rutas para encontrar el archivo de fuente, imágenes que quieran utilizar para complicar un poco más el texto, etc. En este caso tenemos todos los archivos en la misma carpeta (captcha.php, form.php y font.ttf).

4. al final del código utilicé la función imagepng($imagen), y también valdría utilizar imagejpeg($imagen), con una diferencia en calidad, sobre todo si utilizan imágenes externas con degrado, y por supuesto una saca en pantalla una imagen png, mientras que la otra una jpg.

5. el tipo de fuente es Bauhaus (la pueden buscar en su directorio de fuentes) o utilizar cualquier otra, claro está que deberían de chechear que sea legible por humanos.

Resultado final:

Para mas información sobre como manipular imágenes en php, pueden consultar el siguiente enlace:

http://php.net/manual/en/book.image.php