I dagens verden er nettsikkerhet viktigere enn noen gang. Med så mange nettkontoer å holde styr på, er det viktig å ha et sterkt og unikt passord for hver enkelt.

Hvis du bygger et nettsted, er det enda viktigere å sikre at passord er så sikre som de kan være. Du kan presentere en sjekkliste for de som bruker nettstedet ditt og sikre at passordet deres oppfyller kravene dine før du godtar det.

Lær hvordan du implementerer en passordsjekkliste ved hjelp av Next.js.

Hvorfor bruke en passordsjekkliste?

Det er mange grunner til at du kanskje vil bruke en passordsjekkliste.

For det første kan det hjelpe deg å sikre at brukernes passord er sterke og unike. Ved å ha en sjekkliste med krav kan du være sikker på at hvert passord oppfyller en viss standard.

Brukerne dine takker deg kanskje ikke for det, men du vil gjøre dem en tjeneste. Ved å oppmuntre til sterke passord, vil du gjøre det mindre sannsynlig at en hacker får tilgang til en av brukernes kontoer.

For det andre kan en passordsjekkliste bidra til å formidle en følelse av sikkerhet. Ved å publisere krav forteller du brukerne dine at du tar passordsikkerhet på alvor.

instagram viewer

Du bør imidlertid være klar over at en passordsjekkliste ikke er en mirakelløsning på passordproblemer. Faktisk, hvis du gjør passordene dine for restriktive, kan du gjøre det lettere for hackere å begrense alternativene og brutt-force et passord. Til syvende og sist, sikre og unike passord som brukere lagre i en passordbehandling er best.

Hvordan lage en passordsjekkliste

Det er to måter å lage en passordsjekkliste i Next.js. Du kan enten bruke de innebygde funksjonene eller du kan bruke en ekstern modul.

Hva du trenger

For å lage en passordsjekkliste i Next.js trenger du følgende:

  • Node.js installert
  • En tekstredigerer
  • Et Next.js-prosjekt

Metode 1: Bruke innebygde funksjoner

Next.js kommer med innebygde funksjoner som kroker og kontekst. Det er forskjellige typer kroker som du kan bruke til å lage en passordsjekkliste.

Opprett først en ny fil i Next.js-appen og navngi den passwordChecklist.js. I denne filen kan du ta inn passord fra brukere, og du kan sjekke om passordet oppfyller kravene.

import Reager, { useState } fra 'reagere'
funksjonPassordsjekkliste() {
 const [passord, setPassword] = brukState('')
konst [error, setError] = useState(falsk)


funksjonhandleEndre(e) {
lag et passord(e.mål.verdi)
 }


funksjonhandleSend inn(e) {
e.preventDefault()


// Passordkrav
konst krav = [
// Må bestå av minst 8 tegn
 passord.lengde >= 8,
// Må inneholde minst 1 stor bokstav
 /[A-Z]/.test(passord),
// Må inneholde minst 1 liten bokstav
 /[a-z]/.test(passord),
// Må inneholde minst 1 tall
 /\d/.test(passord)
 ]


// Hvis alle krav er oppfylt, er passordet gyldig
konst isValid = requirements.every(boolsk)
 if (erGyldig) {
 varsling('Passordet er gyldig!')
 } ellers {
 setError(ekte)
 }
 }


komme tilbake (
<form onSubmit={handleSubmit}>
<merkelapp>
 Passord:
<input
 type="passord"
 verdi={passord}
 onChange={handleChange}
 />
</label>
<input type="sende inn" verdi="Sende inn" />
 {feil &&<s>Passordet er ikke gyldig!</s>}
</form>
 )
}
eksportmisligholde Passordsjekkliste

I koden ovenfor må du først ta inn passord fra brukere. Du kan gjøre dette ved å bruke useState krok. Denne kroken lar deg lage en tilstandsvariabel og en funksjon for å oppdatere den variabelen. I dette tilfellet er tilstandsvariabelen passord og funksjonen for å oppdatere den er lag et passord.

Deretter må du opprette en funksjon for å håndtere skjemainnsendingen. Denne funksjonen vil forhindre standardhandlingen til skjemaet (som er å sende inn skjemaet) og den vil sjekke om passordet oppfyller kravene.

