Skontrolujte silu hesla pomocou JavaScriptu alebo jQuery a regulárnych výrazov (aj s príkladmi na strane servera!)
Robil som prieskum zameraný na nájdenie dobrého príkladu kontroly sily hesla, ktorá používa JavaScript a Pravidelné výrazy (regex). V aplikácii v mojej práci robíme spätný príspevok na overenie sily hesla a je to pre našich používateľov dosť nepohodlné.
Čo je Regex?
Regulárny výraz je postupnosť znakov, ktoré definujú vzor vyhľadávania. Takéto vzory sa zvyčajne používajú v algoritmoch vyhľadávania reťazcov nájsť or nájsť a nahradiť operácie s reťazcami alebo na overenie vstupu.
Tento článok vás rozhodne nemá učiť regulárne výrazy. Vedzte, že schopnosť používať regulárne výrazy úplne zjednoduší váš vývoj pri hľadaní vzorov v texte. Je tiež dôležité poznamenať, že väčšina vývojových jazykov optimalizovala použitie regulárneho výrazu ... takže namiesto postupnej analýzy a vyhľadávania reťazcov je Regex zvyčajne oveľa rýchlejší na strane servera aj klienta.
Než som našiel, dosť som prehľadal web príklad niektorých skvelých regulárnych výrazov, ktoré hľadajú kombináciu dĺžky, znakov a symbolov. Kód bol však na môj vkus trochu prehnaný a prispôsobený pre .NET. Kód som teda zjednodušil a vložil do JavaScriptu. To umožňuje overiť silu hesla v reálnom čase v prehliadači klienta pred jeho odoslaním späť... a poskytuje používateľovi spätnú väzbu o sile hesla.
Zadajte heslo
Pri každom stlačení klávesnice sa heslo testuje proti regulárnemu výrazu a potom sa používateľovi poskytuje spätná väzba v rozsahu pod ním.
Funkcia sily hesla JavaScript
Pravidelné výrazy urobte fantastickú prácu pri minimalizácii dĺžky kódu. Táto funkcia JavaScript kontroluje silu hesla a to, či je jeho prekazenie ľahké, stredné, ťažké alebo extrémne ťažké uhádnuť. Keď osoba píše, zobrazuje tipy, ako ju povzbudiť, aby bola silnejšia. Overuje heslo na základe:
- Dĺžka – Ak je dĺžka menšia alebo väčšia ako 8 znakov.
- Zmiešaný prípad – Ak heslo obsahuje veľké aj malé písmená.
- Čísla – Ak heslo obsahuje čísla.
- Špeciálne znaky – Ak heslo obsahuje špeciálne znaky.
Funkcia zobrazuje náročnosť, ako aj niekoľko tipov na ďalšie posilnenie hesla.
function checkPasswordStrength(password) {
// Initialize variables
var strength = 0;
var tips = "";
// Check password length
if (password.length < 8) {
tips += "Make the password longer. ";
} else {
strength += 1;
}
// Check for mixed case
if (password.match(/[a-z]/) && password.match(/[A-Z]/)) {
strength += 1;
} else {
tips += "Use both lowercase and uppercase letters. ";
}
// Check for numbers
if (password.match(/\d/)) {
strength += 1;
} else {
tips += "Include at least one number. ";
}
// Check for special characters
if (password.match(/[^a-zA-Z\d]/)) {
strength += 1;
} else {
tips += "Include at least one special character. ";
}
// Return results
if (strength < 2) {
return "Easy to guess. " + tips;
} else if (strength === 2) {
return "Medium difficulty. " + tips;
} else if (strength === 3) {
return "Difficult. " + tips;
} else {
return "Extremely difficult. " + tips;
}
}
Ak by ste chceli aktualizovať farbu hrotu, môžete to urobiť aj aktualizáciou kódu za // Return results
linka.
// Get the paragraph element
var strengthElement = document.getElementById("passwordStrength");
// Return results
if (strength < 2) {
strengthElement.textContent = "Easy to guess. " + tips;
strengthElement.style.color = "red";
} else if (strength === 2) {
strengthElement.textContent = "Medium difficulty. " + tips;
strengthElement.style.color = "orange";
} else if (strength === 3) {
strengthElement.textContent = "Difficult. " + tips;
strengthElement.style.color = "black";
} else {
strengthElement.textContent = "Extremely difficult. " + tips;
strengthElement.style.color = "green";
}
Funkcia sily hesla jQuery
S jQuery v skutočnosti nemusíme písať formulár s aktualizáciou oninput:
<form>
<label for="password">Enter password:</label>
<input type="password" id="password">
<p id="password-strength"></p>
</form>
Ak chceme, môžeme tiež upraviť farbu správ.
$(document).ready(function() {
$('#password').on('input', function() {
var password = $(this).val();
var strength = 0;
var tips = "";
// Check password length
if (password.length < 8) {
tips += "Make the password longer. ";
} else {
strength += 1;
}
// Check for mixed case
if (password.match(/[a-z]/) && password.match(/[A-Z]/)) {
strength += 1;
} else {
tips += "Use both lowercase and uppercase letters. ";
}
// Check for numbers
if (password.match(/\d/)) {
strength += 1;
} else {
tips += "Include at least one number. ";
}
// Check for special characters
if (password.match(/[^a-zA-Z\d]/)) {
strength += 1;
} else {
tips += "Include at least one special character. ";
}
// Update the text and color based on the password strength
var passwordStrengthElement = $('#password-strength');
if (strength < 2) {
passwordStrengthElement.text("Easy to guess. " + tips);
passwordStrengthElement.css('color', 'red');
} else if (strength === 2) {
passwordStrengthElement.text("Medium difficulty. " + tips);
passwordStrengthElement.css('color', 'orange');
} else if (strength === 3) {
passwordStrengthElement.text("Difficult. " + tips);
passwordStrengthElement.css('color', 'black');
} else {
passwordStrengthElement.text("Extremely difficult. " + tips);
passwordStrengthElement.css('color', 'green');
}
});
});
Vystuženie vašej požiadavky na heslo
Je dôležité, aby ste nielen overili konštrukciu hesla vo svojom JavaScripte. To by umožnilo komukoľvek s nástrojmi na vývoj prehliadača obísť skript a použiť akékoľvek heslo, ktoré chce. Pred uložením hesla na vašu platformu by ste mali VŽDY využiť kontrolu na strane servera na overenie sily hesla.
PHP funkcia pre silu hesla
function checkPasswordStrength($password) {
// Initialize variables
$strength = 0;
// Check password length
if (strlen($password) < 8) {
return "Easy to guess";
} else {
$strength += 1;
}
// Check for mixed case
if (preg_match("/[a-z]/", $password) && preg_match("/[A-Z]/", $password)) {
$strength += 1;
}
// Check for numbers
if (preg_match("/\d/", $password)) {
$strength += 1;
}
// Check for special characters
if (preg_match("/[^a-zA-Z\d]/", $password)) {
$strength += 1;
}
// Return strength level
if ($strength < 2) {
return "Easy to guess";
} else if ($strength === 2) {
return "Medium difficulty";
} else if ($strength === 3) {
return "Difficult";
} else {
return "Extremely difficult";
}
}
Funkcia Python pre silu hesla
def check_password_strength(password):
# Initialize variables
strength = 0
# Check password length
if len(password) < 8:
return "Easy to guess"
else:
strength += 1
# Check for mixed case
if any(char.islower() for char in password) and any(char.isupper() for char in password):
strength += 1
# Check for numbers
if any(char.isdigit() for char in password):
strength += 1
# Check for special characters
if any(not char.isalnum() for char in password):
strength += 1
# Return strength level
if strength < 2:
return "Easy to guess"
elif strength == 2:
return "Medium difficulty"
elif strength == 3:
return "Difficult"
else:
return "Extremely difficult"
Funkcia C# pre silu hesla
public string CheckPasswordStrength(string password) {
// Initialize variables
int strength = 0;
// Check password length
if (password.Length < 8) {
return "Easy to guess";
} else {
strength += 1;
}
// Check for mixed case
if (password.Any(char.IsLower) && password.Any(char.IsUpper)) {
strength += 1;
}
// Check for numbers
if (password.Any(char.IsDigit)) {
strength += 1;
}
// Check for special characters
if (password.Any(ch => !char.IsLetterOrDigit(ch))) {
strength += 1;
}
// Return strength level
if (strength < 2) {
return "Easy to guess";
} else if (strength == 2) {
return "Medium difficulty";
} else if (strength == 3) {
return "Difficult";
} else {
return "Extremely difficult";
}
}
Java funkcia pre silu hesla
public String checkPasswordStrength(String password) {
// Initialize variables
int strength = 0;
// Check password length
if (password.length() < 8) {
return "Easy to guess";
} else {
strength += 1;
}
// Check for mixed case
if (password.matches(".*[a-z].*") && password.matches(".*[A-Z].*")) {
strength += 1;
}
// Check for numbers
if (password.matches(".*\\d.*")) {
strength += 1;
}
// Check for special characters
if (password.matches(".*[^a-zA-Z\\d].*")) {
strength += 1;
}
// Return strength level
if (strength < 2) {
return "Easy to guess";
} else if (strength == 2) {
return "Medium difficulty";
} else if (strength == 3) {
return "Difficult";
} else {
return "Extremely difficult";
}
}
A ak práve hľadáte skvelý generátor hesiel, vytvoril som na to pekný malý online nástroj.