Ako vytvoríte prihlasovaciu stránku s poliami používateľa a heslom?

username:

heslo:

in

* `Label`:Poskytuje textový štítok pre vstupné pole. Atribút „For“ by sa mal zhodovať s `id` vstupného poľa, s ktorým je spojené.

* `Vstupný typ =" Text "`:Vytvorí textové vstupné pole pre používateľské meno. `name =" username "` je dôležitý-kód na strane servera použije tento názov na prístup k hodnote zadanej používateľom. „Vyžaduje“ je povinným poľom.

in Vytvorí pole vstupu hesla. „Typ =" Password "` atribúty maskuje vstup ako typy používateľov. `name =" heslo "` sa používa podľa kódu na strane servera. „Vyžaduje“ je povinným poľom.

* ` prihlasovacie číslo `: Tlačidlo Odoslať, ktoré spustí odoslanie formulára.

* `

* ` `: Odkazy na váš súbor JavaScript pre všetky overenie na strane klienta alebo iné interakcie.

2. Front -end (CSS Styling - `Style.css`)

`` CSS

telo {

rodina:Sans-serif;

pozadie:#F4F4F4;

displej:Flex;

Odôvodnenie-s-content:Center;

zarovnávacie položky:stred;

Min-Height:100VH;

}

.login-container {

pozadie zafarbenie:#FFF;

vypchávka:20px;

Radius na hranici:8px;

Škraňa:0 0 10px RGBA (0, 0, 0, 0,1);

Šírka:300px;

}

.form-group {

margin-dno:15px;

}

štítok {

displej:blok;

margin-dno:5px;

}

vstup [typ ="text"],

vstup [type ="heslo"] {

Šírka:100%;

vypchávka:8px;

BORDER:1PX SOLD #CCC;

Radius na hranici:4px;

veľkosť boxu:hraničný box; / * Zahrňte vypchávanie a hranicu do celkovej šírky a výšky prvku */

}

tlačidlo {

pozadie:#4CAF50;

Farba:biela;

vypchávka:10px 15px;

okraj:Žiadne;

Radius na hranici:4px;

Kurzor:ukazovateľ;

Šírka:100%;

}

tlačidlo:Hover {

pozadie:#3E8E41;

}

.Error-mesáž {

Farba:červená;

margin-top:10px;

}

`` `

Tento CSS poskytuje základný štýl na sústredenie prihlasovacieho formulára, štýl vstupných polí a tlačidla a poskytuje vizuálny indikátor pre chybové správy.

3. Front -end (JavaScript - `Script.js` - voliteľné validáciu na strane klienta)

`` `JavaScript

Document.GetElementById ('loginForm'). AddEventListener ('subset', funkcia (event) {

const username =document.getElementById ('username'). Value;

const heslo =document.getElementById ('heslo'). Value;

const errorMessageDiv =document.getElementById ('errorMessage');

errorMessageDiv.TextContent =''; // Vymažte predchádzajúce chyby

if (! Používateľské meno ||! heslo) {

errorMessageDiv.TextContent ='Zadajte používateľské meno aj heslo.';

event.preventDefault (); // Prevente predkladanie formulára

návrat;

}

// Tu môžete pridať komplexnejšie validáciu na strane klienta, napríklad kontroly sily hesla.

});

`` `

Tento JavaScript pridá kontrolu validácie na strane klienta, aby boli predložené formuláre na server vyplnené polia používateľského mena aj hesla. Je voliteľná, ale zlepšuje skúsenosti používateľa poskytnutím okamžitej spätnej väzby.

4. Back -end (node.js s express - príklad)

Toto je základný príklad pomocou Node.js a Express Framework. Budete ich musieť nainštalovať:

`` `Bash

NPM inštalácia expresného tela-parkrypt bcrypt

`` `

* `express`: Rámec webovej aplikácie pre Node.js.

* `Body-Parser`: Middleware na analyzovanie požiadaviek na telá.

* `BCrypt`: Knižnica pre hashovanie hesiel bezpečne. (Dôležité pre bezpečnosť!)

`` `JavaScript

const express =vyžaduje ('express');

const Bodyparser =vyžadovať („telová parkovacia“);

const bcrypt =vyžadovať ('bcrypt');

const app =express ();

const port =3000;

// Databáza používateľa v memore (nahradiť skutočnou databázou, ako je MongoDB alebo PostgreSQL)

const Users =[]; // pole používateľských objektov {username, hesloHash}

