Naps Tecnología y educación

Sistema de logueo de usuarios en PHP y MySQL

Sistema de logueo de usuarios en PHP y MySQL

Nov 23,2017 3 comentarios en Sistema de logueo de usuarios en PHP y MySQL Por Gibrán García C.

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.

  1. 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>&copy; 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:

Plantilla Sistema de logueo de usuarios

Sistema de logueo de usuarios

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í:

Logueo de usuarios - Crear una cuenta

Formulario para crear una cuenta

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í:

Estructura de la base de datos del Sistema de Logueo de Usuarios

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í:

Formulario de logueo de usuarios

Formulario de logueo de usuarios

5. Elaboración del script de logueo de usuarios

El siguiente código realiza lo siguiente:

  1. Se conecta a la BD
  2. Realiza una consulta buscando un usuario y un pasword como los que se le proporcionaron.
  3. Si encuentra por lo menos un usuario, se crean las variables de sesión que vayamos a necesitar.
  4. Utilizando el campo nivel, el script redirigirá a la página correspondiente del usuario común, usuario colaborador o al panel del administrador.
  5. 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

  1. Beati (2015). Creación de páginas Web dinámicas. Editorial Alfaomega. [Enlace en Google Books].
¿Qué te pareció este artículo?
  • Poco informativo 
  • No era lo que buscaba 
  • Regular 
  • Excelente 
  • Interesante 
(Visto 14.282 veces)
Facebooktwitterlinkedinmail

Tu comentario

opiniones

Comments

  • Razgriz | Sep 20,2019

    He colocado el código tal cual lo muestras, pero cuando inicio sesión no me lleva a ningún panel
    ¿qué podría ser?

    • Gibrán García C. | Sep 21,2019

      El siguiente código:

      session_start();
      if ($_SESSION['nivel']!=3){
      header('Location:usuario_ingresar.php');
      }

      Debe ir al inicio de la página que se debe abrir cuando el login es correcto. Esa página es diferente para cada usuario. Puedes usar para probar algo sencillo como h1 Bienvenido /h1

      • Razgriz | Sep 23,2019

        Lo he realizado como me indicaste pero esta siguiente parte no la ejecuta, me envía directamente al error_logueo.php 🙁

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

    • Visita también

    Te puede interesar

    Colabora con este sitio

    Consulta

    Copyright @ 2017 Designed by Webriti