.png)
%208.43.16%E2%80%AFp.m..png "Generador de Contraseñas Seguras en la Web con Python y Flask")
%208.43.16%E2%80%AFp.m..png)
Introducción
En un mundo digital donde la seguridad es una prioridad, es fundamental contar con contraseñas seguras y aleatorias para proteger nuestras cuentas y datos personales. En este artículo, te mostraremos cómo desarrollar un Generador de Contraseñas Seguras en una aplicación web utilizando Python y Flask. Además, le daremos un estilo hacker a la interfaz para que tenga un aspecto profesional y tecnológico.
Tecnologías Utilizadas
Para este proyecto, hemos utilizado las siguientes tecnologías:
Python: Lenguaje de programación principal.
Flask: Framework web para manejar solicitudes HTTP.
HTML5: Para la estructura de la interfaz web.
CSS3: Para mejorar el diseño con un estilo hacker.
JavaScript: Para agregar interactividad y la funcionalidad de copiar la contraseña generada al portapapeles.
Características de la Aplicación
✔️ Generación de contraseñas aleatorias con opciones personalizables.
✔️ Opción de elegir la longitud de la contraseña (mínimo 4 y máximo 32 caracteres).
✔️ Inclusión opcional de mayúsculas, números y símbolos.
✔️ Interfaz con diseño hacker, fondo oscuro y texto en color verde neón.
✔️ Función para copiar la contraseña con un solo clic.
Código Fuente
📌 Backend con Flask (app.py****)
from flask import Flask, render_template, request
import random
import string
app = Flask(__name__)
# Función para generar la contraseña
def generar_contrasena(longitud, incluir_mayus, incluir_numeros, incluir_simbolos):
caracteres = string.ascii_lowercase # Minúsculas por defecto
if incluir_mayus:
caracteres += string.ascii_uppercase
if incluir_numeros:
caracteres += string.digits
if incluir_simbolos:
caracteres += string.punctuation
return ''.join(random.choice(caracteres) for _ in range(longitud))
@app.route('/', methods=['GET', 'POST'])
def index():
contrasena_generada = ""
if request.method == 'POST':
longitud = int(request.form['longitud'])
incluir_mayus = 'mayusculas' in request.form
incluir_numeros = 'numeros' in request.form
incluir_simbolos = 'simbolos' in request.form
contrasena_generada = generar_contrasena(longitud, incluir_mayus, incluir_numeros, incluir_simbolos)
return render_template('index.html', contrasena=contrasena_generada)
if __name__ == '__main__':
app.run(debug=True)📌 Interfaz Web con HTML y CSS (index.html****)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generador de Contraseñas</title>
<style>
body {
font-family: "Courier New", monospace;
text-align: center;
background-color: #0d0d0d;
color: #00ff00;
padding: 20px;
}
.container {
background: #000;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 15px #00ff00;
max-width: 400px;
margin: auto;
}
input, button {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #00ff00;
background: black;
color: #00ff00;
}
button {
background-color: black;
color: #00ff00;
font-size: 16px;
cursor: pointer;
border: 2px solid #00ff00;
}
button:hover {
background-color: #00ff00;
color: black;
}
label {
display: block;
margin-top: 10px;
}
</style>
<script>
function copiarContrasena() {
var contrasena = document.getElementById("contrasena");
navigator.clipboard.writeText(contrasena.value);
alert("Contraseña copiada al portapapeles!");
}
</script>
</head>
<body>
<div class="container">
<h1>🔓 Generador de Contraseñas 🔒</h1>
<form action="/" method="post">
<label for="longitud">Longitud de la contraseña:</label>
<input type="number" name="longitud" min="4" max="32" required>
<label>
<input type="checkbox" name="mayusculas"> Incluir mayúsculas
</label>
<label>
<input type="checkbox" name="numeros"> Incluir números
</label>
<label>
<input type="checkbox" name="simbolos"> Incluir símbolos
</label>
<button type="submit">Generar Contraseña</button>
</form>
{% if contrasena %}
<h2>Contraseña Generada:</h2>
<input type="text" id="contrasena" value="{{ contrasena }}" readonly>
<button onclick="copiarContrasena()">Copiar</button>
{% endif %}
</div>
</body>
</html>
No hay comentarios