Autenticar, registrar y comprobar credenciales de usuarios usando PHP con MySQL

Esta es la parte 2 del tutorial para un simple login con PHP. En el login anterior vimos un ejemplo básico en donde se introducen las credenciales y si coinciden se inicia la sesión.

En este tutorial veremos cómo registrar usuarios en una base de datos, los cuales tendrán correo y contraseña. Más tarde, en el apartado del login vamos a comprobar que los datos coincidan de acuerdo a los que existen en la base de datos.

Finalmente, tendremos una página protegida a donde solamente los usuarios que hayan iniciado sesión tendrán acceso. En ella mostraremos el correo del usuario actualmente logueado.

Resumiendo, haremos un login con PHP y MySQL, manejando sesiones, así como el registro de los usuarios. De igual manera indicaremos si un usuario ya está registrado.

Nota: aunque aquí se usa MySQL, PDO permite cambiar el motor de base de datos. Un claro ejemplo es este CRUD con SQLite.

Lecturas recomendadas

Recuerda que debes tener configurado e instalado MySQL con PHP.

A lo largo del tutorial veremos algunas funciones y características que ya he expuesto antes. Te invito a ver los siguientes artículos:

Conectar PHP y MySQL

PHP con MySQL parte 2: comprobar si existe y usar cursores

Ah, también mira la parte anterior de este post: login simple con PHP.

Si quieres ver un ejemplo más complejo aunque no usa sesiones, mira un sistema de ventas que hice anteriormente con PHP.

Algo más complejo que sí usa sesiones es un sistema de cotizaciones web.

En caso de que no sepas MySQL mira cómo administrarlo desde la CLI o échale un vistazo a los ejercicios parte 1, parte 2 o parte 3.

Código fuente y demostración

Al final tendremos un sitio web que permitirá registrar usuarios y dejar que inicien sesión para mostrar una página protegida con la sesión.

Puedes ver el código fuente en GitHub. Si quieres descárgalo o clónalo y pruébalo en tu entorno local.

Igualmente puedes ver cómo implementar un límite de intentos para iniciar sesión.

Registrar usuario para que se loguee más tarde

Comencemos viendo lo que se muestra al usuario cuando se quiere registrar. Es un formulario HTML que tiene un campo para el correo electrónico y dos campos para las contraseñas. Queda así:

See the gist on github.

Cuando el formulario sea enviado, los datos serán procesados en registrar.php cuyo código es este:

See the gist on github.

Por ahora no te preocupes por el include de las funciones, simplemente basta con que sepas que hay una función que te dice si el usuario existe, la cual devuelve un booleano indicando si existe o no.

También hay otra función que se llama registrarUsuario, la cual recibe la contraseña y el usuario. Por cierto, ya te habrás dado cuenta que primero comparamos que las contraseñas coincidan y si no, lo indicamos.

Si el usuario existe, se indica. Y si no existe, se trata de registrar y se muestra el resultado.

Las funciones

Es un buen momento para introducir nuestro archivo de funciones. Tiene muchos métodos útiles que nos permitirán separar la lógica y manejar todo lo relacionado a la gestión de usuarios para el login.

El código fuente es el que se ve a continuación; el de la base de datos lo veremos más tarde, por ahora basta saber que existe una función llamada obtenerBaseDeDatos que regresa una base de datos de MySQL.

See the gist on github.

Cada función se explica por sí mismo e interactúa con la base de datos dependiendo de la necesidad. Una de ellas obtiene el usuario como objeto, con todo y contraseña.

Otra función te indica si un usuario con determinado correo ya existe, y finalmente otra registra un usuario.

Hay 2 funciones que permiten comparar o hashear contraseñas, basadas en este post.

La más importante es la de login, la cual comprueba los datos e inicia la sesión en caso de que coincidan.

Todo esto lo iremos viendo a lo largo del post.

La base de datos

Es buen momento para introducir la base de datos. Cabe mencionar que ya estamos protegidos contra ataques de inyecciones SQL en los ejemplos de código. Su esquema es este:

See the gist on github.

Puedes cambiar el nombre de la base de datos. Luego de ello veamos el script que conecta a MySQL desde PHP; el cual queda así:

See the gist on github.

Si cambiaste el nombre de la base de datos o tus credenciales son distintas recuerda cambiar todo acorde a tus datos.

Login de usuario

Veamos el formulario que permite iniciar sesión. Queda así:

See the gist on github.

Ahora no necesitamos que ponga la contraseña 2 veces, solamente una, pues se hace así únicamente en el registro.

Cuando se envíe el formulario, los datos serán procesados en login.php. Ahí los recibimos y usamos de nuevo las funciones que vimos arriba.

Lo bueno de separar todo esto es que el código se reduce y se promueve la reutilización de código.

See the gist on github.

Hacemos una redirección a la página protegida o secreta en donde solamente entran los usuarios logueados; recuerda que el inicio de sesión y la comprobación de datos se hace en el archivo de funciones.php en conjunto con base_de_datos.php.

Página secreta o protegida

Finalmente veamos la página a la que solamente los usuarios que han iniciado sesión pueden ver. Ahí mostramos también el correo del usuario que está logueado, el cual guardamos en $_SESSION dentro de funciones.php.

Queda así:

See the gist on github.

Con eso queda completado el tutorial.

Conclusión

Parece simple, pero con esta protección podemos tener una pequeña página protegida. Claro que eso no es suficiente, pues debemos ver todo eso de la regeneración del id o la protección contra ataques CSRF.

En caso de querer proteger otras páginas, simplemente inicia sesión y verifica que haya algo en $_SESSION["correo"].

Si te quejas de los estilos, traté de quitar la parte visual para enfocarnos en la funcionalidad. Te invito a ver el sistema de cotizaciones (que además es gratuito y open source) en donde usamos una variante de Bootstrap y además hacemos que la página sea responsiva.