Gestión de usuarios con PHP y MySQL

Hola de nuevo (o aspaldiko! como dicen en el país vasco, que vendría a decir Cuanto tiempo..!). Para resarcirme después de tanto tiempo de no publicar nada hoy quiero volver con un artículo potente.

Una cosa que siempre hay que hacer cuando se desarrolla una aplicación que permita el acceso de usuarios es gestionarlos. Puede que haya usuarios con diferentes permisos de acceso o no, pero en cualquier caso hay que implementar un servicio de registro de usuarios, de login e incluso de cambio de contraseña. Esto es lo que quiero proponer en esta entrada que aviso que será extensa. Antes de nada las gracias a codedrynks pues me he basado en su ejemplo de reseteo de passwords para añadir esta funcionalidad en el proyecto que os muestro aquí, si bien lo he modificado para que se adaptase al ejemplo que os planteo. Empecemos por la estructura de archivos de nuestra aplicación.

Estructura de archivos

 

Como podréis observar en la imagen en nuestro proyecto tendremos un directorio llamado control que contendrá los archivos de procesos. Otro de Includes para los archivos que se incluyen en otros como la cabecera y el pie. Y en la raíz del proyecto estarán sueltos el index y el del formularios para cambiar el password. Por supuesto habrá un directorio para los archivos de javascript y otro para los de css propios del proyecto. A parte de estos yo normalmente, en el mismo directorio donde alojo mis proyectos, suelo tener otro llamado dist en el que incluyo los archivos de jquery, bootstrap, plugins y demás que son comunes a todos los proyectos, así que veréis que mis rutas apuntan allí.

Descripción del proyecto

Cuando un usuario hace login (inicia sesión), sus datos son mandados a un archivo que lo procesa. Igual cuando se registra o quiere cambiar su contraseña. En general los archivos con visibles por el usuario se sitúan en la raíz del proyecto y los que no en control. Para este proyecto se necesita una base de datos que almacene los datos de los usuarios. En ella habrá una tabla llamada usuarios en, he decidido que tendrá las columnas id,nombre,email,password,descripción e imagen de avatar. Además tendremos otra tabla que almacenará las solicitudes de cambio de contraseñas. Cuando un usuario no se acuerda de su contraseña (o quiere cambiarla), escribe su nombre y email en un formulario, si este usuario existe en la base de datos se inserta una entrada en esta tabla y se le envía un enlace para acceder a un formulario para hacer el cambio de contraseña.

Excepto el formulario para establecer una nueva contraseña, el resto (login,registro,solicitud de cambio de contraseña..) he decidido hacerlos con modales de Bootstrap.

En principio el único contenido que he creado es una barra de navegación de Bootstrap y varios modales. De manera que este proyecto se pueda incorporar a cualquier otro prácticamente sin ningún cambio. Dado Que la barra de navegación suele estar presente en todos las páginas de un sitio web la he metido en un archivo llamado cabecera.php que luego será incluido en el index y en cualquier otra página que lo necesite. Esta cabecera contendrá desde el doctype hasta el div con la clase row que incluirá el contenido necesario de cualquier otro proyecto. Lo mismo pasará con el pie, este incluirá tanto el footer como los scripts necesarios y el cierre de la página.

Base de datos

Antes de entrar a ver los archivos creamos la base de datos, usamos para ello la codificación utf8mb4-spanish-ci. De igual manera crearemos un usuario para esta bbdd con  los permisos correspondientes. Haced para más comodidad esto desde phpmyadmin. Unatenemos la bbdd creamos las dos tablas, la de usuarios y la tabla tblreseteopass que será la que almacene las solicitudes. Aquí os dejo las sentencias sql para crear las dos tablas:

Para que nuestros archivos de procesos puedan acceder a la base de dato incluirán el siguiente archivo que contiene los datos de conexión y el código para ejecutarla, se llama con.php y está en includes:

 

Creando el index.php

gestión_usuarios_4

Como comentábamos arriba el index incluirá la cabecera y el pie. El código del archivo cabecera.php:

 

Y el código del pie.php:

Así que el index.php incluirá esos dos archivos:

En este archivo también se ha incluido código para en caso de recibir una variable msg por url se mostrará un mensaje, diferente en función del valor del msg. Podéis también comprobar como en cabecera.php se inicia la sesión con un session_start() de manera que en el index se podrán usar las variables de sesión que se crearán en login.php, registro.php o cambiarpassword.php. En el pie he incluido los formularios como modales de bootatrap. Si se hace click en login se mostrará el modal del login, el cual tiene un botoón para enviar y otro para abrir el modal de solicitar el cambio de contraseña:

gestión_usuarios_5

