Come si crea una pagina di accesso con campi utente e password?

La creazione di una pagina di accesso prevede sia il front-end (HTML, CSS, JavaScript) per l'interfaccia utente e il back-end (linguaggio sul lato server e database) per l'autenticazione e la gestione dei dati. Ecco una rottura di come creare una pagina di accesso, che copre sia il front-end che un approccio di back-end di esempio semplificato.

1. Front -end (HTML Structure - `login.html`)

`` `html

Accedi

Login

Nome utente:

password:

Accedi

* ``: Imposta il titolo che appare nella scheda browser. * ` <link rel ="Stylesheet" href ="style.css"> `: Collegamenti al tuo file CSS per lo styling. * `<div>`: Un Div contenitore per mantenere la forma di accesso e i suoi elementi, facilitando lo stile. * ` <h2> Login </h2> `: Un intestazione per il modulo di accesso. * `<modulo id =" loginform "action ="/login "metodo =" post ">`: Il nucleo della forma: * `id =" loginform "`:fornisce un identificatore univoco per il modulo, permettendoti di manipolarlo con JavaScript. * `action ="/login "`: fondamentalmente importante! Ciò specifica l'URL sul server che gestirà la richiesta di accesso quando viene inviato il modulo. Sostituisci `/login` con il percorso effettivo all'endpoint di accesso lato server. * `Method =" Post "`:indica che i dati del modulo verranno inviati al server utilizzando il metodo HTTP Post, che è generalmente più sicuro per dati sensibili come le password. * `<div>`: Contenitori per etichette e campi di input, aiutando lo stile e l'organizzazione. * `<etichetta per =" nome utente ">` e `<input type =" text "id =" nome utente "nome =" nome utente "richiesto>`: * `Label`:fornisce un'etichetta di testo per il campo di input. L'attributo `per` dovrebbe corrispondere all'id` del campo di input a cui è associato. * `input type =" text "`:crea un campo di input di testo per il nome utente. `name =" nome utente "` è importante:il codice lato server utilizzerà questo nome per accedere al valore immesso dall'utente. `richiesto` rende il campo obbligatorio. * `<input type =" password "id =" password "name =" password "richiesto>`: Crea un campo di input password. L'attributo `type =" password "` maschera l'input come tipi utente. `name =" password "` viene utilizzato dal codice lato server. `richiesto` rende il campo obbligatorio. * `<button type =" invia "> login </botton> `: Il pulsante di invio che innesca l'invio del modulo. * `<div> </div> `: Un segnaposto per visualizzare i messaggi di errore dal server, se l'autenticazione non riesce. * `<script src =" script.js "> </script> `: Collegamenti al tuo file JavaScript per qualsiasi convalida sul lato client o altre interazioni. 2. Front -end (CSS Styling - `style.css`) `` `CSS corpo { Font-Family:sans-serif; Background-color:#f4f4f4; display:flex; giustificare contento:centro; ALIGE-ITMS:CENTRO; Min-Height:100VH; } .login-container { Background-color:#FFF; imbottitura:20px; raggio di frontiera:8px; Box-Shadow:0 0 10px RGBA (0, 0, 0, 0.1); larghezza:300px; } .Form-Group { margine-bottom:15px; } etichetta { Visualizza:blocco; margine-bottom:5px; } Input [type ="text"], Input [type ="password"] { larghezza:100%; imbottitura:8px; bordo:1px solido #ccc; raggio di frontiera:4px; Dimensizzazione di scatole:bordo-box; / * Includi imbottitura e bordo nella larghezza e altezza totale dell'elemento */ } Button { Background-color:#4Caf50; Colore:bianco; imbottitura:10px 15px; confine:nessuno; raggio di frontiera:4px; Cursore:puntatore; larghezza:100%; } Button:Hover { Background-color:#3e8e41; } .error-message { Colore:rosso; margine-top:10px; } `` ` Questo CSS fornisce uno stile di base per centrare il modulo di accesso, modellare i campi di input e il pulsante e fornire un indicatore visivo per i messaggi di errore. 3. Front -end (JavaScript - `script.js` - Convalida sul lato client opzionale) `` `JavaScript Document.getElementById ('LogInForm'). AddEventListener ('Invia', Function (Event) { const nome utente =document.getElementById ('nome utente'). Valore; const password =document.getElementById ('Password'). Valore; const errorMessageDiv =document.getElementById ('errorMessage'); errorMessageDiv.TextContent =''; // Cancella errori precedenti if (! nome utente ||! password) { errorMessageDiv.TextContent ='Si prega di inserire sia il nome utente che la password.'; event.preventDefault (); // prevenire la presentazione del modulo ritorno; } // È possibile aggiungere una convalida più complessa sul lato client qui, come i controlli di forza della password. }); `` ` Questo JavaScript aggiunge un controllo di convalida sul lato client che entrambi i campi di nome utente e password siano stati compilati prima di inviare il modulo al server. È facoltativo ma migliora l'esperienza dell'utente fornendo un feedback immediato. 4. Back -end (node.js con express - esempio) Questo è un esempio di base usando Node.js e il framework Express. Dovrai installarli: `` `Bash NPM Installa Express Body-Parser BCrypt `` ` * `Express`: Un framework di applicazioni Web per node.js. * `Body-Parser`: Middleware per analizzare i corpi di richiesta. * `bcrypt`: Biblioteca per le password di hashing in modo sicuro. (Importante per la sicurezza!) `` `JavaScript const espress =requisito ('express'); const bodyParser =requisito ('Body-Parser'); const bcrypt =requisito ('bcrypt'); const app =express (); port const =3000; // database utente in memoria (sostituire con un database reale come MongoDB o PostgreSQL) const utenti =[]; // array di oggetti utente {nome utente, passwordhash} app.use (bodyParser.urLencoded ({esteso:false})); // analizza i corpi codificati URL app.use (bodyParser.json ()); // analizza i corpi json app.use (express.static ('pubblico')); // Servi file statici (HTML, CSS, JS) dalla directory "pubblica" app.get ('/', (req, res) => { Res.sendFile (__ Dirname + '/public/login.html'); // Servi la pagina di accesso }); app.post ('/login', async (req, res) => { const {nome utente, password} =req.body; const utente =utenti.find (u => U.UserName ===Nome utente); if (utente) { // Confronta la password fornita con l'hash della password memorizzata const passwordMatch =Abveat bcrypt.Compare (password, user.passwordhash); if (passwordmatch) { // autenticazione riuscita res.send ('login di successo!'); // In una vera applicazione, ti reindirizzeresti a una dashboard o imposteresti un cookie di sessione. } altro { // password non valida Res.Status (401) .send ("nome utente o password non valido"); } } altro { // utente non trovato Res.Status (401) .send ("nome utente o password non valido"); } }); app.post ('/register', async (req, res) => { const {nome utente, password} =req.body; // controlla se il nome utente esiste già if (utenti.find (u => U.UserName ===nome utente)) { return res.status (400) .send ('il nome utente esiste già'); } // hash la password const saltrounds =10; // o più per hashing più forte const passwordHash =Abveat bcrypt.Hash (password, saltrounds); // memorizza il nuovo utente nel database utenti.push ({nome utente, passwordHash}); Res.Status (201) .send ('utente registrato correttamente'); }); app.listen (port, () => { console.log (`Server Ascolt at http:// localhost:$ {port}`); }); `` ` Spiegazione del codice back-end: 1. Importazioni: Importa i moduli necessari:`Express`,` Body-Parser` e `bcrypt`. 2. Inizializzazione: Crea un'istanza espressa dell'applicazione (`app`) e imposta la porta. 3. Middleware: * `BodyParser.urlencoded ({esteso:false})`:corpi di richiesta con codifica URL di analisi (dati inviati dai moduli HTML). `Extended:False` usa la libreria di querystring integrata, mentre` esteso:True` usa la libreria `QS`, che consente strutture di oggetti più complesse. * `BodyParser.json ()`:parses JSON Richiedi corpi. * `Express.static ('pubblico')`:serve file statici (HTML, CSS, JavaScript) dalla directory `Public '. Qui è dove metteresti i tuoi file `login.html`,` style.css` e `script.js`. 4. Percorso per servire la pagina di accesso (`/`): * `app.get ('/', ...)`:definisce un percorso che gestisce ricevere richieste al percorso di root (`/`). * `Res.sendFile (__ dirname + '/public/login.html')`:invia il file `login.html` al client. `__dirname` è la directory corrente dello script, garantendo che il percorso del file sia corretto. 5. Percorso per la gestione dell'invio di accesso (`/login`): * `app.post ('/login', ...)`:definisce un percorso che gestisce le richieste pubblicate al percorso `/login`. È qui che vengono inviati i dati del modulo di accesso. * `req.body`:contiene i dati inviati dal modulo. Grazie a `Body-Parser`, puoi accedere al nome utente e alla password utilizzando` req.body.username` e `req.body.password`. * `Users.Find (u => U.UserName ===Nome utente)`:cerca l'array `utenti 'per un utente con il nome utente corrispondente. (In una vera applicazione, avresti interrogato il tuo database.) * Hashing password con `bcrypt`: * `bcrypt.compare (password, user.passwordhash)`:questa è la parte cruciale per la sicurezza. Confronta la password in chiaro inserito dall'utente con l'hash * memorizzato della password. `BCrypt` gestisce automaticamente il processo di salting. Questo è molto più sicuro che archiviare le password in chiaro. * Logica di autenticazione: * Se viene trovato un utente e la password corrispondesse, in genere imposteresti un cookie di sessione per autenticare l'utente e reindirizzarli in un'area di accesso. In questo esempio, invia solo un "Accedi di successo!" messaggio. * Se l'utente non viene trovato o la password non corrisponde, invia una risposta all'errore (`401 non autorizzato '). Il JavaScript front-end può quindi visualizzare questo messaggio di errore all'utente. 6. Route per la registrazione * Aggiunta un percorso di registro per consentire l'aggiunta di nuovi utenti al sistema * La password non viene archiviata ma hash per garantire la sicurezza 7. Avvio del server: * `app.listen (porta, ...)`:avvia il server Express sulla porta specificata. Considerazioni importanti e migliori pratiche di sicurezza: * Database: Sostituire l'array `utenti" in memoria con un database reale (ad es. MongoDB, PostgreSQL, MySQL). Utilizzare una libreria di database (come Mongoose per MongoDB o Sequelis per PostgreSQL/MySQL) per interagire con il database. * Hashing password: * Non* memorizzare le password in chiaro. Utilizzare sempre un algoritmo di hashing di password forte come `bcrypt` (come mostrato nell'esempio). `BCrypt` include la salatura, il che rende molto più difficile per gli aggressori decifrare le password anche se ottengono il database. Utilizzare `bcrypt.hash ()` to hash password quando gli utenti si registrano e `bcrypt.compare ()` per confrontare la password immessa con l'hash memorizzato durante l'accesso. * Convalida input: Convalida l'input dell'utente sia sul lato client (per l'esperienza utente) che sul lato server (per sicurezza). Sanitizzare l'input per prevenire gli attacchi di iniezione (ad es. Iniezione SQL, XSS). * Gestione della sessione: Utilizzare sessioni per mantenere lo stato di accesso utente. Dopo l'accesso corretto, memorizzare un ID di sessione in un cookie sul browser del client. Sulle richieste successive, il server può utilizzare l'ID sessione per identificare l'utente senza richiedere loro di accedere di nuovo. Librerie come `Express-Session` possono aiutare a gestire le sessioni. * https: Utilizzare sempre HTTPS (SSL/TLS) per crittografare la comunicazione tra il client e il server. Ciò impedisce gli attacchi di intercettazione e uomo-in-the-middle. Ottenere un certificato SSL da un'autorità di certificazione (ad esempio, crittografiamo). * Gestione degli errori: Implementare la corretta gestione degli errori per evitare che le informazioni sensibili vengano esposte nei messaggi di errore. Errori di registro in modo sicuro. * Protezione CSRF: Proteggi gli attacchi di falsificazione della richiesta di siti (CSRF) utilizzando token CSRF. * Limitazione della velocità: Implementare la limitazione della velocità per prevenire gli attacchi di forza bruta all'endpoint di accesso. Come eseguire l'esempio: 1. Crea la directory del progetto: Crea una directory per il tuo progetto (ad esempio, `login-app`). 2. Crea file: Crea i seguenti file all'interno della directory del progetto: * `login.html` (copia il codice HTML) * `style.css` (copia il codice CSS) * `script.js` (copia il codice JavaScript) * `server.js` (o` app.js`, o come si desidera nominare il tuo file server node.js - copia il codice node.js) * Crea una cartella `public` e metti` login.html`, `style.css` e` script.js` al suo interno. 3. Installazione di dipendenze: Apri un terminale nella directory del progetto ed esegui: `` `Bash NPM Installa Express Body-Parser BCrypt `` ` 4. Esegui il server: Nel terminale, esegui: `` `Bash Node Server.js `` ` 5. Apri nel browser: Apri il tuo browser Web e vai su `http:// localhost:3000`. Dovresti vedere la pagina di accesso. Ricorda che questo è un esempio di base. Per un'applicazione del mondo reale, dovrai implementare misure di integrazione del database, gestione delle sessioni e sicurezza adeguate. <ul class="mhjkhjlj"> <li> <a class='LinkPrevArticle' href='https://www.354353.com/domanda/password/1590860.html' >Come si accede alla cartella password se la directory si trova in bloccata. Mi sono bloccato da tutte le mie unità usando la cartella. Può guadagnare di nuovo? </a> <li> <a class='LinkNextArticle' href='https://www.354353.com/domanda/password/1590867.html' >Cosa dimentica la tua password su Whoshere? </a> </ul> <div class="deep"> <div class="guanggadsadswqew"><script language='javascript' src='/AD/it3.js'></script></div> <div class="guanggadsadswqew1"></div> </div> <div class="xiangguanleitong"> <div class="vbfdghgjt65f"><h4>Informazioni correlate</h4></div> <ul> <li><a href="https://www.354353.com/domanda/PC-Risoluzione-dei-problemi/1506866.html" target="_blank">Come eseguire l'upscaling delle immagini dalla diffusione stabile </a></li><li><a href="https://www.354353.com/domanda/Supporto-Notebook/1582376.html" target="_blank">Quanto è buono il laptop Dell 1525-106W? </a></li><li><a href="https://www.354353.com/domanda/PC-Support/1368292.html" target="_blank">Come importare MTS file in Final Cut Express 3.5 </a></li><li><a href="https://www.354353.com/domanda/Convertire-i-file/1365358.html" target="_blank">Come convertire MP3 in file WAV in Linux </a></li><li><a href="https://www.354353.com/domanda/PC-Support/1371568.html" target="_blank">Come eliminare le voci non avvio in Msconfig in Vista </a></li><li><a href="https://www.354353.com/domanda/PC-Risoluzione-dei-problemi/1508004.html" target="_blank">Guida tecnica:articoli pratici, guide all'acquisto di gadget, elenchi tecnici </a></li><li><a href="https://www.354353.com/domanda/PC-Risoluzione-dei-problemi/1497232.html" target="_blank">Cosa sono gli obiettivi o i trofei di Snapchat? </a></li><li><a href="https://www.354353.com/domanda/virus-informatici/1362404.html" target="_blank">Come controllare per virus Conficker </a></li> </ul> </div> </div> </div> <div class="woshiyouleirog"> <div class="zxtjianasd"> <div class="bidssdfjm3"><h4>Articoli consigliati</h4></div> <div class="dasdcdfurit33"> <ul> <li><a href="https://www.354353.com/domanda/password/1591163.html" target="_blank">Quando selezioni ricorda la tua password in hotmail ma non lo fa? </a></li><li><a href="https://www.354353.com/domanda/password/1398136.html" target="_blank">Come rimuovere un amministratore locale password </a></li><li><a href="https://www.354353.com/domanda/password/1507440.html" target="_blank">Come proteggere con password un file zip in Windows </a></li><li><a href="https://www.354353.com/domanda/password/1552341.html" target="_blank">Cos'è la password dell'amministratore? </a></li><li><a href="https://www.354353.com/domanda/password/1539916.html" target="_blank">Quale autenticazione utilizza anche l'algoritmo DES? </a></li><li><a href="https://www.354353.com/domanda/password/1590680.html" target="_blank">Quando un client Windows 95 è configurato come parte del dominio, la password verrà autenticata da cosa? </a></li><li><a href="https://www.354353.com/domanda/password/1591488.html" target="_blank">Esiste un modo per proteggere con password a unità penna in modo che nessuno possa aprirla senza la password? </a></li><li><a href="https://www.354353.com/domanda/password/1398128.html" target="_blank">Come trovare la password del server </a></li><li><a href="https://www.354353.com/domanda/password/1498884.html" target="_blank">Come trovare la password Wi-Fi su Android </a></li><li><a href="https://www.354353.com/domanda/password/1523958.html" target="_blank">Come si accede a un dominio? </a></li> </ul> </div> </div> <div class="guanggandgsa32a"> </div> <div class="huosirengs"> </div> </div> </div> <div class="dsadsafa-da"> Domanda © www.354353.com </div> </div> </body> </html>