Sådan opretter du en adgangskodecheckliste med Next.js

I dagens verden er online sikkerhed vigtigere end nogensinde. Med så mange onlinekonti at holde styr på, er det vigtigt at have en stærk og unik adgangskode til hver enkelt.

Hvis du bygger et websted, er det endnu vigtigere at sikre, at adgangskoder er så sikre, som de kan være. Du kan præsentere en tjekliste for dem, der bruger dit websted og sikre, at deres adgangskode opfylder dine krav, før du accepterer det.

Lær, hvordan du implementerer en adgangskodecheckliste ved hjælp af Next.js.

Hvorfor bruge en adgangskodecheckliste?

Der er mange grunde til, at du måske ønsker at bruge en adgangskode-tjekliste.

For det første kan det hjælpe dig med at sikre, at dine brugeres adgangskoder er stærke og unikke. Ved at have en tjekliste over krav kan du være sikker på, at hver adgangskode opfylder en bestemt standard.

Dine brugere takker dig måske ikke for det, men du vil gøre dem en tjeneste. Ved at opmuntre til stærke adgangskoder, vil du gøre det mindre sandsynligt, at en hacker får adgang til en af ​​dine brugeres konti.

For det andet kan en kodeordstjekliste hjælpe med at formidle en følelse af sikkerhed. Ved at offentliggøre krav fortæller du dine brugere, at du tager adgangskodesikkerhed alvorligt.

Du skal dog være opmærksom på, at en adgangskodecheckliste ikke er en mirakelløsning på adgangskodeproblemer. Faktisk, hvis du gør dine adgangskoder for restriktive, kan du gøre det nemmere for hackere at indsnævre deres muligheder og brute-force en adgangskode. I sidste ende sikre og unikke adgangskoder, som brugere gemme i en adgangskodemanager er bedst.

Sådan opretter du en adgangskodecheckliste

Der er to måder at oprette en adgangskodecheckliste i Next.js. Du kan enten bruge de indbyggede funktioner, eller du kan bruge et eksternt modul.

Hvad du skal bruge

For at oprette en adgangskodecheckliste i Next.js skal du bruge følgende:

• Node.js installeret
• En teksteditor
• Et Next.js-projekt

Metode 1: Brug af indbyggede funktioner

Next.js kommer med indbyggede funktioner som hooks og kontekst. Der er forskellige typer kroge som du kan bruge til at oprette en adgangskode-tjekliste.

Først skal du oprette en ny fil i din Next.js-app og navngive den passwordChecklist.js. I denne fil kan du tage adgangskodeinput fra brugere, og du kan kontrollere, om adgangskoden opfylder kravene.

importere Reager, { useState } fra 'reagere'
fungereKodeordstjekliste() {
 const [adgangskode, sætPassword] = useState('')
konst [fejl, setError] = useState(falsk)
fungerehåndtag Skift(e) {
sætPassword(e.mål.værdi)
 }
fungerehandleSend(e) {
e.preventDefault()
// Adgangskodekrav
konst krav = [
// Skal være på mindst 8 tegn
 password.længde >= 8,
// Skal indeholde mindst 1 stort bogstav
 /[A-Z]/.prøve(adgangskode),
// Skal indeholde mindst 1 lille bogstav
 /[a-z]/.prøve(adgangskode),
// Skal indeholde mindst 1 tal
 /\d/.prøve(adgangskode)
 ]
// Hvis alle krav er opfyldt, er adgangskoden gyldig
konst isValid = requirements.every(Boolean)
 if (er gyldig) {
 alert('Adgangskoden er gyldig!')
 } andet {
 setError(rigtigt)
 }
 }
Vend tilbage (
<form onSubmit={handleSubmit}>
<etiket>
 Adgangskode:
<input
 type="adgangskode"
 værdi={adgangskode}
 onChange={handleChange}
 />
</label>
<input type="Indsend" værdi="Indsend" />
 {fejl &&<s>Adgangskoden er ikke gyldig!</s>}
</form>
 )
}
eksportStandard Kodeordstjekliste

I ovenstående kode skal du først tage adgangskodeinput fra brugere. Du kan gøre dette ved at bruge useState krog. Denne krog giver dig mulighed for at oprette en tilstandsvariabel og en funktion til at opdatere denne variabel. I dette tilfælde er tilstandsvariablen adgangskode og funktionen til at opdatere den er sætPassword.

