Suriin ang Lakas ng Password gamit ang JavaScript o jQuery at Mga Regular na Expression (Na may Mga Halimbawa sa Side ng Server!)
Gumagawa ako ng ilang pagsasaliksik sa paghahanap ng isang magandang halimbawa ng isang Checker ng Lakas ng Password na gumagamit JavaScript at Mga Regular na Pagpapahayag (regex). Sa application sa aking trabaho, gumawa kami ng isang post pabalik upang i-verify ang lakas ng password at ito ay medyo hindi maginhawa para sa aming mga gumagamit.
Ano ang Regex?
Ang isang regular na expression ay isang pagkakasunud-sunod ng mga character na tumutukoy sa isang pattern ng paghahanap. Karaniwan, ang mga naturang pattern ay ginagamit ng mga algorithm sa paghahanap ng string para sa mahanap or hanapin at palitan mga pagpapatakbo sa mga string, o para sa pagpapatunay ng pag-input.
Ang artikulong ito ay tiyak na hindi magturo sa iyo ng mga regular na expression. Basta alam na ang kakayahang gumamit ng Mga Regular na expression ay ganap na pinapasimple ang iyong pag-unlad habang naghahanap ka para sa mga pattern sa teksto. Mahalaga rin na tandaan na ang karamihan sa mga wika ng pag-unlad ay na-optimize ang regular na paggamit ng expression ... kaya sa halip na pag-parse at paghahanap ng mga hakbang-hakbang, ang Regex ay karaniwang mas mabilis sa parehong server at panig ng kliyente.
Medyo naghanap ako sa web bago ko nahanap isang halimbawa ng ilang magagandang Regular Expression na naghahanap ng kumbinasyon ng haba, mga character, at mga simbolo. Gayunpaman, ang code ay medyo labis para sa aking panlasa at iniakma para sa .NET. Kaya pinasimple ko ang code at inilagay ito sa JavaScript. Ginagawa nitong mapatunayan ang lakas ng password nang real-time sa browser ng kliyente bago ito i-post muli... at nagbibigay ng ilang feedback sa user sa lakas ng password.
Mag-type ng Isang Password
Sa bawat stroke ng keyboard, ang password ay nasubok laban sa regular na expression at pagkatapos ay ibinibigay ang feedback sa gumagamit sa isang span sa ilalim nito.
Function na Lakas ng Password ng JavaScript
Ang Mga Regular na Pagpapahayag gumawa ng isang kamangha-manghang trabaho ng pagliit ng haba ng code. Sinusuri ng function ng JavaScript na ito ang lakas ng isang password at kung ang pag-foil nito ay madali, katamtaman, mahirap, o napakahirap hulaan. Habang nagta-type ang tao, nagpapakita ito ng mga tip sa paghikayat dito na maging mas malakas. Pinapatunayan nito ang password batay sa:
- Haba – Kung ang haba ay mas mababa o higit sa 8 character.
- Mixed case – Kung ang password ay may parehong upper at lower case na character.
- Numero – Kung ang password ay may kasamang mga numero.
- Espesyal na Character – Kung ang password ay may kasamang mga espesyal na character.
Ipinapakita ng function ang kahirapan pati na rin ang ilang mga tip sa pagpapatigas pa ng password.
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;
}
}
Kung gusto mong i-update ang kulay ng tip, magagawa mo rin iyon sa pamamagitan ng pag-update ng code pagkatapos ng // Return results
linya.
// 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";
}
Function ng Lakas ng Password ng jQuery
Sa jQuery, hindi talaga namin kailangang isulat ang form na may pag-update ng oninput:
<form>
<label for="password">Enter password:</label>
<input type="password" id="password">
<p id="password-strength"></p>
</form>
Maaari rin naming baguhin ang kulay ng mga mensahe kung gusto namin.
$(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');
}
});
});
Pagpapatigas ng Iyong Kahilingan sa Password
Mahalaga na hindi mo lamang patunayan ang pagbuo ng password sa loob ng iyong JavaScript. Ito ay magbibigay-daan sa sinumang may mga tool sa pag-develop ng browser na i-bypass ang script at gamitin ang anumang password na gusto nila. Dapat mong LAGING gumamit ng server-side check upang patunayan ang lakas ng password bago ito iimbak sa iyong platform.
PHP Function Para sa Lakas ng Password
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";
}
}
Python Function Para sa Lakas ng Password
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"
C# Function Para sa Lakas ng Password
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 Function Para sa Lakas ng Password
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";
}
}
At kung naghahanap ka lang ng isang mahusay na generator ng password, nakagawa ako ng magandang maliit na online na tool para doon.