În lumea de astăzi, securitatea online este mai importantă ca niciodată. Cu atât de multe conturi online pe care să le urmăriți, este esențial să aveți o parolă puternică și unică pentru fiecare.

Dacă construiți un site, este și mai important să vă asigurați că parolele sunt cât se poate de sigure. Puteți prezenta o listă de verificare celor care folosesc site-ul dvs. și vă puteți asigura că parola lor corespunde cerințelor dumneavoastră înainte de a o accepta.

Aflați cum să implementați o listă de verificare a parolelor folosind Next.js.

De ce să folosiți o listă de verificare a parolelor?

Există multe motive pentru care ați putea dori să utilizați o listă de verificare a parolelor.

În primul rând, vă poate ajuta să vă asigurați că parolele utilizatorilor dvs. sunt puternice și unice. Având o listă de verificare a cerințelor, puteți fi sigur că fiecare parolă îndeplinește un anumit standard.

Este posibil ca utilizatorii tăi să nu îți mulțumească pentru asta, dar le vei face o favoare. Încurajând parole puternice, veți reduce probabilitatea ca un hacker să obțină acces la unul dintre conturile utilizatorilor dvs.

instagram viewer

În al doilea rând, o listă de verificare a parolelor poate ajuta la transmiterea unui sentiment de securitate. Prin publicarea cerințelor, le spui utilizatorilor că iei în serios securitatea parolelor.

Trebuie să știți, totuși, că o listă de verificare a parolelor nu este o soluție miraculoasă la problemele legate de parole. De fapt, dacă faceți parolele prea restrictive, le puteți face mai ușor pentru hackeri să își restrângă opțiunile și să forțeze o parolă. În cele din urmă, parolele sigure și unice pe care utilizatorii stocați într-un manager de parole sunt cele mai bune.

Cum se creează o listă de verificare a parolelor

Există două moduri de a crea o listă de verificare a parolelor în Next.js. Puteți folosi fie funcțiile încorporate, fie puteți utiliza un modul extern.

Ce vei avea nevoie

Pentru a crea o listă de verificare a parolelor în Next.js, veți avea nevoie de următoarele:

  • Node.js instalat
  • Un editor de text
  • Un proiect Next.js

Metoda 1: Utilizarea caracteristicilor încorporate

Next.js vine cu funcții încorporate, cum ar fi cârlige și context. Sunt diferite tipuri de cârlige pe care îl puteți folosi pentru a crea o listă de verificare a parolelor.

Mai întâi, creați un fișier nou în aplicația Next.js și denumiți-l passwordChecklist.js. În acest fișier, puteți prelua parola introduse de la utilizatori și puteți verifica dacă parola îndeplinește cerințele.

import Reacționează, { useState } din 'reacţiona'
funcţieLista de verificare a parolelor() {
 const [parolă, setPassword] = useState('')
const [eroare, setError] = useState(fals)


funcţiehandleChange(e) {
Seteaza parola(e.ţintă.valoare)
 }


funcţiehandleSubmit(e) {
e.preventDefault()


// Cerințe de parolă
const cerințe = [
// Trebuie să aibă cel puțin 8 caractere
 lungimea parolei >= 8,
// Trebuie să conțină cel puțin 1 literă mare
 /[A-Z]/.Test(parola),
// Trebuie să conțină cel puțin o literă mică
 /[a-z]/.Test(parola),
// Trebuie să conțină cel puțin 1 număr
 /\d/.Test(parola)
 ]


// Dacă toate cerințele sunt îndeplinite, parola este validă
const isValid = requirements.every(boolean)
 dacă (este Valid) {
 alerta('Parola este valabilă!')
 } altfel {
 setError(Adevărat)
 }
 }


întoarcere (
<form onSubmit={handleSubmit}>
<eticheta>
 Parola:
<intrare
 tip="parola"
 valoare={parolă}
 onChange={handleChange}
 />
</label>
<tip de intrare="Trimite" valoare="Trimite" />
 {eroare &&<p>Parola nu este validă!</p>}
</form>
 )
}
exportMod implicit Lista de verificare a parolelor

În codul de mai sus, mai întâi trebuie să preluați parola de la utilizatori. Puteți face acest lucru folosind useState cârlig. Acest cârlig vă permite să creați o variabilă de stare și o funcție pentru a actualiza acea variabilă. În acest caz, variabila de stare este parola iar funcția de actualizare este Seteaza parola.

Apoi, trebuie să creați o funcție pentru a gestiona trimiterea formularului. Această funcție va împiedica acțiunea implicită a formularului (care este de a trimite formularul) și va verifica dacă parola îndeplinește cerințele.

