
La Autenticación consiste en verificar la identidad del usuario que esta entrando a una aplicación, con el fin de personalizar el ambiente a su gusto, habilitarle o deshabilitarle recursos u opciones, guardar historial, etc.
En este ejemplo vamos a explicar una manera simple pero bastante segura de autenticar usuarios en una pagina web con PHP, utilizando conceptos como sesiones, funciones hash, método post, etc.
Para empezar debemos entender como funcionará el mecanismo de autenticación, lo dividiremos en dos etapas, registro y autenticación, siendo el "registro" la primera vez que el usuario entra al sistema y crea una cuenta de usuario proporcionando un nombre de usuario y una clave, la etapa de "autenticacion" es cuando en futuras ocaciones el usuario desee ingresar en su cuenta creada en la etapa de registro y deba autenticarse para poder entrar.
Pasos para el Registro del usuario:
- Los usuarios deberan llenar un formulario con nombre de usuario y clave para registrarse en el sistema.
- Aplicaremos en la maquina del cliente el algoritmo Sha-1 para transformar la clave en un hash que no pueda ser descifrado por ningun intruso (debemos recordar que los algorimos hash son unidireccionales, es decir, nisiquiera el usuario o nosotros podremos saber cual era la verdadera clave del usuario).
- Enviamos la clave y nombre de usuario al servidor para almacenarla en la base de datos.
Pasos para la autenticacion del usuario:
- El usuario quiere ingresar a su cuenta de usuario y llena el formulario de autenticacion con usuario y clave.
- Aplicaremos en la maquina del cliente el algoritmo Sha-1 para transformar la clave en un hash que no pueda ser descifrado por ningun intruso.
- Enviamos el usuario y la clave al servidor.
- Buscamos el hash almacenado en la base de datos en el momento del registro de ese usuario y lo comparamos con el hash que acabamos de recibir.
- Si los hash son iguales entonces iniciamos una sesion para ese usuario.
Antes del tutorial, les quiero dejar los videos del ejemplo que vamos a realizar, para los que les queden dudas:
Parte 1
Parte 2
Para empezar el ejemplo lo primero que vamos a hacer es crear una base de datos llamada "usuariosDB" donde vamos a crear la tabla "usuario" con las columnas "usuario", "clave" y un "id" que identificara internamente ese usuario en la BD.
Código de creacion de la tabla usuario--
-- Estructura de tabla para la tabla `usuario`
--
CREATE TABLE `usuario` (
`id` bigint(20) NOT NULL auto_increment,
`usuario` varchar(15) NOT NULL,
`clave` varchar(205) NOT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `usuario` (`usuario`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
Ahora procedemos a crear una página "registro.php" donde el usuario deberá introducir el nombre de usuario y contraseña que desea utilizar de ahora en adelante:
Código registro.phpPara enviar la clave introducida por el usuario primero llamamos a la funcion javascript "ec()" creada en la cabecera que se encarga de verificar que las dos claves introducidas sean iguales y ademas se encarga de aplicar la funcion str_sha1() (que se encuentra en el archivo "sha1.js" que importamos en la cabecera de la página) para transformar la clave introducida en un codigo Hash que sea casi imposible de descrifrar para cualquier persona (incluso nosotros).<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login - Ejemplo de autentiacion</title>
<style type="text/css">
<!--
.style1 {
font-size: 36px;
font-weight: bold;
}
-->
</style>
<script type="text/javascript" language="JavaScript1.2" src="sha1.js"></script>
<script language="JavaScript">
function ec()
{if(document.getElementById('clave').value == document.getElementById('clave2').value)
{
document.getElementById('clave').value = str_sha1(document.getElementById('clave').value);
document.getElementById('clave2').value = "";
return true;
}
else
{
alert('Las claves no coinciden');
return false;
}
}
</script>
</head><body>
<table width="74%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><p> </p>
<p class="style1">Registro de usuario con Hash Sha-1</p>
<p>La clave que el usuario introduzca en el el campo "clave" del formulario será transformada con el algoritmo Sha-1 y luego será enviada al servidor.</p></td>
</tr>
<tr>
<td height="277" align="center" valign="top"><p align="left"><br />
</p>
<p align="center"></p>
<form id="form1" name="form1" method="post" action="registrado.php">
<p><strong>Introduce tu usuario y clave que desees</strong></p>
<p>Usuario:
<input type="text" name="usuario" id="usuario" />
</p>
<p>Clave:
<input type="password" name="clave" id="clave" />
</p>
<p>Repite la clave:
<input type="password" name="clave2" id="clave2" />
</p>
<p>si ya tienes cuenta haz <a href="login.php">click aqui</a></p>
<p>
<input name="button" type="submit" id="button" onclick="return ec();" value="Registrarme"/>
</p>
</form> <p align="center"> </p></td>
</tr>
<tr>
<td height="19" align="center" valign="bottom">Alejandro Sánchez - http://internetdeveloping.blogspot.com/</td>
</tr>
</table>
</body>
</html>
Los datos del fomulario son enviados a la pagina "registrado.php" el código de esta página es el siguiente:
Código registrado.phpEn esta página nos encargamos de almacenar en la base de datos el nuevo usuario con el hash de su clave. Ahora que ya tenemos un usuario registrado debemos proceder a la segunda fase, y crear las paginas necesarias para que el usuario se autentique en futuras ocaciones y pueda ingresar a las secciones privadas de su cuenta.<?php
require('conexion.php');
if(isset($_POST['usuario']) && isset($_POST['clave']))
{$usuario = $_POST['usuario'];
$sha1_clave = $_POST['clave'];mysql_query("insert into usuario values('','".$usuario."','".$sha1_clave."')");
}
else
{$usuario = "error";
$sha1_clave = "error";}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login - Ejemplo de autentiacion</title>
<style type="text/css">
<!--
.style1 { font-size: 36px;
font-weight: bold;
}
-->
</style>
</head><body>
<table width="74%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><p> </p>
<p class="style1">Usuario registrado</p></td>
</tr>
<tr>
<td height="277" align="center" valign="top"><p align="left"><br />
</p>
<p align="left"></p>
<form id="form1" name="form1" method="post" action="">
<p><strong>El usuario ha sido correctamente registrado.</strong></p>
</form>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="30%"><div align="right">Nombre de usuario:</div></td>
<td width="70%"><div align="center"><?php echo $usuario ?></div></td>
</tr>
<tr>
<td><div align="right">Clave:</div></td>
<td><div align="center"><?php echo $sha1_clave ?></div></td>
</tr>
</table>
<p align="center">Para acceder a tu cuenta haz <a href="login.php">click aqui</a></p></td>
</tr>
<tr>
<td height="19" align="center" valign="bottom">Alejandro Sánchez - http://internetdeveloping.blogspot.com/</td>
</tr>
</table>
</body>
</html>
Código login.phpEn esta página recogemos el nombre de usuario y contraseña escritos por el usuario y aplicamos laf uncion str_sha1() a la clave del usuario para enviarla a la página autenticacion.php, el código de esta últimap página es el siguiente:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login - Ejemplo de autentiacion</title>
<style type="text/css">
<!--
.style1 {
font-size: 36px;
font-weight: bold;
}
-->
</style>
<script type="text/javascript" language="JavaScript1.2" src="sha1.js"></script>
<script language="JavaScript">
function ec()
{
document.getElementById('clave').value = str_sha1(document.getElementById('clave').value);
}
</script>
</head><body>
<table width="74%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><p> </p>
<p class="style1">Autenticacion con Hash Sha-1</p>
<p>La clave que el usuario introduzca en el el campo "clave" del formulario será transformada con el algoritmo Sha-1 y luego será enviada al servidor.</p></td>
</tr>
<tr>
<td height="277" align="center" valign="top"><p align="left"><br />
</p>
<p align="center"></p>
<form id="form1" name="form1" method="post" action="autenticacion.php" onsubmit="ec()">
<p><strong>Introduce los datos de tu cuenta</strong></p>
<p>Usuario:
<input type="text" name="usuario" id="usuario" />
</p>
<p>Clave:
<input type="password" name="clave" id="clave" />
</p>
<p>si no tienes cuenta haz <a href="registro.php">click aqui</a></p>
<p>
<input type="submit" name="button" id="button" value="Enviar" />
</p>
</form> <p align="center"> </p></td>
</tr>
<tr>
<td height="19" align="center" valign="bottom">Alejandro Sánchez - http://internetdeveloping.blogspot.com/</td>
</tr>
</table>
</body>
</html>
Código autenticacion.phpEn esta página recibimos el nombre de usuario y el hash de la clave introducida por el usuario en el momento de realizar su autenticacion, debemos ahora verificar que el nombre de usuario existe, y, si realmente existe, entonces debemos verificar si el usuario existente tiene la misma clave que la proporcionada.<?php
require('conexion.php');
//Inicio la sesión
session_start();///////////////////////////////////////////////////////////////////////////////////////////
//Si esta entrando en una seccion que no le corresponde
$_SESSION["usuario"]="anonimo";
$_SESSION["valido"]=0;if (isset($_POST['clave']) && isset($_POST['usuario']))
{
//evito que haya colocado mas de una palabra en el login (para evitar sql injection)
$usu = split(" ",trim($_POST['usuario']));echo $usu[0];
//Guardo la identidad del cliente que desea autenticarse
$_SESSION["usuario"]= $usu[0];
$result = mysql_query("select clave from usuario where usuario='".$_SESSION["usuario"]."'");
//Si encontre el usuario en la bd
if(mysql_num_rows($result)==1)
{
$row = mysql_fetch_row($result);
//Si los hash de la clave coinciden
if($_POST['clave']==$row[0])
$_SESSION["valido"]=1;
echo $row[0] , ' = ' . $_POST['clave'];
}
}
//si no existe, envio a la página de autentificacion
header("Location: miCuenta.php");
//ademas salgo de este script
exit();
?>
Si las claves coinciden entonces creamos una variable de sesion llamada $_SESSION["valido"] y la igualamos a 1 para decir que es un usuario valido, de no existir un usuario con ese nombre o de no coincidir la clave de la bd con la clave proporcionada por el usuario, entonces asignamos el valor de 0 a la variable $_SESSION["valido"].
Esta variable de sesion será la llave para establecer los permisos, si el usuario desea entrar a una página privada, pero la variable $_SESSION["valido"] no existe o es diferente de 1, entonces no podrá acceder a esa página, de lo contrario todo ocurrirá normalmente.
Para lograr esa funcionalidad debemos crear un archivo llamado sesion.php donde vamos a verificar que esa variable este igual a 1, de lo contrario la pagina te redireccionará a la pagina ya creada login.php. La pagina sesion.php deberá ser incluida al principio de cada página que queramos catalogar como "privada". El codigo de sesion.php es el siguiente:
Código sesion.php<?php
//Inicio la sesión
session_start();//Verifico si es un usuario autenticado
if ($_SESSION["valido"]!=1)
{//quiere decir que tiene prohibida la entrada a cualquier lugar privado//si no existe, envio a la página de autentificacion
header("Location: login.php");
//ademas salgo de este script
exit();
}
?>
Por ultimo creamos la página privada "miCuenta.php" y la pagina "cerrar_sesion.php". La primera de ellas contendrá una llamada a la pagina sesion.php para garantizar su privacidad. mientras que la otra permitira cerrar la sesion autentificada y volver a iniciar el ciclo de autenticación.
Código micuenta.php<?php
//Incluyo el archivo de sesion para impedir el acceso no autorizado a esta página.
require('sesion.php');?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login - Ejemplo de autentiacion</title>
<style type="text/css">
<!--
.style1 { font-size: 36px;
font-weight: bold;
}
-->
</style>
</head><body>
<table width="74%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><p> </p>
<p class="style1">Autenticacion Básica</p></td>
</tr>
<tr>
<td height="277" align="center" valign="top"><p align="left"><br />
</p>
<p align="left"></p>
<form id="form1" name="form1" method="post" action="">
<p><strong>Si ves esta pagina, tu sesion ha sido validada y puedes navegar por la zona privada.</strong></p>
<p>haz <a href="cerrar_sesion.php">click aqui</a> para cerrar tu sesion</p>
</form>
<p align="center"> </p></td>
</tr>
<tr>
<td height="19" align="center" valign="bottom">Alejandro Sánchez - http://internetdeveloping.blogspot.com/</td>
</tr>
</table>
</body>
</html>
Código cerrar_sesion.phpCualquier comentario o duda no dudes en escribirlo abajo o enviarme un mail a aalejo+blog@gmail.com.<?php
session_start();
session_destroy();//si no existe, envio a la página de autentificacion
header("Location: miCuenta.php");
//ademas salgo de este script
exit();?>
Continuar leyendo...











