Šiandieniniame pasaulyje saugumas internete yra svarbesnis nei bet kada anksčiau. Turint tiek daug internetinių paskyrų, kurias reikia stebėti, būtina turėti tvirtą ir unikalų kiekvienos paskyros slaptažodį.

Jei kuriate svetainę, dar svarbiau užtikrinti, kad slaptažodžiai būtų kuo saugesni. Galite pateikti kontrolinį sąrašą tiems, kurie naudojasi jūsų svetaine, ir prieš sutikdami įsitikinti, kad jų slaptažodis atitinka jūsų reikalavimus.

Sužinokite, kaip įdiegti slaptažodžių kontrolinį sąrašą naudojant Next.js.

Kodėl verta naudoti slaptažodžio kontrolinį sąrašą?

Yra daug priežasčių, kodėl galbūt norėsite naudoti slaptažodžių kontrolinį sąrašą.

Pirma, tai gali padėti užtikrinti, kad jūsų naudotojų slaptažodžiai būtų stiprūs ir unikalūs. Turėdami kontrolinį reikalavimų sąrašą, galite būti tikri, kad kiekvienas slaptažodis atitinka tam tikrą standartą.

Jūsų vartotojai gali jums už tai nepadėkoti, bet jūs padarysite jiems paslaugą. Skatindami naudoti tvirtus slaptažodžius sumažinsite tikimybę, kad įsilaužėlis gaus prieigą prie vienos iš jūsų vartotojų paskyrų.

instagram viewer

Antra, slaptažodžio kontrolinis sąrašas gali padėti perteikti saugumo jausmą. Skelbdami reikalavimus savo naudotojams nurodote, kad rimtai žiūrite į slaptažodžių apsaugą.

Tačiau turėtumėte žinoti, kad slaptažodžių kontrolinis sąrašas nėra stebuklingas slaptažodžių problemų sprendimas. Tiesą sakant, jei slaptažodžius nustatysite per daug ribojančius, įsilaužėliams bus lengviau susiaurinti savo galimybes ir priverstinai įvesti slaptažodį. Galiausiai saugūs ir unikalūs slaptažodžiai, kuriuos vartotojai saugoti slaptažodžių tvarkyklėje yra geriausi.

Kaip sukurti slaptažodžio kontrolinį sąrašą

Yra du būdai, kaip Next.js sukurti slaptažodžių kontrolinį sąrašą. Galite naudoti integruotas funkcijas arba išorinį modulį.

Ko Jums prireiks

Norėdami sukurti slaptažodžių kontrolinį sąrašą Next.js, jums reikės šių dalykų:

  • Node.js įdiegtas
  • Teksto rengyklė
  • Next.js projektas

1 būdas: Integruotų funkcijų naudojimas

Next.js yra su integruotomis funkcijomis, tokiomis kaip kabliukai ir kontekstas. Yra įvairių tipų kabliukai kurį galite naudoti kurdami slaptažodžių kontrolinį sąrašą.

Pirmiausia sukurkite naują failą Next.js programoje ir pavadinkite jį slaptažodisChecklist.js. Šiame faile galite priimti slaptažodį iš vartotojų ir patikrinti, ar slaptažodis atitinka reikalavimus.

importuoti Reaguoti, { useState } iš 'reaguoti'
funkcijaSlaptažodžio tikrinimo sąrašas() {
 const [slaptažodis, setPassword] = useState('')
konst [klaida, setError] = useState(klaidinga)


funkcijarankenaKeisti(e) {
nustatyti slaptažodį(e.taikinys.vertė)
 }


funkcijarankenaPateikti(e) {
e.preventDefault()


// Slaptažodžio reikalavimai
konst reikalavimai = [
// Turi būti bent 8 simboliai
 slaptažodis.ilgis >= 8,
// Turi būti bent 1 didžioji raidė
 /[A-Z]/.bandymas(Slaptažodis),
// Turi būti bent 1 mažoji raidė
 /[a-z]/.bandymas(Slaptažodis),
// Turi būti bent 1 skaičius
 /\d/.bandymas(Slaptažodis)
 ]


// Jei tenkinami visi reikalavimai, slaptažodis galioja
konst isValid = reikalavimai.kiekvienas(Būlio)
 if (isValid) {
 budrus('Slaptažodis galioja!')
 } Kitas {
 setError(tiesa)
 }
 }


grąžinti (
<forma onSubmit={handleSubmit}>
<etiketė>
 Slaptažodis:
<įvestis
 tipas ="Slaptažodis"
 value={password}
 onChange={handleChange}
 />
</label>
<įvesties tipas ="Pateikti" vertė ="Pateikti" />
 {klaida &&<p>Slaptažodis negalioja!</p>}
</form>
 )
}
eksportuotinumatytas Slaptažodžio tikrinimo sąrašas

Aukščiau pateiktame kode pirmiausia turite įvesti slaptažodį iš vartotojų. Tai galite padaryti naudodami useState kabliukas. Šis kabliukas leidžia sukurti būsenos kintamąjį ir funkciją šiam kintamajam atnaujinti. Šiuo atveju būsenos kintamasis yra Slaptažodis ir jo atnaujinimo funkcija nustatyti slaptažodį.

