W dzisiejszym świecie bezpieczeństwo online jest ważniejsze niż kiedykolwiek. Przy tak wielu kontach internetowych, które trzeba śledzić, konieczne jest posiadanie silnego i unikalnego hasła do każdego z nich.

Jeśli tworzysz witrynę, jeszcze ważniejsze jest, aby hasła były tak bezpieczne, jak to tylko możliwe. Możesz przedstawić listę kontrolną osobom korzystającym z Twojej witryny i upewnić się, że ich hasło spełnia Twoje wymagania, zanim je zaakceptujesz.

Dowiedz się, jak zaimplementować listę kontrolną haseł za pomocą Next.js.

Dlaczego warto korzystać z listy kontrolnej haseł?

Istnieje wiele powodów, dla których warto skorzystać z listy kontrolnej haseł.

Po pierwsze, może pomóc Ci upewnić się, że hasła użytkowników są silne i niepowtarzalne. Mając listę kontrolną wymagań, możesz mieć pewność, że każde hasło spełnia określony standard.

Twoi użytkownicy mogą nie być Ci za to wdzięczni, ale wyświadczysz im przysługę. Zachęcając do używania silnych haseł, zmniejszasz prawdopodobieństwo, że haker uzyska dostęp do jednego z kont Twoich użytkowników.

instagram viewer

Po drugie, lista kontrolna hasła może pomóc w zapewnieniu poczucia bezpieczeństwa. Publikując wymagania, informujesz użytkowników, że poważnie traktujesz bezpieczeństwo haseł.

Należy jednak pamiętać, że lista kontrolna haseł nie jest cudownym rozwiązaniem problemów z hasłami. W rzeczywistości, jeśli ustawisz zbyt restrykcyjne hasła, możesz ułatwić hakerom zawężenie opcji i brutalne wymuszenie hasła. Ostatecznie bezpieczne i unikalne hasła, które użytkownicy przechowywać w menedżerze haseł są najlepsze.

Jak utworzyć listę kontrolną hasła

Listę kontrolną hasła w Next.js można utworzyć na dwa sposoby. Możesz użyć wbudowanych funkcji lub użyć modułu zewnętrznego.

Czego będziesz potrzebować

Aby utworzyć listę kontrolną hasła w Next.js, będziesz potrzebować:

  • Zainstalowano Node.js
  • Edytor tekstu
  • Projekt Next.js

Metoda 1: Korzystanie z wbudowanych funkcji

Next.js ma wbudowane funkcje, takie jak haki i kontekst. Tam są różne rodzaje haków którego możesz użyć do stworzenia listy kontrolnej haseł.

Najpierw utwórz nowy plik w aplikacji Next.js i nadaj mu nazwę lista kontrolna haseł.js. W tym pliku możesz pobrać hasło od użytkowników i sprawdzić, czy hasło spełnia wymagania.

import Reaguj, { stan użycia } z 'reagować'
funkcjonowaćLista kontrolna haseł() {
 const [hasło, setPassword] = useState('')
konst [błąd, setError] = useState(FAŁSZ)


funkcjonowaćuchwytZmień(mi) {
Ustaw hasło(mi.cel.wartość)
 }


funkcjonowaćuchwytPrześlij(mi) {
mi.preventDefault()


// Wymagania dotyczące hasła
konst wymagania = [
// Musi mieć co najmniej 8 znaków
 długość hasła >= 8,
// Musi zawierać co najmniej 1 wielką literę
 /[A-Z]/.test(hasło),
// Musi zawierać co najmniej 1 małą literę
 /[a-z]/.test(hasło),
// Musi zawierać co najmniej 1 liczbę
 /\d/.test(hasło)
 ]


// Jeśli wszystkie wymagania są spełnione, hasło jest ważne
konst isValid = wymagania.każdy(logiczne)
 jeśli (jest prawidłowe) {
 alarm('Hasło jest ważne!')
 } w przeciwnym razie {
 setBłąd(PRAWDA)
 }
 }


powrót (
<formularz onSubmit={uchwytPrześlij}>
<etykieta>
 Hasło:
<wejście
 typ="hasło"
 wartość={hasło}
 onChange={zmiana uchwytu}
 />
</label>
<typ wejścia="składać" wartość="Składać" />
 {błąd &&<P>Hasło jest nieprawidłowe!</P>}
</form>
 )
}
eksportdomyślny Lista kontrolna haseł

W powyższym kodzie najpierw musisz wprowadzić hasło od użytkowników. Możesz to zrobić za pomocą stan użycia hak. Ten hak umożliwia utworzenie zmiennej stanu i funkcji aktualizującej tę zmienną. W tym przypadku zmienną stanu jest hasło a funkcja aktualizacji to jest Ustaw hasło.

Następnie musisz utworzyć funkcję do obsługi przesyłania formularza. Funkcja ta zapobiegnie domyślnej akcji formularza (czyli wysłania formularza) oraz sprawdzi czy hasło spełnia wymagania.

