A mai világban az online biztonság fontosabb, mint valaha. Mivel rengeteg online fiókot kell nyomon követni, elengedhetetlen, hogy mindegyikhez rendelkezzen erős és egyedi jelszóval.

Ha webhelyet épít, még fontosabb, hogy a jelszavak a lehető legbiztonságosabbak legyenek. Bemutathat egy ellenőrzőlistát a webhelyét használóknak, és megbizonyosodhat arról, hogy jelszava megfelel az Ön követelményeinek, mielőtt elfogadná azt.

Ismerje meg, hogyan implementálhat jelszó-ellenőrző listát a Next.js használatával.

Miért érdemes jelszó-ellenőrzőlistát használni?

Számos oka lehet annak, hogy miért érdemes jelszó-ellenőrző listát használni.

Először is, segíthet biztosítani, hogy felhasználói jelszavai erősek és egyediek legyenek. A követelmények ellenőrző listájával biztos lehet benne, hogy minden jelszó megfelel egy bizonyos szabványnak.

Lehet, hogy a felhasználók nem köszönik meg ezt, de szívességet teszel nekik. Az erős jelszavak bátorításával csökkenti annak valószínűségét, hogy egy hacker hozzáférjen valamelyik felhasználói fiókjához.

instagram viewer

Másodszor, egy jelszó-ellenőrző lista segíthet a biztonságérzet közvetítésében. A követelmények közzétételével azt üzeni felhasználóinak, hogy komolyan veszi a jelszavas biztonságot.

Tudnia kell azonban, hogy a jelszó ellenőrző lista nem csodaszer megoldás a jelszóproblémákra. Valójában, ha túlságosan korlátozóvá teszi jelszavait, megkönnyítheti a hackerek számára, hogy szűkítsék a lehetőségeket, és brutálisan kikényszerítsék a jelszót. Végső soron biztonságos és egyedi jelszavak a felhasználók számára tárolja a jelszókezelőben legjobbak.

Hogyan hozzunk létre jelszó-ellenőrző listát

Kétféleképpen hozhat létre jelszó-ellenőrző listát a Next.js-ben. Használhatja a beépített funkciókat, vagy használhat külső modult.

Amire szüksége lesz

Jelszó-ellenőrző lista létrehozásához a Next.js-ben a következőkre lesz szüksége:

  • Node.js telepítve
  • Szövegszerkesztő
  • Egy Next.js projekt

1. módszer: A beépített szolgáltatások használata

A Next.js beépített funkciókkal rendelkezik, mint például a horgok és a kontextus. Vannak különböző típusú horgok amellyel jelszó-ellenőrző listát hozhat létre.

Először hozzon létre egy új fájlt a Next.js alkalmazásban, és nevezze el jelszóChecklist.js. Ebben a fájlban fogadhatja a jelszóbevitelt a felhasználóktól, és ellenőrizheti, hogy a jelszó megfelel-e a követelményeknek.

import React, { useState } tól től 'reagál'
funkcióJelszóellenőrző lista() {
 const [jelszó, setPassword] = useState('')
const [hiba, setError] = useState(hamis)


funkciófogantyúChange(e) {
állítsd be a jelszót(e.cél.érték)
 }


funkcióhandleSubmit(e) {
e.preventDefault()


// Jelszókövetelmények
const követelmények = [
// Legalább 8 karakterből kell állnia
 jelszó hosszúság >= 8,
// Legalább 1 nagybetűt kell tartalmaznia
 /[A-Z]/.teszt(Jelszó),
// Tartalmaznia kell legalább 1 kisbetűt
 /[a-z]/.teszt(Jelszó),
// Legalább 1 számot kell tartalmaznia
 /\d/.teszt(Jelszó)
 ]


// Ha minden követelmény teljesül, a jelszó érvényes
const isValid = követelmények.every(Boolean)
 if (Valid) {
 éber('A jelszó érvényes!')
 } más {
 setError(igaz)
 }
 }


Visszatérés (
<form onSubmit={handleSubmit}>
<címke>
 Jelszó:
<bemenet
 típus="Jelszó"
 érték={jelszó}
 onChange={handleChange}
 />
</label>
<bemenet típusa="Beküldés" érték="Beküldés" />
 {hiba &&<p>A jelszó nem érvényes!</p>}
</form>
 )
}
exportalapértelmezett Jelszóellenőrző lista

A fenti kódban először meg kell adnia a jelszót a felhasználóktól. Ezt megteheti a useState horog. Ez a hook lehetővé teszi egy állapotváltozó és egy függvény létrehozását a változó frissítéséhez. Ebben az esetben az állapotváltozó az Jelszó és a frissítés funkciója állítsd be a jelszót.

