In de wereld van vandaag is online veiligheid belangrijker dan ooit. Met zoveel online accounts om bij te houden, is het essentieel om voor elk account een sterk en uniek wachtwoord te hebben.

Als u een site bouwt, is het nog belangrijker om ervoor te zorgen dat wachtwoorden zo veilig mogelijk zijn. U kunt een checklist presenteren aan degenen die uw site gebruiken en ervoor zorgen dat hun wachtwoord voldoet aan uw vereisten voordat u het accepteert.

Leer hoe u een wachtwoordchecklist implementeert met behulp van Next.js.

Waarom een ​​wachtwoordchecklist gebruiken?

Er zijn veel redenen waarom u een wachtwoordchecklist zou willen gebruiken.

Ten eerste kan het u helpen ervoor te zorgen dat de wachtwoorden van uw gebruikers sterk en uniek zijn. Door een checklist met vereisten te hebben, kunt u er zeker van zijn dat elk wachtwoord aan een bepaalde norm voldoet.

Uw gebruikers zullen u er misschien niet dankbaar voor zijn, maar u bewijst ze een plezier. Door sterke wachtwoorden aan te moedigen, verkleint u de kans dat een hacker toegang krijgt tot een van uw gebruikersaccounts.

instagram viewer

Ten tweede kan een wachtwoordchecklist helpen om een ​​gevoel van veiligheid over te brengen. Door vereisten te publiceren, laat u uw gebruikers weten dat u wachtwoordbeveiliging serieus neemt.

Houd er echter rekening mee dat een wachtwoordchecklist geen wonderoplossing is voor wachtwoordproblemen. Als u uw wachtwoorden te beperkend maakt, kunt u het hackers zelfs gemakkelijker maken hun opties te beperken en een wachtwoord bruut te forceren. Uiteindelijk zijn veilige en unieke wachtwoorden die gebruikers opslaan in een wachtwoordbeheerder zijn beste.

Een wachtwoordchecklist maken

Er zijn twee manieren om een ​​wachtwoordchecklist te maken in Next.js. U kunt de ingebouwde functies gebruiken of u kunt een externe module gebruiken.

Wat je nodig zult hebben

Om een ​​wachtwoordchecklist in Next.js te maken, hebt u het volgende nodig:

  • Node.js geïnstalleerd
  • Een teksteditor
  • Een Next.js-project

Methode 1: ingebouwde functies gebruiken

Next.js wordt geleverd met ingebouwde functies zoals hooks en context. Er zijn verschillende soorten haken die u kunt gebruiken om een ​​wachtwoordchecklist te maken.

Maak eerst een nieuw bestand in uw Next.js-app en geef het een naam wachtwoordChecklist.js. In dit bestand kunt u wachtwoordinvoer van gebruikers overnemen en controleren of het wachtwoord aan de vereisten voldoet.

importeren Reageer, { useState } van 'Reageer'
functieWachtwoordChecklist() {
 const [wachtwoord, setPassword] = useState('')
const [fout, setError] = useState(vals)


functieomgaanWijzigen(e) {
stel een wachtwoord in(e.doel.waarde)
 }


functiehandvatVerzenden(e) {
e.voorkom standaard()


// Wachtwoordvereisten
const vereisten = [
// Moet minimaal 8 tekens lang zijn
 wachtwoord lengte >= 8,
// Moet minimaal 1 hoofdletter bevatten
 /[A-Z]/.test(wachtwoord),
// Moet minimaal 1 kleine letter bevatten
 /[a-z]/.test(wachtwoord),
// Moet minimaal 1 cijfer bevatten
 /\d/.test(wachtwoord)
 ]


// Als aan alle vereisten is voldaan, is het wachtwoord geldig
const isValid = vereisten.elke(Booleaans)
 als (isGeldig) {
 alarm ('Wachtwoord is geldig!')
 } anders {
 setFout(WAAR)
 }
 }


opbrengst (
<formulier onSubmit={handleSubmit}>
<etiket>
 Wachtwoord:
<invoer
 type="wachtwoord"
 waarde={wachtwoord}
 onChange={handleChange}
 />
</label>
<invoertype="indienen" waarde="Indienen" />
 {fout &&<P>Wachtwoord is niet geldig!</P>}
</form>
 )
}
exporterenstandaard WachtwoordChecklist

In de bovenstaande code moet u eerst het wachtwoord invoeren van gebruikers. U kunt dit doen met behulp van de gebruikState haak. Met deze hook kun je een statusvariabele maken en een functie om die variabele bij te werken. In dit geval is de toestandsvariabele wachtwoord en de functie om het bij te werken is stel een wachtwoord in.

