Autenticacion de usuarios en PHP y MySql

Hola, mi cuenta de gmail ha sido vulnerada, por lo que las imágenes no se ven, pero esta entrada ya la he replicado en http://www.notas-programacion.com/2014/10/autenticacion-de-usuarios-en-php-y-mysql/, el contenido de este blog se estará migrando progresivamente allá, disculpa las molestias.

Como he visto que es muy solicitado el codigo que publique sobre como autenticar usuarios en java y MySql, decidi publicar esta nueva entrada que esta muy relacionada con dicho tema, pero ahora en PHP y un poquito mas completo; encriptacion del password en MD5.

Como decía anteriormente, en algunos sistemas a veces un requerimiento es que se manejen privilegios y por lo tanto usuarios, esto con el fin de controlar lo que cada usuario puede hacer/ver una vez dentro del sistema. En esta entrada únicamente se muestra como autenticar a los usuarios para entrar al sistema, es decir, cada usuario tendrá los mismos privilegios; aunque la tabla de usuarios de MySql (que mostrare mas adelante) ya incluye un campo que determina el tipo de usuario este campo no sera utilizado por ahora. Sin mas preámbulos muestro el ejemplo…

La base de datos

Como siempre que voi a hacer uso de una BD, empezare mostrando el script para recrear las tablas que usare en el ejemplo:

/* Crear la base de datos */
create database prueba;

/*Crear Catalogo de tipos de usuario */
create table ctg_tiposusuario
(
id_TipoUsuario	int not null auto_increment,
tx_TipoUsuario	varchar(100),
primary key(id_TipoUsuario)
);


/* Catalogo de usuarios */
create table tbl_users(
id_usuario int not null auto_increment,
tx_nombre varchar(50) not null,
tx_apellidoPaterno varchar(50),
tx_apellidoMaterno varchar(50),
tx_correo varchar(100),
tx_username varchar(50),
tx_password varchar(250),
id_TipoUsuario int,
dt_registro datetime,
primary key(id_usuario),
foreign key(id_TipoUsuario) references ctg_TiposUsuario(id_TipoUsuario)
);

/*Insertar tipos de usuarios de prueba*/
INSERT INTO `ctg_tiposusuario`( `tx_TipoUsuario`) VALUES ('Administrador');
INSERT INTO `ctg_tiposusuario`( `tx_TipoUsuario`) VALUES ('Usuario Normal');

/*passwrd: 12345*/
/*Insertar usuario de prueba*/
INSERT INTO tbl_users (tx_Nombre,tx_apellidoPaterno,tx_apellidoMaterno,tx_correo,
tx_username,tx_password,id_TipoUsuario,dt_registro) 
VALUES('Gonzalo','Silverio','Silverio','gonzasilve@gmail.com',
'gonzasilve','827ccb0eea8a706c4c34a16891f84e7b',1,'2012-11-09 17:35:40');

La base de datos que usare se llama prueba. Como se observa unicamente son dos tablas, ademas, he creado un catalogo con los diferentes tipos de usuario que pudiera haber, solo he añadido dos tipos de usuario (Administrador y Usuario normal) a modo de ejemplo, pero se pueden añadir mas. Si observas, inserto un usuario de prueba. Si quieres asignar otro password al usuario de prueba puedes utilizar esta sencilla herramienta que te permite generar un MD5 a partir de una cadena cualquiera: http://shalo.site50.net/obtener_md5.php

Herramientas necesarias

Supongo que para el momento de estar leyendo este articulo ya tienes el software necesario (ho al menos piensas instalarlo). Como he visto que los visitantes muchas veces son estudiantes de carrera ho aficionados a la programacion; pero con poca experiencia (me incluyo), voi a listar las herramientas de sw necesarias que debes tener yá en tu maquina si quieres probar este exquisito codigo :), puedes usar otro servidor y otro dbms, pero yo use estas:

• Servidor apache (2 o sup. de preferencia)
• PHP (5 o sup)
• MySql (5 o sup.)
• JQuery
• Un servidor de correo, en este caso yo use hMailServer.

Como ves son pocos requisitos, si no tienes alguno este es el momento para que lo instales. El servidor de correo de hecho es opcional, solo lo instale para hacer pruebas en mi computadora local (una laptop), si tienes dudas sobre hMailServer en la misma pagina viene mucha documentación acerca de como instalarlo y configurarlo. Si tienes más dudas puedes preguntarle al oraculo (google) escribiendo esto ‘hmailserver y php’.

