El uso de las sesiones generadas por PHP se ha puesto muy de moda cuando trabajamos paginas dinámicas con este maravilloso lenguaje, si nos remontamos unos años atrás, se trabajaban con Cookies, lo que representaba un grave agujero de seguridad para el usuario ya que las Cookies se almacenan en la computadora y fácilmente se pueden modificar. Las sesiones de PHP solucionan este problema almacenando los datos en el servidor, disminuyendo la entrega de datos sensibles al usuario.
Montaremos un sistema de login/logout de usuarios, esto lo lograremos trabajando con sesiones en PHP y MySQL. Validaremos primeramente el formulario de forma nativa y posteriormente validaremos con Google reCAPTCHA para proceder al envio de datos en el lado del servidor, confirmaremos que el correo y la contrasena sean correctas en nuestra base de datos, en caso de que no existan mostraremos un error personalizado.
El sistema que haremos en este post es bastante sencillo y cualquier persona puede montarlo en cualquier servidor corriendo MySQL y PHP7, también tocaremos un poco de teoría para dejar en claro todos los conceptos relacionados con el tutorial.
Dentro de nuestra carpeta del proyecto crearemos nuestro index.php, dentro de este archivo colocaremos las dependencias e iniciaremos la sesión del cliente para posteriormente asignarle un nombre.
| <?php | |
| session_start(); | |
| include(‘includes/conexion.php‘); | |
| include(‘includes/sesion.php‘); | |
| $result=mysqli_query($con, «select * from usuarios where correo=’$correo‘«)or die(‘Error en la sesion‘); | |
| $row=mysqli_fetch_array($result); | |
| ?> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=«utf-8«> | |
| <meta http-equiv=«X-UA-Compatible« content=«IE=edge«> | |
| <title>Bienvenido</title> | |
| <link rel=«stylesheet« href=««> | |
| </head> | |
| <body> | |
| <h2>Bienvenido <?php echo $row[‘nombre‘]; ?></h2> | |
| </body> | |
| </html>
|
Lo que acabamos de hacer es crear primeramente una sesión en el servidor, posteriormente hacemos includes de dos archivos, conexion.php que tiene nuestra conexión a la base de datos y sesion.php en donde controlaremos la sesión creada. Opcionalmente traemos datos de nuestra base de datos con una query con la extensión de PHP, mysqli.
Posteriormente crearemos nuestra carpeta includes en donde almacenaremos nuestros archivos del sistema.
CONEXION.PHP
| <?php | |
| $con = mysqli_connect(«localhost«,«user«,«pass«,«base de datos«); | |
| // checamos la conexion | |
| if (mysqli_connect_errno()) | |
| { | |
| echo «Error al conectarse con MYSQL: « . mysqli_connect_error(); | |
| } | |
| ?> |
No hace falta decir mucho sobre este archivo, lo que hacemos es establecer datos para que MySQLi pueda interpretarlos y procesarlos para hacer la conexión a nuestra base de datos. En la segunda linea comprobamos nuestra conexión, si todo está bien no nos aparecerá nada en pantalla.
SESION.PHP
| <?php | |
| // Iniciamos la sesion | |
| session_start(); | |
| //// Verifica si la variable de sesión SESS_MEMBER_ID está presente o no | |
| if (!isset($_SESSION[‘correo‘]) || (trim($_SESSION[‘correo‘]) == ‘‘)) { | |
| header(«location: entrar.php«); | |
| exit(); | |
| } | |
| $correo=$_SESSION[‘correo‘]; | |
| ?> |
En este archivo verificaremos la sesión del usuario asignándole un identificador, yo lo hice mediante el correo que está almacenado en la base de datos. En caso de que no se cree correctamente la sesión enviaremos los headers a un archivo llamado entrar.php en donde el usuario tendrá que hacer el login para ingresar en cualquier pagina de nuestro sitio.
Esto es lo que hemos llevado hasta ahora:
Hemos creado nuestro index.php en donde incluimos los archivos necesarios para conectarnos a la base de datos (conexion.php) junto con nuestro archivo sesion.phpen donde tenemos nuestro código que verifica si la variable $_SESION ha sido creada, posteriormente si es TRUE lo dirigimos a nuestro index.php con los datos asignados, si es FALSE lo dirigimos a entrar.php en donde el usuario tendrá que loggearse para entrar.
BASE DE DATOS
Para que nuestro sistema de login funcione necesitamos crear la base de datos, a causa de ahorrar tiempo y explicaciones te pegare la consulta que tienes que hacer a tu servidor, lo puedes hacer mediante phpmyadmin o directamente en tu consola.
| — phpMyAdmin SQL Dump | |
| — version 4.5.4.1deb2ubuntu2 | |
| — http://www.phpmyadmin.net | |
| — | |
| — Servidor: localhost:3000 | |
| — Tiempo de generación: 09-12-2017 a las 13:44:51 | |
| — Versión del servidor: 5.7.20 | |
| — Versión de PHP: 7.1.12-2+ubuntu16.04.1+deb.sury.org+2 | |
| SET SQL_MODE = «NO_AUTO_VALUE_ON_ZERO«; | |
| SET time_zone = «+00:00«; | |
| /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; | |
| /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; | |
| /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; | |
| /*!40101 SET NAMES utf8mb4 */; | |
| — | |
| — Base de datos: `tecgurus` | |
| — | |
| — ——————————————————– | |
| — | |
| — Estructura de tabla para la tabla `usuarios` | |
| — | |
| CREATE TABLE `usuarios` ( | |
| `id` int(99) NOT NULL, | |
| `nombre` varchar(300) NOT NULL, | |
| `correo` varchar(300) NOT NULL, | |
| `password` varchar(450) NOT NULL | |
| ) ENGINE=InnoDB DEFAULT CHARSET=latin1; | |
| — | |
| — Volcado de datos para la tabla `usuarios` | |
| — | |
| INSERT INTO `usuarios` (`id`, `nombre`, `correo`, `password`) VALUES | |
| (1, ‘tecgurus‘, ‘tecgurus@tecgurus.net‘, ‘fe01ce2a7fbac8fafaed7c982a04e229‘); | |
| — | |
| — Índices para tablas volcadas | |
| — | |
| — | |
| — Indices de la tabla `usuarios` | |
| — | |
| ALTER TABLE `usuarios` | |
| ADD PRIMARY KEY (`id`); | |
| — | |
| — AUTO_INCREMENT de las tablas volcadas | |
| — | |
| — | |
| — AUTO_INCREMENT de la tabla `usuarios` | |
| — | |
| ALTER TABLE `usuarios` | |
| MODIFY `id` int(99) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3; | |
| /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; | |
| /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; | |
| /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; |
Posterior a la consulta, checa que todo está bien entrando en tu base de datos, debería aparecer una tabla llamada usuarios.
Datos de acceso por default:
Correo: tecgurus@tecgurus.net
Contraseña: tecgurus
Ahora solo bastara crear nuestro archivo entrar.php en nuestra carpeta de raíz del proyecto.
Como te mencione al principio, nuestro sistema estará protegido por Google reCAPTCHA, lo incluiremos en este archivo a causa de facilidad, pero tu puedes incluirlo en un archivo totalmente independiente.
| <?php session_start(); ?> | |
| <?php include(‘includes/conexion.php‘); ?> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=«utf-8«> | |
| <meta http-equiv=«X-UA-Compatible« content=«IE=edge«> | |
| <title>Entrar</title> | |
| <meta name=«viewport« content=«width=device-width, initial-scale=1, shrink-to-fit=no«> | |
| <link rel=«stylesheet« href=«https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css« integrity=«sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb« crossorigin=«anonymous«> | |
| </head> | |
| <body> | |
| <nav class=«navbar navbar-expand-lg navbar-dark bg-dark«> | |
| <div class=«container«> | |
| <button class=«navbar-toggler« type=«button« data-toggle=«collapse« data-target=«#navbarTogglerDemo03« aria-controls=«navbarTogglerDemo03« aria-expanded=«false« aria-label=«Toggle navigation«> | |
| <span class=«navbar-toggler-icon«></span></button> | |
| <a class=«navbar-brand« href=«#«><img src=«https://gabrielchavez.me/wp-content/uploads/2017/08/favicon.png« width=«30« height=«30« class=«d-inline-block align-top« alt=««></a> | |
| <div class=«collapse navbar-collapse« id=«navbarTogglerDemo03«> | |
| <ul class=«navbar-nav mr-auto mt-2 mt-lg-0«> | |
| <li class=«nav-item«> | |
| <a class=«nav-link disabled« href=«#«>Cuenta</a> | |
| </li> | |
| </ul> | |
| <div class=«navbar-right«> | |
| <ul class=«navbar-nav mr-auto mt-2 mt-lg-0«> | |
| <li class=«nav-item«> | |
| <a class=«nav-link« href=«salir.php«>Salir</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class=«container mt-5«> | |
| <div class=«col-md-6«> | |
| <form action=«#« method=«post« role=«form«> | |
| <form> | |
| <div class=«form-group«> | |
| <label>Correo</label> | |
| <input type=«email« class=«form-control« name=«email« placeholder=«Ingresa tu correo«> | |
| </div> | |
| <div class=«form-group«> | |
| <label>Password</label> | |
| <input type=«password« class=«form-control« name=«pass« placeholder=«Ingresa tu Password«> | |
| </div> | |
| <div class=«form-group«> | |
| <div class=«g-recaptcha« data-sitekey=«SITEEEE KEYYYYY«></div> | |
| </div> | |
| <button name=«login« type=«submit« class=«btn btn-primary«>Ingresar</button> | |
| </form> | |
| <?php | |
| require_once «includes/recaptchalib.php«; | |
| $secret = «SECRETTTT KEEEEEY«; | |
| $response = null; | |
| $reCaptcha = new ReCaptcha($secret); | |
| if ($_POST[«g-recaptcha-response«]) { | |
| if (isset($_POST[‘login‘])) | |
| { | |
| $email = mysqli_real_escape_string($con, $_POST[‘email‘]); | |
| $pass = mysqli_real_escape_string($con, md5($_POST[‘pass‘])); | |
| $query = mysqli_query($con, «SELECT * FROM usuarios WHERE password=‘$pass‘ and correo=‘$email‘«); | |
| $row = mysqli_fetch_array($query); | |
| $num_row = mysqli_num_rows($query); | |
| if ($num_row > 0) | |
| { | |
| $_SESSION[‘correo‘]=$row[‘correo‘]; | |
| header(‘location:index.php‘); | |
| } | |
| else | |
| { | |
| echo ‘<div class=»alert alert-warning» role=»alert»>Datos incorrectos!</div>‘; | |
| } | |
| } | |
| }?> | |
| </div> | |
| <div class=«col-md-6«> | |
| </div> | |
| </div> | |
| <script src=‘https://www.google.com/recaptcha/api.js‘></script> | |
| </body> | |
| </html> |
Tenemos dos parametros que necesitamos editar y son data-sitekey=“SITEEEE KEYYYYY“y “SECRETTTT KEEEEEY” en donde colocaremos nuestros datos que nos ofrece la API de Google reCAPTCHA, recordemos registrar nuestro dominio en la API que creemos para que pueda funcionar correctamente.
Lo que hacemos con este archivo es crear toda la información que necesita nuestro sistema mediante un formulario, desde iniciar sesiones hasta enviar parámetros por POST a nuestro sistema.
En la linea 60 de nuestro código tenemos esta parte if (isset($_POST['login'])) encargada de verificar si la variable $_POST con el nombre “login” ha sido creada, en caso de que sea TRUE la respuesta, nuestro código se hará cargo de hacer una query a nuestra base de datos para verificar si los datos ingresados son correctos, en caso contrario tendremos un mensaje de error.
SALIR.PHP
Para poder terminar nuestro pequeño sistema tendremos que crear un ultimo archivo encargado de destruir la sesión creada solamente cuando un usuario acceda al archivo mediante un enlace que le dejamos en un botón. Esto se puede hacer solo con 3 lineas de código.
| <?php | |
| session_start(); | |
| session_destroy(); | |
| header(‘location:entrar.php‘); | |
| ?> |
Manejar este sistema es totalmente fácil, cabe recalcar que es un sistema muy básico.
Si queremos agregar más páginas a nuestro sistema que requieran iniciar sesión solo tenemos que crear un archivo .php y colocar el siguiente código al inicio de nuestro archivo:
| <?php | |
| session_start(); | |
| if (!$_SESSION[‘correo‘]) { | |
| header(‘location: entrar.php‘); | |
| } | |
| ?> |
Con el código anterior nadie podrá ingresar en la pagina si no se ha loggeado correctamente en nuestra pagina entrar.php ya que utilizamos las sesiones que están almacenadas en nuestro servidor.
Trabajar con sesiones en PHP es mucho más seguro que las propias Cookies ya que si recordamos, este tipo de archivos se almacenan en la computadora del cliente lo cual representa una brecha de seguridad ya que pueden ser copiadas y modificadas. Las sesiones de PHP resuelven este problema agregando mayor seguridad almacenando todo en nuestro servidor.
Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.
Como puedo crea mi cuenta propia
Hola buen día, escribeme gguerrero@tecgurus.net
Gracias por el código y la explicación, pero siempre me da usuario incorrecto… la inserción en la BD es correcta, el codigo parece que también es correcto, pero no me logea… he subido una imagen para que veas la BD y el mensaje de login incorrecto…
https://ibb.co/gvHsyX7
Hola buen día, escribeme gguerrero@tecgurus.net
Muy bien explicado amigo
Hola, agradecemos que disfrutes de nuestro contenido. Saludos
¿Es realmente necesario que expliques como hacer el diseño del formulario y no simplemente centrarte en explicar el inicio de sesión?
Personalmente no entiendo nada de tu código.
Hola, algunas personas necesitan un pequeño repaso. Depende del nivel de programación de cada persona también, el articulo se hace con la intención de explicar de la mejor forma posible al lector.Saludos.