Introducción
En este tutorial, aprenderás a crear un formulario de login con Flask y Bootstrap, dos herramientas poderosas para el desarrollo web. Además, exploraremos cómo asegurar tu formulario de login para proteger los datos de los usuarios.
Paso 1: Instalación de Flask
Para comenzar, asegúrate de tener Python instalado en tu sistema. Luego, instala Flask con el siguiente comando:
pip install Flask
Paso 2: Configuración del Proyecto
Crea un directorio para tu proyecto y un entorno virtual:
mkdir flask_login
cd flask_login
python -m venv venv
source venv/bin/activate # En Windows usa: venv\Scripts\activate
Paso 3: Estructura del Proyecto
Organiza tu proyecto con la siguiente estructura:
flask_login/
│
├── app/
│ ├── static/
│ │ └── styles.css
│ ├── templates/
│ │ └── login.html
│ ├── __init__.py
│ └── routes.py
│
├── venv/
├── .gitignore
└── run.py
Paso 4: Creación de Archivos Básicos
Crea los archivos necesarios para el proyecto.
run.py
from app import app
if __name__ == '__main__':
app.run(debug=True)
app/init.py
from flask import Flask
app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'
from app import routes
Paso 5: Creación del Formulario de Login
app/templates/login.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<div class="container">
<h2 class="text-center">Iniciar Sesión</h2>
<form action="/login" method="post">
<div class="form-group">
<label for="username">Usuario</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Contraseña</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<button type="submit" class="btn btn-primary">Ingresar</button>
</form>
</div>
</body>
</html>
app/static/styles.css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f7f7f7;
}
.container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
Paso 6: Configuración de Rutas
app/routes.py
from flask import render_template, request, redirect, url_for, flash
from app import app
@app.route('/')
@app.route('/login', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
username = request.form['username']
password = request.form['password']
# Aquí se agregarían las verificaciones de usuario y contraseña
if username == 'admin' and password == 'password': # Ejemplo
flash('Inicio de sesión exitoso', 'success')
return redirect(url_for('dashboard'))
else:
flash('Nombre de usuario o contraseña incorrectos', 'danger')
return render_template('login.html')
@app.route('/dashboard')
def dashboard():
return '<h1>Bienvenido al Dashboard</h1>'
Paso 7: Añadir Seguridad
Protección CSRF: Ya hemos configurado una clave secreta
SECRET_KEYen__init__.pyque ayuda a proteger contra CSRF (Cross-Site Request Forgery).Hashed Passwords: Para almacenar contraseñas de manera segura, utiliza la biblioteca
werkzeug.security.
Instala werkzeug:
pip install werkzeug
Modifica routes.py para utilizar werkzeug:
from werkzeug.security import generate_password_hash, check_password_hash
# Al registrar un usuario, almacena la contraseña con hash
hashed_password = generate_password_hash('password', method='sha256')
# Al verificar la contraseña en el login
if check_password_hash(hashed_password, password):
# Inicio de sesión exitoso
- Mensajes Flash: Ya estamos utilizando
flashpara enviar mensajes de error y éxito al usuario.
Paso 8: SEO
- Meta Tags: Asegúrate de tener meta tags en tu archivo HTML para mejorar el SEO.
<meta name="description" content="Formulario de login seguro con Flask y Bootstrap.">
<meta name="keywords" content="Flask, Bootstrap, Login, Seguridad, Tutorial">
URL Amigables: Usa URLs descriptivas y amigables para SEO, como
'/login'en lugar de'/user_login'.Contenido de Calidad: Incluye descripciones claras y relevantes para los usuarios y los motores de búsqueda.
Conclusión
Siguiendo estos pasos, has creado un formulario de login con Flask y Bootstrap, agregando seguridad y optimización SEO. Esta base es perfecta para construir aplicaciones web más complejas y seguras.
Comentarios