Ejemplo simple de login y sesiones con PHP
En este post explicaré las bases para trabajar con un login y sesiones en PHP. Será un ejemplo muy básico para principiantes, lo que haremos será:
En resumen, será un tutorial para iniciar y cerrar sesión en PHP, además de proteger páginas; todo esto perfectamente comentado y explicado para los principiantes.
Específicamente hablando de PHP (y dejando las definiciones formales), las sesiones nos permiten persistir los datos a través de distintas páginas; incluso si las mismas se refrescan o tienen otro nombre.
Por ejemplo, puede que iniciemos sesión en login.php y dejemos un valor en $_SESSION para recuperarlo más tarde en secreta.php (una página secreta)
PHP nos pone todo fácil a través de session_start, $_SESSION y session_destroy.
Claro que internamente PHP almacena las sesiones en archivos de texto, verifica las cookies para saber si hay determinado usuario en el sistema y también manda los encabezados HTTP con una cookie llamada PHPSESSID pero esa es otra historia larga y complicada.
Al final podremos tener un formulario simple en donde el usuario escribe su usuario y contraseña; el sistema verifica si son correctos y en caso de que sí, lo redirecciona a una página secreta o protegida.
Por cierto, será un ejemplo básico y no vamos a meternos con estilos o esas cosas que solamente confunden al lector; ya lo dije, será un ejemplo básico, sencillo y funcional de cómo iniciar sesión con PHP.
El código es open source como la mayoría de veces, aquí está el repositorio. Te invito a seguirme en GitHub para que estés al tanto de mis actualizaciones de programas y software que hago.
Si en el futuro hago cambios, los haré en el repositorio para llevar un correcto control de versiones.
Puedes probar el ejemplo justo aquí, las credenciales son parzibyte y hunter2.
Bueno, creo que ya hablamos lo suficiente. Es hora de comenzar a ver cómo iniciar sesión, guardar datos en la sesión y restringir páginas.
Para que el usuario escriba sus credenciales debemos proporcionar una interfaz, en este caso es el formulario HTML y se ve así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ejemplo simple de login con PHP | parzibyte.me</title>
</head>
<body>
<!-- Se va a procesar en login.php y se enviará por POST, no por GET-->
<form action="login.php" method="post">
<!--
Nota: el atributo name es importante, pues lo vamos a recibir de esa manera
en PHP
-->
<input name="usuario" type="text" placeholder="Escribe tu nombre de usuario">
<br><br>
<input name="palabra_secreta" type="password" placeholder="Contraseña">
<br><br>
<!--Lo siguiente envía el formulario-->
<input type="submit" value="Iniciar sesión">
</form>
</body>
</html>Lo que importa aquí es el name de los input, pues los vamos a recibir así en PHP. El action importa, pues es a donde se enviarán los datos del formulario y en este caso es a login.php.
El método o method también es importante, puede ser post o get, pero cuando estemos tratando con datos como contraseñas y usuarios (algo confidencial) debemos usar post; de esta forma los datos viajan en el cuerpo de la petición, no en la URL.
El botón que está al final del formulario se encarga de enviar el formulario. Espero que los comentarios sean suficientes.
Los datos se van a enviar al archivo login.php, ahí los vamos a recibir en $_POST (bueno, de hecho PHP se encarga de leer la petición HTTP y poner todo dentro del arreglo).
Comparamos el usuario y la contraseña y en caso de que coincidan, iniciamos sesión son session_start(), más tarde se le ponen datos a $_SESSION (este es el paso más importante) y redireccionamos a la página secreta.
<?php
# Las claves de acceso, ahorita las ponemos aquí
# y en otro ejercicio las ponemos en una base de datos
$usuario_correcto = "parzibyte";
$palabra_secreta_correcta = "hunter2";
/*
Para leer los datos que fueron enviados al formulario,
accedemos al arreglo superglobal llamado $_POST en PHP, y
para obtener un valor accedemos a $_POST["clave"] en donde
clave es el "name" que le dimos al input
*/# Nota: no estamos haciendo validaciones
$usuario = $_POST["usuario"];
$palabra_secreta = $_POST["palabra_secreta"];
# Luego de haber obtenido los valores, ya podemos comprobar:
if ($usuario === $usuario_correcto && $palabra_secreta === $palabra_secreta_correcta) {
# Significa que coinciden, así que vamos a guardar algo
# en el arreglo superglobal $_SESSION, ya que ese arreglo
# "persiste" a través de todas las páginas
# Iniciar sesión para poder usar el arreglo
session_start();
# Y guardar un valor que nos pueda decir si el usuario
# ya ha iniciado sesión o no. En este caso es el nombre
# de usuario
$_SESSION["usuario"] = $usuario;
# Luego redireccionamos a la página "Secreta"
header("Location: secreta.php");
} else {
# No coinciden, así que simplemente imprimimos un
# mensaje diciendo que es incorrecto
echo "El usuario o la contraseña son incorrectos";
}Para redireccionar mandamos un encabezado que dice Location: secreta.php
Lo dije hace un momento y lo digo de nuevo: la parte crucial es iniciar sesión y establecer un valor en $_SESSION para que luego se pueda leer desde otros lugares.
Por cierto, no estamos obligados a guardar únicamente un valor, podemos guardar muchos, y también guardar valores complejos.
Bueno ahora veamos la página secreta o protegida. En esta página verificamos si hay algo en $_SESSION en la posición usuario, en caso de que no, salimos directamente del script.
Es importante notar que, en cualquier lugar, para poder usar a $_SESSION, primero debemos llamar a session_start. La página protegida está así:
<?php
# Si no entiendes el código, primero mira a login.php
# Iniciar sesión para usar $_SESSION
session_start();
# Y ahora leer si NO hay algo llamado usuario en la sesión,
# usando empty (vacío, ¿está vacío?)
# Recomiendo: https://parzibyte.me/blog/2018/08/09/isset-vs-empty-en-php/
if (empty($_SESSION["usuario"])) {
# Lo redireccionamos al formulario de inicio de sesión
header("Location: formulario.html");
# Y salimos del script
exit();
}
# No hace falta un else, pues si el usuario no se loguea, todo lo de abajo no se ejecuta
echo "Soy un mensaje secreto";
?>
<!-- Por cierto, también se puede usar HTML como en todos los scripts de PHP-->
<p>
Hola mundo, soy un párrafo HTML que solamente pueden ver los usuarios logueados
</p>
<!-- Y aprovechando, le indicamos al usuario un enlace para salir-->
<a href="logout.php">Cerrar sesión</a>De esa manera solamente los usuarios autenticados pueden ver lo que haya en ella. Esto lo podemos replicar en otros lugares dependiendo de la aplicación que estemos creando.
Para cerrar sesión en PHP primero se debe llamar a session_start() y luego a session_destroy(), lo que destruirá lo que hay en $_SESSION.
Aquí el script:
<?php
# Si no entiendes esto, primero mira a login.php
# Iniciar sesión (sí, aunque la vamos a destruir, primero se debe iniciar)
session_start();
# Después, destruirla
# Eso va a eliminar todo lo que haya en $_SESSION
session_destroy();
# Finalmente lo redireccionamos al formulario
header("Location: formulario.html");Así es como terminamos este tutorial.
Visita el repositorio, clónalo o descárgalo como zip, luego instala PHP (también puedes hacerlo en Android) y prueba el código.
Bueno, cabe aclarar que nunca debes usar este ejemplo en la vida real; tiene muchos agujeros de seguridad y no hace validaciones. Una vez que lo hayas entendido puedes ver otros tutoriales; pronto traeré la segunda parte en donde registramos usuarios y comprobamos credenciales con bases de datos.
Recientemente he creado un ejemplo avanzado en donde además del login con MySQL se agrega un límite de intentos.
Mientras tanto, te invito a ver otros relacionados como:
Eso es todo.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.