V dnešnom svete je online bezpečnosť dôležitejšia ako kedykoľvek predtým. S toľkými online účtami, ktoré treba sledovať, je nevyhnutné mať pre každý z nich silné a jedinečné heslo.

Ak vytvárate stránky, je ešte dôležitejšie zabezpečiť, aby boli heslá tak bezpečné, ako len môžu byť. Používateľom vašej stránky môžete predložiť kontrolný zoznam a pred prijatím sa ubezpečiť, že ich heslo spĺňa vaše požiadavky.

Zistite, ako implementovať kontrolný zoznam hesiel pomocou Next.js.

Prečo používať kontrolný zoznam hesiel?

Existuje mnoho dôvodov, prečo by ste mohli chcieť použiť kontrolný zoznam hesiel.

Po prvé, môže vám pomôcť zabezpečiť, aby heslá vašich používateľov boli silné a jedinečné. Vďaka kontrolnému zoznamu požiadaviek si môžete byť istí, že každé heslo spĺňa určitý štandard.

Vaši používatelia vám za to možno nepoďakujú, ale urobíte im láskavosť. Podporovaním silných hesiel znížite pravdepodobnosť, že hacker získa prístup k účtu jedného z vašich používateľov.

Po druhé, kontrolný zoznam hesiel môže pomôcť sprostredkovať pocit bezpečia. Zverejnením požiadaviek hovoríte svojim používateľom, že beriete bezpečnosť hesiel vážne.

instagram viewer

Mali by ste si však uvedomiť, že kontrolný zoznam hesiel nie je zázračným riešením problémov s heslami. V skutočnosti, ak svoje heslá príliš obmedzíte, môžete hackerom uľahčiť zúženie ich možností a brutálne vynútenie hesla. V konečnom dôsledku bezpečné a jedinečné heslá, ktoré používatelia uložiť do správcu hesiel sú najlepšie.

Ako vytvoriť kontrolný zoznam hesiel

Existujú dva spôsoby, ako vytvoriť kontrolný zoznam hesiel v Next.js. Môžete použiť buď vstavané funkcie, alebo môžete použiť externý modul.

Čo budete potrebovať

Na vytvorenie kontrolného zoznamu hesiel v Next.js budete potrebovať nasledovné:

  • Node.js nainštalovaný
  • Textový editor
  • Projekt Next.js

Metóda 1: Používanie vstavaných funkcií

Next.js prichádza so vstavanými funkciami, ako sú háčiky a kontext. Existujú rôzne typy háčikov ktoré môžete použiť na vytvorenie kontrolného zoznamu hesiel.

Najprv vytvorte nový súbor v aplikácii Next.js a pomenujte ho passwordChecklist.js. V tomto súbore môžete zadať heslo od používateľov a môžete skontrolovať, či heslo spĺňa požiadavky.

importovať Reagovať, { useState } od 'reagovať'
funkciuKontrolný zoznam hesiel() {
 const [heslo, setPassword] = useState('')
konšt [chyba, setError] = useState(falošný)


funkciurukoväťZmeniť(e) {
nastaviť heslo(e.cieľ.hodnota)
 }


funkciurukoväťOdoslať(e) {
e.preventPredvolené()


// Požiadavky na heslo
konšt požiadavky = [
// Musí mať aspoň 8 znakov
 dĺžka hesla >= 8,
// Musí obsahovať aspoň 1 veľké písmeno
 /[A-Z]/.test(heslo),
// Musí obsahovať aspoň 1 malé písmeno
 /[a-z]/.test(heslo),
// Musí obsahovať aspoň 1 číslo
 /\d/.test(heslo)
 ]


// Ak sú splnené všetky požiadavky, heslo je platné
konšt isValid = requirements.every(Boolean)
 if (isValid) {
 upozornenie ('Heslo je platné!')
 } inak {
 setError(pravda)
 }
 }


vrátiť (
<form onSubmit={handleSubmit}>
<štítok>
 heslo:
<vstup
 typ="heslo"
 value={password}
 onChange={handleChange}
 />
</label>
<typ vstupu ="Predložiť" hodnota="Predložiť" />
 {chyba &&<p>Heslo nie je platné!</str>}
</form>
 )
}
exportpredvolená Kontrolný zoznam hesiel

Vo vyššie uvedenom kóde musíte najprv zadať heslo od používateľov. Môžete to urobiť pomocou useState háčik. Tento hák vám umožňuje vytvoriť stavovú premennú a funkciu na aktualizáciu tejto premennej. V tomto prípade je stavová premenná heslo a funkcia na jej aktualizáciu je nastaviť heslo.

Ďalej musíte vytvoriť funkciu na spracovanie odoslania formulára. Táto funkcia zabráni predvolenej akcii formulára (čo je odoslanie formulára) a skontroluje, či heslo spĺňa požiadavky.

