“Conocimiento Problema>contraseñas

¿Cómo se crea una página de inicio de sesión con el nombre de usuario y los campos de contraseña?

2013/1/28
La creación de una página de inicio de sesión implica tanto front-end (HTML, CSS, JavaScript) para la interfaz de usuario y el back-end (lenguaje del lado del servidor y la base de datos) para la autenticación y la gestión de datos. Aquí hay un desglose de cómo crear una página de inicio de sesión, que cubre tanto el enfoque de fondo del front-end y el ejemplo simplificado.

1. Front -end (estructura html - `login.html`)

`` `HTML

Iniciar sesión

Login

Nombre de usuario:

contraseña:

`` `` ``

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.

* ``:</b> Establece el título que aparece en la pestaña del navegador. <p> * <b> ` <link rel ="stylesheet" href ="style.css"> `:</b> Enlace a su archivo CSS para el estilo. <p> * <b> `<Div>`:</b> Un contenedor div para sostener el formulario de inicio de sesión y sus elementos, facilitando el estilo. <p> * <b> ` <H2> Login </h2> `:</b> Un título para el formulario de inicio de sesión. <p> * <b> `<Form id =" Loginform "Action ="/Login "Method =" Post ">`:</b> El núcleo de la forma:<p> * `id =" loginform "`:proporciona un identificador único para el formulario, lo que le permite manipularlo con JavaScript. <p> * `Action ="/Login "`:<b> ¡Crucialmente importante! </b> 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. <p> * `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. <p> * <b> `<Div>`:</b> Contenedores para etiquetas y campos de entrada, ayudando en estilo y organización. <p> * <b> `<etiqueta for =" username ">` y `<input type =" text "id =" username "name =" username "requerido>`:</b> <p> * `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. <p> * `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. <p> * <b> `<input type =" contraseña "id =" contraseña "name =" contraseña "requerida>`:</b> 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. <p> * <b> `<button type =" enviar "> Iniciar sesión </botón> `:</b> El botón Enviar que desencadena la presentación del formulario. <p> * <b> `<div> </div> `:</b> Un marcador de posición para mostrar mensajes de error del servidor, si la autenticación falla. <p> * <b> `<script src =" script.js "> </script> `:</b> Enlace a su archivo JavaScript para cualquier validación del lado del cliente u otras interacciones. <p> <p> <b> 2. Front -end (CSS Styling - `style.css`) </b> <p> <p> `` `CSS <p> cuerpo { <p> Font-Family:Sans-Serif; <p> Color de fondo:#F4F4F4; <p> Pantalla:Flex; <p> Justify-Content:Center; <p> Alineación de ítems:Centro; <p> Min-altura:100VH; <p> } <p> <p> .GOGIN-Conseiner { <p> Color de fondo:#fff; <p> relleno:20px; <p> Border-Radius:8px; <p> Shadow de caja:0 0 10px RGBA (0, 0, 0, 0.1); <p> Ancho:300px; <p> } <p> <p> .Form-Group { <p> margen-fondo:15px; <p> } <p> <p> etiqueta { <p> Pantalla:bloque; <p> margen de fondo:5px; <p> } <p> <p> entrada [type ="text"], <p> entrada [type ="Password"] { <p> Ancho:100%; <p> relleno:8px; <p> borde:1px sólido #ccc; <p> Border-Radius:4px; <p> dimensionamiento de la caja:border-box; / * Incluya relleno y borde en el ancho total y la altura del elemento */ <p> } <p> <p> botón { <p> Color de fondo:#4CAF50; <p> Color:blanco; <p> relleno:10px 15px; <p> borde:ninguno; <p> Border-Radius:4px; <p> cursor:puntero; <p> Ancho:100%; <p> } <p> <p> Botón:Hover { <p> Color de fondo:#3E8E41; <p> } <p> <p> .Error-Message { <p> Color:rojo; <p> margen-top:10px; <p> } <p> `` `` `` <p> <p> 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. <p> <p> <b> 3. Front -end (JavaScript - `script.js` - validación opcional del lado del cliente) </b> <p> <p> `` `JavaScript <p> document.getElementById ('loginform'). addEventListener ('enviar', function (event) { <p> const userName =document.getElementById ('UserName'). Value; <p> consta de contraseña =document.getElementById ('contraseña'). Valor; <p> const errorMessEdiv =document.getElementById ('errorMessage'); <p> <p> errorMessEdiv.TextContent =''; // Borrar errores anteriores <p> <p> if (! username ||! contraseña) { <p> errorMessEdiv.TextContent ='Ingrese tanto el nombre de usuario como la contraseña.'; <p> event.preventDefault (); // Evitar el envío del formulario <p> devolver; <p> } <p> <p> // Puede agregar una validación más compleja del lado del cliente aquí, como las verificaciones de fuerza de contraseña. <p> }); <p> <p> `` `` `` <p> <p> 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. <p> <p> <b> 4. Back -end (node.js con expreso - ejemplo) </b> <p> <p> Este es un ejemplo básico usando node.js y el marco expreso. Tendrá que instalarlos:<p> <p> `` `Bash <p> NPM Instale Express Body-Parser Bcrypt <p> `` `` `` <p> <p> * <b> `Express`:</b> Un marco de aplicaciones web para node.js. <p> * <b> `Body-Parser`:</b> Middleware para analizar cuerpos de solicitud. <p> * <b> `bcrypt`:</b> Biblioteca para las contraseñas de hash de forma segura. (¡Importante para la seguridad!) <p> <p> `` `JavaScript <p> const express =require ('express'); <p> const bodyParser =request ('Body-Parser'); <p> const bcRypt =require ('bcrypt'); <p> const app =express (); <p> Const Port =3000; <p> <p> // base de datos de usuario en memoria (reemplace con una base de datos real como MongoDB o PostgreSQL) <p> const usators =[]; // matriz de objetos de usuario {nombre de usuario, contraseñahash} <p> <p> app.use (BodyParser.UrlEncoded ({extendido:falso})); // Cuerpos codificados por URL <p> App.use (BodyParser.json ()); // analizar los cuerpos json <p> app.use (express.static ('public')); // Servir archivos estáticos (HTML, CSS, JS) del directorio 'público' <p> <p> app.get ('/', (req, res) => { <p> res.sendFile (__ dirname + '/public/login.html'); // Servir la página de inicio de sesión <p> }); <p> <p> app.post ('/login', async (req, res) => { <p> const {nombre de usuario, contraseña} =req.body; <p> <p> const user =users.find (u => u.username ===username); <p> <p> if (usuario) { <p> // Compare la contraseña proporcionada con el hash de contraseña almacenada <p> const PasswordMatch =espera bcrypt.compare (contraseña, user.passwordhash); <p> <p> if (contraseña) { <p> // autenticación exitosa <p> res.send ('¡Iniciar sesión exitoso!'); // En una aplicación real, redirigiría a un tablero o establecería una cookie de sesión. <p> } demás { <p> // Contraseña no válida <p> res.status (401) .send ('nombre de usuario o contraseña no válidos'); <p> } <p> } demás { <p> // Usuario no encontrado <p> res.status (401) .send ('nombre de usuario o contraseña no válidos'); <p> } <p> }); <p> <p> <p> app.post ('/registro', async (req, res) => { <p> const {nombre de usuario, contraseña} =req.body; <p> <p> // verifique si el nombre de usuario ya existe <p> if (users.find (u => u.username ===username)) { <p> return res.status (400) .send ('El nombre de usuario ya existe'); <p> } <p> <p> // hash la contraseña <p> Const saltrounds =10; // o más para el hashing más fuerte <p> const PasswordHash =ALEA BCRYPT.HASH (contraseña, salTrounds); <p> <p> // almacenar el nuevo usuario en la base de datos <p> users.push ({nombre de usuario, contraseñahash}); <p> <p> res.status (201) .send ('Usuario registrado con éxito'); <p> }); <p> <p> <p> app.listen (puerto, () => { <p> console.log (`servidor escucha en http:// localhost:$ {puerto}`); <p> }); <p> `` `` `` <p> <p> <b> Explicación del código de back-end:</b> <p> <p> 1. <b> Importaciones:</b> Importa los módulos necesarios:`Express`,` Body-Parser` y `bcrypt`. <p> 2. <b> Inicialización:</b> Crea una instancia de aplicación Express (`App`) y establece el puerto. <p> 3. <b> Middleware:</b> <p> * `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. <p> * `BodyParser.json ()`:PARSES JSON SELIT BODES. <p> * `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`. <p> 4. <b> Ruta para servir la página de inicio de sesión (`/`):</b> <p> * `app.get ('/', ...)`:Define una ruta que maneja las solicitudes de la ruta raíz (`/`). <p> * `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. <p> 5. <b> Ruta para manejar el envío de inicio de sesión (`/Login`):</b> <p> * `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. <p> * `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`. <p> * `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). <p> * <b> Pasehing con `bcRypt`:</b> <p> * `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. <p> * <b> Lógica de autenticación:</b> <p> * 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. <p> * 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. <p> 6. <b> Ruta para el registro </b> <p> * Se agregó una ruta de registro para permitir que se agregen nuevos usuarios al sistema <p> * La contraseña no se almacena, sino que se han asegurado para garantizar la seguridad <p> 7. <b> Iniciar el servidor:</b> <p> * `app.listen (puerto, ...)`:inicia el servidor expreso en el puerto especificado. <p> <p> <b> Consideraciones importantes y mejores prácticas de seguridad:</b> <p> <p> * <b> Base de datos:</b> 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. <p> * <b> Hashing de contraseña:</b> * 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. <p> * <b> Validación de entrada:</b> 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). <p> * <b> Gestión de la sesión:</b> 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. <p> * <b> https:</b> 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). <p> * <b> Manejo de errores:</b> 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. <p> * <b> CSRF Protección:</b> Proteger contra ataques de falsificación de solicitudes de sitios cruzados (CSRF) mediante el uso de tokens CSRF. <p> * <b> Limitando la velocidad:</b> Implementar la limitación de la tasa para evitar ataques de fuerza bruta en el punto final de inicio de sesión. <p> <p> <b> Cómo ejecutar el ejemplo:</b> <p> <p> 1. <b> Crear directorio de proyecto:</b> Cree un directorio para su proyecto (por ejemplo, `Login-App`). <p> 2. <b> Crear archivos:</b> Cree los siguientes archivos dentro del directorio del proyecto:<p> * `Login.html` (copie el código HTML) <p> * `style.css` (copie el código CSS) <p> * `script.js` (copie el código JavaScript) <p> * `server.js` (o` app.js`, o lo que quiera nombrar su archivo de servidor node.js - copie el código node.js) <p> * Cree una carpeta `public` y ponga` Login.html`, `style.css` y` script.js` dentro de ella. <p> 3. <b> Instalar dependencias:</b> Abra una terminal en el directorio del proyecto y ejecute:<p> `` `Bash <p> NPM Instale Express Body-Parser Bcrypt <p> `` `` `` <p> 4. <b> Ejecute el servidor:</b> En la terminal, ejecute:<p> `` `Bash <p> nodo servidor.js <p> `` `` `` <p> 5. <b> Abierto en el navegador:</b> Abra su navegador web y vaya a `http:// localhost:3000`. Debería ver la página de inicio de sesión. <p> <p> 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. <div class="escomad2"><script language='javascript' src='http://www.ordenador.online/ad/es/2.js'></script></div> </div> <div class=contentpage> <div class=p1>Página anterior: <a class='LinkPrevArticle' href='http://www.ordenador.online/Problema/contraseñas/353542.html' >¿Cómo se accede a la carpeta de contraseña si el directorio se encuentra en bloqueo? Me encerré de todas mis unidades usando la carpeta. ¿Puede ganar de nuevo? </a> </div> <div class=p2>Página siguiente: <a class='LinkNextArticle' href='http://www.ordenador.online/Problema/contraseñas/353549.html' >¿Qué se olvida cuando olvida su contraseña en Whoshere? </a> </div> </div> <dl class=xgc> <dt><span>contraseñas</span></dt> <dd><a href="http://www.ordenador.online/Problema/contraseñas/198844.html">Recovery de una contraseña perdida </a></dd><dd><a href="http://www.ordenador.online/Problema/contraseñas/198929.html">Cómo obtener una contraseña WEP utilizando Windows </a></dd><dd><a href="http://www.ordenador.online/Problema/contraseñas/313017.html">¿Cuál es la contraseña para el último juego en FunBrain? </a></dd><dd><a href="http://www.ordenador.online/Problema/contraseñas/260805.html">Cómo acceder a una cuenta antigua de Myspace sin correo electrónico ni contraseña </a></dd><dd><a href="http://www.ordenador.online/Problema/contraseñas/329944.html">¿Qué tecnologías proporcionan autenticación de inicio de sesión único? </a></dd><dd><a href="http://www.ordenador.online/Problema/contraseñas/353884.html">Cerré mi computadora y conozco la contraseña para volver. Una de esas cerraduras que establece con Ctrl Alt Eliminar. ¿Cómo eliminarlo por completo? </a></dd><dd><a href="http://www.ordenador.online/Problema/contraseñas/354222.html">¿Cómo se abre un CD protegido con contraseña? </a></dd><dd><a href="http://www.ordenador.online/Problema/contraseñas/354318.html">¿Cuál es la pista de contraseña para Qwerty? </a></dd> </dl> </div> <!--right--> <div class=rightmain> <div class=esrightlist> <div class=e1>Los últimos artículos de equipo</div> <ul> <li><a href="http://www.ordenador.online/Problema/contraseñas/354234.html" >¿Con qué abro el archivo PSW de contraseña guardada USB? </a> </li><li><a href="http://www.ordenador.online/Problema/contraseñas/199139.html" >Cómo eliminar una sesión Contraseña en XP </a> </li><li><a href="http://www.ordenador.online/Problema/contraseñas/264295.html" >Cómo conectar WiFi sin contraseña </a> </li><li><a href="http://www.ordenador.online/Problema/contraseñas/199020.html" >Cómo obtener una contraseña Guardado </a> </li><li><a href="http://www.ordenador.online/Problema/contraseñas/198851.html" >Cómo restablecer una contraseña con un Ultimate Boot CD </a> </li><li><a href="http://www.ordenador.online/Problema/contraseñas/198926.html" >Cómo encontrar una contraseña Power- Up en una Laptop HP Pavilion VD8000 </a> </li> </ul> </div> <div class=esrightlist> <div class=e1>Artículos de la popular computadora</div> <ul> <li> <a href="http://www.ordenador.online/Problema/contraseñas/198891.html" >Zip Password Recovery </a></li><li> <a href="http://www.ordenador.online/Problema/contraseñas/271322.html" >¿Cómo bloquear notas con contraseña en Mac y iPhone? </a></li><li> <a href="http://www.ordenador.online/Problema/contraseñas/354597.html" >¿Cómo puedo obtener mi contraseña olvidada para mi acer? </a></li><li> <a href="http://www.ordenador.online/Problema/contraseñas/353731.html" >¿Por qué mi computadora ya me permitió iniciar sesión en ciertos sitios como Buzznet y YouTube? </a></li><li> <a href="http://www.ordenador.online/Problema/contraseñas/354959.html" >¿Cómo se quitan la contraseña de inicio de sesión? </a></li><li> <a href="http://www.ordenador.online/Problema/contraseñas/198946.html" >Cómo quitar la contraseña de Windows mensaje de cambio </a></li> </ul> </div> <div class="esrightad"> <script language='javascript' src='http://www.ordenador.online/ad/es/r.js'></script> </div> <div class=esrightlist> <div class=e1>Más categorías</div> <ul> <li><a href='http://www.ordenador.online/Problema/Los-virus-informáticos/' target="_self">Los virus informáticos</a></li> <li><a href='http://www.ordenador.online/Problema/Convertir-archivos/' target="_self">Convertir archivos</a></li> <li><a href='http://www.ordenador.online/Problema/Soporte-para-portátil/' target="_self">Soporte para portátil</a></li> <li><a href='http://www.ordenador.online/Problema/Solución-de-problemas-del-ordenador-portátil/' target="_self">Solución de problemas del ordenador portátil</a></li> <li><a href='http://www.ordenador.online/Problema/PC-de-la-ayuda/' target="_self">PC de la ayuda</a></li> <li><a href='http://www.ordenador.online/Problema/Solución-de-problemas-de-PC/' target="_self">Solución de problemas de PC</a></li> <li><a href='http://www.ordenador.online/Problema/contraseñas/' target="_self">contraseñas</a></li> <li><a href='http://www.ordenador.online/Problema/Solucionar-problemas-de-errores-de-la-computadora/' target="_self">Solucionar problemas de errores de la computadora</a></li> <li><a href='http://www.ordenador.online/Problema/Desinstalar---periféricos-y-software/' target="_self">Desinstalar , periféricos y software</a></li> <li><a href='http://www.ordenador.online/Problema/Google/' target="_self">Google</a></li> <li><a href='http://www.ordenador.online/Problema/vpn/' target="_self">VPN</a></li> <li><a href='http://www.ordenador.online/Problema/Videos/' target="_self">Videos</a></li> <li><a href='http://www.ordenador.online/Problema/AI/' target="_self">AI</a></li> <li><a href='http://www.ordenador.online/Problema/ChatGPT/' target="_self">ChatGPT</a></li> <li><a href='http://www.ordenador.online/Problema/OpenAI/' target="_self">OpenAI</a></li> <li><a href='http://www.ordenador.online/Problema/Gemini/' target="_self">Gemini</a></li> <li><a href='http://www.ordenador.online/Problema/Browser/' target="_self">Browser</a></li> </ul> </div> </div> <!--right end--> <div class="cl"></div> </div> <div class=esfoot> <div class=copy>Conocimiento de la computadora © http://www.ordenador.online</div> </div> </body> </html>