U današnjem svijetu online sigurnost važnija je nego ikad. S toliko mnogo online računa koje treba pratiti, bitno je imati jaku i jedinstvenu lozinku za svaki od njih.

Ako gradite web mjesto, još je važnije osigurati da su lozinke što sigurnije. Možete predstaviti popis za provjeru onima koji koriste vašu stranicu i osigurati da njihova lozinka zadovoljava vaše zahtjeve prije nego što je prihvatite.

Naučite kako implementirati kontrolni popis zaporki pomoću Next.js.

Zašto koristiti kontrolni popis lozinki?

Mnogo je razloga zašto biste mogli upotrijebiti kontrolni popis zaporki.

Prvo, može vam pomoći osigurati da su zaporke vaših korisnika jake i jedinstvene. Imajući kontrolni popis zahtjeva, možete biti sigurni da svaka lozinka zadovoljava određeni standard.

Vaši vam korisnici možda neće biti zahvalni na tome, ali učinit ćete im uslugu. Poticanjem jakih lozinki smanjit ćete vjerojatnost da će haker dobiti pristup jednom od vaših korisničkih računa.

Drugo, kontrolni popis zaporki može pomoći u prenošenju osjećaja sigurnosti. Objavljivanjem zahtjeva svojim korisnicima govorite da ozbiljno shvaćate sigurnost lozinki.

instagram viewer

Međutim, trebali biste biti svjesni da kontrolni popis zaporki nije čudotvorno rješenje za probleme s lozinkama. Zapravo, ako svoje lozinke učinite previše restriktivnim, hakerima možete olakšati sužavanje mogućnosti i grubo forsirati lozinku. U konačnici, sigurne i jedinstvene lozinke koje korisnici pohraniti u upravitelj lozinki su najbolji.

Kako izraditi popis za provjeru lozinki

Postoje dva načina za izradu popisa za provjeru lozinki u Next.js. Možete koristiti ugrađene značajke ili možete koristiti vanjski modul.

Što ćete trebati

Za izradu popisa za provjeru lozinki u Next.js trebat će vam sljedeće:

  • Node.js instaliran
  • Uređivač teksta
  • Projekt Next.js

Metoda 1: Korištenje ugrađenih značajki

Next.js dolazi s ugrađenim značajkama kao što su kuke i kontekst. Tamo su različite vrste udica koje možete koristiti za izradu popisa za provjeru lozinki.

Najprije izradite novu datoteku u svojoj aplikaciji Next.js i dajte joj naziv lozinkaChecklist.js. U ovoj datoteci možete preuzeti unos lozinke od korisnika i možete provjeriti ispunjava li lozinka zahtjeve.

uvoz Reagiraj, {useState} iz 'reagirati'
funkcijaPopis za provjeru lozinki() {
 const [lozinka, setPassword] = useState('')
konst [greška, setError] = useState(lažno)


funkcijahandleChange(e) {
Postavi lozinku(e.cilj.vrijednost)
 }


funkcijarukovanjePošalji(e) {
e.preventDefault()


// Zahtjevi za lozinku
konst zahtjevi = [
// Mora imati najmanje 8 znakova
 lozinka.duljina >= 8,
// Mora sadržavati najmanje 1 veliko slovo
 /[A-Z]/.test(lozinka),
// Mora sadržavati najmanje 1 malo slovo
 /[a-z]/.test(lozinka),
// Mora sadržavati najmanje 1 broj
 /\d/.test(lozinka)
 ]


// Ako su ispunjeni svi zahtjevi, lozinka je važeća
konst isValid = zahtjevi.svaki(Booleov)
 if (isValid) {
 upozorenje('Lozinka je važeća!')
 } drugo {
 setError(pravi)
 }
 }


povratak (
<obrazac onSubmit={handleSubmit}>
<označiti>
 Lozinka:
<ulazni
 vrsta="lozinka"
 vrijednost={lozinka}
 onChange={handleChange}
 />
</label>
<vrsta unosa="podnijeti" vrijednost="podnijeti" />
 {greška &&<str>Lozinka nije važeća!</str>}
</form>
 )
}
izvozzadano Popis za provjeru lozinki

U gornjem kodu, najprije trebate preuzeti lozinku od korisnika. To možete učiniti pomoću useState kuka. Ova kuka vam omogućuje stvaranje varijable stanja i funkcije za ažuriranje te varijable. U ovom slučaju varijabla stanja je lozinka a funkcija za njegovo ažuriranje je Postavi lozinku.

Zatim trebate izraditi funkciju za obradu slanja obrasca. Ova funkcija će spriječiti zadanu radnju obrasca (a to je slanje obrasca) i provjerit će ispunjava li lozinka zahtjeve.

