{"id":1350,"date":"2017-11-23T15:44:42","date_gmt":"2017-11-23T21:44:42","guid":{"rendered":"http:\/\/naps.com.mx\/blog\/?p=1350"},"modified":"2021-12-12T18:37:16","modified_gmt":"2021-12-13T00:37:16","slug":"sistema-logueo-de-usuarios-php-mysql","status":"publish","type":"post","link":"https:\/\/naps.com.mx\/blog\/sistema-logueo-de-usuarios-php-mysql\/","title":{"rendered":"Sistema de logueo de usuarios en PHP y MySQL"},"content":{"rendered":"<p><em><strong>Te presento un m\u00e9todo muy simplificado para realizar un sistema de logueo de usuarios en PHP y MySQL. Para esto utilizamos: sesiones en PHP, contrase\u00f1as encriptadas, redireccionamiento de p\u00e1ginas, as\u00ed como consultas SQL.<\/strong><\/em><\/p>\n<p><!--more--><\/p>\n<h2>M\u00f3dulos en un sistema de logueo de usuarios<\/h2>\n<p>Los m\u00f3dulos que se requieren para un sistema de logueo de usuarios son:<\/p>\n<ul>\n<li>M\u00f3dulo de altas de usuarios<\/li>\n<li>P\u00e1gina de ingreso<\/li>\n<li>Script de logueo<\/li>\n<li>P\u00e1ginas protegidas (con acceso solo para usuarios logueados)<\/li>\n<li>Script para cerrar sesi\u00f3n.<\/li>\n<\/ul>\n<ol>\n<li>\n<h2>Elaboraci\u00f3n de la plantilla HTML<\/h2>\n<\/li>\n<\/ol>\n<p>Utilizamos HTML y Bootstrap para realizar una p\u00e1gina responsive. El c\u00f3digo que utilizaremos en este ejemplo es el siguiente:<\/p>\n<pre class=\"lang:default decode:true\">&lt;!doctype html&gt;\r\n&lt;html lang=\"es\"&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"&gt;\r\n    &lt;meta name=\"description\" content=\"Art\u00edculos sobre tecnolog\u00eda\"&gt;\r\n    &lt;meta name=\"author\" content=\"\"&gt;\r\n    &lt;link rel=\"icon\" href=\"favicon.ico\"&gt;\r\n    &lt;title&gt;Tecnolog\u00eda para todos&lt;\/title&gt;\r\n    &lt;link href=\"..\/css\/bootstrap.min.css\" rel=\"stylesheet\"&gt;\r\n    &lt;link href=\"..\/css\/justified-nav.css\" rel=\"stylesheet\"&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div class=\"container\"&gt;\r\n      &lt;!-- Header --&gt;\r\n      &lt;header class=\"masthead\"&gt;\r\n        &lt;h3 class=\"text-muted\"&gt;Tecnolog\u00eda para todos!!&lt;\/h3&gt;\r\n        &lt;nav class=\"navbar navbar-expand-md navbar-light bg-light rounded mb-3\"&gt;\r\n          &lt;button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarCollapse\" aria-controls=\"navbarCollapse\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"&gt;\r\n            &lt;span class=\"navbar-toggler-icon\"&gt;&lt;\/span&gt;\r\n          &lt;\/button&gt;\r\n          &lt;div class=\"collapse navbar-collapse\" id=\"navbarCollapse\"&gt;\r\n            &lt;ul class=\"navbar-nav text-md-center nav-justified w-100\"&gt;\r\n              &lt;li class=\"nav-item active\"&gt;\r\n                &lt;a class=\"nav-link\" href=\"index.php\"&gt;Inicio &lt;span class=\"sr-only\"&gt;(current)&lt;\/span&gt;&lt;\/a&gt;\r\n              &lt;\/li&gt;\r\n              &lt;li class=\"nav-item\"&gt;\r\n                &lt;a class=\"nav-link\" href=\"#\"&gt;M\u00f3viles&lt;\/a&gt;\r\n              &lt;\/li&gt;\r\n              &lt;li class=\"nav-item\"&gt;\r\n                &lt;a class=\"nav-link\" href=\"#\"&gt;Internet&lt;\/a&gt;\r\n              &lt;\/li&gt;\r\n              &lt;li class=\"nav-item\"&gt;\r\n                &lt;a class=\"nav-link\" href=\"#\"&gt;Electr\u00f3nica&lt;\/a&gt;\r\n              &lt;\/li&gt;\r\n              &lt;li class=\"nav-item\"&gt;\r\n                &lt;a class=\"nav-link\" href=\"#\"&gt;Qui\u00e9nes somos&lt;\/a&gt;\r\n              &lt;\/li&gt;\r\n              &lt;li class=\"nav-item dropdown\"&gt;\r\n                &lt;a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"dropdown01\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"&gt;Mi cuenta&lt;\/a&gt;\r\n                &lt;div class=\"dropdown-menu\" aria-labelledby=\"dropdown01\"&gt;\r\n                  &lt;a class=\"dropdown-item\" href=\"#\"&gt;Ingresar&lt;\/a&gt;\r\n                  &lt;a class=\"dropdown-item\" href=\"login\/usuario_nuevo.php\"&gt;Crear cuenta&lt;\/a&gt;\r\n                  \r\n                &lt;\/div&gt;\r\n              &lt;\/li&gt;\r\n            &lt;\/ul&gt;\r\n          &lt;\/div&gt;\r\n        &lt;\/nav&gt;\r\n      &lt;\/header&gt;\r\n      &lt;!-- \/ Header --&gt;\r\n            \r\n      &lt;!-- Site footer --&gt;\r\n      &lt;footer class=\"footer\"&gt;\r\n        &lt;p&gt;&amp;copy; TpTodos 2017&lt;\/p&gt;\r\n      &lt;\/footer&gt;\r\n\r\n    &lt;\/div&gt; &lt;!-- \/container --&gt;\r\n\r\n\r\n    &lt;!-- Bootstrap core JavaScript\r\n    ================================================== --&gt;\r\n\r\n    &lt;script src=\"..\/js\/jquery-3.2.1.slim.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script&gt;window.jQuery || document.write('&lt;script src=\"js.jquery.min.js\"&gt;&lt;\\\/script&gt;')&lt;\/script&gt;\r\n    &lt;script src=\"..\/js\/popper.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"..\/js\/bootstrap.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Para que funcione adecuadamente deber\u00e1s crear dos carpetas: css y js (para contener los archivos css y javascript).<\/p>\n<p>Puedes complementar con cualquier contenido que desees. Un ejemplo de c\u00f3mo se ver\u00eda es el siguiente:<\/p>\n<div id=\"attachment_1359\" style=\"width: 2294px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2017\/11\/plantilla_logueo-de-usuario.tiff\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1359\" class=\"wp-image-1359 size-full\" title=\"Sistema de logueo de usuarios\" src=\"http:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2017\/11\/plantilla_logueo-de-usuario.tiff\" alt=\"Plantilla Sistema de logueo de usuarios\" width=\"2284\" height=\"1280\" \/><\/a><p id=\"caption-attachment-1359\" class=\"wp-caption-text\">Sistema de logueo de usuarios<\/p><\/div>\n<h2>2. Crear el formulario para dar de alta a los usuarios.<\/h2>\n<p>El siguiente formulario solicita los datos del usuario: nombre, apellido, usuario (ser\u00e1 el nombre de usuario con el que se loguear\u00e1) y password.<\/p>\n<pre class=\"lang:default decode:true \">          &lt;h2&gt;Crea tu cuenta&lt;\/h2&gt;                 \r\n          &lt;form action=\"usuario_guardar.php\" class=\"form-horizontal\"&gt;\r\n            &lt;div class=\"form-group\"&gt;  \r\n              &lt;label for=\"nombre\" class=\"sr-only\"&gt;Nombre&lt;\/label&gt;\r\n              &lt;input type=\"text\" id=\"nombre\" name=\"nombre\" class=\"col-md-6\" placeholder=\"Nombre\"&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div class=\"form-group\"&gt;  \r\n              &lt;label for=\"direccion\" class=\"sr-only\"&gt;Apellidos&lt;\/label&gt;\r\n              &lt;input type=\"text\" id=\"apellidos\" name=\"apellidos\" class=\"col-md-6\" placeholder=\"Apellidos\"&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div class=\"form-group\"&gt;  \r\n              &lt;label for=\"ocupacion\" class=\"sr-only\"&gt;Password&lt;\/label&gt;\r\n              &lt;input type=\"password\" id=\"password\" name=\"password\" class=\"col-md-6\" placeholder=\"Password\"&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div class=\"form-group\"&gt;  \r\n              &lt;label for=\"cp\" class=\"sr-only\"&gt;Usuario&lt;\/label&gt;\r\n              &lt;input type=\"text\" id=\"usuario\" name=\"usuario\" class=\"col-md-6\" placeholder=\"Usuario\"&gt;\r\n            &lt;\/div&gt;\r\n            &lt;div class=\"col-md-6 col-md-offset-4\"&gt;\r\n              &lt;button type=\"submit\" class=\"btn btn-primary\"&gt;\r\n                Guardar\r\n              &lt;\/button&gt;\r\n              &lt;a href=\"index.html\" class=\"btn btn-danger\"&gt; Cancelar &lt;\/a&gt;\r\n            &lt;\/div&gt;\r\n          &lt;\/form&gt;\r\n<\/pre>\n<p>Se ver\u00eda as\u00ed:<\/p>\n<div id=\"attachment_1357\" style=\"width: 1278px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2017\/11\/ingresar_logueo-de-usuarios.tiff\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1357\" class=\"wp-image-1357 size-full\" title=\"Logueo de usuarios - Crear una cuenta\" src=\"http:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2017\/11\/ingresar_logueo-de-usuarios.tiff\" alt=\"Logueo de usuarios - Crear una cuenta\" width=\"1268\" height=\"678\" \/><\/a><p id=\"caption-attachment-1357\" class=\"wp-caption-text\">Formulario para crear una cuenta<\/p><\/div>\n<h2>3. Crear el script para guardar los usuarios<\/h2>\n<p>Se necesitar\u00e1 una BD con los mismos campos antes mencionados: nombre, apellido, usuario, password, solo que incluiremos adem\u00e1s el campo id como llave primaria y en autoincrement, y el campo <strong>nivel<\/strong> (con valores 1, 2,3 que representan un usuario com\u00fan, un usuario colaborador, y un usuario administrador, respectivamente), y un campo <strong>activo<\/strong> (que tendr\u00e1 1 si el usuario est\u00e1 activo y 0 si su cuenta est\u00e1 desactivada).<\/p>\n<p>La estructura de la base de datos se ver\u00eda as\u00ed:<\/p>\n<p><a href=\"http:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2017\/11\/estructura-de-la-base-de-datos.tiff\"><img decoding=\"async\" class=\"alignnone size-full wp-image-1365\" src=\"http:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2017\/11\/estructura-de-la-base-de-datos.tiff\" alt=\"Estructura de la base de datos del Sistema de Logueo de Usuarios\" \/><\/a><\/p>\n<p>El script php que guarda los datos es el siguiente:<\/p>\n<pre class=\"lang:default decode:true\">&lt;?php\r\n\r\nrequire(\"..\/conectar.php\");\r\n$sql = sprintf(\"insert into usuarios (nombre, apellido, usuario, password)\r\n        values ('%s', '%s', '%s', '%s') \",\r\n        $_GET['nombre'],\r\n        $_GET['apellido'],\r\n        $_GET['usuario'],\r\n        sha1($_GET['password']));\r\n\r\n\/\/echo $sql;\r\n$r = mysqli_query($con, $sql);\r\necho $r;\r\n\r\n?&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>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\u00f1o mayor a 40 espacios.<\/p>\n<blockquote><p>Para encriptar una contrase\u00f1a o cualquier otro campo utilice la funci\u00f3n <strong>sha1<\/strong><\/p><\/blockquote>\n<p>Utiliza un archivo de conexi\u00f3n que es el siguiente:<\/p>\n<pre class=\"lang:default decode:true \">&lt;?php \r\n\r\n$user = 'xxx';\r\n$password = 'xxx';\r\n$db = 'BaseDatos';\r\n$host = 'localhost';\r\n$con = mysqli_connect($host, $user, $password, $db);\r\n\r\n?&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>Deber\u00e1 sustituir los nombres de Base de Datos, Usuario y Contrase\u00f1a por los que utilice su sistema.<\/p>\n<h2>4. Crear el formulario para el logueo de usuarios<\/h2>\n<p>Se crea un formulario que \u00fanicamente solicite: usuario y password.<\/p>\n<pre class=\"lang:default decode:true \">&lt;h2&gt;Ingresar&lt;\/h2&gt;        \r\n\r\n\r\n&lt;form action=\"usuario_loguear.php\" class=\"form-horizontal\" method = \"post\"&gt;\r\n  \r\n &lt;div class=\"form-group\"&gt;  \r\n    &lt;label for=\"cp\" class=\"sr-only\"&gt;Usuario&lt;\/label&gt;\r\n    &lt;input type=\"text\" id=\"usuario\" name=\"usuario\" class=\"col-md-6\" placeholder=\"Usuario\"&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"form-group\"&gt;  \r\n    &lt;label for=\"ocupacion\" class=\"sr-only\"&gt;Password&lt;\/label&gt;\r\n    &lt;input type=\"password\" id=\"password\" name=\"password\" class=\"col-md-6\" placeholder=\"Password\"&gt;\r\n  &lt;\/div&gt;\r\n  \r\n  &lt;div class=\"col-md-6 col-md-offset-4\"&gt;\r\n    &lt;button type=\"submit\" class=\"btn btn-primary\"&gt;\r\n      Ingresar\r\n    &lt;\/button&gt;\r\n    &lt;a href=\"index.html\" class=\"btn btn-danger\"&gt; Cancelar &lt;\/a&gt;\r\n    \r\n  &lt;\/div&gt;\r\n&lt;\/form&gt;<\/pre>\n<p>Se ver\u00eda as\u00ed:<\/p>\n<div id=\"attachment_1358\" style=\"width: 512px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2017\/11\/logueo-de-usuarios.tiff\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1358\" class=\"wp-image-1358 size-full\" title=\"Formulario de logueo de usuarios\" src=\"http:\/\/naps.com.mx\/blog\/wp-content\/uploads\/2017\/11\/logueo-de-usuarios.tiff\" alt=\"Formulario de logueo de usuarios\" width=\"502\" height=\"412\" \/><\/a><p id=\"caption-attachment-1358\" class=\"wp-caption-text\">Formulario de logueo de usuarios<\/p><\/div>\n<h2>5. Elaboraci\u00f3n del script de logueo de usuarios<\/h2>\n<p>El siguiente c\u00f3digo realiza lo siguiente:<\/p>\n<ol>\n<li>Se conecta a la BD<\/li>\n<li>Realiza una consulta buscando un usuario y un pasword como los que se le proporcionaron.<\/li>\n<li>Si encuentra por lo menos un usuario, se crean las variables de sesi\u00f3n que vayamos a necesitar.<\/li>\n<li>Utilizando el campo nivel, el script redirigir\u00e1 a la p\u00e1gina correspondiente del usuario com\u00fan, usuario colaborador o al panel del administrador.<\/li>\n<li>En caso de que no encuentre un usuario con el nombr y la contrase\u00f1a proporcionados, redirigir\u00e1 a una p\u00e1gina de error.<\/li>\n<\/ol>\n<pre class=\"lang:default decode:true \">&lt;?php\r\nsession_start();\r\nrequire(\"..\/conectar.php\");\r\n$sql = sprintf(\"select * from usuarios \r\n\t\t\t\twhere usuario='%s' and password = '%s'\",\r\n\t\t\t\t$_POST['usuario'],\r\n\t\t\t\tsha1($_POST['password']));\r\n$query = mysqli_query($con, $sql);\r\n$fila = mysqli_fetch_assoc($query);\r\n$encontrados = mysqli_num_rows($query);\r\n\r\nif ($encontrados &gt;= 1){\r\n\t$_SESSION['nombre'] = $fila['nombre'];\r\n\t$_SESSION['usuario'] = $fila['usuario'];\r\n\t$_SESSION['nivel'] = $fila['nivel'];\r\n\tif ($_SESSION['nivel']==3){\r\n\t\theader('Location:panel_admin.php');\t\r\n\t}\r\n\telse if ($_SESSION['nivel']==2){\r\n\t\theader('Location:panel_colaborador.php');\t\r\n\t}\r\n\telse if ($_SESSION['nivel']==1){\r\n\t\theader('Location:panel_usuario.php');\t\r\n\t}\r\n}\r\nelse{\r\n\theader('Location:error_logueo.php');\r\n}\r\n\r\n?&gt;<\/pre>\n<blockquote><p>La instrucci\u00f3n session_start() debe estar al comienzo del script<\/p>\n<p>$_SESSION se utiliza para almacenar las variables de sesi\u00f3n<\/p>\n<p>Una variable de sesi\u00f3n mantiene su valor al salir de la p\u00e1gina actual y entrar a otra que pertenezca a la misma sesi\u00f3n.<\/p>\n<p>Si la contrase\u00f1a est\u00e1 encriptada, debe volver a encriptarla cuando realice la consulta.<\/p>\n<p>Para hacer un redireccionamiento utilice la instrucci\u00f3n header(&#8216;Location:&#8217;) indicando la url hacia la que debe dirigirse.<\/p><\/blockquote>\n<h2>6. Crear una p\u00e1gina protegida<\/h2>\n<p>Las p\u00e1ginas que desee proteger deber\u00e1n incluir el siguiente c\u00f3digo:<\/p>\n<pre class=\"lang:default decode:true \">&lt;?php\r\nsession_start();\r\nif ($_SESSION['nivel']!=3){\r\n  header('Location:usuario_ingresar.php');\r\n}\r\n?&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>Por ejemplo, el panel del administrador deber\u00eda incluirlo verificando que el usuario logueado tenga un nivel 3.<\/p>\n<h2>7. Script para cerrar la sesi\u00f3n<\/h2>\n<p>Es el m\u00e1s sencillo de todos, destruye la sesi\u00f3n y redirige a la p\u00e1gina que uno quiera, por ejemplo, la principal o la p\u00e1gina de ingreso.<\/p>\n<pre class=\"lang:default decode:true \">&lt;?php\r\nsession_start();\r\nsession_destroy();\r\nheader('Location:..\/index.php');\r\n?&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>Espero que este ejemplo te permita crear un sistema de logueo a tu medida. Cualquier duda deja un comentario.<\/p>\n<h2>Referencias<\/h2>\n<ol>\n<li>Beati (2015). Creaci\u00f3n de p\u00e1ginas Web din\u00e1micas. Editorial Alfaomega. [<a href=\"https:\/\/books.google.com.mx\/books?id=IqywDAAAQBAJ&amp;printsec=frontcover&amp;dq=php&amp;hl=es-419&amp;sa=X&amp;ved=0ahUKEwiHhM6A1dXXAhUZ0IMKHXxnCNMQ6AEILTAB#v=onepage&amp;q=php&amp;f=false\">Enlace en Google Books]<\/a>.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Te presento un m\u00e9todo muy simplificado para realizar un sistema de logueo de usuarios en PHP y MySQL. Para esto utilizamos: sesiones en PHP, contrase\u00f1as encriptadas, redireccionamiento de p\u00e1ginas, as\u00ed como consultas SQL.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"amp_status":"","footnotes":""},"categories":[171],"tags":[86,85,221,31],"class_list":["post-1350","post","type-post","status-publish","format-standard","hentry","category-programacion-web","tag-curso-php","tag-ejercicios-php","tag-sesiones-php","tag-sha"],"_links":{"self":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/comments?post=1350"}],"version-history":[{"count":17,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1350\/revisions"}],"predecessor-version":[{"id":1385,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1350\/revisions\/1385"}],"wp:attachment":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/media?parent=1350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/categories?post=1350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/tags?post=1350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}