V dnešním světě je online bezpečnost důležitější než kdy jindy. S tolika online účty, které je třeba sledovat, je nezbytné mít pro každý z nich silné a jedinečné heslo.

Pokud vytváříte web, je ještě důležitější zajistit, aby hesla byla tak bezpečná, jak jen mohou být. Uživatelům vašeho webu můžete předložit kontrolní seznam a ujistit se, že jejich heslo splňuje vaše požadavky, než jej přijmete.

Přečtěte si, jak implementovat kontrolní seznam hesel pomocí Next.js.

Proč používat kontrolní seznam hesel?

Existuje mnoho důvodů, proč byste mohli chtít použít kontrolní seznam hesel.

Za prvé vám může pomoci zajistit, aby hesla vašich uživatelů byla silná a jedinečná. Díky kontrolnímu seznamu požadavků si můžete být jisti, že každé heslo splňuje určitý standard.

Vaši uživatelé vám za to možná nepoděkují, ale uděláte jim laskavost. Podporou silných hesel snížíte pravděpodobnost, že hacker získá přístup k účtu některého z vašich uživatelů.

Za druhé, kontrolní seznam hesel může pomoci zprostředkovat pocit bezpečí. Publikováním požadavků sdělujete svým uživatelům, že berete zabezpečení hesel vážně.

instagram viewer

Měli byste si však uvědomit, že kontrolní seznam hesel není zázračným řešením problémů s hesly. Ve skutečnosti, pokud svá hesla příliš omezíte, můžete hackerům usnadnit zúžení jejich možností a hrubě vynutit heslo. Koneckonců, bezpečná a jedinečná hesla, která uživatelé uložit do správce hesel jsou nejlepší.

Jak vytvořit kontrolní seznam hesel

Existují dva způsoby, jak vytvořit kontrolní seznam hesel v Next.js. Můžete použít buď vestavěné funkce, nebo můžete použít externí modul.

Co budete potřebovat

Chcete-li vytvořit kontrolní seznam hesel v Next.js, budete potřebovat následující:

  • Node.js nainstalován
  • Textový editor
  • Projekt Next.js

Metoda 1: Použití vestavěných funkcí

Next.js přichází s vestavěnými funkcemi, jako jsou háčky a kontext. Existují různé typy háčků které můžete použít k vytvoření kontrolního seznamu hesel.

Nejprve vytvořte nový soubor v aplikaci Next.js a pojmenujte jej passwordChecklist.js. V tomto souboru můžete zadat heslo od uživatelů a můžete zkontrolovat, zda heslo splňuje požadavky.

import Reagovat, { useState } z 'reagovat'
funkceKontrolní seznam hesel() {
 const [heslo, setPassword] = useState('')
konst [chyba, setError] = useState(Nepravdivé)


funkcerukojeťZměnit(E) {
nastavit heslo(E.cílová.hodnota)
 }


funkcehandleSubmit(E) {
E.preventDefault()


// Požadavky na heslo
konst požadavky = [
// Musí mít alespoň 8 znaků
 délka hesla >= 8,
// Musí obsahovat alespoň 1 velké písmeno
 /[A-Z]/.test(Heslo),
// Musí obsahovat alespoň 1 malé písmeno
 /[a-z]/.test(Heslo),
// Musí obsahovat alespoň 1 číslo
 /\d/.test(Heslo)
 ]


// Pokud jsou splněny všechny požadavky, heslo je platné
konst isValid = požadavky.každý(Boolean)
 if (isValid) {
 upozornění ('Heslo je platné!')
 } jiný {
 setError(skutečný)
 }
 }


vrátit se (
<form onSubmit={handleSubmit}>
<označení>
 Heslo:
<vstup
 typ="Heslo"
 value={password}
 onChange={handleChange}
 />
</label>
<typ vstupu ="Předložit" hodnota="Předložit" />
 {chyba &&<p>Heslo není platné!</str>}
</form>
 )
}
vývoznívýchozí Kontrolní seznam hesel

Ve výše uvedeném kódu musíte nejprve zadat heslo od uživatelů. Můžete to udělat pomocí useState háček. Tento háček vám umožňuje vytvořit stavovou proměnnou a funkci pro aktualizaci této proměnné. V tomto případě je stavová proměnná Heslo a funkce pro jeho aktualizaci je nastavit heslo.

Dále musíte vytvořit funkci pro zpracování odeslání formuláře. Tato funkce zabrání výchozí akci formuláře (což je odeslání formuláře) a zkontroluje, zda heslo splňuje požadavky.

