Te presento un método muy simplificado para realizar un sistema de logueo de usuarios en PHP y MySQL. Para esto utilizamos: sesiones en PHP, contraseñas encriptadas, redireccionamiento de páginas, así como consultas SQL.
Módulos en un sistema de logueo de usuarios
Los módulos que se requieren para un sistema de logueo de usuarios son:
- Módulo de altas de usuarios
- Página de ingreso
- Script de logueo
- Páginas protegidas (con acceso solo para usuarios logueados)
- Script para cerrar sesión.
-
Elaboración de la plantilla HTML
Utilizamos HTML y Bootstrap para realizar una página responsive. El código que utilizaremos en este ejemplo es el siguiente:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Artículos sobre tecnología">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>Tecnología para todos</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/justified-nav.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Header -->
<header class="masthead">
<h3 class="text-muted">Tecnología para todos!!</h3>
<nav class="navbar navbar-expand-md navbar-light bg-light rounded mb-3">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav text-md-center nav-justified w-100">
<li class="nav-item active">
<a class="nav-link" href="index.php">Inicio <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Móviles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Internet</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Electrónica</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Quiénes somos</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mi cuenta</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Ingresar</a>
<a class="dropdown-item" href="login/usuario_nuevo.php">Crear cuenta</a>
</div>
</li>
</ul>
</div>
</nav>
</header>
<!-- / Header -->
<!-- Site footer -->
<footer class="footer">
<p>© TpTodos 2017</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<script src="../js/jquery-3.2.1.slim.min.js"></script>
<script>window.jQuery || document.write('<script src="js.jquery.min.js"><\/script>')</script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
Para que funcione adecuadamente deberás crear dos carpetas: css y js (para contener los archivos css y javascript).
Puedes complementar con cualquier contenido que desees. Un ejemplo de cómo se vería es el siguiente:
2. Crear el formulario para dar de alta a los usuarios.
El siguiente formulario solicita los datos del usuario: nombre, apellido, usuario (será el nombre de usuario con el que se logueará) y password.
<h2>Crea tu cuenta</h2>
<form action="usuario_guardar.php" class="form-horizontal">
<div class="form-group">
<label for="nombre" class="sr-only">Nombre</label>
<input type="text" id="nombre" name="nombre" class="col-md-6" placeholder="Nombre">
</div>
<div class="form-group">
<label for="direccion" class="sr-only">Apellidos</label>
<input type="text" id="apellidos" name="apellidos" class="col-md-6" placeholder="Apellidos">
</div>
<div class="form-group">
<label for="ocupacion" class="sr-only">Password</label>
<input type="password" id="password" name="password" class="col-md-6" placeholder="Password">
</div>
<div class="form-group">
<label for="cp" class="sr-only">Usuario</label>
<input type="text" id="usuario" name="usuario" class="col-md-6" placeholder="Usuario">
</div>
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary">
Guardar
</button>
<a href="index.html" class="btn btn-danger"> Cancelar </a>
</div>
</form>
Se vería así:
3. Crear el script para guardar los usuarios
Se necesitará una BD con los mismos campos antes mencionados: nombre, apellido, usuario, password, solo que incluiremos además el campo id como llave primaria y en autoincrement, y el campo nivel (con valores 1, 2,3 que representan un usuario común, un usuario colaborador, y un usuario administrador, respectivamente), y un campo activo (que tendrá 1 si el usuario está activo y 0 si su cuenta está desactivada).
La estructura de la base de datos se vería así:
El script php que guarda los datos es el siguiente:
<?php
require("../conectar.php");
$sql = sprintf("insert into usuarios (nombre, apellido, usuario, password)
values ('%s', '%s', '%s', '%s') ",
$_GET['nombre'],
$_GET['apellido'],
$_GET['usuario'],
sha1($_GET['password']));
//echo $sql;
$r = mysqli_query($con, $sql);
echo $r;
?>
Observe que se guarda el password encriptado (utilizando sha1). Para que se guarde bien la cadena encriptada el campo pasword en la Base de Datos debe tener un tamaño mayor a 40 espacios.
Para encriptar una contraseña o cualquier otro campo utilice la función sha1
Utiliza un archivo de conexión que es el siguiente:
<?php $user = 'xxx'; $password = 'xxx'; $db = 'BaseDatos'; $host = 'localhost'; $con = mysqli_connect($host, $user, $password, $db); ?>
Deberá sustituir los nombres de Base de Datos, Usuario y Contraseña por los que utilice su sistema.
4. Crear el formulario para el logueo de usuarios
Se crea un formulario que únicamente solicite: usuario y password.
<h2>Ingresar</h2>
<form action="usuario_loguear.php" class="form-horizontal" method = "post">
<div class="form-group">
<label for="cp" class="sr-only">Usuario</label>
<input type="text" id="usuario" name="usuario" class="col-md-6" placeholder="Usuario">
</div>
<div class="form-group">
<label for="ocupacion" class="sr-only">Password</label>
<input type="password" id="password" name="password" class="col-md-6" placeholder="Password">
</div>
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary">
Ingresar
</button>
<a href="index.html" class="btn btn-danger"> Cancelar </a>
</div>
</form>Se vería así:
5. Elaboración del script de logueo de usuarios
El siguiente código realiza lo siguiente:
- Se conecta a la BD
- Realiza una consulta buscando un usuario y un pasword como los que se le proporcionaron.
- Si encuentra por lo menos un usuario, se crean las variables de sesión que vayamos a necesitar.
- Utilizando el campo nivel, el script redirigirá a la página correspondiente del usuario común, usuario colaborador o al panel del administrador.
- En caso de que no encuentre un usuario con el nombr y la contraseña proporcionados, redirigirá a una página de error.
<?php
session_start();
require("../conectar.php");
$sql = sprintf("select * from usuarios
where usuario='%s' and password = '%s'",
$_POST['usuario'],
sha1($_POST['password']));
$query = mysqli_query($con, $sql);
$fila = mysqli_fetch_assoc($query);
$encontrados = mysqli_num_rows($query);
if ($encontrados >= 1){
$_SESSION['nombre'] = $fila['nombre'];
$_SESSION['usuario'] = $fila['usuario'];
$_SESSION['nivel'] = $fila['nivel'];
if ($_SESSION['nivel']==3){
header('Location:panel_admin.php');
}
else if ($_SESSION['nivel']==2){
header('Location:panel_colaborador.php');
}
else if ($_SESSION['nivel']==1){
header('Location:panel_usuario.php');
}
}
else{
header('Location:error_logueo.php');
}
?>La instrucción session_start() debe estar al comienzo del script
$_SESSION se utiliza para almacenar las variables de sesión
Una variable de sesión mantiene su valor al salir de la página actual y entrar a otra que pertenezca a la misma sesión.
Si la contraseña está encriptada, debe volver a encriptarla cuando realice la consulta.
Para hacer un redireccionamiento utilice la instrucción header(‘Location:’) indicando la url hacia la que debe dirigirse.
6. Crear una página protegida
Las páginas que desee proteger deberán incluir el siguiente código:
<?php
session_start();
if ($_SESSION['nivel']!=3){
header('Location:usuario_ingresar.php');
}
?>
Por ejemplo, el panel del administrador debería incluirlo verificando que el usuario logueado tenga un nivel 3.
7. Script para cerrar la sesión
Es el más sencillo de todos, destruye la sesión y redirige a la página que uno quiera, por ejemplo, la principal o la página de ingreso.
<?php
session_start();
session_destroy();
header('Location:../index.php');
?>
Espero que este ejemplo te permita crear un sistema de logueo a tu medida. Cualquier duda deja un comentario.
Referencias
- Beati (2015). Creación de páginas Web dinámicas. Editorial Alfaomega. [Enlace en Google Books].
Tu comentario
opiniones