Úvod
Při sestavování aplikací se nevyhnete autentizaci a jedním ze způsobů, jak autentizaci zvládnout, je příjem uživatelských dat prostřednictvím přihlašovacího nebo registračního formuláře a takové formuláře obsahují hesla. Chcete, aby vaši uživatelé nejen používali silná hesla, která splňují určitá kritéria, ale také je vizuálně informovali o tom, jak silná jsou jejich hesla při vytváření účtu.
Stejně jako ověřování hesla se provádí na backendu, ověření frontendu pomáhá uživateli při odesílání toho, co backend očekává, což zajišťuje, že vaši uživatelé i vaše systémy jsou bezpečnější. Tento článek ukáže, jak implementovat ověření hesla od začátku (bez knihovny), a také ukáže sílu aktuálního hesla, když uživatel píše.
Ukázka
Zde je stackblitz demo toho, co budeme stavět.
Kritéria ověření hesla
Aby uživatelé splnili naše „tajemné "🪄 kritéria ověření, jejich hesla musí obsahovat;
- Jeden velký znak
- Jedno malé písmeno
- Jeden číselný znak
- Jeden speciální znak
- Osm nebo více znaků
Nebo jinak,
Ke zpracování ověření použijeme tyto vzory regulárních výrazů ve fragmentu kódu níže:
const atLeastOneUppercase = /[A-Z]/g; // capital letters from A to Z
const atLeastOneLowercase = /[a-z]/g; // small letters from a to z
const atLeastOneNumeric = /[0-9]/g; // numbers from 0 to 9
const atLeastOneSpecialChar = /[#?!@$%^&*-]/g; // any of the special characters within the square brackets
const eightCharsOrMore= /.{8,}/g; // eight characters or more
Zpracování stavu komponenty
Manipulace se stavy je nevyhnutelná a s háčky React mnohem jednodušší. Pojďme si nastínit stavy ke sledování.
const [meter, setMeter] = React.useState(false);
const [password, setPassword] = React.useState('');
-
meter:Toto řeší viditelnost měřiče síly hesla. -
password:Toto se postará o skutečné heslo, které uživatel zadá do pole hesla.
passwordTracker :Pouze lokální proměnná, která ukládá všechny znaky, které splňují ověřovací kritéria, a také všechna kritéria, která splňují. Učiní tak uložením návratové hodnoty match() metoda (což je pole předávaných znaků) do vlastnosti v passwordTracker objekt, který odpovídá ověřovacím kritériím.
const passwordTracker = {
uppercase: password.match(atLeastOneUppercase),
lowercase: password.match(atLeastOneLowercase),
number: password.match(atLeastOneNumeric),
specialChar: password.match(atLeastOneSpecialChar),
eightCharsOrGreater: password.match(eightCharsOrMore),
}
Pole pro zadání hesla a měřič síly
Toto je jednoduché vstupní pole s funkcemi, které se mají spustit na základě událostí prohlížeče. Když se uživatel zaměří na pole, anonymní funkce nastaví meter stav na true tím se zobrazí měřič síly hesla a kritéria ověření. onChange událost aktualizuje stav skutečného hesla, když uživatel píše.
<form>
<input
onFocus={() => setMeter(true)}
onChange={(e) => setPassword(e.target.value)}
type="password"
placeholder="Enter password...pwetty please"
value={password}
name="password"
/>
{meter && (
<div>
<div className="password-strength-meter"></div>
<div>
{passwordStrength < 5 && 'Must contain '}
{!passwordTracker.uppercase && 'uppercase, '}
{!passwordTracker.lowercase && 'lowercase, '}
{!passwordTracker.specialChar && 'special character, '}
{!passwordTracker.number && 'number, '}
{!passwordTracker.eightCharsOrGreater &&
'eight characters or more'}
</div>
</div>
)}
</form>
V části ověřovacích kritérií se negovaná hodnota vlastnosti používá k určení, zda má být kritérium vykresleno nebo ne. Například, pokud heslo prochází kódem atLeastOneUppercase regex, hodnota uppercase vlastnost se aktualizuje na pravdivou hodnotu, takže při negaci (! ), se změní na false a nevykreslí 'uppercase, ' další díl. When false (null ) neguje hodnotu a stává se pravdivou, což vykresluje 'uppercase, ' část, která uživatelům dává vědět, že toto kritérium stále musí splnit.
Nakonec tu máme passwordStrength proměnná, jejíž hodnota je získána z počtu pravdivých hodnoty v passwordTracker objekt.
const passwordStrength = Object.values(passwordTracker).filter(value => value).length;
Myšlenka je taková, že pokud budou předána 3 ověřovací kritéria, odpovídající vlastnosti budou mít pravdivé hodnoty, zatímco ostatní budou mít nepravdivé hodnoty (null ). Ke zjištění počtu předaných kritérií používáme Object.values() metoda na passwordTracker který vrací pole hodnot . Poté vyfiltrujeme pravdivé hodnoty a poté získáme délku pole s .length .
passwordStrength se používá hlavně k určení barvy a šířky měřiče síly hesla a také k zobrazení nebo skrytí 'Must contain ' část na základě toho, zda jsou všechna kritéria splněna nebo ne.
S CSS-in-JS jsme schopni spustit javaScript v našich CSS stylech pomocí vyhodnocení zkratu, které přiřadí různé barvy k background-color vlastnictví. Šířka metru se udává v procentech vynásobením poměru počtu složených kritérií (které může být 1, 2, 3, 4 nebo 5) k celkovému počtu kritérií (5) 100
.password-strength-meter::before {
content: "";
background-color: ${
['red', 'orange', '#03a2cc', '#03a2cc', '#0ce052']
[passwordStrength - 1] || ''
};
height: 100%;
width: ${(passwordStrength / 5) * 100}%;
display: block;
border-radius: 3px;
transition: width 0.2s;
}
Závěr
Je esteticky příjemnější a poskytuje lepší uživatelský dojem, pokud jde o určení požadavků, které musí uživatel splnit, aby se v aplikaci pohyboval hladce.
Opravdu doufám, že jste v tomto článku získali nějaký přehled o tom, jak implementovat ověření hesla pomocí měřiče síly hesla. Rád bych věděl, zda existují nějaká vylepšení, která lze na této implementaci provést, a také zda byste preferovali použití knihovny před vlastní implementací.
Neváhejte se podělit o další implementace, na které jste narazili, návrhy, komentáře nebo dotazy.
Děkujeme za přečtení a přejeme příjemné kódování.
Připojit
Pokud byste se se mnou chtěli spojit, jsem vám k dispozici na;
- Rozpor:
brunoelo#8120 - Twitter:BrunoElo