В днешния свят онлайн сигурността е по-важна от всякога. С толкова много онлайн акаунти, които трябва да следите, важно е да имате силна и уникална парола за всеки един.

Ако изграждате сайт, още по-важно е паролите да са възможно най-сигурни. Можете да представите контролен списък на тези, които използват вашия сайт, и да се уверите, че тяхната парола отговаря на вашите изисквания, преди да я приемете.

Научете как да внедрите контролен списък за пароли с помощта на Next.js.

Защо да използвате контролен списък с пароли?

Има много причини, поради които може да искате да използвате контролен списък с пароли.

Първо, може да ви помогне да се уверите, че паролите на вашите потребители са силни и уникални. Като имате контролен списък с изисквания, можете да сте сигурни, че всяка парола отговаря на определен стандарт.

Вашите потребители може да не ви благодарят за това, но вие ще им направите услуга. Като насърчавате силните пароли, ще намалите вероятността хакер да получи достъп до някой от акаунтите на вашите потребители.

instagram viewer

Второ, контролният списък с пароли може да помогне да се предаде чувство за сигурност. Като публикувате изискванията, вие казвате на потребителите си, че приемате сериозно сигурността на паролите.

Трябва да сте наясно обаче, че контролният списък с пароли не е чудодейно решение за проблеми с паролите. Всъщност, ако направите паролите си твърде ограничителни, можете да улесните хакерите да стеснят възможностите си и да използват груба сила за парола. В крайна сметка, сигурни и уникални пароли, които потребителите съхранявайте в мениджър на пароли са най-добри.

Как да създадете контролен списък с пароли

Има два начина за създаване на контролен списък за пароли в Next.js. Можете да използвате или вградените функции, или можете да използвате външен модул.

Какво ще ви трябва

За да създадете контролен списък за пароли в Next.js, ще ви трябва следното:

  • Node.js е инсталиран
  • Текстов редактор
  • Проект Next.js

Метод 1: Използване на вградени функции

Next.js идва с вградени функции като кукички и контекст. Има различни видове куки които можете да използвате, за да създадете контролен списък за пароли.

Първо създайте нов файл във вашето приложение Next.js и го наименувайте passwordChecklist.js. В този файл можете да вземете въвеждане на парола от потребителите и можете да проверите дали паролата отговаря на изискванията.

импортиране Реагирайте, {useState} от "реагира"
функцияСписък за проверка на пароли() {
 const [парола, setPassword] = useState('')
конст [грешка, setError] = useState(невярно)


функцияhandleChange(д) {
setPassword(д.мишена.стойност)
 }


функцияhandleSubmit(д) {
д.preventDefault()


// Изисквания за парола
конст изисквания = [
// Трябва да съдържа поне 8 знака
 парола.дължина >= 8,
// Трябва да съдържа поне 1 главна буква
 /[A-Z]/.тест(парола),
// Трябва да съдържа поне 1 малка буква
 /[a-z]/.тест(парола),
// Трябва да съдържа поне 1 число
 /\d/.тест(парола)
 ]


// Ако всички изисквания са изпълнени, паролата е валидна
конст isValid = requirements.every(Булева стойност)
 if (isValid) {
 тревога('Паролата е валидна!')
 } друго {
 setError(вярно)
 }
 }


връщане (
<форма onSubmit={handleSubmit}>
<етикет>
 Парола:
<вход
 тип="парола"
 стойност={парола}
 onChange={handleChange}
 />
</label>
<тип вход ="Изпращане" стойност="Изпращане" />
 {грешка &&<стр>Паролата не е валидна!</стр>}
</form>
 )
}
износпо подразбиране Списък за проверка на пароли

В горния код първо трябва да вземете въвеждане на парола от потребителите. Можете да направите това с помощта на useState кука. Тази кука ви позволява да създадете променлива на състоянието и функция за актуализиране на тази променлива. В този случай променливата на състоянието е парола и функцията за актуализирането му е setPassword.

След това трябва да създадете функция, която да обработва изпращането на формуляра. Тази функция ще предотврати действието по подразбиране на формуляра (което е да изпрати формуляра) и ще провери дали паролата отговаря на изискванията.

