Login con Flask y MySQL usando Sesiones

Login con Flask y MySQL

En esta guía aprenderás a implementar un sistema de login con Flask y MySQL, utilizando sesiones para manejar la autenticación de usuarios.

Manejo de Sesiones en Flask

Flask ofrece una forma fácil de manejar sesiones de usuario mediante el uso de un diccionario llamado session. La información almacenada en la sesión está disponible a lo largo de todas las rutas mientras el usuario esté autenticado.

Requisitos

Antes de comenzar, asegúrate de tener instalados los siguientes paquetes:

bash

pip install flask mysql-connector-python

Configuración del Proyecto

1. Estructura del Proyecto

Organiza tu proyecto de la siguiente manera:

bash

/login_flask
  /templates
      login.html
      dashboard.html
  app.py

2. Base de Datos MySQL

Crea una base de datos y una tabla de usuarios en MySQL:

sql

CREATE DATABASE flask_login;

USE flask_login;

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(100) NOT NULL,
  password VARCHAR(100) NOT NULL
);

Crea el archivo login.html dentro de la carpeta templates:

html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Login</title>
</head>
<body>
  <h2>Iniciar Sesión</h2>
  <form action="/login" method="POST">
      <label for="username">Usuario:</label>
      <input type="text" id="username" name="username" required>
      <br>
      <label for="password">Contraseña:</label>
      <input type="password" id="password" name="password" required>
      <br>
      <input type="submit" value="Iniciar Sesión">
  </form>
  {% if message %}
  <p>{{ message }}</p>
  {% endif %}
</body>
</html>

4. Código Principal en app.py

python

from flask import Flask, render_template, request, redirect, session
import mysql.connector

app = Flask(__name__)
app.secret_key = 'supersecretkey'  # Clave para manejar las sesiones

# Configuración de la conexión a la base de datos MySQL
db = mysql.connector.connect(
  host="localhost",
  user="tu_usuario",
  password="tu_contraseña",
  database="flask_login"
)
cursor = db.cursor(dictionary=True)

# Ruta para mostrar el formulario de login
@app.route('/')
def index():
  return render_template('login.html')

# Ruta para manejar el login
@app.route('/login', methods=['POST'])
def login():
  username = request.form['username']
  password = request.form['password']

  cursor.execute("SELECT * FROM users WHERE username=%s AND password=%s", (username, password))
  user = cursor.fetchone()

  if user:
      session['username'] = user['username']
      return redirect('/dashboard')
  else:
      return render_template('login.html', message='Credenciales incorrectas, inténtalo de nuevo.')

# Ruta protegida: solo accesible si el usuario ha iniciado sesión
@app.route('/dashboard')
def dashboard():
  if 'username' in session:
      return f"Bienvenido, {session['username']}! Has iniciado sesión."
  else:
      return redirect('/')

# Ruta para cerrar la sesión
@app.route('/logout')
def logout():
  session.pop('username', None)
  return redirect('/')

if __name__ == '__main__':
  app.run(debug=True, port=5000)

Explicación

Formulario de Login: El formulario HTML se envía a la ruta /login usando el método POST.
Validación de Credenciales: En la ruta /login, las credenciales proporcionadas se validan contra la base de datos.
Sesiones: Si las credenciales son correctas, se almacena el nombre de usuario en la sesión (session[‘username’]).
Dashboard Protegido: La ruta /dashboard solo es accesible si hay una sesión activa. Si no, redirige al login.
Cerrar Sesión: La ruta /logout elimina la sesión, lo que cierra la sesión del usuario.

En Flask, puedes acceder a las variables de sesión dentro de las plantillas HTML utilizando Jinja2, el motor de plantillas que Flask utiliza por defecto.

Ejemplo de uso de la variable de sesión en HTML

Si ya has iniciado sesión y has guardado el nombre de usuario en session[‘username’], puedes mostrar esta información en la plantilla.

Código en dashboard.html