Login con la opción recordarme PHP Session y Cookies

Login con la opción recordarme PHP Session y Cookies. En la presente publicación detallaremos un código de inicio de sesión para nuestro panel de control. Sin embargo, nos enfocaremos en una opción llamado «Recordarme» que es un CHECKBOX en el cual el usuario activa.

Esta opción permitirá al usuario mantener de manera activa su estado de logueado. Cuando el usuario marca la opción Recuérdame, el estado logueado queda activado en la sesión php o en las cookies. Para esto tenemos que optimizar las brechas de seguridad a nuestro sistema para evitar accesos no permitidos.

Login con la opción recordarme PHP Session y Cookies

Este código le ayudará a crear un sistema de login persistente para su plataforma web. Sin embargo, cuando el usuario intenta iniciar sesión en la plataforma, las credenciales de inicio de sesión ingresadas se verifican con la base de datos rápidamente.

Si se encuentra una coincidencia, la sesión php y las cookies se utilizan para preservar el estado de usuario logueado antes de redirigir al usuario al panel de control. En el inicio de sesión exitoso, el login se almacena en una sesión.

A continuación, las cookies se establecen para mantener el nombre de inicio de sesión y la contraseña. En lugar de almacenar la contraseña simple de los usuarios, la contraseña aleatoria y el token se generan y se almacenan en la cookie para evitar el hackeo de nuestro sistema.

Crear cookies para preservar el estado logueado

Necesitamos de un formulario de login para obtener el nombre de usuario y la contraseña. Por lo tanto, este formulario contiene una casilla de verificación HTML con el nombre ‘ Recuérdame ‘ para permitir al usuario mantener el login de manera persistente.

Partes del sistema login

1. La tabla llamada «php_loginseguro.sql»

CREATE TABLE `login_token` (
  `id` int(11) NOT NULL,
  `usuario` varchar(200) NOT NULL,
  `password_hash` varchar(255) NOT NULL,
  `selector_hash` varchar(255) NOT NULL,
  `is_expired` int(11) NOT NULL DEFAULT '0',
  `expiry_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT;

CREATE TABLE `usuarios` (
  `usuario_id` int(11) NOT NULL,
  `usuario_nombre` varchar(200) NOT NULL,
  `usuario_password` varchar(90) NOT NULL,
  `usuario_email` varchar(200) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT;

INSERT INTO `usuarios` (`usuario_id`, `usuario_nombre`, `usuario_password`, `usuario_email`) VALUES
(1, 'admin', '$2a$10$0FHEQ5/cplO3eEKillHvh.y009Wsf4WCKvQHsZntLamTUToIBe.fG', 'user@gmail.com');

ALTER TABLE `login_token`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `usuarios`
  ADD PRIMARY KEY (`usuario_id`);


ALTER TABLE `login_token`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

ALTER TABLE `usuarios`
  MODIFY `usuario_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

2. Fichero «index.php»

Este fichero contendrá el formulario para realizar el login

      <form action="" method="post" id="frmLogin">
        <div class="error-mensaje">
          <?php if(isset($mensaje)) { echo $mensaje; } ?>
        </div>
        <div class="form-group">
          <label for="usuario">Usuario</label>
          <input name="usuario_nombre" type="text" value="<?php if(isset($_COOKIE["login_usuario"])) { echo $_COOKIE["login_usuario"]; } ?>" class="form-control">
        </div>
        <div class="form-group">
          <label for="password">Contraseña</label>
          <input name="usuario_password" type="password" value="<?php if(isset($_COOKIE["usuario_password"])) { echo $_COOKIE["usuario_password"]; } ?>" class="form-control">
        </div>
        <div class="form-check">
          <input type="checkbox" name="remember" id="remember" <?php if(isset($_COOKIE["login_usuario"])) { ?> checked
<?php } ?>  class="form-check-input"/>
          <label for="remember-me">Recordarme</label>
        </div>
        <div class="form-group">
          <input type="submit" name="login" value="Iniciar Sesión"
                class="btn btn-primary">
        </div>
      </form>

1. Fichero «PanelControl.php»

<?php 
session_start();

require_once "ValidacionSesion.php";

if(!$isLoggedIn) {
    header("Location: ./");
}
?>
<!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="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>Login seguro usando PHP Session y Cookies - BaulPHP</title>

<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/sticky-footer-navbar.css" rel="stylesheet">
<style>
.error-message {
    text-align: center;
    color: #FF0000;
}
</style>
</head>

<body>
<header> 
  <!-- Fixed navbar -->
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="#">BaulPHP</a>
    <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 mr-auto">
        <li class="nav-item active"> <a class="nav-link" href="index.php">Inicio <span class="sr-only">(current)</span></a> </li>
      </ul>
      <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Buscar" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Busqueda</button>
      </form>
    </div>
  </nav>
</header>

<!-- Begin page content -->

<div class="container">
  <h3 class="mt-5">Login seguro usando PHP Session y Cookies</h3>
  <hr>
  <div class="row">
    <div class="col-12 col-md-12"> 
      <!-- Contenido -->


<div class="alert alert-primary" role="alert">
  ¡Has iniciado sesión correctamente!. <a href="Salir.php">Salir</a>
</div>

      <!-- Fin Contenido --> 
    </div>
  </div>
  <!-- Fin row --> 
  
</div>
<!-- Fin container -->
<footer class="footer">
  <div class="container"> <span class="text-muted">
    <p>Códigos <a href="https://www.baulphp.com/" target="_blank">BaulPHP</a></p>
    </span> </div>
</footer>
<script src="assets/jquery-1.12.4-jquery.min.js"></script> 
<script src="assets/jquery.validate.min.js"></script> 
<script src="assets/ValidarRegistro.js"></script> 
<!-- Bootstrap core JavaScript
    ================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 

<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery-slim.min.js"><\/script>')</script> 
<script src="assets/js/vendor/popper.min.js"></script> 
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

4. Cerrar Sesión «Salir.php»

La finalidad de este fichero es borrar el recordado login con sesión y cookies.

En el panel de control, contiene un mensaje de bienvenida con el vínculo de cierre de sesión. Al hacer clic en el enlace de cierre de sesión, el estado de inicio de sesión recordado será desactivado de la sesión php y cookies.

<?php
session_start();

require "Clases.php";
$util = new Util();

//Cerrar Session
$_SESSION["usuario_id"] = "";
session_destroy();

// Borrar cookies
$util->clearAuthCookie();

header("Location: ./");
?>

CONCLUSIÓN

La utilización de este método es requerido por algunos sistemas a pedido de usuarios finales. Sin embargo, esto solucionan la problemática del cierre de sesión automática.

Porque este método si realizas un login y marcas la opción recordarme estarás en sesión de forma permanente sin que se cierre la sesión con el sistema.

DESCARGA