Cerințele privind parola sunt că trebuie:

  • să aibă cel puțin opt caractere
  • sa contina cel putin o majuscula
  • conțin cel puțin o literă mică
  • conțin cel puțin un număr

Puteți folosi fiecare metodă de a verifica dacă o parolă îndeplinește toate cerințele. Dacă se întâmplă, parola este validă. În caz contrar, codul va afișa un mesaj de eroare.

Metoda 3: Utilizarea modulului react-parolă-listă de verificare

O altă modalitate de a crea o listă de verificare a parolelor în Next.js este utilizarea reacţionează-parolă-lista de verificare modul. Acest modul este ușor de utilizat și vine cu o mulțime de caracteristici.

Mai întâi, instalați modulul utilizând următoarea comandă:

npm instalare reacţiona-parola-lista de verificare --Salvați

Apoi, importați modulul în dvs passwordChecklist.js fişier:

import Reacționează, {useState} din "reacţiona"
import Lista de verificare a parolelor din „listă de verificare a parolei de reacție”
const Aplicație = () => {
 const [parolă, setPassword] = useState("")


întoarcere (
<formă>
<eticheta>Parola:</label>
<tip de intrare="parola" onChange={e => setPassword (e.target.value)}/>


<Lista de verificare a parolelor
 reguli={["minLungime","specialChar","număr","capital"]}
 minLength={5}
 valoare={parolă}
 />
</form>
 )
}
exportMod implicit App

Acest cod transmite elementele de recuzită minLength, specialChar, număr și capital la Lista de verificare a parolelor componentă. Componenta va folosi aceste elemente de recuzită pentru a verifica dacă parola îndeplinește cerințele.

De asemenea, puteți adăuga mesaje traduse la componentă prin trecerea mesaje recuzită. Aceste șiruri înlocuiesc erorile implicite, astfel încât să le puteți utiliza pentru alte limbi sau variante.

import Reacționează, {useState} din "reacţiona"
import Lista de verificare a parolelor din „listă de verificare a parolei de reacție”
const Aplicație = () => {
 const [parolă, setPassword] = useState("")


întoarcere (
<formă>
<eticheta>Parola:</label>
<tip de intrare="parola" onChange={e => setPassword (e.target.value)}/>


<Lista de verificare a parolelor
 reguli={["minLungime", "specialChar", "număr", "capital"]}
 minLength={5}
 valoare={parolă}
 mesaje={{
 minLungime: "La contraseña tiene más de 8 caractere.",
 specialChar: "La contraseña tiene caracteres special.",
 număr: "La contraseña tiene un número.",
 capital: "La contraseña tiene una letra mayúscula.",
 Meci: "Las contraseñca coincidență.",
 }}
 />
</form>
 )
}
exportMod implicit App

În codul de mai sus, mesaje prop stochează mesaje de eroare alternative. Componenta va afișa aceste mesaje atunci când parola nu îndeplinește cerințele.

Această metodă este mai convenabilă deoarece nu trebuie să scrieți codul pentru a verifica dacă parola îndeplinește cerințele. Există, de asemenea, multe alte beneficii ale utilizării acestui modul, cum ar fi:

  • Afișarea puterii parolei: reacţionează-parolă-lista de verificare poate afișa puterea parolei, astfel încât utilizatorii să poată vedea cât de puternică este parola lor.
  • Afișarea mesajului de eroare: reacţionează-parolă-lista de verificare poate afișa și mesajul de eroare dacă parola nu este validă.
  • Stil: nu trebuie să adăugați niciun stil suplimentar la lista de verificare. Modulul oferă stil implicit pe care îl puteți utiliza în aplicația dvs. Dacă doriți să adăugați un stil suplimentar, atunci puteți utiliza CSS normal sau altele cadre de stil, cum ar fi tailwind CSS.

Îmbunătățiți siguranța utilizatorilor cu o listă de verificare a parolelor

O parolă puternică este cheia siguranței online. Este important să aveți o parolă puternică și unică pentru fiecare cont online. Folosind o listă de verificare a parolelor, puteți fi sigur că fiecare parolă îndeplinește un anumit standard.

Utilizatorii aplicației dvs. vor aprecia și posibilitatea de a vedea puterea parolei. În acest fel, ei pot fi siguri că parolele lor sunt suficient de puternice. Acest lucru va îmbunătăți experiența utilizatorului aplicației dvs. și, de asemenea, va îmbunătăți siguranța utilizatorilor aplicației dvs. În mod similar, puteți valida și formularele din aplicația dvs. Next.js.