Bueno vamos a lo interesante…

El código fuente

index.php

Este archivo permite mostrar la ventana de Login, en esta como es de suponerse el usuario introduce su nombre de usuario, su password y le da click al boton enviar, bueno muestro el codigo:

<!--     
	Instituto Tecnologico de Zacatepec, Morelos 
Descripcion:   Archivo para mostrar una pantalla de login con los campos;
				de usuario y password, los 2 datos se envian al archivo validarUsuario.php 
				por el metodo POST. 
Author:     Gonzalo Silverio  gonzasilve@gmail.com 
Archivo:    index.php 
-->

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>.:: Login ::. Ejemplo autenticar usuarios</title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="estilos.css" type="text/css">
	<script src="jquery171.js" type="text/javascript"></script> 
	<script src="jquery.validate.js" type="text/javascript"></script>
	<script type="text/javascript" src="jquery.alerts.js"></script>
	<link href="jquery.alerts.css" rel="stylesheet" type="text/css" />
	
	<script type="text/javascript">
	<!--
		$().ready(function() {
			$("#frmlogin").validate();
			$("#usuario").focus();
		});
	// -->
	</script>
	
</head>
<body>
<br /><br />
<form id="frmlogin" name="frmlogin"  method="POST" action="validarUsuario.php">
<table align="center" width="200px">
<tr>
	<td colspan="2" align="center"><h3>Iniciar sesi&oacute;n</h3></td>
</tr>
<tr>
	<td>Usuario</td>
	<td>
		<input type="text" name="usuario" id="usuario" class="required" maxlength="50">
	</td>
</tr>

<tr>
	<td>Password</td>
	<td>
		<input type="password" name="password" id="password" class="required"  maxlength="50">
	</td>
</tr>
<tr >
	<td colspan="2" >
		<a href="recuperarPassword.php">
			Olvide mi contrase&ntilde;a
		</a>
	</td>
</tr>

<tr>
	<td colspan="2" align="right">
		<input type="submit" name="enviar" value="Enviar" >
	</td>

</tr>
	
<tr>
	<td colspan="2" align="right" >
		<br/><a href="registro.php">Deseo registrarme</a>
	</td>
</tr>	
	<?php
	
	//Mostrar errores de validacion de usuario, en caso de que lleguen
	
		if( isset( $_POST['msg_error'] ) )
		{
			switch( $_POST['msg_error'] )
			{
				case 1:
			?>
			<script type="text/javascript"> 
				jAlert("El usuario o password son incorrectos.", "Seguridad");
				$("#password").focus();
			</script>
			<?php
				break;			
				case 2:
			?>
			<script type="text/javascript"> 
				jAlert("La seccion a la que intentaste entrar esta restringida.\n Solo permitida para usuarios registrados.", "Seguridad");
			</script>
			<?php		
				break;
			}		//Fin switch
		}

		//Mostrar mensajes del estado del registro
		
		if( isset( $_POST['status_registro'] ) )
		{
			switch( $_POST['status_registro'] )
			{
				case 1:
				if( $_POST['i_EmailEnviado'] ==1) {
				?>
					<script type="text/javascript"> 
						jAlert("Gracias, ha sido registrado exitosamente.\n Se le ha enviado un correo electronico de bienvenida, \npor favor, NO LO CONTESTE pues solo es informativo.", 'Registro');
					</script>
					<?php
				} else {
					?>
					<script type="text/javascript"> 
						jAlert("Gracias, ha sido registrado exitosamente.\n No se le ha podido enviar correo electronico de bienvenida, \nsin embargo, ya puede utilizar sus datos de acceso para iniciar sesion..", 'Registro');
					</script>
				<?php
				}

					break;			
				
				default:
			?>
				<script type="text/javascript"> 
					jAlert("Temporalmente NO se ha podido registrar, intente de nuevo mas tarde.", "Registro");
				</script>
			<?php		
			}		//Fin switch
		}
	?>
	
</table>
</form>
</body>
</html>

Como se puede ver para mostrar los mensajes de error utilizo la libreria JQuery, ya que me parecio que usar un alert() de javascript es algo feito, jajajaj. Como se ve el archivo en si solamente crea un formulario en el cual se dibujan dos cajas de texto; una para el usuario y otra para el password, un link para ir a la pantalla de recuperacion del password en caso de que al usuario se le haya olvidado y por ultimo se crea un boton tipo submit para enviar la informacion. Para validar campos vacios tambien utilizo JQuery. Ademas se puede ver que envio los dos datos de las cajitas a un archivo llamado validarUsuario.php por el metodo POST; el cual se encargara de accesar a la BD y verificar que los datos sean correctos.