Изискванията за паролата са, че тя трябва:

  • да е с дължина поне осем знака
  • съдържа поне една главна буква
  • съдържа поне една малка буква
  • съдържа поне едно число

Можете да използвате всеки метод за проверка дали дадена парола отговаря на всички изисквания. Ако го направи, паролата е валидна. В противен случай кодът ще покаже съобщение за грешка.

Метод 3: Използване на модула react-password-checklist

Друг начин за създаване на контролен списък за пароли в Next.js е чрез използване на реакция-парола-контролен списък модул. Този модул е ​​лесен за използване и идва с много функции.

Първо инсталирайте модула, като използвате следната команда:

npm Инсталирай реагирам-парола-контролен списък --спести

След това импортирайте модула във вашия passwordChecklist.js файл:

импортиране Реагирайте, {useState} от "реагира"
импортиране Списък за проверка на пароли от "react-password-checklist"
конст Приложение = () => {
 const [парола, setPassword] = useState("")


връщане (
<форма>
<етикет>Парола:</label>
<тип вход ="парола" onChange={e => setPassword (e.target.value)}/>


<Списък за проверка на пароли
 правила={["minLength","specialChar","номер","капитал"]}
 minLength={5}
 стойност={парола}
 />
</form>
 )
}
износпо подразбиране Приложение

Този код предава подпорите minLength, specialChar, number и capital към Списък за проверка на пароли компонент. Компонентът ще използва тези подпори, за да провери дали паролата отговаря на изискванията.

Можете също да добавите преведени съобщения към компонента, като подадете съобщения опора Тези низове заменят грешките по подразбиране, така че можете да ги използвате за други езици или варианти.

импортиране Реагирайте, {useState} от "реагира"
импортиране Списък за проверка на пароли от "react-password-checklist"
конст Приложение = () => {
 const [парола, setPassword] = useState("")


връщане (
<форма>
<етикет>Парола:</label>
<тип вход ="парола" onChange={e => setPassword (e.target.value)}/>


<Списък за проверка на пароли
 правила={["minLength", "specialChar", "номер", "капитал"]}
 minLength={5}
 стойност={парола}
 съобщения={{
 minLength: "La contraseña tiene máс 8 знака.",
 специален знак: "La contraseña tiene caracteres особено.",
 номер: "La contraseña tiene un número.",
 капитал: "La contraseña tiene una letra майúscula.",
 съвпада: "Лас контрастñкато съвпадение.",
 }}
 />
</form>
 )
}
износпо подразбиране Приложение

В горния код, съобщения prop съхранява алтернативни съобщения за грешка. Компонентът ще покаже тези съобщения, когато паролата не отговаря на изискванията.

Този метод е по-удобен, защото не е необходимо да пишете кода, за да проверите дали паролата отговаря на изискванията. Има и много други предимства от използването на този модул като:

  • Показване на силата на паролата: реакция-парола-контролен списък може да покаже силата на паролата, така че потребителите да могат да видят колко силна е тяхната парола.
  • Показване на съобщението за грешка: реакция-парола-контролен списък може също да покаже съобщение за грешка, ако паролата не е валидна.
  • Стайлинг: Не е нужно да добавяте допълнителен стил към контролния списък. Модулът предоставя стил по подразбиране, който можете да използвате в приложението си. Ако искате да добавите допълнителен стил, тогава можете да използвате нормален CSS или друг стилизиращи рамки като tailwind CSS.

Подобрете безопасността на потребителите с контролен списък с пароли

Силната парола е ключът към безопасността онлайн. Важно е да имате силна и уникална парола за всеки онлайн акаунт. Като използвате контролен списък за пароли, можете да сте сигурни, че всяка парола отговаря на определен стандарт.

Потребителите на вашето приложение също ще оценят възможността да видят силата на паролата. По този начин те могат да бъдат сигурни, че техните пароли са достатъчно силни. Това ще подобри потребителското изживяване на вашето приложение и също така ще подобри безопасността на потребителите на вашето приложение. По подобен начин можете също да валидирате формулярите във вашето приложение Next.js.