Acceso y registro con HTML, AJAX, PHP y MySQL

¡Hola a todos y a todas! Comienzo este 2016 (un poco tarde, estaba descansando 🙂 ) con un tutorial donde mostraré cómo hacer un acceso y registro de usuarios básico basado en HTML, AJAX, PHP y MySQL.

En esta ocasión, utilizaremos y configuraremos cookies de sesión con PHP, y también comprobaremos si el usuario está logueado (si tiene la sesión iniciada) o no. Representado en un diagrama de flujo, sería algo así:

Diagrama de flujo

Entonces, comencemos.

¿Cómo crear un sistema de usuarios?

Como siempre digo, seguiré desarrollando en local, utilizando XAMPP (Apache y MySQL con PHPMyAdmin) en Windows.

1 de 3: MySQL

Lo primero que debemos hacer es estructurar nuestra base de datos.
Continúo trabajando sobre una base de datos llamada mmv con cotejamiento utf8_spanish_ci. Dentro tengo una tabla llamada mmv005 que tiene cuatro columnas. El motor de almacenamiento es InnoDB.

1. id -> INT(5) -> A_I -> primaria
2. username -> varchar(20) -> utf8_spanish_ci
3. usernamelowercase -> varchar(20) -> utf8_spanish_ci -> único
4. password -> varchar(60) -> utf8_spanish_ci

2 de 3: HTML y PHP

Ahora debemos crear los scripts para obtener y modificar los datos.

Empecemos por crear el archivo index.php, el cual comprobará si la sesión está iniciada o no. Lo que necesitamos es: iniciar la sesión (si existe) con la función session_start() de PHP, comprobar si los datos de sesión están seteados (establecidos), y actuar en consecuencia.

En este caso, si la sesión está iniciada, incluiremos el archivo página.php , y si no hay ninguna sesión creada, incluiremos el archivo login.php. Estos archivos los crearemos más adelante.

El archivo debe estar totalmente vacío. Las etiquetas HTML (doctype, html, head, body, etc.) que puedan generar algunos editores de texto (como Dreamweaver) deben ser eliminadas.

Código fuente de index.php:

<?php
//Iniciamos la sesión
session_start();

//Evitamos que nos salgan los NOTICES de PHP
error_reporting(E_ALL ^ E_NOTICE);

//Comprobamos si la sesión está iniciada
//Si existe una sesión correcta, mostramos la página para los usuarios
//Sino, mostramos la página de acceso y registro de usuarios
if(isset($_SESSION['usuario']) and $_SESSION['estado'] == 'Autenticado') {
	include('pagina.php');
	die();
} else {
	include('login.php');
	die();
};
?>

Ahora creamos el archivo de acceso y registro: login.php, donde comenzaremos por comprobar si existe una sesión utilizando nuevamente la función de PHP. Esta función debe ir encima de la declaración del doctype de HTML.

A continuación hay que agregar la librería de jQuery en el head del HTML para poder usar la función AJAX. Yo utilizaré la versión 1.9.1 minificada que tengo descargada.

