estimados amigos y compañeros, antes de nada quisiéramos ... informatica/1php...

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”

http://www.ecofin.ull.es/users/jggomez

© 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.


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.


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.


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).


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.


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")) {


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.


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.


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.


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:


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


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


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.


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


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


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.

http://www.sbcodigo.com/ejemplo/php/Seguridad-y-evitar-spam,-Captcha-en-php.php#captcha

http://www.sbcodigo.com/ejemplo/php/Seguridad-y-evitar-spam,-Captcha-en-php.php#login

http://www.sbcodigo.com/ejemplo/php/Seguridad-y-evitar-spam,-Captcha-en-php.php#comprobar


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.

*/


/*

Devolvemos la imagen para mostrarla en el formulario.


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:


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”

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"


<tr><td><b>Comentario : </b></td><td><input type="text" name="comentario" size="20"


</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

 (comentarios en 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"


<tr><td><b>Email: </b></td><td><input type="text" name="email" size=" 20"


<tr><td><b>Comentario : </b></td><td><input type="text" name="comentario" size="20"


</table>

<p align="left">



<b>*Código de confirmación (las letras en rojo):</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 " >


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)

*/


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.

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/articulo/984/tutorial-sistema-captcha-con-php.php


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


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.


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


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


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


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í:


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.

estimados amigos y compañeros, antes de nada quisiéramos ... informatica/1php...

Documents