Passordkravene er at det må:

  • være minst åtte tegn lang
  • inneholde minst én stor bokstav
  • inneholde minst én liten bokstav
  • inneholde minst ett tall

Du kan bruke hver metode for å sjekke om et passord oppfyller alle kravene. Hvis den gjør det, er passordet gyldig. Ellers vil koden vise en feilmelding.

Metode 3: Bruk av react-password-checklist-modulen

En annen måte å lage en passordsjekkliste i Next.js er ved å bruke reager-passord-sjekkliste modul. Denne modulen er enkel å bruke, og den kommer med mange funksjoner.

Installer først modulen ved å bruke følgende kommando:

npm installere reagere-passord-sjekkliste --lagre

Importer deretter modulen i din passwordChecklist.js fil:

import Reager, {useState} fra "reagere"
import Passordsjekkliste fra "reager-passord-sjekkliste"
konst App = () => {
 const [passord, setPassword] = brukState("")


komme tilbake (
<form>
<merkelapp>Passord:</label>
<input type="passord" onChange={e => setPassword (e.target.value)}/>


<Passordsjekkliste
 regler={["minLengde","spesialChar","Antall","hovedstad"]}
 minLength={5}
 verdi={passord}
 />
</form>
 )
}
eksportmisligholde App

Denne koden sender rekvisittene minLength, specialChar, tall og kapital til Passordsjekkliste komponent. Komponenten vil bruke disse rekvisittene for å sjekke om passordet oppfyller kravene.

Du kan også legge til oversatte meldinger til komponenten ved å sende meldinger rekvisitt. Disse strengene overstyrer standardfeilene slik at du kan bruke dem til andre språk eller varianter.

import Reager, {useState} fra "reagere"
import Passordsjekkliste fra "reager-passord-sjekkliste"
konst App = () => {
 const [passord, setPassword] = brukState("")


komme tilbake (
<form>
<merkelapp>Passord:</label>
<input type="passord" onChange={e => setPassword (e.target.value)}/>


<Passordsjekkliste
 regler={["minLengde", "spesialChar", "Antall", "hovedstad"]}
 minLength={5}
 verdi={passord}
 meldinger={{
 minLength: "La contraseñen tiene mámed 8 karakterer.",
 spesialtegn: "La contraseñen tiene karakterer spesielt.",
 Antall: "La contraseña tiene un número.",
 hovedstad: "La contraseña tiene una letra mayúscula.",
 kamp: "Las contraseñsom tilfeldig.",
 }}
 />
</form>
 )
}
eksportmisligholde App

I koden ovenfor er det meldinger prop lagrer alternative feilmeldinger. Komponenten vil vise disse meldingene når passordet ikke oppfyller kravene.

Denne metoden er mer praktisk fordi du ikke trenger å skrive koden for å sjekke om passordet oppfyller kravene. Det er også mange andre fordeler ved å bruke denne modulen, for eksempel:

  • Viser passordstyrken: reager-passord-sjekkliste kan vise passordstyrken slik at brukerne kan se hvor sterkt passordet deres er.
  • Viser feilmeldingen: reager-passord-sjekkliste kan også vise feilmeldingen hvis passordet ikke er gyldig.
  • Styling: Du trenger ikke å legge til noen ekstra styling til sjekklisten. Modulen gir standard stil som du kan bruke i appen din. Hvis du vil legge til litt ekstra styling, kan du bruke vanlig CSS eller annet stylingrammeverk som medvind CSS.

Forbedre brukersikkerheten med en passordsjekkliste

Et sterkt passord er nøkkelen til nettsikkerhet. Det er viktig å ha et sterkt og unikt passord for hver nettkonto. Ved å bruke en passordsjekkliste kan du være sikker på at hvert passord oppfyller en viss standard.

Appbrukerne dine vil også sette pris på å kunne se passordstyrken. På denne måten kan de være sikre på at passordene deres er sterke nok. Dette vil forbedre brukeropplevelsen av appen din, og det vil også forbedre sikkerheten til appbrukerne dine. På samme måte kan du også validere skjemaene i Next.js-appen din.