Lo mismo pasa con el registro, (cuyo modal podéis ver en la cabecera de esta entrada) y en la solicitud del nuevo password.

Proceso de registro y login

Cuando un usuario rellena el formulario de login, los datos de este se envían a control/login.php:

En este archivo comprobamos que el usuario existe en nuestra base de datos. Para hacer la consulta primero securizamos los campos obtenidos, para ello he creado una función llamada securizar() que se encuentra en control/seguridad.php:

Tras securizar los campos se realiza la consulta para comprobar si el nombre del usuario existe en la bbdd. En caso afirmativo comprobamos con password_verify() que la contraseña introducida coincide con la de la bbdd. Si todo está bien iniciamos las variables de sesión que necesitará el sitio para mostrar por ejemplo en nombre de usuario y su avatar en la página o para saber que permisos tiene o su id de usuario. Para registrarse ocurrirá algo similar llamándose a control/registro.php:

Aquí también se securizan los campos de la consulta excepto la contraseña que como va a ser cifrada con password_hash() no hace falta. Ejecutaré el código si la imagen se ha subido satisfactoriamente. Para ello tiene que cumplir los requisitos de tipo y tamaño (el tamaño se pasa como input de tipo hidden en al form de registro). Una vez insertado en la bbdd se redirije con la sesión ya iniciada.

Al guardar los permisos podemos usar la variable de sesión de permisos al inicio de cualquier página para decidir si el usuario tiene acceso o no a esa página.

Proceso de solicitud de cambio de contraseña

Como ya hemos comentado, en el modal de login, tenemos un botón para solicitar el cambio de contraseña. Este botón por medio de este de javascript lanzará otro modal con un formulario para introducir el correo del usuario que quiere recuperar su contraseña:

modal_envío_email_recuperación_password

 

El código javascript que añadiremos a en js/code.js es el siguiente:

Esto hace que al hacer click en el botón que reza ¿Has olvidado tu contraseña? accede a este nuevo modal situado en el pie.php con id=reste_pass y lo muestra, al mismo tiempo oculta el modal de login.

Este archivo js/code.js también incluye el siguiente código:

Dado que estoy usando <button> en el html para lanzar los modales, me daba más trabajo estilar un enlace de bootstrap para dejarlo igual que esos botones que usar javascript para redirigir a un página ( o quizás lo he hecho porque me gustaba más hacerlo así, no se.). Esto es lo que he hecho con el botón de cierre de sesión o logout que es la primera parte del código, y dirige al archivo contril/logout.php:

Lo siguiente en el archivo code.js cierra cualquier modal en el que haya hecho click en la X de cierre. Y lo del final comprueba las contraseñas del registo, y evita el envío del formulario en caso de que no coincidan.

Volviendo al modal de solicitud. Tras introducirse la dirección de correo y darle a enviar, se llama al archivo control/reset_pass.php que contiene:

Expliquemos este archivo. Tenemos una función para generar un link temporal que tras el reestablecmiento de la contraseña será borrado, y que será el link que recibirá el usuario en sue email y al cikarlo se le abrirá un formulario en el navegador para introducir su nueva contraseña.

Esta función recibe dos parámetro, el usuario y su id. Va a generar un link que contendrá ests valores más un valor aleatorio generado con rand y seguido de la fecha actual. Por seguridad se encripta con la función password_hash. Este link se introducira en la tabla temporal tblreseteopass junto al resto de los valores. Tras haberse insetrtado, se deuelve el valor del link que será usado por la siguiente función para enviar ese link al usuario.

La siguiente funciń es la de enviar el email. Recibe también dos parámetros, el email del usuario y el link generado antes. El mensaje es un html con los estilos en linea que muestra un enlace con el link como valor de su src.

Al final del archivo es donde usamos esas funciones si es que se ha ingresado el email correctamente en el formulario.

Formulario de cambio de contraseña

El usuario tras seguir el link que le ha llegado verá el formulario:

form_nueva_contraseña

Esto que vemos es el archivo restablecer.php:

 

En él se comprueba que el token efectivamente existte en la tabkla tblreseteopass  y si es así le muestra el formulario ,que al ser enviado llama a control/cambiarpassword.php:

Aquí de nuevo comprobamos si existe ese token, en ese caso verificamos el idusuario de tblreseteopass, si está bien y las contraseñas nuevas coinciden actualizamos la contraseña en la tabla usuarios. Luego borramos la entrada temporal de tblreseteopass y le redirigimos al inicio con la sesión ya iniciada.

Bueno, largo no? Ya avisé al inicio ?. Este post espero que os sea muy útil pues la gestión de usuarios es el pan de cada día en las aplicaciones web.

 


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *