1. Front -end (estructura html - `login.html`)
`` `HTML
`` `` ``
Puntos clave:
* ``: Declara el tipo de documento como HTML5.
* ``: Especifica la codificación de caracteres para el documento.
* ``: Configura la ventana gráfica para el diseño receptivo.
* `
* ` `: Enlace a su archivo CSS para el estilo.
* `
* `
* ` El núcleo de la forma:
* `id =" loginform "`:proporciona un identificador único para el formulario, lo que le permite manipularlo con JavaScript.
* `Action ="/Login "`: ¡Crucialmente importante! Esto especifica la URL en su servidor que manejará la solicitud de inicio de sesión cuando se envíe el formulario. Reemplace `/Login` con la ruta real al punto final de inicio de sesión del lado del servidor.
* `Method =" Post "`:Indica que los datos del formulario se enviarán al servidor utilizando el método de publicación HTTP, que generalmente es más seguro para datos confidenciales como contraseñas.
* `
* `
* `Etiqueta`:proporciona una etiqueta de texto para el campo de entrada. El atributo `for` debería coincidir con el` ID` del campo de entrada con el que está asociado.
* `Input type =" text "`:Crea un campo de entrada de texto para el nombre de usuario. `name =" Username "` es importante:el código del lado del servidor usará este nombre para acceder al valor ingresado por el usuario. `requerido 'hace que el campo sea obligatorio.
* ``: Crea un campo de entrada de contraseña. El atributo `type =" contraseña "` enmascara la entrada como los tipos de usuario. `name =" contraseña "` es utilizado por el código del lado del servidor. `requerido 'hace que el campo sea obligatorio.
* ` El botón Enviar que desencadena la presentación del formulario.
* `
* ` `: Enlace a su archivo JavaScript para cualquier validación del lado del cliente u otras interacciones.
2. Front -end (CSS Styling - `style.css`)
`` `CSS
cuerpo {
Font-Family:Sans-Serif;
Color de fondo:#F4F4F4;
Pantalla:Flex;
Justify-Content:Center;
Alineación de ítems:Centro;
Min-altura:100VH;
}
.GOGIN-Conseiner {
Color de fondo:#fff;
relleno:20px;
Border-Radius:8px;
Shadow de caja:0 0 10px RGBA (0, 0, 0, 0.1);
Ancho:300px;
}
.Form-Group {
margen-fondo:15px;
}
etiqueta {
Pantalla:bloque;
margen de fondo:5px;
}
entrada [type ="text"],
entrada [type ="Password"] {
Ancho:100%;
relleno:8px;
borde:1px sólido #ccc;
Border-Radius:4px;
dimensionamiento de la caja:border-box; / * Incluya relleno y borde en el ancho total y la altura del elemento */
}
botón {
Color de fondo:#4CAF50;
Color:blanco;
relleno:10px 15px;
borde:ninguno;
Border-Radius:4px;
cursor:puntero;
Ancho:100%;
}
Botón:Hover {
Color de fondo:#3E8E41;
}
.Error-Message {
Color:rojo;
margen-top:10px;
}
`` `` ``
Este CSS proporciona un estilo básico para centrar el formulario de inicio de sesión, diseñe los campos de entrada y el botón, y proporciona un indicador visual para los mensajes de error.
3. Front -end (JavaScript - `script.js` - validación opcional del lado del cliente)
`` `JavaScript
document.getElementById ('loginform'). addEventListener ('enviar', function (event) {
const userName =document.getElementById ('UserName'). Value;
consta de contraseña =document.getElementById ('contraseña'). Valor;
const errorMessEdiv =document.getElementById ('errorMessage');
errorMessEdiv.TextContent =''; // Borrar errores anteriores
if (! username ||! contraseña) {
errorMessEdiv.TextContent ='Ingrese tanto el nombre de usuario como la contraseña.';
event.preventDefault (); // Evitar el envío del formulario
devolver;
}
// Puede agregar una validación más compleja del lado del cliente aquí, como las verificaciones de fuerza de contraseña.
});
`` `` ``
Este JavaScript agrega una verificación de validación del lado del cliente que tanto el nombre de usuario como los campos de contraseña se han llenado antes de enviar el formulario al servidor. Es opcional pero mejora la experiencia del usuario al proporcionar comentarios inmediatos.
4. Back -end (node.js con expreso - ejemplo)
Este es un ejemplo básico usando node.js y el marco expreso. Tendrá que instalarlos:
`` `Bash
NPM Instale Express Body-Parser Bcrypt
`` `` ``
* `Express`: Un marco de aplicaciones web para node.js.
* `Body-Parser`: Middleware para analizar cuerpos de solicitud.
* `bcrypt`: Biblioteca para las contraseñas de hash de forma segura. (¡Importante para la seguridad!)
`` `JavaScript
const express =require ('express');
const bodyParser =request ('Body-Parser');
const bcRypt =require ('bcrypt');
const app =express ();
Const Port =3000;
// base de datos de usuario en memoria (reemplace con una base de datos real como MongoDB o PostgreSQL)
const usators =[]; // matriz de objetos de usuario {nombre de usuario, contraseñahash}
app.use (BodyParser.UrlEncoded ({extendido:falso})); // Cuerpos codificados por URL
App.use (BodyParser.json ()); // analizar los cuerpos json
app.use (express.static ('public')); // Servir archivos estáticos (HTML, CSS, JS) del directorio 'público'
app.get ('/', (req, res) => {
res.sendFile (__ dirname + '/public/login.html'); // Servir la página de inicio de sesión
});
app.post ('/login', async (req, res) => {
const {nombre de usuario, contraseña} =req.body;
const user =users.find (u => u.username ===username);
if (usuario) {
// Compare la contraseña proporcionada con el hash de contraseña almacenada
const PasswordMatch =espera bcrypt.compare (contraseña, user.passwordhash);
if (contraseña) {
// autenticación exitosa
res.send ('¡Iniciar sesión exitoso!'); // En una aplicación real, redirigiría a un tablero o establecería una cookie de sesión.
} demás {
// Contraseña no válida
res.status (401) .send ('nombre de usuario o contraseña no válidos');
}
} demás {
// Usuario no encontrado
res.status (401) .send ('nombre de usuario o contraseña no válidos');
}
});
app.post ('/registro', async (req, res) => {
const {nombre de usuario, contraseña} =req.body;
// verifique si el nombre de usuario ya existe
if (users.find (u => u.username ===username)) {
return res.status (400) .send ('El nombre de usuario ya existe');
}
// hash la contraseña
Const saltrounds =10; // o más para el hashing más fuerte
const PasswordHash =ALEA BCRYPT.HASH (contraseña, salTrounds);
// almacenar el nuevo usuario en la base de datos
users.push ({nombre de usuario, contraseñahash});
res.status (201) .send ('Usuario registrado con éxito');
});
app.listen (puerto, () => {
console.log (`servidor escucha en http:// localhost:$ {puerto}`);
});
`` `` ``
Explicación del código de back-end:
1. Importaciones: Importa los módulos necesarios:`Express`,` Body-Parser` y `bcrypt`.
2. Inicialización: Crea una instancia de aplicación Express (`App`) y establece el puerto.
3. Middleware:
* `BodyParser.UrlCoded ({Extendido:False})`:Cuerpos de solicitud codificados con URL (datos enviados desde formularios HTML). `Extendido:False` utiliza la biblioteca de consulta incorporada, mientras que` Extended:True` usa la biblioteca 'QS`, que permite estructuras de objetos más complejas.
* `BodyParser.json ()`:PARSES JSON SELIT BODES.
* `Express.Static ('public')`:Sirve archivos estáticos (HTML, CSS, JavaScript) del directorio `público`. Aquí es donde pondría sus archivos `Login.html`,` style.css` y `script.js`.
4. Ruta para servir la página de inicio de sesión (`/`):
* `app.get ('/', ...)`:Define una ruta que maneja las solicitudes de la ruta raíz (`/`).
* `res.sendFile (__ dirname + '/public/login.html')`:Envía el archivo `login.html` al cliente. `__Dirname` es el directorio actual del script, asegurando que la ruta del archivo sea correcta.
5. Ruta para manejar el envío de inicio de sesión (`/Login`):
* `app.post ('/login', ...)`:Define una ruta que maneja las solicitudes de publicación a la ruta `/Login`. Aquí es donde se envían los datos del formulario de inicio de sesión.
* `req.body`:contiene los datos enviados desde el formulario. Gracias a `Body-Parser`, puede acceder al nombre de usuario y la contraseña usando` req.body.username` y `req.body.password`.
* `Users.Find (u => U.Username ===Nombre de usuario)`:Busca la matriz `Usuarios` para un usuario con el nombre de usuario coincidente. (En una aplicación real, consultaría su base de datos).
* Pasehing con `bcRypt`:
* `bcrypt.compare (contraseña, user.passwordhash)`:Esta es la parte crucial para la seguridad. Compara la contraseña de texto sin formato ingresado por el usuario con el * hash * almacenado de la contraseña. `Bcrypt` maneja el proceso de salación automáticamente. Esto es mucho más seguro que almacenar contraseñas en texto sin formato.
* Lógica de autenticación:
* Si se encuentra un usuario y la contraseña coincide, normalmente establecerá una cookie de sesión para autenticar al usuario y redirigirlo a un área iniciada. En este ejemplo, solo envía un "Iniciar sesión exitoso!" mensaje.
* Si no se encuentra el usuario o la contraseña no coincide, envía una respuesta de error (`401 no autorizado"). El front-end JavaScript puede mostrar este mensaje de error al usuario.
6. Ruta para el registro
* Se agregó una ruta de registro para permitir que se agregen nuevos usuarios al sistema
* La contraseña no se almacena, sino que se han asegurado para garantizar la seguridad
7. Iniciar el servidor:
* `app.listen (puerto, ...)`:inicia el servidor expreso en el puerto especificado.
Consideraciones importantes y mejores prácticas de seguridad:
* Base de datos: Reemplace la matriz `usuarios` en memoria con una base de datos real (por ejemplo, MongoDB, PostgreSQL, MySQL). Use una biblioteca de base de datos (como Mongoose para MongoDB o Secelize para PostgreSQL/MySQL) para interactuar con la base de datos.
* Hashing de contraseña: * Nunca* almacene contraseñas en texto sin formato. Siempre use un algoritmo de hash de contraseña segura como `bcrypt` (como se muestra en el ejemplo). `Bcrypt` incluye saling, lo que hace que sea mucho más difícil para los atacantes descifrar las contraseñas incluso si obtienen la base de datos. Use `bcrypt.hash ()` a las contraseñas hash cuando los usuarios se registran, y `bcrypt.compare ()` para comparar la contraseña ingresada con el hash almacenado durante el inicio de sesión.
* Validación de entrada: Valide la entrada del usuario tanto en el lado del cliente (para la experiencia del usuario) como en el lado del servidor (para la seguridad). Desinfecta la entrada para evitar ataques de inyección (por ejemplo, inyección SQL, XSS).
* Gestión de la sesión: Use sesiones para mantener el estado de inicio de sesión del usuario. Después de un inicio de sesión exitoso, almacene una ID de sesión en una cookie en el navegador del cliente. En las solicitudes posteriores, el servidor puede usar la ID de sesión para identificar al usuario sin requerir que vuelvan a iniciar sesión. Bibliotecas como 'expresión expresa' pueden ayudar a administrar las sesiones.
* https: Siempre use HTTPS (SSL/TLS) para cifrar la comunicación entre el cliente y el servidor. Esto evita los ataques de espía y hombre en el medio. Obtenga un certificado SSL de una autoridad de certificado (por ejemplo, en cifrado).
* Manejo de errores: Implemente el manejo de errores adecuado para evitar que la información confidencial se expone en los mensajes de error. Errores de registro de forma segura.
* CSRF Protección: Proteger contra ataques de falsificación de solicitudes de sitios cruzados (CSRF) mediante el uso de tokens CSRF.
* Limitando la velocidad: Implementar la limitación de la tasa para evitar ataques de fuerza bruta en el punto final de inicio de sesión.
Cómo ejecutar el ejemplo:
1. Crear directorio de proyecto: Cree un directorio para su proyecto (por ejemplo, `Login-App`).
2. Crear archivos: Cree los siguientes archivos dentro del directorio del proyecto:
* `Login.html` (copie el código HTML)
* `style.css` (copie el código CSS)
* `script.js` (copie el código JavaScript)
* `server.js` (o` app.js`, o lo que quiera nombrar su archivo de servidor node.js - copie el código node.js)
* Cree una carpeta `public` y ponga` Login.html`, `style.css` y` script.js` dentro de ella.
3. Instalar dependencias: Abra una terminal en el directorio del proyecto y ejecute:
`` `Bash
NPM Instale Express Body-Parser Bcrypt
`` `` ``
4. Ejecute el servidor: En la terminal, ejecute:
`` `Bash
nodo servidor.js
`` `` ``
5. Abierto en el navegador: Abra su navegador web y vaya a `http:// localhost:3000`. Debería ver la página de inicio de sesión.
Recuerde que este es un ejemplo básico. Para una aplicación del mundo real, deberá implementar la integración de la base de datos adecuada, la gestión de sesiones y las medidas de seguridad.
Login
Login
`: Un título para el formulario de inicio de sesión.