UNIDAD ACADMICA N 02:

SISTEMA DE AUTENTICACIN DE USUARIOS

La web de un medio relativamente annimo, pero a menudo resulta til saber quin est visitando nuestro sitio. Con frecuencia, la gente comparte un equipo y muchos usuarios utilizan varios equipos para navegar. Por lo tanto, no quedar remedio que preguntar al visitante quien es. Adems de solicitarle que se identifique, tendr que pedirle alguna prueba que confirme que es quin dice ser. El mtodo habitual de autenticacin utilizado en los sitios Web consiste en pedir a los usuarios que introduzca un nombre y una contrasea. El proceso de autenticacin se suele utilizar para conceder o rechazar el acceso a pginas o recursos concretos, per puede resultar adecuado o til para otros fines como la personalizacin.

Al finalizar el estudio de la presente unidad temtica el estudiante: 1. Concepta el trmino de Autenticacin. 2. Configura el sitio dinmico para desarrollar pginas dinmicas PHP. 3. Implementa una base de datos con una tabla en MySQL 4. Desarrolla la interfaz para autenticacin. 5. Valida el funcionamiento del sistema Web.
32

hacer uso

del

sistema de

2.1. PRINCIPIOS DE AUTENTICACIN El objetivo de la autenticacin es demostrar que alguien es quin dice ser. Existen muchas formas son los de suministrar ms autenticacin pero como en el caso de muchas medidas de seguridad, cuantos ms seguros mtodos problemticos resultan de utilizar. Las tcnicas de autenticacin incluyen el uso de contraseas, firmas digitales, medidas biomtricas mediante escneres de huellas y medidas que implican el uso de dispositivos de entrada especiales, lo que limitara el acceso a aquellos usuarios autorizados con ordenadores equipados. Esta opcin podra resultar aceptable o incluso deseable para obtener acceso a los sistemas internos de una organizacin, pero reduce gran parte de las ventajas de permitir el acceso al sistema en la web. Las contraseas resultan fciles de implementar, sencillas de utilizar y no requieren el uso de dispositivos de entrada especiales. Suministran un determinado nivel de autenticacin pero es posible que resulten insuficientes para sistemas de alta seguridad. El concepto de una contrasea es sencillo. El usuario y el sistema conocen la contrasea. Si otro visitante afirma ser un usuario y conoce la contrasea, el sistema lo aceptar. Este sistema resulta seguro siempre y cuando nadie ms sepa o pueda adivinar la contrasea. A pesar de sus defectos potenciales, las contraseas son una forma sencilla y relativamente efectiva de autenticar usuarios. Puede que el nivel de anonimato no resulte adecuado para la seguridad nacional, pero son una solucin perfecta para comprobar el estado del pedido de un cliente.

33

La mayor parte de los navegadores y servidores Web incorporan mecanismos de autenticacin. Los servidores Web se pueden configurar para solicitar un nombre de usuario y contrasea para permitir el acceso a los archivos de determinados directorios del servidor. Tanto Apache como el servidor IIS de Microsoft permiten proteger de manera sencilla una parte del sitio o el sitio en su totalidad de esta forma. PHP y MySQL incorporan muchas formas de lograr el mismo objetivo. MySQL resulta ms rpido que la autenticacin integra. PHP suministra una autenticacin ms flexible o presenta la solicitud de forma ms atractiva. 2.2. IMPLEMENTACIN DEL SISTEMA DE AUTENTICACIN Las herramientas que vamos a utilizar son: - Xampp Server - Dreamweaver 8.0 o superior - Mozilla Firefox o Internet Explorer o cualquier otro navegador 2.2.1. INSTALACIN DEL SERVIDOR WEB Como la mayora de nosotros estamos familiarizados, no solo con un sistema operativo utilizaremos el
34

XAMPP, que es un instalador que automatiza el proceso de poner en marcha un servidor con Apache, PHP, Perl, MySQL y phpMyAdmin. XAMPP ofrece versiones del instalador para sistemas GNU/Linux, Solaris, Windows y Mac OS X, as que no hay problemas con el sistema operativo.

Sistema operativo Apache, servidor Web MySQL, sistema gestor de bases de datos Perl, PHP o Python, lenguajes de programacin/scripts.

