Preverite moč gesla z JavaScriptom ali jQueryjem in regularnimi izrazi (tudi s primeri na strani strežnika!)
Delal sem nekaj raziskav, kako najti dober primer programa za preverjanje moči gesla, ki uporablja JavaScript in Redni izrazi (Redni izraz). V aplikaciji pri mojem delu objavimo povratno objavo, da preverimo moč gesla, kar je za naše uporabnike precej neprijetno.
Kaj je zdravilo Regex?
Regularni izraz je zaporedje znakov, ki definirajo iskalni vzorec. Običajno take vzorce uporabljajo algoritmi za iskanje nizov za iskanje or najti in zamenjati operacije na nizih ali za preverjanje vnosa.
Ta članek zagotovo ni namenjen učenju regularnih izrazov. Samo vedite, da vam bo uporaba regularnih izrazov poenostavila razvoj, ko boste iskali vzorce v besedilu. Pomembno je tudi opozoriti, da ima večina razvojnih jezikov optimizirano uporabo regularnih izrazov ... zato je Regex, namesto da razčlenjuje in išče nize po korakih, običajno veliko hitrejši tako na strežniku kot na strani odjemalca.
Precej sem iskal po spletu, preden sem našel primer nekaj odličnih regularnih izrazov, ki iščejo kombinacijo dolžine, znakov in simbolov. Vendar je bila koda za moj okus nekoliko pretirana in prilagojena za .NET. Zato sem poenostavil kodo in jo dal v JavaScript. Zaradi tega preveri moč gesla v realnem času v odjemalčevem brskalniku, preden ga ponovno objavi ... in uporabniku zagotovi nekaj povratnih informacij o moči gesla.
Vnesite geslo
Z vsakim potezom tipkovnice se geslo preizkusi glede na regularni izraz, nato pa se uporabniku v razponu pod njim posredujejo povratne informacije.
Funkcija moči gesla JavaScript
O Redni izrazi narediti fantastično delo pri minimiziranju dolžine kode. Ta funkcija JavaScript preveri moč gesla in preveri, ali je zakrivanje enostavno, srednje, težko ali izjemno težko uganiti. Ko oseba tipka, prikaže nasvete, kako jo spodbuditi, da postane močnejša. Geslo potrdi na podlagi:
- dolžina – Če je dolžina manjša ali večja od 8 znakov.
- Mešani primeri – Če geslo vsebuje velike in male črke.
- Številke – Če geslo vključuje številke.
- Posebni znaki – Če geslo vključuje posebne znake.
Funkcija prikaže težavnost in nekaj nasvetov o nadaljnji utrditvi gesla.
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;
}
}
Če želite posodobiti barvo konice, lahko to storite tudi tako, da posodobite kodo za // Return results
Line.
// 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";
}
Funkcija trdnosti gesla jQuery
Z jQuery nam dejansko ni treba pisati obrazca s posodobitvijo oninput:
<form>
<label for="password">Enter password:</label>
<input type="password" id="password">
<p id="password-strength"></p>
</form>
Če želimo, lahko spremenimo tudi barvo sporočil.
$(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');
}
});
});
Utrjevanje zahteve za geslo
Bistveno je, da konstrukcije gesla ne potrdite le v svojem JavaScriptu. To bi vsakomur z orodji za razvoj brskalnika omogočilo, da obide skript in uporabi poljubno geslo. VEDNO morate uporabiti preverjanje na strani strežnika, da potrdite moč gesla, preden ga shranite na svojo platformo.
Funkcija PHP za moč gesla
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";
}
}
Funkcija Python za moč gesla
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"
Funkcija C# za moč gesla
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";
}
}
Funkcija Java za moč gesla
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";
}
}
In če samo iščete odličen generator gesel, sem za to ustvaril lepo majhno spletno orodje.