V današnjem svetu je spletna varnost pomembnejša kot kdaj koli prej. Pri toliko spletnih računih, ki jih je treba spremljati, je bistveno, da imate za vsakega močno in edinstveno geslo.

Če gradite spletno mesto, je še bolj pomembno zagotoviti, da so gesla čim bolj varna. Tistim, ki uporabljajo vaše spletno mesto, lahko predstavite kontrolni seznam in zagotovite, da njihovo geslo ustreza vašim zahtevam, preden ga sprejmete.

Naučite se implementirati kontrolni seznam gesel z Next.js.

Zakaj uporabljati kontrolni seznam gesel?

Obstaja veliko razlogov, zakaj bi morda želeli uporabiti kontrolni seznam gesel.

Prvič, lahko vam pomaga zagotoviti, da so gesla vaših uporabnikov močna in edinstvena. Če imate kontrolni seznam zahtev, ste lahko prepričani, da vsako geslo ustreza določenemu standardu.

Vaši uporabniki se vam morda ne bodo zahvalili za to, vendar jim boste naredili uslugo. S spodbujanjem močnih gesel boste zmanjšali verjetnost, da bo heker pridobil dostop do enega od vaših uporabniških računov.

instagram viewer

Drugič, kontrolni seznam gesel lahko pomaga prenesti občutek varnosti. Z objavo zahtev svojim uporabnikom sporočate, da jemljete varnost gesel resno.

Vendar se morate zavedati, da kontrolni seznam gesel ni čudežna rešitev za težave z gesli. Pravzaprav, če naredite svoja gesla preveč omejujoča, lahko hekerjem olajšate, da zožijo svoje možnosti in na silo vsilijo geslo. Konec koncev, varna in edinstvena gesla, ki jih uporabniki shranite v upravitelju gesel so najboljši.

Kako ustvariti kontrolni seznam gesel

V Next.js lahko ustvarite kontrolni seznam gesel na dva načina. Uporabite lahko vgrajene funkcije ali pa zunanji modul.

Kaj boste potrebovali

Če želite ustvariti kontrolni seznam gesel v Next.js, boste potrebovali naslednje:

  • Node.js je nameščen
  • Urejevalnik besedil
  • Projekt Next.js

1. način: Uporaba vgrajenih funkcij

Next.js ima vgrajene funkcije, kot so kavlji in kontekst. obstajajo različne vrste kavljev ki jih lahko uporabite za ustvarjanje kontrolnega seznama gesel.

Najprej ustvarite novo datoteko v aplikaciji Next.js in jo poimenujte passwordChecklist.js. V tej datoteki lahko uporabniki vnesejo geslo in preverite, ali geslo izpolnjuje zahteve.

uvoz Odziv, {useState} od 'reagirati'
funkcijoPasswordChecklist() {
 const [geslo, setPassword] = useState('')
konst [napaka, setError] = useState(lažno)


funkcijohandleChange(e) {
nastavi geslo(e.tarča.vrednost)
 }


funkcijohandleSubmit(e) {
e.preventDefault()


// Zahteve za geslo
konst zahteve = [
// Vsebovati mora vsaj 8 znakov
 geslo.dolžina >= 8,
// Vsebovati mora vsaj 1 veliko črko
 /[A-Z]/.test(geslo),
// Vsebovati mora vsaj 1 malo črko
 /[a-z]/.test(geslo),
// Vsebovati mora vsaj 1 številko
 /\d/.test(geslo)
 ]


// Če so izpolnjene vse zahteve, je geslo veljavno
konst isValid = requirements.every(Boolean)
 if (isValid) {
 opozorilo('Geslo je veljavno!')
 } drugače {
 setError(prav)
 }
 }


vrnitev (
<obrazec onSubmit={handleSubmit}>
<oznaka>
 geslo:
<vnos
 vrsta="geslo"
 vrednost={geslo}
 onChange={handleChange}
 />
</label>
<vrsta vnosa="predložiti" vrednost="Predloži" />
 {napaka &&<str>Geslo ni veljavno!</str>}
</form>
 )
}
izvozprivzeto PasswordChecklist

V zgornji kodi morate najprej prevzeti geslo od uporabnikov. To lahko storite z uporabo useState kavelj. Ta kavelj vam omogoča, da ustvarite spremenljivko stanja in funkcijo za posodobitev te spremenljivke. V tem primeru je spremenljivka stanja geslo in funkcija za njegovo posodobitev je nastavi geslo.

Nato morate ustvariti funkcijo za obdelavo oddaje obrazca. Ta funkcija bo preprečila privzeto dejanje obrazca (to je pošiljanje obrazca) in bo preverila, ali geslo izpolnjuje zahteve.

