32

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 hacer uso del sistema de
autenticacin.
5. Valida el funcionamiento del sistema Web.

33

2.1. PRINCIPIOS DE AUTENTICACIN
El objetivo de la autenticacin es demostrar que alguien es
quin dice ser. Existen muchas formas de suministrar
autenticacin pero como en el caso de muchas medidas de
seguridad, cuantos ms seguros son los mtodos ms
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.

34


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

35

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.

36

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

Esperar mientras XAMPP descomprime e instala todos
los componentes.



37

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.




38

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


39

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.

40

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.


41

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.

42

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

43

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.


44

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.

45

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.


46



Para comprobar la configuracin del servidor de prueba,
nos ubicamos dentro del Servidor Local y la carpeta
web_ejemplo. Dentro del cual creamos el archivo
(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.


47

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.







48

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.


49



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.




50

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 cuenta las
siguientes consideraciones:

Campo Tipo Longitud Accin Extra
id TINYINT 4

AUTO_INCREMENT
nombre TEXT
apellidos TEXT
login VARCHAR 20
Password VARCHAR 20
email TEXT





51

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

52



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



53

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

54


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>";

55

}
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, $password_Conexion1) or
trigger_error(mysql_error(),E_USER_ERROR);
?>

56




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.