Tada turite sukurti funkciją, kuri tvarkytų formos pateikimą. Ši funkcija neleis atlikti numatytojo formos veiksmo (tai yra pateikti formą) ir patikrins, ar slaptažodis atitinka reikalavimus.

Slaptažodžio reikalavimai yra tokie, kad jis turi:

  • turi būti bent aštuonių simbolių ilgio
  • turi būti bent viena didžioji raidė
  • turi būti bent viena mažoji raidė
  • turi bent vieną skaičių

Galite naudoti kas būdas patikrinti, ar slaptažodis atitinka visus reikalavimus. Jei taip, slaptažodis galioja. Priešingu atveju kodas parodys klaidos pranešimą.

3 būdas. React-slaptažodžio kontrolinio sąrašo modulio naudojimas

Kitas būdas sukurti slaptažodžių kontrolinį sąrašą programoje Next.js yra naudoti react-slaptažodis-kontrolinis sąrašas modulis. Šiuo moduliu lengva naudotis ir jis turi daug funkcijų.

Pirmiausia įdiekite modulį naudodami šią komandą:

npm diegti reaguoti -Slaptažodis- kontrolinis sąrašas --sutaupyti

Tada importuokite modulį į savo slaptažodisChecklist.js failas:

importuoti Reaguoti, {useState} iš "reaguoti"
importuoti Slaptažodžio tikrinimo sąrašas iš "reaguoti-slaptažodis-kontrolinis sąrašas"
konst Programėlė = () => {
 const [slaptažodis, setPassword] = useState("")


grąžinti (
<forma>
<etiketė>Slaptažodis:</label>
<įvesties tipas ="Slaptažodis" onChange={e => setPassword (e.target.value)}/>


<Slaptažodžio tikrinimo sąrašas
 taisyklės={["minIlgis","specialus Char","numerį","kapitalo"]}
 minLength={5}
 value={password}
 />
</form>
 )
}
eksportuotinumatytas Programėlė

Šis kodas perduoda rekvizitus minLength, specialChar, skaičių ir kapitalą Slaptažodžio tikrinimo sąrašas komponentas. Komponentas naudos šiuos rekvizitus, kad patikrintų, ar slaptažodis atitinka reikalavimus.

Taip pat galite pridėti išverstų pranešimų prie komponento, perduodami žinutes prop. Šios eilutės nepaiso numatytųjų klaidų, kad galėtumėte jas naudoti kitoms kalboms ar variantams.

importuoti Reaguoti, {useState} iš "reaguoti"
importuoti Slaptažodžio tikrinimo sąrašas iš "reaguoti-slaptažodis-kontrolinis sąrašas"
konst Programėlė = () => {
 const [slaptažodis, setPassword] = useState("")


grąžinti (
<forma>
<etiketė>Slaptažodis:</label>
<įvesties tipas ="Slaptažodis" onChange={e => setPassword (e.target.value)}/>


<Slaptažodžio tikrinimo sąrašas
 taisyklės={["minIlgis", "specialus Char", "numerį", "kapitalo"]}
 minLength={5}
 value={password}
 pranešimai={{
 minLength: "La contraseña tiene más de 8 simbolių.",
 specialus simbolis: "La contraseña tiene caracteres ypač.",
 numeris: "La contraseña tiene un número.",
 sostinė: "La contraseña tiene una letra galiúskula.",
 rungtynės: "Las contraseñkaip sutapimas.",
 }}
 />
</form>
 )
}
eksportuotinumatytas Programėlė

Aukščiau pateiktame kode žinutes prop saugo alternatyvius klaidų pranešimus. Komponentas parodys šiuos pranešimus, kai slaptažodis neatitiks reikalavimų.

Šis būdas patogesnis, nes nereikia rašyti kodo norint patikrinti, ar slaptažodis atitinka reikalavimus. Taip pat yra daug kitų šio modulio naudojimo pranašumų, pavyzdžiui:

  • Rodomas slaptažodžio stiprumas: react-slaptažodis-kontrolinis sąrašas gali rodyti slaptažodžio stiprumą, kad vartotojai matytų, koks stiprus yra jų slaptažodis.
  • Rodomas klaidos pranešimas: react-slaptažodis-kontrolinis sąrašas taip pat gali rodyti klaidos pranešimą, jei slaptažodis neteisingas.
  • Stilius: jums nereikia pridėti jokio papildomo stiliaus prie kontrolinio sąrašo. Modulis suteikia numatytąjį stilių, kurį galite naudoti savo programoje. Jei norite pridėti papildomo stiliaus, galite naudoti įprastą CSS ar kitą stiliaus sistemas, tokias kaip tailwind CSS.

Pagerinkite naudotojo saugumą naudodami slaptažodžio kontrolinį sąrašą

Tvirtas slaptažodis yra raktas į saugumą internete. Svarbu turėti tvirtą ir unikalų kiekvienos internetinės paskyros slaptažodį. Naudodami slaptažodžių kontrolinį sąrašą galite būti tikri, kad kiekvienas slaptažodis atitinka tam tikrą standartą.

Jūsų programos naudotojai taip pat įvertins slaptažodžio stiprumą. Tokiu būdu jie gali būti tikri, kad jų slaptažodžiai yra pakankamai stiprūs. Tai pagerins jūsų programos naudotojų patirtį ir padidins programos naudotojų saugumą. Taip pat galite patvirtinti formas savo Next.js programoje.