Comproveu la força de la contrasenya amb JavaScript o jQuery i expressions regulars (amb exemples del costat del servidor, també!)
Estava fent algunes investigacions sobre com trobar un bon exemple d’un comprovador de força de contrasenya que utilitzi JavaScript i Expressions regulars (regex). A l'aplicació del meu treball, fem una publicació per verificar la seguretat de la contrasenya i és bastant incòmode per als nostres usuaris.
Què és Regex?
Una expressió regular és una seqüència de caràcters que defineixen un patró de cerca. Normalment, aquests patrons s’utilitzen en algorismes de cerca de cadenes trobar or cercar i substituir operacions en cadenes o per a la validació d’entrada.
Definitivament, aquest article no us ensenya expressions regulars. Només heu de saber que la possibilitat d'utilitzar expressions regulars simplificarà absolutament el vostre desenvolupament a mesura que cerqueu patrons de text. També és important tenir en compte que la majoria dels llenguatges de desenvolupament han optimitzat l’ús d’expressions regulars ... de manera que en lloc d’analitzar i cercar cadenes pas a pas, Regex sol ser molt més ràpid tant al costat del servidor com del client.
Vaig buscar al web bastant abans de trobar-lo un exemple d'unes grans expressions regulars que busquen una combinació de longitud, caràcters i símbols. Tanmateix, el codi era una mica excessiu per al meu gust i adaptat per a .NET. Així que vaig simplificar el codi i el vaig posar en JavaScript. Això fa que validi la força de la contrasenya en temps real al navegador del client abans de tornar-la a publicar... i proporciona alguns comentaris a l'usuari sobre la força de la contrasenya.
Escriviu una contrasenya
Amb cada cop del teclat, la contrasenya es prova amb l'expressió regular i, a continuació, es proporciona informació a l'usuari en un interval inferior.
Funció de força de contrasenya de JavaScript
El Expressions regulars fer un treball fantàstic per minimitzar la longitud del codi. Aquesta funció de JavaScript comprova la força d'una contrasenya i si endevinar-la és fàcil, mitjà, difícil o extremadament difícil d'endevinar. A mesura que la persona escriu, mostra consells per animar-la a ser més forta. Valida la contrasenya en funció de:
- Longitud – Si la longitud és inferior o superior a 8 caràcters.
- Cas mixt – Si la contrasenya té caràcters en majúscules i minúscules.
- Nombres – Si la contrasenya inclou números.
- Caràcters especials – Si la contrasenya inclou caràcters especials.
La funció mostra la dificultat i alguns consells per endurir encara més la contrasenya.
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;
}
}
Si voleu actualitzar el color de la punta, també podeu fer-ho actualitzant el codi després de // 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";
}
Funció de força de contrasenya de jQuery
Amb jQuery, en realitat no hem d'escriure el formulari amb una actualització oninput:
<form>
<label for="password">Enter password:</label>
<input type="password" id="password">
<p id="password-strength"></p>
</form>
També podem modificar el color dels missatges si ho desitgem.
$(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');
}
});
});
Enduriment de la sol·licitud de contrasenya
És essencial que no només valideu la construcció de la contrasenya dins del vostre JavaScript. Això permetria a qualsevol persona amb eines de desenvolupament de navegadors evitar l'script i utilitzar la contrasenya que vulgui. SEMPRE hauríeu d'utilitzar una comprovació del servidor per validar la força de la contrasenya abans d'emmagatzemar-la a la vostra plataforma.
Funció PHP per a la força de la contrasenya
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";
}
}
Funció Python per a la força de la contrasenya
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"
Funció C# per a la força de la contrasenya
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";
}
}
Funció Java per a la força de la contrasenya
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";
}
}
I si només esteu buscant un gran generador de contrasenyes, he creat una petita eina en línia per a això.