Ezután létre kell hoznia egy függvényt az űrlap elküldésének kezelésére. Ez a funkció megakadályozza az űrlap alapértelmezett műveletét (az űrlap elküldését), és ellenőrzi, hogy a jelszó megfelel-e a követelményeknek.

A jelszó követelményei a következők:

  • legalább nyolc karakter hosszú legyen
  • legalább egy nagybetűt tartalmaznia kell
  • tartalmazzon legalább egy kisbetűt
  • tartalmaznak legalább egy számot

Használhatja a minden módszerrel ellenőrizheti, hogy a jelszó megfelel-e az összes követelménynek. Ha igen, akkor a jelszó érvényes. Ellenkező esetben a kód hibaüzenetet jelenít meg.

3. módszer: A react-password-checklist modul használata

Jelszó-ellenőrző lista létrehozásának másik módja a Next.js-ben a react-password-checklist modult. Ez a modul könnyen használható, és számos funkcióval rendelkezik.

Először telepítse a modult a következő paranccsal:

npm telepítés reagál-Jelszó- ellenőrző lista --megment

Ezután importálja a modult a sajátjába jelszóChecklist.js fájl:

import Reagálj, {useState} tól től "reagál"
import Jelszóellenőrző lista tól től "react-password-checklist"
const App = () => {
 const [jelszó, setPassword] = useState("")


Visszatérés (
<forma>
<címke>Jelszó:</label>
<bemenet típusa="Jelszó" onChange={e => setPassword (e.target.value)}/>


<Jelszóellenőrző lista
 szabályok={["minLength","specialChar","szám","főváros"]}
 minLength={5}
 érték={jelszó}
 />
</form>
 )
}
exportalapértelmezett App

Ez a kód átadja a kellékeket minLength, specialChar, szám és tőke a Jelszóellenőrző lista összetevő. Az összetevő ezeket a kellékeket fogja használni annak ellenőrzésére, hogy a jelszó megfelel-e a követelményeknek.

Lefordított üzeneteket is hozzáadhat az összetevőhöz, ha átadja a üzenetek támaszt. Ezek a karakterláncok felülírják az alapértelmezett hibákat, így más nyelvekhez vagy változatokhoz is használhatja őket.

import Reagálj, {useState} tól től "reagál"
import Jelszóellenőrző lista tól től "react-password-checklist"
const App = () => {
 const [jelszó, setPassword] = useState("")


Visszatérés (
<forma>
<címke>Jelszó:</label>
<bemenet típusa="Jelszó" onChange={e => setPassword (e.target.value)}/>


<Jelszóellenőrző lista
 szabályok={["minLength", "specialChar", "szám", "főváros"]}
 minLength={5}
 érték={jelszó}
 üzenetek={{
 minLength: "La contraseña tiene más de 8 karakter.",
 speciális Char: "La contraseñegy tiene caracteres különösen.",
 szám: "La contraseña tiene un número.",
 főváros: "La contraseña tiene una letra mayúscula.",
 mérkőzés: "Las contraseñvéletlenül.",
 }}
 />
</form>
 )
}
exportalapértelmezett App

A fenti kódban a üzenetek prop alternatív hibaüzeneteket tárol. Az összetevő ezeket az üzeneteket jeleníti meg, ha a jelszó nem felel meg a követelményeknek.

Ez a módszer kényelmesebb, mert nem kell megírnia a kódot annak ellenőrzéséhez, hogy a jelszó megfelel-e a követelményeknek. A modul használatának számos egyéb előnye is van, mint például:

  • A jelszó erősségének megjelenítése: react-password-checklist megjelenítheti a jelszó erősségét, így a felhasználók láthatják, milyen erős a jelszava.
  • A hibaüzenet megjelenítése: react-password-checklist is megjelenítheti a hibaüzenetet, ha a jelszó nem érvényes.
  • Styling: Nem kell extra stílust hozzáadnia az ellenőrzőlistához. A modul alapértelmezett stílust biztosít, amelyet az alkalmazásban használhat. Ha további stílust szeretne hozzáadni, használhat normál CSS-t vagy mást stíluskeretrendszerek, mint például a hátszél CSS.

Növelje a felhasználók biztonságát a jelszó ellenőrző listával

Az erős jelszó az online biztonság kulcsa. Fontos, hogy minden online fiókhoz erős és egyedi jelszó legyen. A jelszó ellenőrző lista használatával biztos lehet benne, hogy minden jelszó megfelel egy bizonyos szabványnak.

Az alkalmazás felhasználói azt is értékelni fogják, hogy láthatják a jelszó erősségét. Így biztosak lehetnek abban, hogy jelszavaik elég erősek. Ez javítja az alkalmazás felhasználói élményét, és javítja az alkalmazás felhasználóinak biztonságát is. Hasonlóképpen érvényesítheti az űrlapokat a Next.js alkalmazásban.