Požadavky na heslo jsou, že musí:

  • mít alespoň osm znaků
  • obsahovat alespoň jedno velké písmeno
  • obsahovat alespoň jedno malé písmeno
  • obsahovat alespoň jedno číslo

Můžete použít každý způsob, jak zkontrolovat, zda heslo splňuje všechny požadavky. Pokud ano, heslo je platné. V opačném případě kód zobrazí chybovou zprávu.

Metoda 3: Použití modulu reagovat-heslo-kontrolní seznam

Dalším způsobem, jak vytvořit kontrolní seznam hesel v Next.js, je použití reagovat-heslo-kontrolní seznam modul. Tento modul se snadno používá a přichází s mnoha funkcemi.

Nejprve nainstalujte modul pomocí následujícího příkazu:

npm Nainstalujte reagovat-Heslo- kontrolní seznam --Uložit

Poté naimportujte modul do svého passwordChecklist.js soubor:

import Reagovat, {useState} z "reagovat"
import Kontrolní seznam hesel z "reagovat-heslo-kontrolní seznam"
konst Aplikace = () => {
 const [heslo, setPassword] = useState("")


vrátit se (
<formulář>
<označení>Heslo:</label>
<typ vstupu ="Heslo" onChange={e => setPassword (e.target.value)}/>


<Kontrolní seznam hesel
 pravidla={["minLength","speciálníChar","číslo","hlavní město"]}
 minLength={5}
 value={password}
 />
</form>
 )
}
vývoznívýchozí Aplikace

Tento kód předá rekvizitám minLength, specialChar, number a capital Kontrolní seznam hesel komponent. Komponenta použije tyto rekvizity ke kontrole, zda heslo splňuje požadavky.

Můžete také přidat přeložené zprávy do komponenty předáním zprávy podpěra. Tyto řetězce přepíší výchozí chyby, takže je můžete použít pro jiné jazyky nebo varianty.

import Reagovat, {useState} z "reagovat"
import Kontrolní seznam hesel z "reagovat-heslo-kontrolní seznam"
konst Aplikace = () => {
 const [heslo, setPassword] = useState("")


vrátit se (
<formulář>
<označení>Heslo:</label>
<typ vstupu ="Heslo" onChange={e => setPassword (e.target.value)}/>


<Kontrolní seznam hesel
 pravidla={["minLength", "speciálníChar", "číslo", "hlavní město"]}
 minLength={5}
 value={password}
 zprávy={{
 minLength: "La contraseña tiene más 8 znaky.",
 specialChar: "La contraseña tiene caracteres zvláště.",
 číslo: "La contraseña tiene un número.",
 hlavní město: "La contraseña tiene una letra mayúscula.",
 zápas: "Las contraseñjako náhoda.",
 }}
 />
</form>
 )
}
vývoznívýchozí Aplikace

Ve výše uvedeném kódu je zprávy prop ukládá alternativní chybová hlášení. Komponenta zobrazí tyto zprávy, když heslo nesplňuje požadavky.

Tato metoda je pohodlnější, protože nemusíte psát kód pro kontrolu, zda heslo splňuje požadavky. Použití tohoto modulu má také mnoho dalších výhod, jako například:

  • Zobrazení síly hesla: reagovat-heslo-kontrolní seznam může zobrazit sílu hesla, aby uživatelé viděli, jak silné je jejich heslo.
  • Zobrazení chybové zprávy: reagovat-heslo-kontrolní seznam může také zobrazit chybovou zprávu, pokud heslo není platné.
  • Styling: Do kontrolního seznamu nemusíte přidávat žádné další styly. Modul poskytuje výchozí styl, který můžete použít ve své aplikaci. Pokud chcete přidat nějaký další styl, můžete použít normální CSS nebo jiné styling frameworků jako tailwind CSS.

Zlepšete bezpečnost uživatelů pomocí kontrolního seznamu hesel

Silné heslo je klíčem k online bezpečnosti. Je důležité mít silné a jedinečné heslo pro každý online účet. Pomocí kontrolního seznamu hesel si můžete být jisti, že každé heslo splňuje určitý standard.

Uživatelé vaší aplikace také ocení, že budou moci vidět sílu hesla. Mohou si tak být jisti, že jejich hesla jsou dostatečně silná. To zlepší uživatelský dojem z vaší aplikace a také zlepší bezpečnost uživatelů vaší aplikace. Podobně můžete také ověřit formuláře v aplikaci Next.js.