Es hora de empezar a estructurar el cuerpo del archivo. Lo primero es crear un contenedor (div #mensaje) donde estarán las respuestas del servidor respecto a las acciones de los usuarios en el formulario. Las respuestas las recibiremos después a través de AJAX.

Una vez creado ese contenedor, debemos crear dos formularios:

1. ID acceso, método POST. Contiene:
   – Input de tipo texto, con nombre userAcceso, clase acceso (*1), id userAcceso.
   – Input de tipo contraseña, con nombre passAcceso, clase acceso (*1), id passAcceso.
   – Input de tipo submit, con nombre acceso (opcionalmente, valor Acceder).
2. ID registro, método POST. Contiene:
   – Input de tipo texto, con nombre userRegistro, clase registro (*1), id userRegistro.
   – Input de tipo contraseña, con nombre passRegistro, clase registro (*1), id passRegistro.
   – Input de tipo submit, con nombre registro (opcionalmente, valor Registrarse).

Adicionalmente, a los inputs podemos añadirle un placeholder. un auto-completado apagado, aceptar UTF-8 y establecer los action vacíos.

*1 Esto se realiza para posteriormente vaciar los inputs desde PHP. Lo mostraré más adelante. Después simplemente debemos crear el método de envío desde el archivo login.php a PHP por medio de AJAX.

Código fuente de login.php:

<?php
//Iniciamos la sesión
session_start();

//Pedimos el archivo que controla la duración de las sesiones
require('recursos/sesiones.php');
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Acceso o registro</title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>

<div id="mensaje" style="border:1px solid #CCC; padding:10px;"></div>

<h2>Accede a tu cuenta</h2>

<div class="formulario-acceso">
<form method="POST" id="acceso" action="" accept-charset="utf-8">
	<input type="text" name="userAcceso" class="acceso" id="userAcceso" placeholder="Usuario" autocomplete="off" maxlength="20">
	<input type="password" name="passAcceso" class="acceso" id="passAcceso" placeholder="Contraseña" autocomplete="off" maxlength="60">
	<input type="submit" name="acceso" class="boton-principal" value="Acceder">
</form>
</div>

<hr>

<h2>Crea una cuenta</h2>

<div class="formulario-registro">
<form method="POST" id="registro" action="" accept-charset="utf-8">
	<input type="text" name="userRegistro" class="registro" id="userRegistro" placeholder="Usuario" autocomplete="off" maxlength="20">
	<input type="password" name="passRegistro" class="registro" id="passRegistro" placeholder="Contraseña" autocomplete="off" maxlength="60">
	<input type="submit" name="registro" class="boton-principal" value="Registrarse">
</form>
</div>

<script>
//Guardamos el controlador del div con ID mensaje en una variable
var mensaje = $("#mensaje");
//Ocultamos el contenedor
mensaje.hide();

//Cuando el formulario con ID acceso se envíe...
$("#acceso").on("submit", function(e){
	//Evitamos que se envíe por defecto
	e.preventDefault();
	//Creamos un FormData con los datos del mismo formulario
	var formData = new FormData(document.getElementById("acceso"));

	//Llamamos a la función AJAX de jQuery
	$.ajax({
		//Definimos la URL del archivo al cual vamos a enviar los datos
		url: "recursos/acceder.php",
		//Definimos el tipo de método de envío
		type: "POST",
		//Definimos el tipo de datos que vamos a enviar y recibir
		dataType: "HTML",
		//Definimos la información que vamos a enviar
		data: formData,
		//Deshabilitamos el caché
		cache: false,
		//No especificamos el contentType
		contentType: false,
		//No permitimos que los datos pasen como un objeto
		processData: false
	}).done(function(echo){
		//Una vez que recibimos respuesta
		//comprobamos si la respuesta no es vacía
		if (echo !== "") {
			//Si hay respuesta (error), mostramos el mensaje
			mensaje.html(echo);
			mensaje.slideDown(500);
		} else {
			//Si no hay respuesta, redirecionamos a donde sea necesario
			//Si está vacío, recarga la página
			window.location.replace("");
		}
	});
});

//Cuando el formulario con ID acceso se envíe...
$("#registro").on("submit", function(e){
	//Evitamos que se envíe por defecto
	e.preventDefault();
	//Creamos un FormData con los datos del mismo formulario
	var formData = new FormData(document.getElementById("registro"));

	//Llamamos a la función AJAX de jQuery
	$.ajax({
		//Definimos la URL del archivo al cual vamos a enviar los datos
		url: "recursos/registro.php",
		//Definimos el tipo de método de envío
		type: "POST",
		//Definimos el tipo de datos que vamos a enviar y recibir
		dataType: "HTML",
		//Definimos la información que vamos a enviar
		data: formData,
		//Deshabilitamos el caché
		cache: false,
		//No especificamos el contentType
		contentType: false,
		//No permitimos que los datos pasen como un objeto
		processData: false
	}).done(function(echo){
		//Cuando recibamos respuesta, la mostramos
		mensaje.html(echo);
		mensaje.slideDown(500);
	});
});
</script>
</body>
</html>

Como se puede apreciar, justo después de iniciar sesión llamo a un archivo llamado sesiones.php, y ¿qué es esto? Bueno, para evitar tener que estar modificando los archivos de configuración (.ini) del servidor (Apache), es decir, para no usar ini_set(«session.cookie_lifetime») ni ini_set(«session.gc_maxlifetime») en nuestro(s) script(s) en PHP, debemos definir la duración de la sesión en PHP. Esto se haría a través de una comprobación de tiempo.

Código fuente de sesiones.php:

<?php
//Evitamos que nos salgan los NOTICES de PHP
error_reporting(E_ALL ^ E_NOTICE);

//Obtenemos el timestamp del servidor de cuanto se hizo la petición
$hora = $_SERVER["REQUEST_TIME"];

//Duración de la sesión en segundos
$duracion = 60;

//Si el tiempo de la petición* es mayor al tiempo permitido de la duración, 
//destruye la sesión y crea una nueva
if (isset($_SESSION['ultima_actividad']) && ($hora - $_SESSION['ultima_actividad']) > $duracion) {
  session_unset();
  session_destroy();
  session_start();
};
// * Por esto este archivo debe ser incluido en cada página que necesite comprobar las sesiones

//Definimos el valor de la sesión "ultima_actividad" como el timestamp del servidor
$_SESSION['ultima_actividad'] = $hora;
?>

Ahora debemos recibir los datos de los formularios. Para eso, comenzaremos por el registro.

Realizamos la conexión a la base de datos, almacenamos los dos valores (usuario y contraseña) en una variable, realizamos un filtro anti-XSS, definimos la cantidad máxima de caracteres por input (para reforzar la seguridad), y comprobamos que los valores no sean de mayor cantidad de caracteres de lo que es posible. Después convertimos el valor del usuario (userRegistro) en minúsculas, seleccionamos todos los nombres de usuario en minúsculas de la BBDD, y checkeamos la información: si los campos están vacíos, mostramos error, si el usuario introducido que pasamos a minúsculas es igual a algún usuario existente en algún campo de usernamelowercase, mostramos error. Si no hay errores, se pasa a encriptar la contraseña (en este caso, lo hago con Blowfish + crypt()) y registramos los datos en la base de datos.

Para el formulario de acceso:

Realizamos la conexión a la base de datos, almacenamos los dos valores (usuario y contraseña) en una variable, realizamos un filtro anti-XSS, definimos la cantidad máxima de caracteres por input (para reforzar la seguridad), y comprobamos que los valores no sean de mayor cantidad de caracteres de lo que es posible. Después convertimos el valor del usuario (userAcceso) en minúsculas para poder realizar una consulta de comparación en la base de datos. Por último, hacemos un checkeo de datos (si el nombre existe, si los campos no están vacíos, o si la contraseña no es correcta), y si está todo bien, simplemente creamos una nueva sesión.

Código fuente de registro.php:

<?php
//Conectamos a la base de datos
require('../../conexion.php');

//Obtenemos los datos del formulario de registro
$userPOST = $_POST["userRegistro"]; 
$passPOST = $_POST["passRegistro"];

//Filtro anti-XSS
$userPOST = htmlspecialchars(mysqli_real_escape_string($conexion, $userPOST));
$passPOST = htmlspecialchars(mysqli_real_escape_string($conexion, $passPOST));

//Definimos la cantidad máxima de caracteres
//Esta comprobación se tiene en cuenta por si se llegase a modificar el "maxlength" del formulario
//Los valores deben coincidir con el tamaño máximo de la fila de la base de datos
$maxCaracteresUsername = "20";
$maxCaracteresPassword = "60";

//Si los input son de mayor tamaño, se "muere" el resto del código y muestra la respuesta correspondiente
if(strlen($userPOST) > $maxCaracteresUsername) {
	die('El nombre de usuario no puede superar los '.$maxCaracteresUsername.' caracteres');
};

if(strlen($passPOST) > $maxCaracteresPassword) {
	die('La contraseña no puede superar los '.$maxCaracteresPassword.' caracteres');
};

//Pasamos el input del usuario a minúsculas para compararlo después con
//el campo "usernamelowercase" de la base de datos
$userPOSTMinusculas = strtolower($userPOST);

//Escribimos la consulta necesaria
$consultaUsuarios = "SELECT usernamelowercase FROM `mmv005`";

//Obtenemos los resultados
$resultadoConsultaUsuarios = mysqli_query($conexion, $consultaUsuarios) or die(mysql_error());
$datosConsultaUsuarios = mysqli_fetch_array($resultadoConsultaUsuarios);
$userBD = $datosConsultaUsuarios['usernamelowercase'];

//Si el input de usuario o contraseña está vacío, mostramos un mensaje de error
//Si el valor del input del usuario es igual a alguno que ya exista, mostramos un mensaje de error
if(empty($userPOST) || empty($passPOST)) {
	die('Debes introducir datos válidos');
} else if ($userPOSTMinusculas == $userBD) {
	die('Ya existe un usuario con el nombre '.$userPOST.'');
}
else {
//Si no hay errores, procedemos a encriptar la contraseña
//Lectura recomendada: https://mimentevuela.wordpress.com/2015/10/08/establecer-blowfish-como-salt-en-crypt-2/
	
	function aleatoriedad() {
		$caracteres = "abcdefghijklmnopqrstuvwxyz1234567890";
		$nueva_clave = "";
		for ($i = 5; $i < 35; $i++) {
			$nueva_clave .= $caracteres[rand(5,35)];
		};
		return $nueva_clave;
	};

	$aleatorio = aleatoriedad();
	$valor = "07";
	$salt = "$2y$".$valor."$".$aleatorio."$";

	$passwordConSalt = crypt($passPOST, $salt);

	//Armamos la consulta para introducir los datos
	$consulta = "INSERT INTO `mmv005` (username, usernamelowercase, password) 
	VALUES ('$userPOST', '$userPOSTMinusculas' , '$passwordConSalt')";
	
	//Si los datos se introducen correctamente, mostramos los datos
	//Sino, mostramos un mensaje de error
	if(mysqli_query($conexion, $consulta)) {
		die('<script>$(".registro").val("");</script>
Registrado con éxito <br>
Ya puedes acceder a tu cuenta <br>
<br>
Datos:<br>
Usuario: '.$userPOST.'<br>
Contraseña: '.$passPOST);
	} else {
		die('Error');
	};
};//Fin comprobación if(empty($userPOST) || empty($passPOST))
?>

Código fuente de acceder.php:

<?php
	
//Conectamos a la base de datos
require('../../conexion.php');

//Obtenemos los datos del formulario de acceso
$userPOST = $_POST["userAcceso"]; 
$passPOST = $_POST["passAcceso"];

//Filtro anti-XSS
$userPOST = htmlspecialchars(mysqli_real_escape_string($conexion, $userPOST));
$passPOST = htmlspecialchars(mysqli_real_escape_string($conexion, $passPOST));

//Definimos la cantidad máxima de caracteres
//Esta comprobación se tiene en cuenta por si se llegase a modificar el "maxlength" del formulario
//Los valores deben coincidir con el tamaño máximo de la fila de la base de datos
$maxCaracteresUsername = "20";
$maxCaracteresPassword = "60";

//Si los input son de mayor tamaño, se "muere" el resto del código y muestra la respuesta correspondiente
if(strlen($userPOST) > $maxCaracteresUsername) {
	die('El nombre de usuario no puede superar los '.$maxCaracteresUsername.' caracteres');
};

if(strlen($passPOST) > $maxCaracteresPassword) {
	die('La contraseña no puede superar los '.$maxCaracteresPassword.' caracteres');
};

//Pasamos el input del usuario a minúsculas para compararlo después con
//el campo "usernamelowercase" de la base de datos
$userPOSTMinusculas = strtolower($userPOST);

//Escribimos la consulta necesaria
$consulta = "SELECT * FROM `mmv005` WHERE usernamelowercase='".$userPOSTMinusculas."'";

//Obtenemos los resultados
$resultado = mysqli_query($conexion, $consulta);
$datos = mysqli_fetch_array($resultado);

//Guardamos los resultados del nombre de usuario en minúsculas
//y de la contraseña de la base de datos
$userBD = $datos['usernamelowercase'];
$passwordBD = $datos['password'];

//Comprobamos si los datos son correctos
if($userBD == $userPOSTMinusculas and password_verify($passPOST, $passwordBD)){

	session_start();
	$_SESSION['usuario'] = $datos['username'];
	$_SESSION['estado'] = 'Autenticado';

	/* Sesión iniciada, si se desea, se puede redireccionar desde el servidor */

//Si los datos no son correctos, o están vacíos, muestra un error
//Además, hay un script que vacía los campos con la clase "acceso" (formulario)
} else if ( $userBD != $userPOSTMinusculas || $userPOST == "" || $passPOST == "" || !password_verify($passPOST, $passwordBD) ) {
	die ('<script>$(".acceso").val("");</script>
Los datos de acceso son incorrectos');
} else {
	die('Error');
};
?>

Para finalizar, crearemos el archivo pagina.php, que es donde accederán los usuarios logueados y el archivo salir.php, que nos permitirá cerrar sesión.

Para este ejemplo, la página de los usuarios será muy simple: primero se comprobará si los datos están seteados, si no lo están, se redirecciona al index, y si lo están, se define el botón de cerrar sesión y se incluye el archivo sesiones.php para controlar la duración de la sesión actual.

Código fuente de pagina.php:

<?php
//Reanudamos la sesión
session_start();

//Comprobamos si el usario está logueado
//Si no lo está, se le redirecciona al index
//Si lo está, definimos el botón de cerrar sesión y la duración de la sesión
if(!isset($_SESSION['usuario']) and $_SESSION['estado'] != 'Autenticado') {
	header('Location: index.php');
} else {
	$estado = $_SESSION['usuario'];
	$salir = '<a href="recursos/salir.php" target="_self">Cerrar sesión</a>';
	require('recursos/sesiones.php');
};
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bienvenido</title>
</head>

<body>
<div><p>Hola, <?php echo $estado; ?><br>
<?php echo $salir; ?></p><div>
</body>
</html>

Código fuente de salir.php:

<?php
//Reanudamos la sesión
session_start();

//Requerimos los datos de la conexión a la BBDD
require('../../conexion.php');

//Des-establecemos todas las sesiones
unset($_SESSION);

//Destruimos las sesiones
session_destroy();

//Cerramos la conexión con la base de datos
mysqli_close($conexion);

//Redireccionamos a el index
header("Location: ../");
die();
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Cerrando sesión...</title>
</head>
<body>
</body>
</html>

3 de 3: Ejemplos

Una vez hecho todo lo anterior, podemos observar los resultados finales. Yo no lo he aplicado ningún estilo, pero se puede hacer sin problemas.

Usuario creado

 

Datos incorrectos

 

Sesión iniciada

Conclusión:

Para comenzar a trabajar con sesiones, PHP y MySQL, este tutorial es bastante completo. Hay que tener en cuenta más cuestiones de seguridad que aquí no se tratan, como que es imprescindible usar SSL (HTTPS) para enviar datos de usuarios. Si te sirvió, por favor, compártelo.

NOTA: La estructura de los archivos es la siguiente:

index.php
login.php
pagina.php
 js (carpeta)
  L jquery-1.9.1.min.js
 recursos (carpeta)
  L acceder.php
  L registro.php
  L salir.php
  L sesiones.php

Espero que el tutorial haya sido de utilidad. Nos leemos, ¡saludos!