Mūsdienu pasaulē tiešsaistes drošība ir svarīgāka nekā jebkad agrāk. Tā kā ir jāseko līdzi tik daudziem tiešsaistes kontiem, ir svarīgi, lai katram būtu spēcīga un unikāla parole.

Ja veidojat vietni, vēl svarīgāk ir nodrošināt, lai paroles būtu pēc iespējas drošākas. Varat iesniegt kontrolsarakstu tiem, kas izmanto jūsu vietni, un pārliecināties, vai viņu parole atbilst jūsu prasībām, pirms to pieņemat.

Uzziniet, kā ieviest paroļu kontrolsarakstu, izmantojot Next.js.

Kāpēc izmantot paroles kontrolsarakstu?

Ir daudz iemeslu, kāpēc jūs varētu vēlēties izmantot paroļu kontrolsarakstu.

Pirmkārt, tas var palīdzēt nodrošināt, ka jūsu lietotāju paroles ir spēcīgas un unikālas. Ja jums ir prasību kontrolsaraksts, varat būt pārliecināti, ka katra parole atbilst noteiktam standartam.

Iespējams, ka jūsu lietotāji jums par to nepateiksies, taču jūs darīsiet viņiem labu. Veicinot spēcīgas paroles, jūs samazināsiet iespēju, ka hakeris iegūs piekļuvi kādam no jūsu lietotāju kontiem.

Otrkārt, paroļu kontrolsaraksts var palīdzēt radīt drošības sajūtu. Publicējot prasības, jūs norādāt lietotājiem, ka paroles drošību uztverat nopietni.

instagram viewer

Tomēr jums jāapzinās, ka paroļu kontrolsaraksts nav brīnumains paroles problēmu risinājums. Faktiski, ja jūs padarāt savas paroles pārāk ierobežojošas, jūs varat atvieglot hakeriem iespēju sašaurināt iespējas un rupji piespiest paroli. Galu galā drošas un unikālas paroles, ko lietotāji saglabāt paroļu pārvaldniekā ir vislabākie.

Kā izveidot paroles kontrolsarakstu

Ir divi veidi, kā vietnē Next.js izveidot paroles kontrolsarakstu. Varat izmantot iebūvētās funkcijas vai arī ārēju moduli.

Kas jums būs nepieciešams

Lai vietnē Next.js izveidotu paroļu kontrolsarakstu, jums būs nepieciešams:

  • Node.js ir instalēts
  • Teksta redaktors
  • Next.js projekts

1. metode: iebūvēto līdzekļu izmantošana

Next.js ir aprīkots ar iebūvētām funkcijām, piemēram, āķiem un kontekstu. Tur ir dažāda veida āķi ko varat izmantot, lai izveidotu paroļu kontrolsarakstu.

Vispirms savā Next.js lietotnē izveidojiet jaunu failu un nosauciet to paroleCecklist.js. Šajā failā varat saņemt paroles ievadi no lietotājiem un pārbaudīt, vai parole atbilst prasībām.

imports Reaģēt, { useState } no 'reaģēt'
funkcijuParoles kontrolsaraksts() {
 const [parole, setPassword] = useState('')
konst [error, setError] = useState(viltus)


funkcijurokturisMainīt(e) {
uzstādīt paroli(e.target.vērtība)
 }


funkcijurokturisIesniegt(e) {
e.preventDefault()


// Paroles prasības
konst prasības = [
// Jābūt vismaz 8 rakstzīmēm
 parole.garums >= 8,
// Jābūt vismaz 1 lielajam burtam
 /[A-Z]/.pārbaude(parole),
// Jāietver vismaz 1 mazais burts
 /[a-z]/.pārbaude(parole),
// Jābūt vismaz 1 ciparam
 /\d/.pārbaude(parole)
 ]


// Ja visas prasības ir izpildītas, parole ir derīga
konst isValid = prasības.ikviens(Būla)
 if (isValid) {
 brīdināt ('Parole ir derīga!')
 } cits {
 setError(taisnība)
 }
 }


atgriezties (
<forma onSubmit={handleSubmit}>
<etiķete>
 Parole:
<ievade
 tips="parole"
 vērtība={parole}
 onChange={handleChange}
 />
</label>
<ievades veids="Iesniegt" vērtība="Iesniegt" />
 {kļūda &&<lpp>Parole nav derīga!</lpp>}
</form>
 )
}
eksportētnoklusējuma Paroles kontrolsaraksts

Iepriekš minētajā kodā vispirms ir jāievada parole no lietotājiem. To var izdarīt, izmantojot useState āķis. Šis āķis ļauj izveidot stāvokļa mainīgo un funkciju šī mainīgā atjaunināšanai. Šajā gadījumā stāvokļa mainīgais ir parole un tā atjaunināšanas funkcija ir uzstādīt paroli.

Pēc tam jums ir jāizveido funkcija, lai apstrādātu veidlapas iesniegšanu. Šī funkcija novērsīs veidlapas noklusējuma darbību (tā ir veidlapas iesniegšana) un pārbaudīs, vai parole atbilst prasībām.