Wymagania dotyczące hasła są następujące:

  • mieć co najmniej osiem znaków
  • zawiera przynajmniej jedną wielką literę
  • zawierać co najmniej jedną małą literę
  • zawierać co najmniej jedną liczbę

Możesz użyć każdy metodę sprawdzenia, czy hasło spełnia wszystkie wymagania. Jeśli tak, hasło jest ważne. W przeciwnym razie kod wyświetli komunikat o błędzie.

Metoda 3: Korzystanie z modułu listy kontrolnej reagowania na hasła

Innym sposobem na utworzenie listy kontrolnej hasła w Next.js jest użycie pliku lista kontrolna-hasła-reagowania moduł. Ten moduł jest łatwy w użyciu i ma wiele funkcji.

Najpierw zainstaluj moduł za pomocą następującego polecenia:

np zainstalować reagować-hasło-lista kontrolna --ratować

Następnie zaimportuj moduł do swojego lista kontrolna haseł.js plik:

import Reaguj, {useState} z "reagować"
import Lista kontrolna haseł z „reaguj na listę kontrolną hasła”
konst Aplikacja = () => {
 const [hasło, setPassword] = useState("")


powrót (
<formularz>
<etykieta>Hasło:</label>
<typ wejścia="hasło" onChange={e => setPassword (e.target.value)}/>


<Lista kontrolna haseł
 reguły={["minimalna długość","znak specjalny","numer","kapitał"]}
 minLength={5}
 wartość={hasło}
 />
</form>
 )
}
eksportdomyślny Aplikacja

Ten kod przekazuje rekwizyty minLength, specialChar, number i capital do metody Lista kontrolna haseł część. Komponent użyje tych rekwizytów, aby sprawdzić, czy hasło spełnia wymagania.

Możesz także dodać przetłumaczone wiadomości do komponentu, przekazując plik wiadomości rekwizyt. Ciągi te zastępują błędy domyślne, dzięki czemu można ich używać w przypadku innych języków lub odmian.

import Reaguj, {useState} z "reagować"
import Lista kontrolna haseł z „reaguj na listę kontrolną hasła”
konst Aplikacja = () => {
 const [hasło, setPassword] = useState("")


powrót (
<formularz>
<etykieta>Hasło:</label>
<typ wejścia="hasło" onChange={e => setPassword (e.target.value)}/>


<Lista kontrolna haseł
 reguły={["minimalna długość", "znak specjalny", "numer", "kapitał"]}
 minLength={5}
 wartość={hasło}
 wiadomości={{
 minimalna długość: "La contraseñwieniec más de 8 znaków.",
 znak specjalny: "La contraseñszczególnie a tiene caracteres.",
 numer: "La contraseña tiene un número.",
 kapitał: "La contraseña tiene una letra mayúłuski.",
 mecz: "Las contraseñjako zbieg okoliczności.",
 }}
 />
</form>
 )
}
eksportdomyślny Aplikacja

W powyższym kodzie plik wiadomości prop przechowuje alternatywne komunikaty o błędach. Komponent wyświetli te komunikaty, gdy hasło nie spełnia wymagań.

Ta metoda jest wygodniejsza, ponieważ nie trzeba wpisywać kodu, aby sprawdzić, czy hasło spełnia wymagania. Korzystanie z tego modułu ma również wiele innych zalet, takich jak:

  • Wyświetlanie siły hasła: lista kontrolna-hasła-reagowania może wyświetlać siłę hasła, aby użytkownicy mogli zobaczyć, jak silne jest ich hasło.
  • Wyświetlanie komunikatu o błędzie: lista kontrolna-hasła-reagowania może również wyświetlić komunikat o błędzie, jeśli hasło jest nieprawidłowe.
  • Stylizacja: Nie musisz dodawać żadnej dodatkowej stylizacji do listy kontrolnej. Moduł zapewnia domyślną stylizację, której możesz użyć w swojej aplikacji. Jeśli chcesz dodać trochę dodatkowej stylizacji, możesz użyć zwykłego CSS lub innego frameworki do stylizacji, takie jak Tailwind CSS.

Popraw bezpieczeństwo użytkownika dzięki liście kontrolnej hasła

Silne hasło to klucz do bezpieczeństwa w Internecie. Ważne jest, aby mieć silne i niepowtarzalne hasło do każdego konta online. Korzystając z listy kontrolnej hasła, możesz mieć pewność, że każde hasło spełnia określony standard.

Użytkownicy Twojej aplikacji docenią również możliwość sprawdzenia siły hasła. W ten sposób mogą mieć pewność, że ich hasła są wystarczająco silne. Poprawi to komfort korzystania z Twojej aplikacji, a także poprawi bezpieczeństwo użytkowników Twojej aplikacji. Podobnie możesz również zweryfikować formularze w aplikacji Next.js.