Zahtjevi za lozinku su da mora:

  • imati najmanje osam znakova
  • sadrže barem jedno veliko slovo
  • sadrže barem jedno malo slovo
  • sadrže barem jedan broj

Možete koristiti svaki metoda za provjeru ispunjava li lozinka sve zahtjeve. Ako postoji, lozinka je važeća. U suprotnom, kod će prikazati poruku o pogrešci.

Metoda 3: Korištenje modula react-password-checklist

Drugi način za izradu popisa za provjeru lozinki u Next.js je korištenje react-password-kontrolni popis modul. Ovaj modul jednostavan je za korištenje i dolazi s puno značajki.

Prvo instalirajte modul pomoću sljedeće naredbe:

npm instalirati reagirati-lozinka-spisak --uštedjeti

Zatim uvezite modul u svoj lozinkaChecklist.js datoteka:

uvoz Reagiraj, {useState} iz "reagirati"
uvoz Popis za provjeru lozinki iz "react-password-kontrolni popis"
konst Aplikacija = () => {
 const [lozinka, setPassword] = useState("")


povratak (
<oblik>
<označiti>Lozinka:</label>
<vrsta unosa="lozinka" onChange={e => setPassword (e.target.value)}/>


<Popis za provjeru lozinki
 pravila={["minLength","posebanZnak","broj","glavni"]}
 minLength={5}
 vrijednost={lozinka}
 />
</form>
 )
}
izvozzadano aplikacija

Ovaj kod prosljeđuje rekvizite minLength, specialChar, number i capital u Popis za provjeru lozinki komponenta. Komponenta će koristiti ove rekvizite da provjeri ispunjava li lozinka zahtjeve.

Također možete dodati prevedene poruke u komponentu prosljeđivanjem poruke oslonac Ovi nizovi nadjačavaju zadane pogreške tako da ih možete koristiti za druge jezike ili varijacije.

uvoz Reagiraj, {useState} iz "reagirati"
uvoz Popis za provjeru lozinki iz "react-password-kontrolni popis"
konst Aplikacija = () => {
 const [lozinka, setPassword] = useState("")


povratak (
<oblik>
<označiti>Lozinka:</label>
<vrsta unosa="lozinka" onChange={e => setPassword (e.target.value)}/>


<Popis za provjeru lozinki
 pravila={["minLength", "posebanZnak", "broj", "glavni"]}
 minLength={5}
 vrijednost={lozinka}
 poruke={{
 minLength: "La contraseñtiene más 8 znakova.",
 poseban znak: "La contraseña tiene caracteres posebno.",
 broj: "La contraseña tiene un número.",
 glavni: "La contraseña tiene una letra svibanjúscula.",
 podudaranje: "Las contraseñkao podudarnost.",
 }}
 />
</form>
 )
}
izvozzadano aplikacija

U gornjem kodu, poruke prop pohranjuje alternativne poruke o greškama. Komponenta će prikazati ove poruke kada lozinka ne ispunjava zahtjeve.

Ova je metoda praktičnija jer ne morate pisati kod da biste provjerili ispunjava li lozinka zahtjeve. Postoje i mnoge druge prednosti korištenja ovog modula kao što su:

  • Prikaz jačine lozinke: react-password-kontrolni popis može prikazati snagu lozinke tako da korisnici mogu vidjeti koliko je jaka njihova lozinka.
  • Prikaz poruke pogreške: react-password-kontrolni popis također može prikazati poruku o pogrešci ako lozinka nije važeća.
  • Stiliziranje: Ne morate dodati dodatni stil na popis za provjeru. Modul pruža zadani stil koji možete koristiti u svojoj aplikaciji. Ako želite dodati neki dodatni stil, onda možete koristiti normalni CSS ili nešto drugo stilski okviri poput tailwind CSS-a.

Poboljšajte sigurnost korisnika pomoću popisa za provjeru lozinki

Jaka lozinka ključ je sigurnosti na internetu. Važno je imati jaku i jedinstvenu lozinku za svaki online račun. Korištenjem popisa za provjeru lozinki možete biti sigurni da svaka lozinka zadovoljava određeni standard.

Korisnici vaše aplikacije također će cijeniti mogućnost da vide snagu zaporke. Na taj način mogu biti sigurni da su njihove lozinke dovoljno jake. To će poboljšati korisničko iskustvo vaše aplikacije i također će poboljšati sigurnost korisnika vaše aplikacije. Slično tome, također možete potvrditi obrasce u svojoj aplikaciji Next.js.