View
8
Download
0
Category
Preview:
Citation preview
Jose Ignacio González Gómez.
Departamento de Economía Financiera y Contabilidad
Universidad de La Laguna
www.ecofin.ull.es/users/jggomez.
Tema:
php y Dreamweaver
Libro de Visitas con Sistema de Seguridad Captcha
Indice
1 PROYECTO “MI LIBRO DE VISITAS” CON PHP Y MYSQL.
1.1 OBJETIVO Y ESQUEMA DEL PROYECTO 1.2 DISEÑO DE LA BASE DE DATOS.
1.3 ENTRADA DE COMENTARIOS. FICHERO A_FIRMAR.PHP. 1.3.1 Diseño del formulario de entrada de comentarios.
1.3.2 Comportamiento del Serv idor. Configurar el Formulario de Insertar Registros.
1.3.3 Los campos ocultos del formulario y sus valores predeterminados.
1.3.4 El código de la página, aspectos más relevantes.
1.4 AGRADECIMIENTOS. 1.5 CONSULTA A LA BD COMENTARIOS. FICHERO B_LIBRO.PHP
1.6 ELIMINAR COMENTARIOS. 1.6.1 Consideraciones Previas.
1.6.2 Restricción de acceso a la página de eliminación de comentarios.
1.6.3 Acceso a la página de eliminación de reg istros.
1.7 INSTALAR EN NUESTRO SERVIDOR.
2 EL SISTEMA DE SEGURIDAD CAPTCHA. DESARROLLO E
IMPLANTACIÓN CON PHP.
2.1 CONCEPTO DE SEGURIDAD CAPTCHA.
2.2 FICHEROS BÁSICOS EN UN SISTEMA DE SEGURIDAD CAPTCHA CON PHP. 2.3 EL FICHERO PARA GENERAR IMÁGENES, “CAPTCHA.PHP”
2.3.1 Comentario
2.3.2 Código Fuente del fichero “captcha.php”
2.3.3 Código Comentado del fichero “captcha.php”
2.3.4 Resultado del script, captcha.php
2.4 EL FORMULARIO CON LOS DATOS Y EL CÓDIGO DE VERIFICACIÓN. “FORMULARIO.HTML”
2.4.1 Comentario
2.4.2 Código Fuente del fichero “formulario.html”.
2.4.3 Código Comentado del fichero “formulario.html”.
2.4.4 Resultado del formulario.
2.5 EL FICHERO DE COMPROBACIÓN DE CLAVE. “COMPROBAR.PHP”
© Jose Ignacio González Gómez
2
2.5.1 Comentario
2.5.2 Código Comentado del “comprobar.php”
2.6 FUENTES DE INFORMACIÓN
3 INTEGRACIÓN DEL SISTEMA DE SEGURIDAD CAPTCHA AL
PROYECTO “MI LIBRO DE VISITAS”.
3.1 OBJETIVO Y PASOS. 3.2 GENERANDO E INSERTANDO LA IMAGEN CAPTCHA EN EL FORMULARIO
2_FIRMAR.PHP
3.3 MODIFICAR EL COMPORTAMIENTO DEL BOTÓN ENVIAR DEL FORMULARIO “2-FIRMAR.PHP”.
3.4 MODIFICAR Y ADAPTAR EL FICHERO COMPROBAR.PHP 3.4.1 Cuestiones a tener en cuenta
3.4.2 Caso comprobar.php, clave incorrecta.
3.4.1 Caso comprobar.php, clave correcta.
4 NOTAS FINALES.
© Jose Ignacio González Gómez
3
1 Proyecto “Mi Libro de Visitas” con php y Mysql.
1.1 Objetivo y esquema del proyecto
ESQUEMA DE DISEÑO DE MI LIBRO DE VISITAS
(Con PHP y Mysql)
1 Diseño de la Base de Datos Mysql
Entrada de Comentarios
1_libro_de_visitas.php
Formulario de insertar registro
Entrada de nuevos comentarios
en la base de datos.
2a Formulario de Insertar Registros
(a) conecta con la bd e inserta los
registros
librodejggomez
Tabla: comentarios
campos
indice
ip
fecha y hora
nombre
página web
comentario
---------------Agradecimientos
2_gracias.htmPágina donde se agradecen los
comentarios y se da acceso a ver
el libro de visitas o a ir a la página
principal.
2b Página de agradecimientos
(b) Si la inserción de registros es
correcta, vamos agradecimientos.
En caso contrario que falte, pe. que
falte algún campo que llenar
volvemos a 2.a
3 Libro de Visitas Resultado
Consulta Libro Visitas
3_ver_comentarios.phpPágina dinámica donde se realiza una consulta
a la bd ordenada descendentemente por fechas,
con paginación de registros.
También la pueden visitar desde el menú de inicio
o desde otras paginas con enlace a insertar nuevos
registros.
4 Eliminación de Comentarios
(c) consulta a la bd
Eliminación de Comentarios
4_elimina_comentarios.php
Consulta la bd y elimina comentarios no acordes al
objetivo del proyecto. Acceso restringido, solo a los
administradores, con clave de acceso.
Es quema 1
Tal y como dice el titulo, nuestro objetivo es el diseño de un proyecto de programación de un libro de visitas donde los usuarios de nuestra página web puedan dejar sus
comentarios y opiniones. Para ello nos basaremos en el programa Dreamweaver con tecnología PHP y base de datos MYSQL trabajando en un servidor local APACHE.
Como podemos ver en el esquema anterior, podemos diferenciar 4 etapas básicamente:
1. Diseño y configuración de la base de datos. 2. Pagina (formulario de inserción) para insertar los comentarios en la base de
datos diseñada. 3. Pagina de agradecimientos por los comentarios aportados y desde la cual
vincularemos a la consulta del libro de visitas y al inicio de la web
4. Libro de visitas, consulta de los registros de la base de datos, con ordenación por fecha descendentemente
5. Página para el control y eliminación de comentarios no acordes con el proyecto.
© Jose Ignacio González Gómez
4
1.2 Diseño de la base de datos.
Para el objetivo planteado, hemos desarrollado la base de datos que llamaremos librojggomez, configurada por una sola tabla en la que recogeremos los comentarios
recibidos por nuestros visitantes.
Ilustración 1
Los campos de la tabla “comentarios” son los que se recogen en la siguiente Ilustración.
Ilustración 2
1.3 Entrada de comentarios. Fichero a_firmar.php.
1.3.1 Diseño del formulario de entrada de comentarios.
Vamos a configurar la pagina de entrada de comentarios que hemos denominado como
“ a_firmar.php” y cuyo objetivo es contar con un formulario para recoger los valores que introduzca el visitante.
Ilustración 3
Teniendo en cuenta los campos que componen la tabla comentarios (ver Ilustración 2) debemos adaptar por tanto nuestro formulario a los campos disponibles.
© Jose Ignacio González Gómez
5
Campo Id. No estará disponible en el formulario en cuanto que es un auto
numérico de la base de datos.
Campo IP. Campo Oculto. Este será un campo oculto en el que almacenaremos
la dirección IP del visitante de nuestra página.
Fecha/Hora. Campo Oculto. También será un campo oculto del formulario
donde almacenaremos la fecha y hora del momento en que se graba el comentario y según el reloj del servidor.
Nombre. Campo Obligatorio. Campo texto que identifica al usuario.
Página Web/Email, Campo Opcional donde se puede introducir el email o la
pagina web del usuario.
Comentario. Campo Obligatorio en el que se recogen las opiniones de los
usuarios.
Por tanto vamos a diseñar el formulario de la Ilustración 3 teniendo en cuenta las
características señaladas anteriormente. Presentamos a continuación el formulario diseñado con los campos.
Ilustración 4
Destacan los dos campos ocultos que hemos incorporado al formulario y que se
corresponden al campo IP y al de Fecha/hora.
Ilustración 5
Ahora es conveniente preparar nuestra página de agradecimientos al usuario por haber participado en nuestro libro de visitas, en nuestro caso la llamaremos “c_gracias.html”.
1.3.2 Comportamiento del Servidor. Configurar el Formulario de
Insertar Registros.
Pasamos a continuación diseñar este formulario como de “Inserción de Registros”, para
ello vamos a la opción “Comportamiento del Servidor” y seleccionamos la opción, Insertar Registro que nos permitirá asociar esta página para introducir los campos en la base de datos (ver Ilustración 6), para ello se crea la conexión a la base de datos y nos
pone a disposición los campos de la tabla “Comentarios” ( Ver Ilustración 7).
© Jose Ignacio González Gómez
6
Ilustración 6
Ahora tendremos que asociar cada campo de la
base de datos con los campos establecidos en el formulario para que entienda donde debe
almacenar los valores que introduce el usuario en el formulario y a quien le corresponde de los campos de la base de datos.
Tendremos además que definir bajo que formato se almacenan cada uno de estos
campos, evidentemente, guardando concordancia con el tipo de dato que hemos diseñado en la base de datos mysql.
Finalmente le debemos indicar la pagina a la cual hemos de remitir al usuario una vez que
los datos han quedado registrados en la base de datos a través del formulario.
Ilustración 7
1.3.3 Los campos ocultos del formulario y sus valores predeterminados.
Solo nos queda por configurar los valores previos o que por defecto queremos que
asuman los campos ocultos, recordemos, el IP del usuario y la fecha/hora de grabación del registro en la base de datos, recordemos que son valores ocultos y por tanto en
ningún momento el usuario
Así, retomando la Ilustración 5, vamos a configurar los valores por defecto que queremos asignar a esos dos campos a través de la variable valor.
Para detectar el Ip del visitante haremos uso de una función de PHP que nos da la citada información como es $REMOTE_ADDR, por tanto simplemente tendremos que
asignarle este valor a la variable concreta, tal y como se muestra en la Ilustración 8.
© Jose Ignacio González Gómez
7
De igual forma procederemos a establecer como valor del campo formulario Fecha/hora
el valor que en ese momento tenga el servidor, la función concreta será date('Y-m-d G:i:s').
Ilustración 8
1.3.4 El código de la página, aspectos más relevantes.
Gran parte del código generado en esta página ha sido creado de forma automática por
el Dreamweaver, vamos a resaltar los aspectos más destacados para ir entendiéndolo un poco, además de iniciarnos en este lenguaje del PHP.
1. Cadena de Conexión a la base de datos.
Comienza el código definiendo la cadena de conexión a la base de datos asi como estableciendo los parámetros de la misma y como se almacenan los datos, esto como
podemos observar es todo código php.
<?php /* En este primer apartado establecemos
la conexión con la base de datos (esto lo ha hecho automaticamente el Dreamweaver) */?> <?php require_once('Connections/librojggomez.php'); ?>
<?php /* AQUI establecemos todos los requisitos para almacenar el formulario en los campos de
la base de datos. */?> <?php if (!function_exists("GetSQLValueString")) { function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{ $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue; $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) :
mysql_escape_string($theValue); switch ($theType) { case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL"; break; case "long": case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL"; break; case "double":
$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL"; break; case "date": $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break; case "defined": $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue; break;
} return $theValue; } }
$editFormAction = $_SERVER['PHP_SELF']; if (isset($_SERVER['QUERY_STRING'])) {
$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']); } if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) {
© Jose Ignacio González Gómez
8
$insertSQL = sprintf("INSERT INTO comentarios (ip, fechayhora, Nombre, ̀ Pagina Web`, Comentario) VALUES (%s, %s, %s,
%s, %s)", GetSQLValueString($_POST['form1IP'], "text"), GetSQLValueString($_POST['form1Fecha'], "date"),
GetSQLValueString($_POST['form1nombre'], "text"), GetSQLValueString($_POST['form1Web'], "text"), GetSQLValueString($_POST['form1comentario'], "text"));
mysql_select_db($database_librojggomez, $librojggomez); $Result1 = mysql_query($insertSQL, $librojggomez) or die(mysql_error()); $insertGoTo = "c_gracias.html";
if (isset($_SERVER['QUERY_STRING'])) { $insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?"; $insertGoTo .= $_SERVER['QUERY_STRING']; }
header(sprintf("Location: %s", $insertGoTo)); } ?>
2. Establecimiento del método y acción a realizar por el formulario cuando se ejecuta enviar.
En este apartado quermos destacar la configuración de la acción del botón enviar. Esto simplemente es código html. <?php /* AQUI se define la forma en que se envia el formulario y la accion que se ejecuta
cuando ejecuta el botón enviar y que si nos fijamos ahora conecta con la variable $editFormAction
que fue creada de forma automatica por el Dreamweaver para establcer la forma de almacenar los
datos. */?> <td width="300"><form id="form1" name="form1" method="POST" action="<?php echo $editFormAction; ?>">
1.4 Agradecimientos.
Esta es una simple página en la que agradecemos al usuario su participación en nuestro
libro de visitas.
Ilustración 9
1.5 Consulta a la bd Comentarios. Fichero b_libro.php
Todo libro de visitas que se precie debe dar acceso a las opiniones registradas en el
mismo, por tanto vamos a diseñar a continuación una página dinámica (en php) que llamaremos b_libro.php.
La función de la misma es mostrar por orden descendente los comentarios realizados
por los usuarios, y para ello tendremos que basarnos en una consulta a la base de datos, en concreto a la tabla comentarios.
Vamos en primer lugar a diseñar la página de nuestro libro de visitas para posteriormente añadirle el comportamiento dinámico deseado.
El diseño de nuestra página, sin comportamiento dinámico es el que presentamos en la
siguiente Ilustración.
© Jose Ignacio González Gómez
9
Ilustración 10
Pasamos a continuación a la parte dinámica. Como se puede observar queremos mostrar
los registros ordenados descendentemente por fecha con los valores mostrados en la Ilustración anterior.
Esto supone acceder a un juego de registros para la página anterior y crear un área
repetida para mostrar los distintos comentarios.
Para ello a través de la opción del Dreamweaver, Comportamientos del Servidor (ver
Ilustración 6 ) diseñamos un nuevo juego de registros como el que presentamos a continuación.
Ilustración 11
Como podemos observar hemos seleccionado todos los campos y los hemos ordenado por el campo fechayhora descendentemente. Ya tenemos por tanto a disposición los
datos almacenados en la bd.
Ahora, pasamos a la pagina que estamos diseñando y generamos un area repetida así como un juego de registros para navegar por los distintos valores de la tabla.
© Jose Ignacio González Gómez
10
Ilustración 12
Por tanto vamos arrastrando los campos disponibles al area repetida donde queremos
que se muestren los mismos.
Ilustración 13
Solo nos queda por insertar una barra de navegación por los registros así como el estado
de navegación, quedando por tanto finalmente configurado nuestro libro de visitas como se muetra en la Ilustración 14.
Ilustración 14
Por tanto, la apariencia final de nuestra consulta al libro de visitas tendrá un dieño similar a la que se presenta a continuación.
© Jose Ignacio González Gómez
11
Ilustración 15
1.6 Eliminar Comentarios.
1.6.1 Consideraciones Previas.
Ilustración 16
Puede ser conveniente
tener a disposición una opción que nos permita
eliminar aquellos registros que por una razón u otra queramos
eliminarlos de nuestra base de datos.
Para ello hemos modifi-cado la Ilustración 15 incorporado un botón
que nos lleve a la página de eliminación
de comentarios tal y como se muestra en la figura adjunta.
Para que esta opción de nuestro libro de visitas funcione correctamente es necesario contar con tres páginas:
© Jose Ignacio González Gómez
12
1. Página de restricción de acceso y página de aviso de fallo de conexión.
2. Acceso a la página de eliminación de registros.
De esta forma cuando el usuario intenta acceder al área de eliminación de regis tros
(botón de la Ilustración 16) antes tendrá que verificarse la autorización del mismo para eliminar los registros y por tanto accederá previamente a la página de identificación (Ilustración 17)
1.6.2 Restricción de acceso a la página de eliminación de comentarios.
Es evidente que solo aquellos usuarios autorizados podrán acceder a esta opción de nuestro libro de visitas, y para ello tendremos que establecer previamente las condiciones de seguridad necesarias. Para ello hemos creado una página con un
formulario de identificación de los usuarios admitidos.
Ilustración 17
Sobre este formulario generamos un comportamiento del servidor “Conectar Usuarios” (
ver Ilustración 18) el cual vincularemos con una base de datos (adminyalumnos) donde registramos y diseñamos los diferentes permisos de acceso.
Ilustración 18
Ilustración 19
Tal y como se muestra en la Ilustración 20, si los valores introducidos en el formulario de la Ilustración 18 coincide con los valores existentes en la base de datos podremos
acceder a la pagina “eliminación de registros” que es la que nos interesa.
Ilustración 20
© Jose Ignacio González Gómez
13
En caso contrario, es decir que la autorización sea fallida, redirigimos al usuario a una página simplemente de
aviso, como la que se muestra en la Ilustración 21
Ilustración 21
De esta forma se prohíbe el acceso a la pagina directamente de eliminación de
comentarios si previamente el usuario no se ha autentificado correctamente.
1.6.3 Acceso a la página de eliminación de registros.
La eliminación de registros es una página de borrado normalmente funciona conjuntamente con una página de resultados donde el usuario selecciona previamente el registro a borrar y traspasa el mismo a la página que se encarga de eliminarlo.
De esta forma, debemos contar con dos páginas:
3. Pagina de Selección. Donde seleccionamos el registro a borrar.
4. Pagina de borrado. Donde confirmamos el borrado del registro seleccionado. Para ello es necesario contar en esta página de un juego de registros de filtrado proveniente de la anterior pagina de selección. La página de borrado solo puede
contener un comportamiento del servidor de edición de registros.
Ilustración 22
Es posible que tanto la página de selección como la de
borrado se encuentren en la misma página dinámica.
Para trabajar de esta forma, primero por tanto debemos crear un juego de registros que nos permita seleccionar aquellos
que queremos borrar, para ello vamos a la opción Vinculación de Datos – Juego de Registros (consulta), ver Ilustración 22.
De esta forma accedemos, a la siguiente configuración expuesta en la siguiente ilustración.
Ilustración 23
© Jose Ignacio González Gómez
14
Añadimos además un navegador de registros para poder movernos por los registros de
la base de datos, que hemos ordenado descendentemente por el campo fecha. Esto supone, evidentemente como hemos señalado anteriormente el contar con un juego de
registros como el de la Ilustración 23. De esta forma podemos navegar a través de los registros de la base de datos.
Ilustración 24
Solo nos queda seleccionar el registro para poder borrarlo y para ello hemos creado un formulario de borrado donde
tenemos un solo campo de tipo texto Registro Nº y que hemos denominado internamente como Regborrar
Ilustración 25
Ilustración 26
Antes de continuar crearemos un comportamiento de asociado al formulario del
tipo “Eliminar registro”, tal y como se muestra en la Ilustración 26 con la configuración
expuesta a continuación , Ilustración 27.
Ilustración 27
Como podemos observar en la configuración de este comportamiento de servidor
“Eliminar Registros”, se relaciona el valor de l campo del formulario de la Ilustración 25 “Regborrar” comentado anteriormente con el valor del campo índice correspondiente a
la tabla comentarios de la base de datos “librodevisitasjggomez” y que será por tanto el comentario seleccionado para borrar.
© Jose Ignacio González Gómez
15
Solo nos falta un último detalle para el correcto funcionamiento de esta pagina y es que
el navegador de los registros se coordine con el campo del formulario “Regborrar” de tal forma que se configure como una especie de pagina maestro/detalle, para ello
simplemente nos situamos sobre el campo “Regborrar” y en la opción de propiedades pulsamos sobre el botón “vincular con fuente dinámica”, tal y como se muestra en la Ilustración 28.
Ilustración 28
Ilustración 29
Así accedemos a la Ilustración 29 donde determinamos que campo del juego de
registros anterior queremos poner como valor predeterminado en el campo del formulario “Regborrar”. Es decir el campo
del juego de registros está vinculado con el formulario donde seleccionamos el
registro que deseamos borrar.
Ver el resultado obtenido con esta vinculación en la siguiente ilustración. A
medida que navegamos por el juego de registros se actualiza el campo del
formulario.
Ilustración 30
Finalmente debemos asignar a esta
página la limitación de acceso como hemos comentado. Para ello
simplemente crearemos un nuevo comportamiento del servidor donde escogemos “ Restringir
acceso pagina”. Ver Ilustración 31.
Simplemente tendremos que
limitar el acceso Nombre de Usuario y Contraseña, así como la pagina de redireccionamiento en
caso de que la autorización no sea correcta (Ilustración 32)
Ilustración 31
© Jose Ignacio González Gómez
16
Ilustración 32
1.7 Instalar en nuestro servidor.
Subir la base de datos
Subir los ficheros.
Subir las conexiones y comprobar que estas funcionan correctamente.
2 El Sistema de Seguridad Captcha. Desarrollo e implantación con php.
2.1 Concepto de seguridad captcha.
Ilustración 33
Ilustración 34
En muchas ocasiones cuando
tenemos un formulario en nuestra web, como puede ser un sistema de
estadística o un libro de visitas como el expuesto anteriormente, es muy recomendable utilizar este
sistema de seguridad para evitar altas fraudulentas, spam en los
comentarios y diversos ataques provocados fundamentalmente por robots.
Esa es la razón por lo que en muchas páginas de alta o en las que
se rellenan un formulario, para salvar la seguridad y evitar su uso indebido por parte de estos robots
se utiliza un tipo de campo de confirmación como el expuesto en
la Ilustración 33 y en la Ilustración 34.
Como podemos observar, este sistema consiste en generar una imagen que contiene una
secuencia de caracteres aleatorios. El usuario debe introducir esa secuencia en una caja de texto para confirmar que no se trata de un robot.
Así , los CAPTCHA o Completely Automated Public Turing test to tell Computers and Humans Apart (Prueba de Turing pública y automática para diferenciar a máquinas y
© Jose Ignacio González Gómez
17
humanos) son aquellas imágenes con caracteres que aparecen en los formularios para
detectar cuando el formulario es llenado por un humano o por un bot (programa especial para automatizar procesos).
Es decir, este sistema consiste en una imagen que contiene una secuencia de caracteres aleatorios y donde el usuario debe introducir esa secuencia en una caja de texto para confirmar que no se trata de un robot.
Estas imágenes se presentan ligeramente distorsionadas y son realmente difíciles de capturar por un robot.
Presentamos a continuación algunos ejemplos de captcha que es frecuente encontrarnos en diversas páginas web.
Típico CAPTCHA usado por Google
Otro ejemplo Captcha
Otro ejemplo Captcha
2.2 Ficheros básicos en un sistema de seguridad captcha con php.
La idea básica para crear un captcha es generar primero un texto aleatorio, luego basado en este texto generamos una imagen la cual se muestra al usuario, finalmente se compara el texto ingresado por el usuario con la palabra aleatorio generada.
Básicamente el sistema captcha se compone de 3 ficheros. captcha.php
formulario.html comprobar.php Es necesario además tener un fondo de imagen que llamaremos
captacha.png, como posteriormente comentaremos.
Vamos a analizar como implantar en nuestros formularios este sistema anti spam
captcha con php.
2.3 El fichero para generar imágenes, “captcha.php”
2.3.1 Comentario
El objetivo de este script es generar una imagen con texto aleatorio que sirva como freno para la introducción de claves por robots, a este fichero o script php lo llamaremos
captcha.php el cual se generara dinámicamente.
Una vez generado la clave aleatoriamente es necesario almacenar o guardar la misma para ser recuperada posteriormente y poder compararla con los valores introducidos por
el usuario, para ello crearemos una variable de sesión para almacenar el texto generado.
Así de forma resumida lo primero que necesitamos para generar un captcha es crear
aleatoriamente la secuencia de caracteres que va aparecer en la imagen y guardarla en una variable de sesión ($_SESSION) para comprobarla luego con la ingresada por el usuario.
Señalar, como hemos comentado en nuestro ejemplo es necesario contar con un fondo para la imagen previamente creado y que llamaremos captacha.png sobre el que se
insertarán los caracteres que formarán la imagen final del captcha.
© Jose Ignacio González Gómez
18
2.3.2 Código Fuente del fichero “captcha.php”
<?php
session_start();
$md5 = md5(microtime() * mktime());
$string = substr($md5,0,3);
$captcha = imagecreatefrompng("./captcha.png");
$color_let ras = imagecolorallocate($captcha, 255, 0, 0);
$color_lineas = imagecolorallocate($captcha,255,0,0);
$_SESSION['key'] = md5($string);
/*
Devolvemos la imagen para mostrarla en el formulario.
*/
header("Content-type: image/png");
imagepng($captcha);
?>
</pre>
2.3.3 Código Comentado del fichero “captcha.php”
/* aquí está el comentario dentro del código */ (comentarios en php)
<?php
/* Iniciamos la sesión. Esto se utiliza para el envió de variable de sesión. Mediante las variables de
sesión enviamos la cadena de 5 caracteres que el usuario debe introducir en el formulario para verificar
que no
se trata de un robot.
*/
session_start();
/*
Creamos una cadena aleatoria a partir de las funciones de fecha de php.
La función md5() retorna una cadena de 32 caracteres alfanuméricos, mediante el algoritmo de
encriptación md5.
*/
$md5 = md5(microtime() * mktime());
/*
Para este ejemplo solamente necesitamos 5 caracteres de los 32 que genera la función md5() por lo tanto
escojemos los 3 primeros caracteres de la cadena.
*/
$string = substr($md5,0,3);
/*
A continuación creamos una imagen a partir de un fondo que hemos creado con el nombre captcha.png y
que hemos subido previamente al servidor. Generalmente este fondo se encuentra distorsionado
*/
$captcha = imagecreatefrompng("./captcha.png");
/*
Editamos los colores de la imagen, tanto de los caracteres y de las líneas
*/
$color_let ras = imagecolorallocate($captcha, 255, 0, 0);
$color_lineas = imagecolorallocate($captcha,255,0,0);
/*
Ahora escribimos la cadena generada aleatoriamente en la imagen con el color de la fuente seleccionada
*/
imagestring($captcha, 5, 20, 10, $string, $co lor_letras);
/*
Encriptamos la variable de sesión con la función md5() y la establecemos como una variable de sesión,
para poder verificarla al enviar el formulario.
*/
$_SESSION['key'] = md5($string);
/*
Devolvemos la imagen para mostrarla en el formulario.
© Jose Ignacio González Gómez
19
*/
header("Content-type: image/png");
imagepng($captcha);
?>
</pre>
Del código anterior queremos resaltar que hemos guardado de forma encriptada el
código de verificación como inicio de sesión con el nombre de key, es decir:
$_SESSION['key'] = md5($string);
Será esta variable de sesión key la que vamos a comparar con el valor que introduzca el
usuario para verificar que ambos coinciden.
2.3.4 Resultado del script, captcha.php
El resultado será una imagen aleatoria que se genera sobre el fondo
personal que hemos creado e incorporando las letras aleatorias sobre la anterior imagen nos daría como resultado final el captcha de la derecha.
Evidentemente los valores del captcha serán los que aparecen en rojo, en el ejemplo anterior serían c65.
Este sera el valor, en este caso, que se almacenará en la variable de sesión $_SESSION['key'] y que servirá para compararlo con el valor que introduzca el usuario
Este captcha así generado y teniendo en cuenta el código comentado, es muy fácil de adaptar, tanto que hasta yo, he sido capaz de hacerlo.
2.4 El formulario con los datos y el código de verificación. “formulario.html”
2.4.1 Comentario
El captcha generado anteriormente ira asociado a un formulario que tiene el botón enviar. Su función será remitir los datos del formulario a una base de datos o cualquier
otra acción.
Ilustración 35
Es por tanto un formulario clásico como tendremos oportunidad de estudiar a
continuación, con la peculiaridad que el botón enviar nos remitirá antes de hacer cualquier acción a una página o script php donde comprobará que la clave introducida coincide con la del captcha. En nuestro caso, esa página o script de comprobación es la
que hemos llamado “comprobar.php”
© Jose Ignacio González Gómez
20
Lo siguiente es mostrar la imagen generado para que el usuario pueda leerlo e ingresar
el texto en el formulario para ser verificado. Naturalmente esta verificación será parte de un formulario mucho más grande pero solo incluimos un campo para propósitos del
ejemplo. Esto lo incluimos en el archivo captchademo.php, note que al incluir la imagen hemos colocado la ruta al php que genera la imagen.
Es decir, para verificar el correcto funcionamiento de nuestro captcha, necesitamos
crear un formulario que permita al usuario ver el código, escribirlo en un campo de texto y enviarlo pulsando un botón.
2.4.2 Código Fuente del fichero “formulario.html”.
<form action="comprobar.php" method="post">
<table width="500"><tr><td>
<tr><td><b>Nombre: </b></td><td><input type="text" name="nombre" size="20"
maxlength="30"></td></tr>
<tr><td><b>Email: </b></td><td><input type="text" name="email" size=" 20"
maxlength="100"></td></tr>
<tr><td><b>Comentario : </b></td><td><input type="text" name="comentario" size="20"
maxlength="200"></td></tr>
</table>
<p align="left">
<b>*Código de confirmación (las letras en ro jo):</b> <img src="captcha.php" />
<input type="text" name="codigo" size="10">
</p>
<br><br>
<input type="reset" value=" Borrar "> <input type="submit" value=" Enviar ">
</form>
2.4.3 Código Comentado del fichero “formulario.html”.
Comentamos brevemente el formulario anterior que en términos de script no tiene relevancia alguna, solo exclusivamente el comportamiento del botón enviar, como
veremos a continuación. Fichero “formulario.html” comentado
<!-- aquí está el comentario dentro del código --> (comentarios en html)
<!-- Definimos primeramente la acción que hara cuando demos al botón enviar en nuestro caso lo
remitimos a la pagina comprobar.php -->
<form action="comprobar.php" method="post">
<!-- Simplemente, como cualquier otro formulario diseñamos el mismo e identificamos los
Campos que contiene y sus tipos -->
<table width="500"><tr><td>
<tr><td><b>Nombre: </b></td><td><input type="text" name="nombre" size="20"
maxlength="30"></td></tr>
<tr><td><b>Email: </b></td><td><input type="text" name="email" size=" 20"
maxlength="100"></td></tr>
<tr><td><b>Comentario : </b></td><td><input type="text" name="comentario" size="20"
maxlength="200"></td></tr>
</table>
<p align="left">
<!-- Aquí insertamos la imagen generada a través de la llamada al script captcha.php -->
<b>*Código de confirmación (las letras en rojo):</b> <img src="captcha.php" />
<!-- Finalmente configuramos el campo del formulario que recogerá el código introducido por el
usuario y al que hemos denominado como “código”-->
<input type="text" name="codigo" size="10">
</p>
<br><br>
<!-- establecemos los valores por defecto de los botones -->
<input type="reset" value=" Borrar "> <input type="submit" value=" Enviar " >
© Jose Ignacio González Gómez
21
</form>
Destacar del código anterior dos aspectos de especial relevancia:
La primera línea del script anterior (<form action="comprobar.php"
method="post">) define la acción que se ejecutara cuando demos al botón enviar del formulario, en este caso, le indicamos que abra el script “comprobar.php”
para verificar los valores de la sesión (del captcha) con los introducidos por el usuario.
El campo donde el usuario introduce el código mostrado en el captcha es un
campo texto que hemos identificado como “código” ( ver línea : <input type="text" name="codigo" size="10">) y que será el que comparemos con el
valor guardado en la sesión anterior cuando se genera el captcha automáticamente y que lo hemos definido como key.
2.4.4 Resultado del formulario.
El resultado de lo anterior es el siguiente formulario.
Ilustración 36
2.5 El fichero de comprobación de clave. “comprobar.php”
2.5.1 Comentario
En este apartado vamos a analizar qué es lo que hace el script comprobar.php y cómo podemos intuir es comprobar que el valor introducido en el campo código del
formulario ( ver Ilustración 36) coincide con el valor de la sesión generada en el script “captcha.php”, es decir cuando se genero la nueva imagen y se guardo como sesión.
Así este script php o fichero tiene como objetivo comparar el texto introducido por el
usuario en el formulario anterior ( <input type="text" name="codigo" size="10">) con el valor de la variable de sesión del captcha ( $_S ESSION ['key'] ) que contiene el texto
generado aleatoriamente y ejecutar las acciones correspondientes para el caso de que sea correcto o no el resultado de la comparación.
Veamos a continuación el código de este script.
2.5.2 Código Comentado del “comprobar.php”
/* aquí está el comentario dentro del código */ (comentarios en php)
<?php
session_start( ); // iniciamos sesión
/*
Encriptamos la clave pasada por el formulario y luego la comparamos con el valor del captcha
(almacenado en la variable de sesión)
*/
© Jose Ignacio González Gómez
22
if( md5($_POST ['codigo'])!= $_SESSION['key']) {
/*
Parte del programa que se ejecuta si el código introducido no es correcto.
*/
echo "Usted no ha escrito el código de verificación correctamente. Por favor, intentelo de nuevo!";
exit();
} else {
/*
Trozo de código que se ejecuta si la confirmación se realiza con éxito.
*/
echo "Usted ha escrito el código correctamente. Bienvenido...";
}
?>
2.6 Fuentes de Información
http://www.sbcodigo.com/ejemplo/php/Seguridad-y-evitar-spam,-Captcha-en-php.php
http://www.dxpro.es/index.php?topic=719.msg1417
http://www.solotuweb.com/fs~id~10399.html
http://www.baluart.net/articu lo/984/tutorial-sistema-captcha-con-php.php
3 Integración del sistema de seguridad captcha al proyecto “Mi libro de Visitas”.
3.1 Objetivo y pasos.
Alcanzado este punto sería conveniente incorporar un sistema captcha a nuestro libro de
visitas expuesto en el apartado 1 Proyecto “Mi Libro de Visitas” con php y Mysql.
Los pasos a seguir serán:
1. Incorporar al formulario de entrada de comentarios el captcha así como crear un
campo texto para introducir la clave por parte del usuario. 2. Modificar el comportamiento del botón enviar del formulario 2_firmar.php para
que antes de enviar los datos a la base de datos compruebe que los valores son correctos.
3. Modificar y adaptar el fichero comprobar.php
3.2 Generando e insertando la imagen captcha en el formulario 2_firmar.php
Para aprovechar el código ya escrito, recuperamos el fichero captcha.php y captcha.png del apartado 2.3 y lo copiamos en la misma carpeta donde hemos desarrollado el proyecto del libro de visitas.
A continuación modificamos el fichero “2_firmar.php” para integrarle el script “captcha.php”.
Para ello basta solo con situarnos en el punto donde queremos colocar el captcha y seleccionamos insertar imagen y la vinculamos al script captcha.php tal y como se muestra en la siguiente ilustración.
© Jose Ignacio González Gómez
23
Ilustración 37
Recordemos también que será necesario crear un nuevo campo para el usuario introduzca la clave aleatoria de la imagen y que en nuestro caso llamaremos como
“meteclave”. Así después de este primer paso nuestro formulario quedará adaptado como muestra la siguiente ilustración.
Ilustración 38
3.3 Modificar el comportamiento del botón enviar del formulario “2-
firmar.php”.
A continuación modificaremos el comportamiento del botón enviar de la Ilustración 38 para que antes de almacenar los valores en la base de datos compruebe que el código del
captcha coincide con valor introducido por el usuario en el campo anteriomente creado “meteclave”.
Para ello nos apoyaremos en el script comprobar.php analizado en el apartado 2.5 y por tanto copiaremos también este fichero en la carpeta de nuestro proyecto con el fin de no volver escribir todo el código.
Ilustración 39
© Jose Ignacio González Gómez
24
Seleccionando todo el formulario, nos permitirá cambiar el comportamiento de la acción
enviar por captcha.php tal y como se muestra en la ilustración anterior.
No obstante será necesario realizar algunas adaptaciones en este fichero para adaptarlo a
nuestro proyecto, cuestión que abordaremos a continuación.
3.4 Modificar y adaptar el fichero comprobar.php
3.4.1 Cuestiones a tener en cuenta
Tal y como hemos visto en el apartado 2.5 con el script comprobar.php lo que realmente sucede es que se compara la clave del captcha (sesión captcha) con el código
introducido por el usuario en el formulario de entrada y por tanto puede suceder dos casos o eventos:
1. Que no sea correcto y por tanto impediremos introducir los valores del
formulario. 2. O que sea correcto y admitiremos esos valores para ser grabados en la base de
datos.
Por tanto en este caso vamos a modificar el citado script “comporbar.php” para recoger los eventos correspondientes a cada caso.
3.4.2 Caso comprobar.php, clave incorrecta.
En este primer caso, vamos a preparar previamente una página a la que redireccionar al
usuario en el caso de que la clave no sea correcta. Es una simple pagina php que hemos llamado “2_clavemal.php” y que tendrá el siguiente aspecto.
Ilustración 40
Esto supone modificar el script comprobar php con la siguiente línea 10 tal y como se muestra en la siguiente ilustración (comparar con el código del apartado 2.5.2)
Ilustración 41
Es decir de esta forma en caso de que los códigos no coincidan nos redireccionara a la citada pagina (2_clavemal.php) advirtiéndonos del error y dándonos la posibilidad de
volver a intentar introducir de nuevo el código (nos volverá a llevar a la página 2_firmar.php), ver el libro de visitos o ir a la página de inicio de nuestra web.
Retomando la Ilustración 40 podemos observar que hemos decidido mostrar el código
requerido en el captcha así como el valor que el usuario introdujo en el campo clavemetida con el fin de que el usuario sepa donde ha estado el error.
© Jose Ignacio González Gómez
25
Para ello, en primer lugar vamos a pasar a través de una variable de sesión global el
valor de la clave del captcha, para ello abrimos el script captcha y creamos esa variable de sesión.
Ilustración 42
Tal y como se muestra en la ilustración anterior creamos una nueva variable de sesión que hemos llamado key2 igual que la key anterior pero sin encriptar para poder mostrar
el valor de la clave de forma legible.
Ahora para mostrar el valor de esta sesión key2 en el script “2_clavemal.php”
simplemente incorporamos el siguiente código mostrado en la Ilustración 44 que nos recupera el valor de la sesión key2 y que se corresponde con la clave no encriptada de la imagen del captcha.
Ilustración 43
Ilustración 44
Nos falta por programar el código introducido por el usuario, para ello debemos tener en
cuenta que los datos del formulario (2_firmar.php) son remitidos a la página comprobar.php por tanto ahí generaremos una variable de sesión global (que llamaremos $_SESSION[„meteclave‟]) que nos guarde el valor del campo “meteclave”
del formulario y de esta forma la tendremos a disposición para su uso e incorporación a lo largo de toda la sesión.
Ilustración 45
Tal y como se muestra en la Ilustración 45, el código subrayado es la modificación que realizaremos sobre el fichero comprobar.php, por tanto solo nos falta añadirlo a la
Ilustración 44, tal y como se muestra en la siguiente ilustración.
Ilustración 46
© Jose Ignacio González Gómez
26
Así tendríamos:
Ilustración 47
Introduciendo los valores anteriores en el formulario (2_firmar.php) vemos que el valor de la imagen captcha no coincide con el valor del campo “meteclave” y por tanto al dar al botón enviar nos remitirá al script “comprobar.php que nos remitirá a la pagina
2_clavemal.php mostrándonos el resultado de la Ilustración 48.
Ilustración 48
3.4.1 Caso comprobar.php, clave correcta.
En el caso de que la clave sea correcta, recordemos que se ejecutará el script comprobar.php y nos ejecutara la siguiente sentencia resaltada y expuesta en la
Ilustración 49 y que se muestra en el navegador (ver Ilustración 50).
Ilustración 49
© Jose Ignacio González Gómez
27
Ilustración 50
Pero nuestra intención es que si todo es correcto, deseamos que los valores captados del
formulario 2_firmar.php se almacenen en la base de datos y nos remita a una página de agradecimiento.
Por tanto es necesario modificar sensiblemente el código del script comprobar.php para el caso de que la clave sea correcta, es decir realizaremos las modificaciones en dos pasos:
1) Debemos almacenar los campos en la base de datos 2) Redireccionaremos al usuario a una página de agradecimiento, para lo cual
crearemos la misma.
Para almacenar los valores del formulario en la base de datos vamos analizar el código correspondiente al formulario 2_firmar.php y expuesto en el apartado 1.3.4 relacionado
con el proceso de almacenamiento en la base de datos.
Para ello vamos a recuperar el script “2_firmar.php” original y situados sobre el
comportamiento del servidor “Insertar Registro” nos señalara el código correspondiente a esa acción tal y como se muestra en la Ilustración 51.
Ilustración 51
Debemos tener en cuenta que la propiedad acción es la que se muestra en la siguiente ilustración.
Ilustración 52
© Jose Ignacio González Gómez
28
Ilustración 53
Si por cualquier causa la tenemos asociada
al script “comprobar.php” como se muestra en la Ilustración 54, esto supone que la
opción comportamiento del servidor “Insertar Registro” aparecerá con una exclamación en rojo (Ilustración 53)
advirtiendo que hay algún problema.
Evidentemente porque hemos quitado la opción de que al darle al botón de enviar del formulario no se ejecute el código de insertar registros sino que vaya al script
comprobar. En este caso podemos anular la vinculación con el script “comprobar php” y volver a diseñar el comportamiento del servidor “Insertar Registro” con lo cual volvemos a obtener los datos correspondientes a la Ilustración 51.
Posteriormente para volver a añadir el comportamiento del servidor a su estado basta cambiar por el script “comprobar.php” como vimos en el apartado 3.3.
Ilustración 54
Fijémonos en lo que hace el código “Insertar Registros” de comportamiento del servidor, poniéndonos encima de el, veremos que nos señala el código y ese es el código
que tenemos que copiar o colocar sustituyendo al resaltado en la Ilustración 49 correspondiente al script “comprobar.php” que evidentemente en caso afirmativo le
estamos indicando que nos inserte los registros correspondientes en la base de datos.
Pero además debemos copiar el primer código para conectar con la base de datos en el script “comprobar.php” que lo que hace es conectar con la base de datos.
Ilustración 55
En concreto:
Ilustración 56
Así las primeras líneas del script “comprobar.php” quedarían así:
© Jose Ignacio González Gómez
29
Ilustración 57
Finalmente generamos una página simple html a la que redireccionamos al usuario en el caso de que todo sea correcto.
Ilustración 58
Para lo cual hemos insertado la siguiente línea de código en el script “comprobar.php”:
La primera línea subrayada remite al usuario, en el caso de que el código sea correcto y los datos se hayan almacenado, a la pagina de agradecimiento de la Ilustración 58.
El script “comprobar.php” termina, tanto si el código es correcto como no, destruyendo la sesión abierta.
4 Notas finales.
Seguramente en estas explicaciones tendré mas de un error, pido disculpas anticipadas.
Recommended