Paroles prasības ir tādas, ka tai ir jābūt:

  • ir vismaz astoņas rakstzīmes garš
  • satur vismaz vienu lielo burtu
  • satur vismaz vienu mazo burtu
  • satur vismaz vienu numuru

Jūs varat izmantot katrs metode, lai pārbaudītu, vai parole atbilst visām prasībām. Ja tā notiek, parole ir derīga. Pretējā gadījumā kods parādīs kļūdas ziņojumu.

3. metode: reaģēt-paroles kontrolsaraksta moduļa izmantošana

Vēl viens veids, kā izveidot paroles kontrolsarakstu programmā Next.js, ir izmantot reaģēt-paroles-kontrolsaraksts modulis. Šis modulis ir viegli lietojams, un tam ir daudz funkciju.

Vispirms instalējiet moduli, izmantojot šādu komandu:

npm uzstādīt reaģēt -parole- kontrolsaraksts -- saglabāt

Pēc tam importējiet moduli savā paroleCecklist.js fails:

imports Reaģējiet, {useState} no "reaģēt"
imports Paroles kontrolsaraksts no "reaģēt-paroles kontrolsaraksts"
konst Lietotne = () => {
 const [parole, setPassword] = useState("")


atgriezties (
<formā>
<etiķete>Parole:</label>
<ievades veids="parole" onChange={e => setPassword (e.target.value)}/>


<Paroles kontrolsaraksts
 noteikumi={["minLength","īpašsChar","numuru","kapitāls"]}
 minLength={5}
 vērtība={parole}
 />
</form>
 )
}
eksportētnoklusējuma App

Šis kods nodod rekvizītus minLength, specialChar, numuru un kapitālu uz Paroles kontrolsaraksts komponents. Komponents izmantos šos rekvizītus, lai pārbaudītu, vai parole atbilst prasībām.

Varat arī pievienot komponentam tulkotos ziņojumus, nododot ziņas prop. Šīs virknes ignorē noklusējuma kļūdas, lai jūs varētu tās izmantot citām valodām vai variantiem.

imports Reaģējiet, {useState} no "reaģēt"
imports Paroles kontrolsaraksts no "reaģēt-paroles kontrolsaraksts"
konst Lietotne = () => {
 const [parole, setPassword] = useState("")


atgriezties (
<formā>
<etiķete>Parole:</label>
<ievades veids="parole" onChange={e => setPassword (e.target.value)}/>


<Paroles kontrolsaraksts
 noteikumi={["minLength", "īpašsChar", "numuru", "kapitāls"]}
 minLength={5}
 vērtība={parole}
 ziņojumi={{
 minLength: "La pretstatāña tiene más de 8 rakstzīmes.",
 īpašais raksts: "La pretstatāña tiene raksturs īpaši.",
 numurs: "La pretstatāña tiene un número.",
 kapitāls: "La pretstatāña tiene una letra maijaúskula.",
 atbilst: "Laskontraseñkā sakritība.",
 }}
 />
</form>
 )
}
eksportētnoklusējuma App

Iepriekš minētajā kodā ziņas prop saglabā alternatīvus kļūdu ziņojumus. Komponents parādīs šos ziņojumus, ja parole neatbilst prasībām.

Šī metode ir ērtāka, jo jums nav jāraksta kods, lai pārbaudītu, vai parole atbilst prasībām. Šī moduļa izmantošanai ir arī daudzas citas priekšrocības, piemēram:

  • Paroles stipruma parādīšana: reaģēt-paroles-kontrolsaraksts var parādīt paroles stiprumu, lai lietotāji varētu redzēt, cik spēcīga ir viņu parole.
  • Tiek parādīts kļūdas ziņojums: reaģēt-paroles-kontrolsaraksts var arī parādīt kļūdas ziņojumu, ja parole nav derīga.
  • Stils: kontrolsarakstam nav jāpievieno papildu stils. Modulis nodrošina noklusējuma stilu, ko varat izmantot savā lietotnē. Ja vēlaties pievienot kādu papildu stilu, varat izmantot parasto CSS vai citu stila ietvarus, piemēram, tailwind CSS.

Uzlabojiet lietotāju drošību, izmantojot paroles kontrolsarakstu

Spēcīga parole ir tiešsaistes drošības atslēga. Ir svarīgi, lai katram tiešsaistes kontam būtu spēcīga un unikāla parole. Izmantojot paroļu kontrolsarakstu, varat būt pārliecināti, ka katra parole atbilst noteiktam standartam.

Jūsu lietotnes lietotāji arī novērtēs, ka varēs redzēt paroles stiprumu. Tādā veidā viņi var būt pārliecināti, ka viņu paroles ir pietiekami spēcīgas. Tas uzlabos jūsu lietotnes lietošanas pieredzi un arī jūsu lietotnes lietotāju drošību. Līdzīgi varat arī apstiprināt veidlapas savā lietotnē Next.js.