Autenticación de Usuarios con Flask y MySQL

15Mar, 2024

Autenticación de Usuarios con Flask y MySQL

En este tutorial, aprenderemos paso a paso cómo construir un sistema de autenticación de usuarios completo con Flask y MySQL. La autenticación de usuarios es esencial en el desarrollo de aplicaciones web para proteger los datos y garantizar la seguridad. En este articulo, aprenderás a cómo implementar un sistema de autenticación de usuarios utilizando Flask, un microframework de Python, y MySQL, un sistema de gestión de bases de datos relacionales.

Paso 1:

Configuración del Entorno de Desarrollo para la verificación de usuarios con Flask

En este paso, configuramos el entorno de desarrollo y las dependencias necesarias para nuestra aplicación Flask.

pip install Flask
pip install Flask-SQLAlchemy
pip install Flask-Login

Paso 2: Estructura de archivos para tu aplicación Flask

Es importante tener una estructura de archivos bien organizada para tu aplicación Flask

Estructura de archivos

Paso 3: Creación de archivo app.py

# Importación de los módulos y clases necesarios de Flask y sus extensiones

from flask import Flask, render_template, request, redirect, url_for

from flask_sqlalchemy import SQLAlchemy

from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user

# Creación de la aplicación Flask

app = Flask(__name__)

# Configuración de la clave secreta para proteger sesiones de usuario

app.secret_key = ‘050fg22as1604b39p7’

# Configuración de los datos de conexión a la base de datos MySQL

nombre_usuario = ‘root’

contraseña = ”

nombre_servidor = ‘127.0.0.1’

nombre_base_datos = ‘flaskautentication’

# Configuración de la URI de la base de datos para SQLAlchemy

app.config[‘SQLALCHEMY_DATABASE_URI’] = f’mysql+pymysql://{nombre_usuario}:{contraseña}@{nombre_servidor}/{nombre_base_datos}’

app.config[‘SQLALCHEMY_TRACK_MODIFICATIONS’] =False

# Creación de la instancia de SQLAlchemy y vinculación a la aplicación Flask

db = SQLAlchemy(app)

# Creación de la instancia de LoginManager y vinculación a la aplicación Flask

login_manager = LoginManager()

login_manager.init_app(app)

# Definición del modelo de usuario utilizando SQLAlchemy

class User(UserMixin, db.Model):

id = db.Column(db.Integer, primary_key=True)

username = db.Column(db.String(100), unique=True, nullable=False)

password = db.Column(db.String(100), nullable=False)

# Función para cargar un usuario basado en su ID

@login_manager.user_loader

def load_user(user_id):

return User.query.get(int(user_id))

# Ruta para la página de inicio y manejo del inicio de sesión# Ruta para la página de inicio y manejo del inicio de sesión

@app.route(‘/’, methods=[‘GET’, ‘POST’])

def index():

if request.method == ‘POST’:

username = request.form[‘username’]

password = request.form[‘password’]

user = User.query.filter_by(username=username).first()

if user and user.password == password:

login_user(user)

return redirect(url_for(‘dashboard’))

return render_template(‘index.html’)

# Ruta para el cierre de sesión

@app.route(‘/logout’, methods=[‘GET’, ‘POST’])

@login_required

def logout():

logout_user()

return redirect(url_for(‘index’))

# Ruta para el panel de control del usuario autenticado

@app.route(‘/dashboard’)

@login_required

def dashboard():

return render_template(‘dashboard.html’)

# Verifica si el script se ejecuta como script principal y ejecuta la aplicación Flask

if __name__ == ‘__main__’:

app.run(debug=True)

Paso 4: Creación de archivo index.html

<!DOCTYPE html>

<head>

<title>Iniciar Sesión</title>

</head>

<!– Título del formulario –>

<h2 class=”pb-3 text-center”>Iniciar Sesión</h2>

<!– Formulario de inicio de sesión –>

<!– Campo de entrada para el nombre de usuario –>

</div>

<!– Campo de entrada para la contraseña –>

</div>

<!– Botón de envío del formulario –>

<button type=”submit” class=”btn btn-primary “>Iniciar Sesión</button>

</form>

</div>

</body>

</html>

Paso 5: Creación de archivo dashboad.html

<!DOCTYPE html>
<html lang=”es”>

<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Panel de Control</title>
<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH” crossorigin=”anonymous”>

</head>

<body class=”container”>
<div class=”card “>
<!– Título del panel de control –>
<h1 class=”pt-5″>Panel de control</h1>
<!– Formulario para cerrar sesión –>
<form action=”{{ url_for(‘logout’) }}” method=”post”>
<!– Botón para cerrar sesión –>
<button type=”submit” class=”btn btn-success “>Cerrar Sesión</button>
</form>
</div>
</body>

</html>

Paso 6: Ejecución del proyecto

1. 1. Abre una terminal o línea de comandos.

1. 2. Navega hasta el directorio donde se encuentra tu proyecto.

1. 3. Ejecuta el archivo app.py usando el intérprete de Python: python app.py

1. 4. Una vez que el servidor Flask esté en funcionamiento, abre tu navegador web y ve a la dirección http://127.0.0.1:5000/ (o la dirección que se imprime en la terminal si has especificado otro puerto).

1. 5. Deberías ver la página de inicio de sesión de tu aplicación. Puedes iniciar sesión con las credenciales de usuario que hayas configurado en tu base de datos MySQL.
3. 6. Una vez que hayas iniciado sesión, podrás acceder al panel de control y realizar las acciones correspondientes, como cerrar sesión.

En este artículo / tutorial hemos explorado cómo implementar la autenticación de usuarios en una aplicación web utilizando Flask, MySQL y Flask-Login. Hemos cubierto los pasos desde la configuración del entorno de desarrollo hasta la ejecución del proyecto, pasando por la estructura de archivos, la conexión a la base de datos y la creación de las páginas de inicio de sesión y panel de control.

Espero que este tutorial te haya resultado útil y te haya proporcionado una comprensión básica de cómo implementar la autenticación de usuarios en tus propios proyectos web. Si tienes alguna pregunta, comentario o sugerencia para futuros temas, no dudes en dejar un comentario.

Por cierto, si necesitas un web hosting para tu proyecto escolar te recomiendo: ParaEstudiantes.host donde puedes conseguir un hospedaje web económico para subir tus proyectos y obtener una certificación en el uso de cPanel al mismo tiempo, es el que utilizo para hacer mis pruebas ya que dan hasta dominio gratis.

Tutorial redactado por: Ing. Raúl Rodríguez

¡Comparte! #SuEspacionet

Comments are closed.