Otra cosa interesante que se puede observar es que este archivo verifica si le llega un parametro llamado msg_error (con la funcion isset() de php) y en base a ese parametro (en realidad es un codigo de error) muestra un mensaje de error. A continuacion muestro un pantallazo como se ve el formulario en el navegador Chrome:

En caso de que el usuario introduzca un nombre de usuario incorrecto se mostrara esta pantalla:

Como se observa se ven mas atractivas las alertas con JQuery y ademas es sumamente facil utilizarlas.

validarUsuario.php

Este archivo es el que se encarga de recibir los datos del archivo index.php y los compara contra los que estan en la BD. Si el usuario y el password son correctos (existen en la BD) guarda el id del usuario en un formulario (el dato se envia oculto, hidden), inicializa una sesion , guarda algunas variables en dicha sesión y redirecciona hacia el archivo principal.php el cual es la pagina web que se supone debe mostrarse para usuarios registrados. En caso de que el usuario y/o password sean incorrectos entonces este archivo guarda igualmente un codigo de error en un formulario y redirecciona a la pagina de login, es decir, al archivo index.php. A continuacion se muestra su codigo fuente:

<?php
	/*
		Instituto Tecnologico de Zacatepec, Morelos 
	Descripcion:   Archivo que recibe los valores de 2 campos;
			un usuario y un password, los 2 datos se buscan si estan en la
			base de datos y redicciona al login o la pagina principal. 
	Author:     Gonzalo Silverio  gonzasilve@gmail.com 
	Archivo:    validarUsuario.php 
	*/ 

	//conectar BD
	include("conectar_bd.php");  
	conectar_bd();
	
	$usr = $_POST['usuario'];
	$pw = $_POST['password'];
	//Obtengo la version encriptada del password
	$pw_enc = md5($pw);
	
	$sql = "SELECT id_usuario FROM tbl_users
			INNER JOIN ctg_tiposusuario
			ON tbl_users.id_TipoUsuario = ctg_tiposusuario.id_TipoUsuario
			WHERE tx_username = '".$usr."'
			AND tx_password = '".$pw_enc."'	";	
	$result		=mysql_query($sql,$conexio); 

	$uid = "";
	
	//Si existe al menos una fila
	if( $fila=mysql_fetch_array($result) )
	{		
		//Obtener el Id del usuario en la BD 		
		$uid = $fila['id_usuario'];
		//Iniciar una sesion de PHP
		session_start();
		//Crear una variable para indicar que se ha autenticado
		$_SESSION['autenticado']    = 'SI';
		//Crear una variable para guardar el ID del usuario para tenerlo siempre disponible
		$_SESSION['uid']       		= $uid;
		//CODIGO DE SESION
		
		//Crear un formulario para redireccionar al usuario y enviar oculto su Id 
?>
		<form name="formulario" method="post" action="principal.php">
			<input type="hidden" name="idUsr" value='<?php echo $uid ?>' />
		</form>
<?php
	}
	else {
		//En caso de que no exista una fila...
		//..Crear un formulario para redireccionar al usuario a la pagina de login 
		//enviandole un codigo de error
?>
		<form name="formulario" method="post" action="index.php">
			<input type="hidden" name="msg_error" value="1">
		</form>
<?php
	}
?>
					
<script type="text/javascript"> 
	//Redireccionar con el formulario creado
	document.formulario.submit();
</script>

Como se observa; la mayoria del codigo esta comentado por lo que me ahorrare volver a explicar: Lo que si quiero mencionar es que en la linea 40 he dejado un comentario (CODIGO DE SESION), en esa linea si usted quiere puede generar un identificador de sesion, debido a que el ID de sesion de PHP a veces se pierde; usted puede crear un ID mas seguro; por ejemplo con base a la fecha y hr actual. la funcion session_id () permite leer o asignar el ID de la sesion.

La funcion session_start() permite iniciar una sesion o continuar una ya iniciada. Es por eso que en todas las paginas web que requieran que el usuario este autenticado se llama a esta funcion de PHP, esto lo podras ver en los demas archivos que mostrare mas adelante.