App.use (bodyparser.urlencoded ({extended:false})); // Parse URL kódované telá

App.use (bodyparser.json ()); // Barse Json Bodies

App.use (Express.Static („public“)); // Podávajte statické súbory (HTML, CSS, JS) z „verejného“ adresára

app.get ('/', (req, res) => {

res.sendFile (__ dirName + '/public/login.html'); // podávajte prihlasovaciu stránku

});

app.post ('/login', async (req, res) => {

const {username, heslo} =req.body;

const user =users.find (u => u.UserName ===Username);

if (user) {

// Porovnajte poskytnuté heslo s uloženým hashom hesla

const hesloMatch =await bcrypt.compare (heslo, user.passwordhash);

if (hesloMatch) {

// autentifikácia úspešná

res.send („Prihláste sa úspešné!“); // V skutočnej aplikácii by ste presmerovali na prístrojový panel alebo nastavili cookie relácie.

} else {

// Neplatné heslo

res.status (401) .Send („Neplatné používateľské meno alebo heslo“);

}

} else {

// používateľ nenašiel

res.status (401) .Send („Neplatné používateľské meno alebo heslo“);

}

});

app.post ('/register', async (req, res) => {

const {username, heslo} =req.body;

// Skontrolujte, či používateľské meno už existuje

if (users.find (u => u.UserName ===Username)) {

return res.status (400) .Send („používateľské meno už existuje“);

}

// hash heslo

Const Saltrounds =10; // alebo viac pre silnejšie hashovanie

const Passwordhash =čaká Bcrypt.Hash (heslo, Saltrounds);

// Uložte nového používateľa do databázy

Users.push ({username, hesloHash});

res.status (201) .Send („Užívateľ registrovaný úspešne“);

});

App.Listen (port, () => {

Console.log (`Server počúvanie na adrese http:// localhost:$ {port}`);

});

`` `

Vysvetlenie kódu back-end:

1. Imports: Importuje potrebné moduly:`express`,` Body-Parser` a `BCrypt`.

2. Inicializácia: Vytvorí inštanciu Express Application Instance (`App`) a nastaví port.

3. Middleware:

* `Bodyparser.urlenCoded ({extended:false})`:Parses URL kódované požiadavky (údaje odosielané z formulárov HTML). `Extended:False` používa vstavanú knižnicu QueryString Library, zatiaľ čo„ Extended:True` používa knižnicu `QS`, ktorá umožňuje zložitejšie štruktúry objektov.

* `Bodyparser.json ()`:Body s analSes JSON.

* `Express.static ('public')`:Slúži statické súbory (HTML, CSS, JavaScript) z adresára „public`. Tu by ste vložili svoje súbory `login.html`,` style.css` a `script.js`.

4. Trasa na servírovanie prihlasovacej stránky (`/`):

* `App.get ('/', ...)`:Definuje cestu, ktorá spracováva žiadosti o koreňovú cestu (`/`).

* `res.sendFile (__ dirname + '/public/login.html')`:Odošle klientovi súbor `login.html`. `__DirName` je aktuálny adresár skriptu, ktorý zaisťuje správnu cestu súboru.

5. Trasa na manipuláciu s prihlásením (`/login`):

* `App.post ('/login', ...)`:Definuje cestu, ktorá spracováva žiadosti o príspevok na cestu `/login`. Tu sa odosielajú údaje o prihlasovacích formulároch.

* `req.body`:Obsahuje údaje odoslané z formulára. Vďaka „Body-Parser` máte prístup k používateľskému menu a heslu pomocou` req.body.username` a `req.body.password`.

* `Users.Find (u => u.UserName ===UserName)`:Vyhľadáva „používateľské pole pre používateľa so zodpovedajúcim používateľským menom. (V skutočnej aplikácii by ste dotazli svoju databázu.)

* Hashing hesla s `bcrypt`:

* `bcrypt.comPare (heslo, user.passwordhash)`:Toto je rozhodujúca časť pre zabezpečenie. Porovnáva heslo PLAITEXT zadané používateľom s uloženým * hash * hesla. `Bcrypt` automaticky spracováva proces soli. To je oveľa bezpečnejšie ako ukladanie hesiel do HllliCtExt.

* Logika autentifikácie:

* Ak je používateľ nájdený a zhoduje sa s heslom, zvyčajne by ste nastavili cookie relácie, aby ste overili používateľa a presmerovali ich do prihlásenej oblasti. V tomto príklade iba pošle „Prihláste sa úspešné!“ správa.

