Tänapäeva maailmas on veebiturvalisus olulisem kui kunagi varem. Kuna silma peal hoida on nii palju veebikontosid, on oluline, et igaühe jaoks oleks tugev ja kordumatu parool.

Kui loote saiti, on veelgi olulisem tagada, et paroolid oleksid võimalikult turvalised. Saate esitada kontrollnimekirja teie saidi kasutajatele ja veenduda, et nende parool vastab teie nõuetele, enne kui nõustute parooliga.

Siit saate teada, kuidas Next.js abil parooli kontroll-loendit rakendada.

Miks kasutada parooli kontrollnimekirja?

Parooli kontrollnimekirja kasutamiseks on palju põhjuseid.

Esiteks aitab see teil tagada, et teie kasutajate paroolid on tugevad ja ainulaadsed. Omades nõuete kontrollnimekirja, võite olla kindel, et iga parool vastab teatud standardile.

Teie kasutajad ei pruugi teid selle eest tänada, kuid teete neile teene. Tugevate paroolide kasutamist soodustades vähendate tõenäosust, et häkker pääseb mõnele teie kasutaja kontole juurde.

Teiseks võib parooli kontrollnimekiri aidata turvatunnet edasi anda. Nõuete avaldamisega annate kasutajatele teada, et võtate paroolide turvalisust tõsiselt.

instagram viewer

Peaksite siiski teadma, et parooli kontrollnimekiri ei ole parooliprobleemide imelahendus. Tegelikult, kui muudate oma paroolid liiga piiravaks, saate häkkeritel hõlpsamini oma valikuvõimalusi kitsendada ja parooli jõhkralt sundida. Lõppkokkuvõttes turvalised ja ainulaadsed paroolid, mida kasutajad salvestada paroolihaldurisse on parimad.

Kuidas luua parooli kontrollnimekirja

Parooli kontroll-loendi loomiseks rakenduses Next.js on kaks võimalust. Võite kasutada sisseehitatud funktsioone või kasutada välist moodulit.

Mida vajate

Parooli kontrollnimekirja loomiseks rakenduses Next.js vajate järgmist.

  • Node.js installitud
  • Tekstiredaktor
  • Next.js projekt

1. meetod: sisseehitatud funktsioonide kasutamine

Next.js sisaldab sisseehitatud funktsioone, nagu konksud ja kontekst. Seal on erinevat tüüpi konksud mida saate kasutada parooli kontrollnimekirja koostamiseks.

Esmalt looge rakenduses Next.js uus fail ja andke sellele nimi paroolChecklist.js. Selles failis saate kasutajatelt parooli sisestada ja kontrollida, kas parool vastab nõuetele.

importida Reageerige, { useState } alates 'reageeri'
funktsiooniParooli kontrollnimekiri() {
 const [parool, setPassword] = useState('')
konst [error, setError] = useState(vale)


funktsioonikäepideMuuda(e) {
Määra parool(e.sihtmärk.väärtus)
 }


funktsioonikäepide Esita(e) {
e.preventDefault()


// Paroolinõuded
konst nõuded = [
// Peab olema vähemalt 8 tähemärki
 parool.pikkus >= 8,
// Peab sisaldama vähemalt ühte suurtähte
 /[A-Z]/.test(parool),
// Peab sisaldama vähemalt ühte väiketähte
 /[a-z]/.test(parool),
// Peab sisaldama vähemalt ühte numbrit
 /\d/.test(parool)
 ]


// Kui kõik nõuded on täidetud, on parool kehtiv
konst isValid = nõuded.every(Boolean)
 if (on Valid) {
 hoiatus ('Parool on kehtiv!')
 } muidu {
 setError(tõsi)
 }
 }


tagasi (
<vorm onSubmit={handleSubmit}>
<silt>
 Parool:
<sisend
 tüüp="parool"
 väärtus={parool}
 onChange={handleChange}
 />
</label>
<sisendi tüüp="Esita" väärtus="Esita" />
 {viga &&<lk>Parool ei kehti!</lk>}
</form>
 )
}
eksportidavaikimisi Parooli kontrollnimekiri

Ülaltoodud koodis peate esmalt kasutajatelt parooli sisestama. Seda saate teha kasutades useState konks. See konks võimaldab teil luua olekumuutuja ja funktsiooni selle muutuja värskendamiseks. Sel juhul on olekumuutuja parool ja selle värskendamise funktsioon on Määra parool.

Järgmiseks peate vormi esitamise käsitlemiseks looma funktsiooni. See funktsioon takistab vormi vaiketoimingut (selleks on vormi esitamine) ja kontrollib, kas parool vastab nõuetele.