En la linea 37 y 39 se observa que es muy facil crear una variable de sesion con ayuda del array global $_SESSION[], basta con agregar un nuevo item y asignarle un valor, asi de facil. Posteriormente se pueden utilizar en cualquier pagina php por ejemplo para mostrar el Id del usuario y su Status en el navegador:

	echo "Id del usuario:".$_SESSION['uid'];
	echo "Ha iniciado sesion:".$_SESSION['autenticado'];

Facil ¿No?. Continuemos…

En la linea 12 del archivo validarUsuario.php se inserta un archivo llamado conectar_bd.php el cual se encarga de conectar con el DBMS, este archivo es el que muestro a continuacion…

conectar_bd.php

<?php
/*     
	Instituto Tecnologico de Zacatepec, Morelos 
Descripcion:   Conecta con el Manejador de Base de Datos (DBMS) y deja disponible una variable global (conexio)
		para ser utilizada posteriormente. 
Author:     Gonzalo Silverio  gonzasilve@gmail.com 
Archivo:    conectar_bd.php 
*/

$conexio;
function conectar_bd()
{
	global $conexio;
	//Definir datos de conexion con el servidor MySQL
	$elUsr = "root";
	$elPw  = "12345";
	$elServer ="localhost";
	$laBd = "prueba";
	
	//Conectar
	$conexio = mysql_connect($elServer, $elUsr , $elPw) or die (mysql_error());
	
	//Seleccionar la BD a utilizar
	mysql_select_db($laBd, $conexio ) or die (mysql_error());
}	
?>

Como se observa primero se definen los datos de conexion en variables locales a la funcion conectar_bd(). y posteriormente estas variables se usan como parametros para llamar a la funcion mysql_connect(), la cual es la que hace la peticion al dbms para conectarse. la funcion mysql_connect() devuelve un link que representa la conexion establecida al dbms, con este link guardado en la variable $conexio se selecciona la BD a utilizar (linea 24).

principal.php

Este archivo es la pantalla que el usuario ve si se logueo correctamente, nada mas como ejemplo he creado una muy sencilla. Cuando el usuario accede a esta pagina web se supone que ya paso por la pantalla de login y sus datos fueron verificados en la BD. Pero por seguridad antes de mostrarla verifico que efectivamente este logueado a travez de las variables de sesion que fueron creadas en el archivo validarUsuario.php. A continuacion muestro el codigo fuente:

<?php
/*     
	Instituto Tecnologico de Zacatepec, Morelos 
Descripcion:   Pantalla inicial que se muestra al usuario una vez que ha sido logueado correctamente. 
Author:     Gonzalo Silverio  gonzasilve@gmail.com 
Archivo:    principal.php 
*/

//Inicializar una sesion de PHP
session_start();

//Validar que el usuario este logueado y exista un UID
if ( ! ($_SESSION['autenticado'] == 'SI' && isset($_SESSION['uid'])) )
{
	//En caso de que el usuario no este autenticado, crear un formulario y redireccionar a la 
	//pantalla de login, enviando un codigo de error
?>
		<form name="formulario" method="post" action="index.php">
			<input type="hidden" name="msg_error" value="2">
		</form>
		<script type="text/javascript"> 
			document.formulario.submit();
		</script>
<?php
}

	//Conectar BD
	include("conectar_bd.php");  
	conectar_bd();

	//Sacar datos del usuario que ha iniciado sesion
	$sql = "SELECT  tx_nombre,tx_apellidoPaterno,tx_TipoUsuario,id_usuario
			FROM tbl_users
			LEFT JOIN ctg_tiposusuario
			ON tbl_users.id_TipoUsuario = ctg_tiposusuario.id_TipoUsuario
			WHERE id_usuario = '".$_SESSION['uid']."'";			
	$result		=mysql_query($sql); 

	$nombreUsuario = "";

	//Formar el nombre completo del usuario
	if( $fila = mysql_fetch_array($result) )
		$nombreUsuario = $fila['tx_nombre']." ".$fila['tx_apellidoPaterno'];
	
//Cerrrar conexion a la BD
mysql_close($conexio);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>.:: Inicio ::. Ejemplo autenticar usuarios</title>
	<link rel="stylesheet" href="estilos.css" type="text/css">
</head>
<body topmargin="0" >
<table align="right" width="350px" border="0">
<tr>												<!-- Dar Bienvenida al usuario -->
	<td  width="100px" align="right">Bienvenido <b><?php echo $nombreUsuario ?></b></td>
	<td  width="15px" align="center">
		<!-- Proporcionar Link para cerrar sesion -->
		<a href="cerrarSesion.php">Cerrar sesi&oacute;n</a>	
	</td>
