15Mar, 2024
0
Autenticación de Usuarios con Flask y MySQL

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>
<html lang=”es”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Iniciar Sesión</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”>
    <!– Título del formulario –>
    <div class=”card “>
        <h2 class=”pb-3 text-center”>Iniciar Sesión</h2>
        <!– Formulario de inicio de sesión –>
        <form method=”POST”>
            <div class=”row”>
                <div class=”col-lg-12 col-md 12″>
                    <!– Campo de entrada para el nombre de usuario –>
                    <input type=”text” class=”form-control”  name=”username” placeholder=”Nombre de usuario” required>
                </div>
                <div class=”col-lg-12 col-md 12″>
                    <!– Campo de entrada para la contraseña –>
                    <input type=”password” class=”form-control”  name=”password” placeholder=”Contraseña” required>
                </div>
            </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.
    2. Login de inicio de sesion en 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.
  1. Ingreso al panel de control

En resumen, en este artículo 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 a continuación.

¡Comparte! #SuEspacionet
Comments are closed.

©2000 - 2024 SuEspacio.net México - Precios expresados en pesos mexicanos con IVA incluído. Terminos y Condiciones relativos al servicio. Todos los logotipos y marcas son propiedad de sus respectivos dueños.