Zahteve za geslo so, da mora:

  • biti dolg vsaj osem znakov
  • vsebujejo vsaj eno veliko črko
  • vsebuje vsaj eno malo črko
  • vsebujejo vsaj eno številko

Lahko uporabite vsak način za preverjanje, ali geslo izpolnjuje vse zahteve. Če se, je geslo veljavno. V nasprotnem primeru bo koda prikazala sporočilo o napaki.

3. način: Uporaba modula za preverjanje gesla za reakcijo

Drug način za ustvarjanje kontrolnega seznama gesel v Next.js je uporaba kontrolni seznam-gesla za reakcijo modul. Ta modul je enostaven za uporabo in ima veliko funkcij.

Najprej namestite modul z naslednjim ukazom:

npm namestite reagirati-geslo- kontrolni seznam --shrani

Nato uvozite modul v svoj passwordChecklist.js mapa:

uvoz Odziv, {useState} od "reagirati"
uvoz PasswordChecklist od "react-password-checklist"
konst Aplikacija = () => {
 const [geslo, setPassword] = useState("")


vrnitev (
<oblika>
<oznaka>geslo:</label>
<vrsta vnosa="geslo" onChange={e => setPassword (e.target.value)}/>


<PasswordChecklist
 pravila={["minLength","specialChar","število","kapitala"]}
 minLength={5}
 vrednost={geslo}
 />
</form>
 )
}
izvozprivzeto aplikacija

Ta koda posreduje rekvizite minLength, specialChar, number in capital v PasswordChecklist komponento. Komponenta bo uporabila te pripomočke za preverjanje, ali geslo izpolnjuje zahteve.

Komponenti lahko dodate tudi prevedena sporočila, tako da posredujete sporočila prop. Ti nizi preglasijo privzete napake, tako da jih lahko uporabite za druge jezike ali različice.

uvoz Odziv, {useState} od "reagirati"
uvoz PasswordChecklist od "react-password-checklist"
konst Aplikacija = () => {
 const [geslo, setPassword] = useState("")


vrnitev (
<oblika>
<oznaka>geslo:</label>
<vrsta vnosa="geslo" onChange={e => setPassword (e.target.value)}/>


<PasswordChecklist
 pravila={["minLength", "specialChar", "število", "kapitala"]}
 minLength={5}
 vrednost={geslo}
 sporočila={{
 minLength: "Nasprotjeña tiene máz 8 znaki.",
 specialChar: "Nasprotjeñše posebej a tiene caracteres.",
 številka: "Nasprotjeña tiene un número.",
 kapital: "Nasprotjeña tiene una letra mayúscula.",
 ujemanje: "Las contraseñkot naključje.",
 }}
 />
</form>
 )
}
izvozprivzeto aplikacija

V zgornji kodi je sporočila prop shrani alternativna sporočila o napakah. Komponenta bo prikazala ta sporočila, ko geslo ne ustreza zahtevam.

Ta metoda je bolj priročna, ker vam ni treba pisati kode, da preverite, ali geslo izpolnjuje zahteve. Obstaja tudi veliko drugih prednosti uporabe tega modula, kot so:

  • Prikaz moči gesla: kontrolni seznam-gesla za reakcijo lahko prikaže moč gesla, tako da lahko uporabniki vidijo, kako močno je njihovo geslo.
  • Prikaz sporočila o napaki: kontrolni seznam-gesla za reakcijo lahko prikaže tudi sporočilo o napaki, če geslo ni veljavno.
  • Oblikovanje: na kontrolni seznam vam ni treba dodajati nobenega dodatnega stila. Modul zagotavlja privzeti slog, ki ga lahko uporabite v svoji aplikaciji. Če želite dodati nekaj dodatnega sloga, lahko uporabite običajni CSS ali drugo slogovna ogrodja, kot je tailwind CSS.

Izboljšajte varnost uporabnikov s kontrolnim seznamom gesel

Močno geslo je ključ do spletne varnosti. Pomembno je, da imate za vsak spletni račun močno in edinstveno geslo. Z uporabo kontrolnega seznama gesel ste lahko prepričani, da vsako geslo ustreza določenemu standardu.

Uporabniki vaše aplikacije bodo cenili tudi moč ogleda gesla. Tako so lahko prepričani, da so njihova gesla dovolj močna. To bo izboljšalo uporabniško izkušnjo vaše aplikacije in izboljšalo tudi varnost uporabnikov vaše aplikacije. Podobno lahko potrdite tudi obrazce v svoji aplikaciji Next.js.