</tr>
</table>
<br /><br />
<h2 align="center">Pantalla Principal</h2>

		<!-- Contenido inicial del sitio web -->
		
<body>
</html>

Como decia en la lineas anteriores, cuando una pagina esta restringida lo primero que se debe hacer es verificar que el usuario esta logueado y tiene permisos para ver dicha pagina. Como dije que no mostraria como dar permisos a los usuarios, en este ejemplo solo se comprueba que haya una sesion iniciada y que exista entre las variables de sesion un UID (User Id); Id del usuario en la Base de datos.

Si se verifica que esas condiciones se cumplen entonces se obtienen los datos del usuario, tal como su nombre , correo electronico, etc. Yo solo saque su nombre completo y lo mostre en la esquina superior derecha para que el usuario tenga la sensacion (jajajajj «sienta») que a entrado al portal. A continuacion muestro un pantallazo de este archivo en el navegador:

Como se observa tambien se ha puesto al usuario un link para que cierre su sesion.

Seguridad

Imaginemos que un usuario malintencionado escribe directamente la URL de este archivo en su navegador (escribe http://localhost/autenticar_usuarios/principal.php) pensando que con esto puede entrar y ver el contenido del sitio. Perdera su tiempo pues para eso presisamente se hace la validacion al inicio y solamente vera un mensaje de error como el que se ve a continuacion:

Encriptar Passwords en MD5 en Java

Encriptar Passwords en MD5 en Java. En vista de que e visto muchos comentarios a la entrada de blog Autentificar usuarios en Java, voi a ampliar un poco ese tema con algo extra. Digo esto porque pienso utilizar estos mismos fundamentos para almacenar los passwords encriptados (en MD5) de los usuarios en la BD. Googleando por la red me encontre (al igual que muchos otros) muchas maneras muy similares de encriptar en MD5, algunas un poco equivocadas, algunas con mas cosas que otras, pero la que mas me gusto es la que voi a mostrar a continuacion.

Antes que todo muestro la configuracion de la computadora en la que hice esta prueba:

Tipo de Computadora: Laptop, Toshiba
S.O.: Linux, distribucion Ubuntu 10.10 [Maverick]
version del Kernel: 2.6.35-27
Version de la JVM: 1.6.0_26

La clase siguiente contiene un metodo muy sencillo que recibe una cadena (String) y regresa otra pero encriptada en MD5. Por si no lo sabias, hasta este momento creo que java no cuenta con algun metodo para encriptar en MD5, asi que tenemos que ingeniarnosla de alguna manera para encriptar en este formato. Bueno el codigo es el siguiente para hacer la encriptacion es:
TestEncriptarMD5.java

/**
 *      Instituto Tecnologico de Zacatepec
 * Descripcion:   Encriptacion de paswords en MD5
 * @author Gonzalo Silverio
 * Fecha: 03-12-2011
 * Archivo:  TestEncriptarMD5.java
 */

import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;

public class TestEncriptarMD5
{
	private static final char[] CONSTS_HEX = { '0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f' };
  	public static String encriptaEnMD5(String stringAEncriptar)
	{
		try
		{
		   MessageDigest msgd = MessageDigest.getInstance("MD5");
		   byte[] bytes = msgd.digest(stringAEncriptar.getBytes());
		   StringBuilder strbCadenaMD5 = new StringBuilder(2 * bytes.length);
		   for (int i = 0; i < bytes.length; i++)
		   {
		       int bajo = (int)(bytes[i] & 0x0f);
		       int alto = (int)((bytes[i] & 0xf0) >> 4);
		       strbCadenaMD5.append(CONSTS_HEX[alto]);
		       strbCadenaMD5.append(CONSTS_HEX[bajo]);
		   }
		   return strbCadenaMD5.toString();
		} catch (NoSuchAlgorithmException e) {
		   return null;
		}
	}

	public static void main(String args[])
	{
		System.out.println("\n\nEncriptacion en MD5 de 123: '"+encriptaEnMD5("123")+"'");
		System.out.println("Encriptacion en MD5 de hola: '"+encriptaEnMD5("hola")+"'");
	}
}

Como se puede observar el metodo esta super corto y efectivamente se obtiene la cadena encriptada en MD5 y para probarlo a continuacion la compilacion y ejecucion de la clase anterior:

Ejemplo de encriptacion en MD5 en Java

Bueno hasta pronto y ya sabes si gustan el codigo basta con dejar su email.  Suerte!!