Dernæst skal du oprette en funktion til at håndtere formularindsendelsen. Denne funktion forhindrer formularens standardhandling (som er at indsende formularen), og den vil kontrollere, om adgangskoden opfylder kravene.

Adgangskoden er, at den skal:

• være mindst otte tegn lange
• indeholde mindst ét ​​stort bogstav
• indeholde mindst ét ​​lille bogstav
• indeholde mindst ét ​​tal

Du kan bruge hver metode til at kontrollere, om en adgangskode opfylder alle kravene. Hvis det gør det, er adgangskoden gyldig. Ellers vil koden vise en fejlmeddelelse.

Metode 3: Brug af react-password-checklist-modulet

En anden måde at oprette en adgangskodecheckliste i Next.js er ved at bruge reager-adgangskode-tjekliste modul. Dette modul er nemt at bruge, og det kommer med en masse funktioner.

Først skal du installere modulet ved hjælp af følgende kommando:

npm installere reagere-adgangskode-tjekliste --Gemme

Importer derefter modulet i din passwordChecklist.js fil:

importere Reager, {useState} fra "reagere"
importere Kodeordstjekliste fra "reager-adgangskode-tjekliste"
konst App = () => {
 const [adgangskode, sætPassword] = useState("")
Vend tilbage (
<form>
<etiket>Adgangskode:</label>
<input type="adgangskode" onChange={e => setPassword (e.target.value)}/>
<Kodeordstjekliste
 regler={["minLængde","specialChar","nummer","kapital"]}
 minLængde={5}
 værdi={adgangskode}
 />
</form>
 )
}
eksportStandard App

Denne kode overfører rekvisitterne minLength, specialChar, number og capital til Kodeordstjekliste komponent. Komponenten vil bruge disse rekvisitter til at kontrollere, om adgangskoden opfylder kravene.

Du kan også tilføje oversatte meddelelser til komponenten ved at videregive Beskeder rekvisit. Disse strenge tilsidesætter standardfejlene, så du kan bruge dem til andre sprog eller variationer.

importere Reager, {useState} fra "reagere"
importere Kodeordstjekliste fra "reager-adgangskode-tjekliste"
konst App = () => {
 const [adgangskode, sætPassword] = useState("")
Vend tilbage (
<form>
<etiket>Adgangskode:</label>
<input type="adgangskode" onChange={e => setPassword (e.target.value)}/>
<Kodeordstjekliste
 regler={["minLængde", "specialChar", "nummer", "kapital"]}
 minLængde={5}
 værdi={adgangskode}
 beskeder={{
 minLængde: "La contraseñen tiene mámed 8 karakterer.",
 specialChar: "La contraseñen tiene karakterer især.",
 nummer: "La contraseña tiene un número.",
 kapital: "La contraseña tiene una letra mayúscula.",
 match: "Las contraseñsom tilfældigt.",
 }}
 />
</form>
 )
}
eksportStandard App

I ovenstående kode er Beskeder prop gemmer alternative fejlmeddelelser. Komponenten vil vise disse meddelelser, når adgangskoden ikke opfylder kravene.

Denne metode er mere praktisk, fordi du ikke behøver at skrive koden for at kontrollere, om adgangskoden opfylder kravene. Der er også mange andre fordele ved at bruge dette modul såsom:

• Visning af adgangskodestyrken: reager-adgangskode-tjekliste kan vise adgangskodens styrke, så brugerne kan se, hvor stærk deres adgangskode er.
• Viser fejlmeddelelsen: reager-adgangskode-tjekliste kan også vise fejlmeddelelsen, hvis adgangskoden ikke er gyldig.
• Styling: Du behøver ikke at tilføje ekstra styling til tjeklisten. Modulet giver standardstyling, som du kan bruge i din app. Hvis du vil tilføje noget ekstra styling, kan du bruge normal CSS eller andet styling rammer som medvind CSS.

Forbedre brugersikkerheden med en adgangskodecheckliste

En stærk adgangskode er en nøgle til online sikkerhed. Det er vigtigt at have en stærk og unik adgangskode til hver online konto. Ved at bruge en adgangskode-tjekliste kan du være sikker på, at hver adgangskode opfylder en bestemt standard.

Dine appbrugere vil også sætte pris på at kunne se adgangskodens styrke. På denne måde kan de være sikre på, at deres adgangskoder er stærke nok. Dette vil forbedre brugeroplevelsen af ​​din app, og det vil også forbedre sikkerheden for dine app-brugere. På samme måde kan du også validere formularerne i din Next.js-app.