Vervolgens moet u een functie maken om de formulierverzending af te handelen. Deze functie voorkomt de standaardactie van het formulier (namelijk het formulier verzenden) en controleert of het wachtwoord aan de vereisten voldoet.

De wachtwoordvereisten zijn dat het moet:

  • minimaal acht tekens lang zijn
  • bevat ten minste een hoofdletter
  • minstens één kleine letter bevatten
  • minimaal één cijfer bevatten

U kunt de elk methode om te controleren of een wachtwoord aan alle eisen voldoet. Als dit het geval is, is het wachtwoord geldig. Anders geeft de code een foutmelding weer.

Methode 3: De reactie-wachtwoord-checklist-module gebruiken

Een andere manier om een ​​wachtwoordchecklist te maken in Next.js is door de reactie-wachtwoord-checklist moduul. Deze module is eenvoudig te gebruiken en wordt geleverd met veel functies.

Installeer eerst de module met behulp van de volgende opdracht:

npm installeren Reageer-wachtwoord-checklist --redden

Importeer vervolgens de module in uw wachtwoordChecklist.js bestand:

importeren Reageer, {useState} van "Reageer"
importeren WachtwoordChecklist van "reageer-wachtwoord-checklist"
const App = () => {
 const [wachtwoord, setPassword] = useState("")


opbrengst (
<formulier>
<etiket>Wachtwoord:</label>
<invoertype="wachtwoord" onChange={e => setPassword (e.doelwaarde)}/>


<WachtwoordChecklist
 regels={["minimale lengte","specialChar","nummer","hoofdstad"]}
 minLengte={5}
 waarde={wachtwoord}
 />
</form>
 )
}
exporterenstandaard app

Deze code geeft de rekwisieten minLength, specialChar, number en capital door aan de WachtwoordChecklist bestanddeel. De component gebruikt deze rekwisieten om te controleren of het wachtwoord aan de vereisten voldoet.

U kunt ook vertaalde berichten aan de component toevoegen door de berichten prop. Deze tekenreeksen overschrijven de standaardfouten, zodat u ze voor andere talen of variaties kunt gebruiken.

importeren Reageer, {useState} van "Reageer"
importeren WachtwoordChecklist van "reageer-wachtwoord-checklist"
const App = () => {
 const [wachtwoord, setPassword] = useState("")


opbrengst (
<formulier>
<etiket>Wachtwoord:</label>
<invoertype="wachtwoord" onChange={e => setPassword (e.doelwaarde)}/>


<WachtwoordChecklist
 regels={["minimale lengte", "specialChar", "nummer", "hoofdstad"]}
 minLengte={5}
 waarde={wachtwoord}
 berichten={{
 minimale lengte: "Het contrastñeen tiene más de 8 karakters.",
 specialChar: "Het contrastñvooral een tiene karakter.",
 nummer: "Het contrastñeen tiene een númeer.",
 hoofdstad: "Het contrastña tiene una letra mayúscula.",
 overeenkomst: "Las contrastñals samenvallen.",
 }}
 />
</form>
 )
}
exporterenstandaard app

In de bovenstaande code is de berichten prop slaat alternatieve foutmeldingen op. De component geeft deze berichten weer wanneer het wachtwoord niet aan de vereisten voldoet.

Deze methode is handiger omdat u de code niet hoeft te schrijven om te controleren of het wachtwoord aan de vereisten voldoet. Er zijn ook vele andere voordelen van het gebruik van deze module, zoals:

  • De wachtwoordsterkte weergeven: reactie-wachtwoord-checklist kan de wachtwoordsterkte weergeven, zodat gebruikers kunnen zien hoe sterk hun wachtwoord is.
  • De foutmelding weergeven: reactie-wachtwoord-checklist kan ook de foutmelding weergeven als het wachtwoord niet geldig is.
  • Styling: U hoeft geen extra styling aan de checklist toe te voegen. De module biedt standaardstijlen die u in uw app kunt gebruiken. Als u wat extra styling wilt toevoegen, kunt u normale of andere CSS gebruiken stylingframeworks zoals tailwind CSS.

Verbeter de gebruikersveiligheid met een wachtwoordchecklist

Een sterk wachtwoord is een sleutel tot online veiligheid. Het is belangrijk om voor elk online account een sterk en uniek wachtwoord te hebben. Door een wachtwoordchecklist te gebruiken weet je zeker dat elk wachtwoord aan een bepaalde norm voldoet.

Uw app-gebruikers zullen het ook op prijs stellen om de wachtwoordsterkte te kunnen zien. Zo weten ze zeker dat hun wachtwoord sterk genoeg is. Dit zal de gebruikerservaring van uw app verbeteren en het zal ook de veiligheid van uw app-gebruikers verbeteren. Op dezelfde manier kunt u ook de formulieren in uw Next.js-app valideren.