* Ak sa používateľ nenašiel alebo sa heslo nezhoduje, odošle chybovú odpoveď (`401 neoprávnená`). Front-end JavaScript potom môže používateľovi zobraziť túto chybovú správu.

6. Trasa pre registráciu

* Pridaná trasa registrácie, ktorá umožňuje pridanie nových používateľov do systému

* Heslo nie sú uložené, ale hashované na zabezpečenie bezpečnosti

7. Spustenie servera:

* `App.Listen (port, ...)`:Spustí expresný server na zadanom porte.

Dôležité úvahy a osvedčené postupy zabezpečenia:

* Databáza: Nahraďte pole v pamäti „Používateľov“ za skutočnú databázu (napr. MongoDB, PostgreSQL, MySQL). Na interakciu s databázou použite knižnicu databázy (napríklad Mongoose pre MongoDB alebo pokračujte pre PostgreSQL/MySQL).

* Hashing hesla: * Nikdy* ukladajte heslá do PlointExt. Vždy používajte silný algoritmus hashovania hesla ako `bcrypt` (ako je uvedené v príklade). „Bcrypt“ obsahuje solenie, čo pre útočníkov je oveľa ťažšie prelomiť heslá, aj keď získajú databázu. Pri registrácii používateľov používajte `bcrypt.hash ()` na hash heslá a „bcrypt.compare ()` na porovnanie zadaného hesla s uloženým hashom počas prihlásenia.

* Vstupné overenie: Oveďte vstup používateľa na strane klienta (pre používateľskú skúsenosť) aj na strane servera (pre zabezpečenie). Dezinfikujte vstup na zabránenie injekčným útokom (napr. Injekcia SQL, XSS).

* Správa relácií: Použite relácie na udržanie stavu prihlásenia používateľa. Po úspešnom prihlásení uložte ID relácie v cookie v prehliadači klienta. Pri nasledujúcich požiadavkách môže server pomocou ID relácie identifikovať používateľa bez toho, aby sa vyžadoval, aby sa znova prihlásil. Knižnice ako „expresná relácia“ môžu pomôcť spravovať relácie.

* https: Na šifrovanie komunikácie medzi klientom a serverom vždy použite HTTPS (SSL/TLS). To zabraňuje odpočúvaniu a útokom človeka v strede. Získajte certifikát SSL od autority certifikátu (napr. Poďme šifrovať).

* Manipulácia s chybami: Implementujte správne spracovanie chýb, aby ste zabránili odhaleniu citlivých informácií v chybových správach. Chyby denníka bezpečne.

* CSRF Ochrana: Chráňte pred útokmi na falšovanie žiadostí o viacerých stránkach (CSRF) pomocou tokenov CSRF.

* Obmedzenie rýchlosti: Implementujte obmedzenie sadzby, aby ste zabránili útokom na brutáciu sily na koncový bod prihlasovania.

Ako spustiť príklad:

1. Vytvoriť adresár projektu: Vytvorte adresár pre svoj projekt (napr. „Prihlásenie-app`).

2. Vytvárajte súbory: V rámci adresára projektu vytvorte nasledujúce súbory:

* `login.html` (skopírujte kód HTML)

* `Style.css` (skopírujte kód CSS)

* `Script.js` (skopírujte kód JavaScript)

* `Server.js` (alebo` app.js`, alebo čokoľvek chcete pomenovať súbor servera Node.js - skopírujte kód Node.js)

* Vytvorte priečinok `public` a vložte do neho` login.html`, `style.css` a` script.js` do nej.

3. Inštalujte závislosti: Otvorte terminál v adresári projektu a spustite:

`` `Bash

NPM inštalácia expresného tela-parkrypt bcrypt

`` `

4. Spustite server: V termináli spustite:

`` `Bash

uzol server.js

`` `

5. Otvorené v prehliadači: Otvorte svoj webový prehliadač a prejdite na `http:// localhost:3000`. Mali by ste vidieť prihlasovaciu stránku.

Pamätajte, že toto je základný príklad. V prípade aplikácie v reálnom svete budete musieť implementovať správnu integráciu databázy, správu relácií a bezpečnostné opatrenia.

• Predchádzajúca strana: Ako máte prístup k priečinku hesla, ak je adresár umiestnený v uzamknutí. Zamkla som sa zo všetkých svojich diskov pomocou priečinka. Môže získať znova? 
• Ďalšia strana: Čo si zabudnete na svoje heslo na tom, kde?