Požiadavky na heslo sú, že musí:

  • mať aspoň osem znakov
  • obsahovať aspoň jedno veľké písmeno
  • obsahovať aspoň jedno malé písmeno
  • obsahovať aspoň jedno číslo

Môžete použiť každý spôsob, ako skontrolovať, či heslo spĺňa všetky požiadavky. Ak áno, heslo je platné. V opačnom prípade kód zobrazí chybové hlásenie.

Metóda 3: Použitie modulu reagovať-password-checklist

Ďalším spôsobom, ako vytvoriť kontrolný zoznam hesiel v Next.js, je použitie reagovať-heslo-kontrolný zoznam modul. Tento modul sa ľahko používa a prichádza s množstvom funkcií.

Najprv nainštalujte modul pomocou nasledujúceho príkazu:

npm Inštalácia reagovať-heslo- kontrolný zoznam --uložiť

Potom importujte modul do svojho passwordChecklist.js súbor:

importovať Reagovať, {useState} od "reagovať"
importovať Kontrolný zoznam hesiel od "reagovať-heslo-kontrolný zoznam"
konšt Aplikácia = () => {
 const [heslo, setPassword] = useState("")


vrátiť (
<formulár>
<štítok>heslo:</label>
<typ vstupu ="heslo" onChange={e => setPassword (e.target.value)}/>


<Kontrolný zoznam hesiel
 pravidlá={["minDĺžka","špeciálneChar","číslo","kapitál"]}
 minDĺžka={5}
 value={password}
 />
</form>
 )
}
exportpredvolená App

Tento kód odovzdá rekvizity minLength, specialChar, číslo a kapitál Kontrolný zoznam hesiel komponent. Komponent použije tieto rekvizity na kontrolu, či heslo spĺňa požiadavky.

Môžete tiež pridať preložené správy do komponentu odovzdaním správy rekvizita. Tieto reťazce prepíšu predvolené chyby, takže ich môžete použiť pre iné jazyky alebo variácie.

importovať Reagovať, {useState} od "reagovať"
importovať Kontrolný zoznam hesiel od "reagovať-heslo-kontrolný zoznam"
konšt Aplikácia = () => {
 const [heslo, setPassword] = useState("")


vrátiť (
<formulár>
<štítok>heslo:</label>
<typ vstupu ="heslo" onChange={e => setPassword (e.target.value)}/>


<Kontrolný zoznam hesiel
 pravidlá={["minDĺžka", "špeciálneChar", "číslo", "kapitál"]}
 minDĺžka={5}
 value={password}
 správy={{
 minDĺžka: "La contraseña tiene más 8 znakmi.",
 specialChar: "La contraseñnajmä tiene caracteres.",
 číslo: "La contraseña tiene un número.",
 kapitál: "La contraseña tiene una letra mayúscula.",
 zápas: "Las contraseñako zhoda okolností.",
 }}
 />
</form>
 )
}
exportpredvolená App

Vo vyššie uvedenom kóde je správy prop ukladá alternatívne chybové hlásenia. Komponent zobrazí tieto správy, keď heslo nespĺňa požiadavky.

Táto metóda je pohodlnejšia, pretože nemusíte písať kód, aby ste skontrolovali, či heslo spĺňa požiadavky. Používanie tohto modulu má aj mnoho ďalších výhod, ako napríklad:

  • Zobrazenie sily hesla: reagovať-heslo-kontrolný zoznam môže zobraziť silu hesla, aby používatelia videli, aké silné je ich heslo.
  • Zobrazuje sa chybové hlásenie: reagovať-heslo-kontrolný zoznam môže tiež zobraziť chybové hlásenie, ak heslo nie je platné.
  • Styling: Do kontrolného zoznamu nemusíte pridávať žiadne ďalšie štýly. Modul poskytuje predvolený štýl, ktorý môžete použiť vo svojej aplikácii. Ak chcete pridať nejaký ďalší štýl, môžete použiť bežné CSS alebo iné stylingové rámce ako tailwind CSS.

Zvýšte bezpečnosť používateľov pomocou kontrolného zoznamu hesiel

Silné heslo je kľúčom k online bezpečnosti. Pre každý online účet je dôležité mať silné a jedinečné heslo. Pomocou kontrolného zoznamu hesiel si môžete byť istí, že každé heslo spĺňa určitý štandard.

Používatelia vašej aplikácie tiež ocenia, že budú môcť vidieť silu hesla. Takto si môžu byť istí, že ich heslá sú dostatočne silné. Zlepšíte tým používateľskú skúsenosť vašej aplikácie a zlepšíte aj bezpečnosť používateľov vašej aplikácie. Podobne môžete overiť formuláre aj v aplikácii Next.js.