Para contar con dicho instalador lo descargaremos de la siguiente direccin Web: http://www.apachefriends.org/en/xampp.html Eligindose el mirror ms cercano a su localizacin (los mirror europeos suelen ir bastante rpidos, teniendo en cuenta que se va a descargar 32 megas). Ejecutar el archivo que se ha descargado en la computadora, donde en primer lugar, el XAMPP nos pedir que indiquemos el lenguaje de instalacin. Para nuestro caso seleccionamos Ingles y pulsamos Ok.

En la ventana de Bienvenida, pulsar Siguiente para continuar la instalacin.

35

 Luego nos pedir elegir el lugar de instalacin y dejamos tal como esta: C:\xampp

Esperar mientras XAMPP descomprime e instala todos los componentes.

36

 Una vez terminado el proceso, una ventana DOS nos indicar el xito definitivo de la instalacin.

Terminada la instalacin,

XAMPP nos preguntar si

se desea instalar los servidores Web(Apache), de Base de Datos (MySQL) y el Panel de Control como servicio de Windows. La respuesta deber ser afirmativa. De esta forma, el servidor estar siempre operativo, aunque los usuarios no inicien sesin.

37

 Una vez terminado el proceso, XAMPP preguntar si se desea poner en marcha el Panel de Control de XAMPP.

El panel de control le indicar qu servicios estn funcionando, y le ofrecer la posibilidad de detenerlos o activarlos.

Finalmente,

para

verificar

si

se

ha

instalado

correctamente las herramientas XAMMPP, debemos seguir los siguientes pasos: Ejecutar el programa navegador Internet Explorer. En la barra de direcciones escribir http://localhost

38

Localhost, significa servidor local, y es un trmino que utilizan los mismos sistemas operativos, para ejecutar pginas dinmicas dentro del mismo computador. Tendremos la siguiente ventana de Inicio.

Y al dar clic en el idioma Espaol tendremos la ventana de bienvenida.

Para la comunicacin con los respectivos servidores, su utiliza diferentes puertos de comunicacin. Los mismos que pueden ser visualizados al dar clic sobre el botn de Status del Panel de Control. As tenemos: Para el servidor web (Apache) se utiliza de forma predeterminada el puerto 8080.
39

Para el servidor de base de datos (MySQL) se utiliza de forma predeterminada el puerto 3306. Para la comunicacin FTP con el servidor web se utiliza de forma predeterminada el puerto 21.

2.2.2. CONFIGURACIN DEL SITIO DINMICO Para configurar un Sitio Web y desarrollas aplicaciones para el presente curso utilizaremos la Herramienta Tecnolgica Macromedia Dreamweaver CS4.

40

Un sitio Web es un conjunto de documentos y activos vinculados con atributos compartidos, como temas relacionados, un diseo similar o un objetivo comn. Dreamweaver es una herramienta de creacin y administracin de sitios, por lo que puede utilizarlo para crear documentos individuales y sitios Web completos. En Dreamweaver, el trmino sitio se emplea para referirse a una ubicacin de almacenamiento local o remota de los documentos que pertenecen a un sitio Web. Un sitio de Dreamweaver permite organizar y administrar todos los documentos Web, cargar el sitio en un servidor Web, controlar y mantener vnculos y administrar y compartir archivos. Un sitio de Dreamweaver consta de un mximo de tres partes o carpetas, segn el entorno de desarrollo y el tipo de sitio Web que se desarrolle: Carpeta raz local Almacena los archivos con los que est trabajando. Dreamweaver se refiere a esta carpeta como el sitio local. Esta carpeta puede encontrarse en el equipo local o en un servidor de red. Si trabaja directamente en el servidor, Dreamweaver cargar los archivos en el servidor cada vez que los guarde. Carpeta remota Almacena los archivos para pruebas, produccin, colaboracin, etc. Dreamweaver se refiere a esta carpeta como el sitio remoto en el panel Archivos. En general, la carpeta remota suele colocarse en el equipo donde se ejecuta el servidor Web.
41