Paroolinõuded on järgmised:

  • olema vähemalt kaheksa tähemärki pikk
  • sisaldama vähemalt ühte suurtähte
  • sisaldama vähemalt ühte väiketähte
  • sisaldama vähemalt ühte numbrit

Võite kasutada iga meetod kontrollimaks, kas parool vastab kõigile nõuetele. Kui see nii on, on parool kehtiv. Vastasel juhul kuvab kood veateate.

3. meetod: React-parooli kontrollnimekirja mooduli kasutamine

Teine viis parooli kontrollnimekirja loomiseks rakenduses Next.js on kasutada reageerida-parooli-kontrollist moodul. Seda moodulit on lihtne kasutada ja sellel on palju funktsioone.

Esmalt installige moodul järgmise käsuga:

npm installida reageerima-parool- kontrollnimekiri -- salvestada

Seejärel importige moodul oma paroolChecklist.js fail:

importida Reageerige, {useState} alates "reageerida"
importida Parooli kontrollnimekiri alates "react-password-checklist"
konst Rakendus = () => {
 const [parool, setPassword] = useState("")


tagasi (
<vormi>
<silt>Parool:</label>
<sisendi tüüp="parool" onChange={e => setPassword (e.target.value)}/>


<Parooli kontrollnimekiri
 reeglid={["minPikkus","eriline Char","number","kapitali"]}
 minLength={5}
 väärtus={parool}
 />
</form>
 )
}
eksportidavaikimisi Rakendus

See kood edastab rekvisiidid minLength, specialChar, numbri ja kapitali Parooli kontrollnimekiri komponent. Komponent kasutab neid rekvisiite, et kontrollida, kas parool vastab nõuetele.

Samuti saate komponendile lisada tõlgitud sõnumeid, edastades sõnumeid prop. Need stringid alistavad vaikevead, nii et saate neid kasutada teiste keelte või variatsioonide jaoks.

importida Reageerige, {useState} alates "reageerida"
importida Parooli kontrollnimekiri alates "react-password-checklist"
konst Rakendus = () => {
 const [parool, setPassword] = useState("")


tagasi (
<vormi>
<silt>Parool:</label>
<sisendi tüüp="parool" onChange={e => setPassword (e.target.value)}/>


<Parooli kontrollnimekiri
 reeglid={["minPikkus", "eriline Char", "number", "kapitali"]}
 minLength={5}
 väärtus={parool}
 sõnumid={{
 minLength: "La contraseña tiene más de 8 tähemärki.",
 spetsiaalne Char: "La contraseña tiene caracteres eriti.",
 number: "La contraseña tiene un número.",
 pealinn: "La contraseña tiene una letra maiúscula.",
 vaste: "Las contraseñkui kokkusattumus.",
 }}
 />
</form>
 )
}
eksportidavaikimisi Rakendus

Ülaltoodud koodis on sõnumeid prop salvestab alternatiivsed veateated. Komponent kuvab need teated, kui parool ei vasta nõuetele.

See meetod on mugavam, kuna parooli nõuetele vastavuse kontrollimiseks ei pea te koodi kirjutama. Selle mooduli kasutamisel on ka palju muid eeliseid, näiteks:

  • Parooli tugevuse kuvamine: reageerida-parooli-kontrollist saab kuvada parooli tugevust, et kasutajad näeksid, kui tugev on nende parool.
  • Veateate kuvamine: reageerida-parooli-kontrollist võib kuvada ka veateate, kui parool ei kehti.
  • Stiil: te ei pea kontrollnimekirja lisama täiendavat stiili. Moodul pakub vaikestiili, mida saate oma rakenduses kasutada. Kui soovite lisada täiendavat stiili, võite kasutada tavalist CSS-i või muud stiiliraamistikud nagu taganttuule CSS.

Parandage kasutajaohutust parooli kontrollnimekirjaga

Tugev parool on võrguohutuse võti. On oluline, et iga võrgukonto jaoks oleks tugev ja kordumatu parool. Parooli kontrollnimekirja kasutades võite olla kindel, et iga parool vastab teatud standardile.

Teie rakenduse kasutajad hindavad ka parooli tugevuse nägemist. Nii saavad nad olla kindlad, et nende paroolid on piisavalt tugevad. See parandab teie rakenduse kasutuskogemust ja suurendab ka teie rakenduse kasutajate ohutust. Samamoodi saate vorme kinnitada ka rakenduses Next.js.