Las carpetas de datos locales y remotos permiten transferir archivos entre el disco duro local y el servidor Web, lo cual facilita la administracin de los archivos en los sitios de Dreamweaver. Carpeta de servidor de prueba La carpeta en la que Dreamweaver procesa pginas dinmicas. En un sitio esttico, cuando elegimos Vista Previa en el Navegador (F12), Dreamweaver inicia el navegador y le pasa la direccin local de la pgina actual: D:\WEB_SITE_EJEMPLO\index.html Esto conecta con el navegador a travs del sistema de archivos de la computadora. Sin embargo, en un sitio dinmico no basta con ver las pginas en un navegador. Dreamweaver tiene que activar el Servidor Web, pasndole una solicitud http para que procese los archivos. Esto requiere una direccin como alguna de las siguientes: http://localhost/misitio/index.php http://localhost:8080/misitio/index.php http://127.0.0.1.8500/misitio/index.php http://www.midominio.com/index.php Esto conecta el servidor Web con el navegador para que las pginas se sirvan en lugar de abrirse a travs del sistema de archivos. Por lo tanto el Servidor de Prueba es en esencia un sitio remoto temporal. Ya que funciona casi de la misma

42

forma que si la pgina estuviera en el Servidor de Hosting. Para configurar un sitio de Datos Locales se ejecuta: Menu Sitio / Nuevo Sitio.

Elegimos el botn nuevo para configurar el nuevo sitio web.

43

En la cual seleccionamos la ficha avanzadas y en la categora de Datos Locales personalizamos las siguientes caractersticas: Nombre del sitio: El nombre que aparece en el panel Archivos y en el cuadro de dilogo Administrar sitios; no aparece en el navegador. Ejemplo: SITIO EJEMPLO Carpeta raz local: El nombre de la carpeta del disco local en la que se almacenan los archivos del sitio, las plantillas y los elementos de biblioteca. Si se utiliza el servidor web IIS, la carpeta raz local debe ser una subcarpeta de la carpeta c:\Inetpub\wwwroot\ Si se utiliza el servidor web APACHE de XAMPP, la carpeta raz local debe ser una subcarpeta de la carpeta C:\xampp\htdocs Ejemplo: C:\xampp\htdocs\sitio_ejemplo Carpeta predeterminada de imgenes: La ruta de la carpeta en la que se almacenan las imgenes que utiliza en el sitio. Ejemplo: C:\xampp\htdocs\sitio_ejemplo\imagenes Vnculos relativos a: De manera predeterminada, Dreamweaver crea vnculos mediante rutas relativas a documentos. Seleccione la opcin Raz del sitio para cambiar la configuracin de ruta y asegrese de que especifica la direccin HTTP en la opcin Direccin HTTP. Direccin HTTP: El URL que utilizar el sitio Web. Dreamweaver tambin utiliza esta direccin para asegurarse de que los vnculos relativos a la raz del sitio funcionan en el servidor remoto.
44

Ejemplo: http://localhost/web_ejemplo Activar cach: Indica si debe crearse un cach local para mejorar la velocidad de las tareas de administracin de vnculos y sitios. Por lo tanto el Sitio de Datos Locales tendr la siguiente presentacin:

Para configurar el Servidor de Prueba se elije la categora Servidor de Prueba. En el cual se define el tipo de motor de pginas dinmicas a utilizar. Para el caso de pginas dinmicas PHP, quedar personalizado de la siguiente manera.

45

Para comprobar la configuracin del servidor de prueba, nos ubicamos dentro del Servidor Local y la carpeta web_ejemplo. (info.php) Abrimos dicha pgina y elegimos la opcin Mostrar Vista de Cdigo Posicionar el puntero del Mouse al final de <body> y dar enter para escribir el cdigo <?php phpinfo( ) ?> Como se muestra en la figura. Dentro del cual creamos el archivo

46

Luego guardamos la pgina (CTRL + S) y lo publicamos (F12). El resultado ser una pgina Web con una gran cantidad de informacin sobre el estado actual de PHP. Esto incluye informacin sobre las opciones de compilacin de PHP y sus extensiones, la versin del PHP, informacin del servidor y el entorno PHP, informacin de la versin del SO, rutas, valores de configuracin maestros y locales, cabeceras HTTP y la licencia de PHP. Como se muestra en el siguiente grfico.

47

2.2.3. CREANDO LA TABLA EN MYSQL Bien, necesitamos una tabla con los datos de nuestros usuarios, as que la vamos a crear la Base de Datos seguridad. Al instalar XAMPP, se cuenta con la herramienta phpMyAdmin, mismo que permite administrar las bases de datos del MySQL. Al ejecutar tendremos la siguiente ventana.

Para crear una Base de Datos se asigna el nombre en la caja de texto respectiva. Ejemplo: seguridad Al dar clic en el botn crear, phpMyAdmin nos mostrar las sentencias SQL utilizadas para crear dicha BD.

48

Para crear una tabla perteneciente a la Base de datos, dar clic en el enlace de la Base de datos que se encuentra en la columna izquierda.

49

Se escribe el nombre de la tabla (usuario) y se indica el nmero de campos para la misma. Al dar clic en el botn continuar podremos registrar los campos, los tipos de datos y sus respectivos tamaos. Para nuestro caso se debe tener en siguientes consideraciones: Campo id nombre apellidos login Tipo TINYINT TEXT TEXT VARCHAR 20 20 Longitud Accin 4 Extra AUTO_INCREMENT cuenta las

Password VARCHAR email TEXT

50

Al dar clic en el botn crear phpMyAdmin nos indicar que se cre satisfactoriamente la Tabla usuario.

Otra forma de crear tablas es mediante el uso de cdigos SQl generados a partir de los programas de modelamiento de Bases de Datos. Para lo cual dar clic en el botn . Y dentro de

la caja Ejecutar la(s) consulta(s) SQL en la base de datos. Pegar el respectivo cdigo SQL, para nuestro caso es: CREATE table usuarios ( id TINYINT(4) AUTO_INCREMENT, nombre TEXT, apellidos TEXT, login VARCHAR(40), password VARCHAR(20), email TEXT, UNIQUE (id) );
51

Luego dar clic en el botn Continuar y tendremos creada la Tabla usuarios.

52

Ahora para registrar datos en la tabla se utilizar el botn Para lo cual slo se debe registrar los datos en la comuna Valor. Recordando adems que el ID es autonumrico, por lo tanto no requiere un valor.

2.2.4. FORMULARIO DE CONTROL DE ACCESO Para la elaboracin de dicho formulario, se ha creado el archivo ingreso.php

Considerando los nombres para las cajas de texto: Para usuario: user Para Contrasea: password
53

Los cuales intervienen en el siguiente cdigo de la presente pgina:

</head> <?php $user=$_POST["user"]; $pwr=$_POST["password"]; //Verificar que las cajas de textos sean rellenadas if(empty($user) || empty($pwr)) { ?> <body> . </form> <div align="center"> <?php } else { //Se ejecuta la conexion a BD require_once('conexion_bd.php'); //Cadena de consulta a BD $query="SELECT * FROM usuarios WHERE login='$user'"; //Ejecucion de la consulta BD $result=mysql_db_query($database_Conexion1,$query); //Identifica el nmero de indice encontrado $array=mysql_fetch_array($result); // Se compara las variables con los datos encontrados if ($user==$array['login'] && $pwr==$array['password']) { echo "<h1>CONTRASEA CORRECTA</h1><br>"; echo "<h2>Su nombre es: ".$array['nombre']."<br> </h2>"; echo "<h2>Sus Apellidos son: ".$array['apellidos']."<br></h2>";

54

} else { echo "<h1>CONTRASEA INCORRECTA</h1>"; } mysql_close($Conexion1); } ?> </div> </body>

Al

ejecutar

dicho

cdigo

se

ejecuta

la

pgina

conexin_bd.php, mediante require_once('conexion_bd.php'). La Pgina conexin_bd.php; slo contiene el

siguiente cdigo: <?php $hostname_Conexion1 = "localhost"; $database_Conexion1 = "seguridad"; $username_Conexion1 = "root"; $password_Conexion1 = ""; $Conexion1 = mysql_pconnect($hostname_Conexion1, $username_Conexion1, ?>
55

$password_Conexion1)

or

trigger_error(mysql_error(),E_USER_ERROR);

SISTEMA DE AUTENTICACIN DE USUARIOS UNIDAD ACADMICA N 2 NOMBRE:______________________________________________ APELLIDOS:__________________________FECHA; ___/___/____ CIUDAD:__________________________SEMESTRE:___________ 1. Cul es la diferencia entre Autenticacin y Autentificacin. 2. Cules son las amenazas a las que se expone el comercio electrnico? 3. Implemente la pgina modificar_datos.php 4. Implemente un sistema de encriptacin para las contraseas del registro de usuarios, del sistema de autenticacin. 5. Basado en el modelo desarrollado, implemente el modulo de autenticacin de usuarios, utilizando la Tecnologa ASP.

56