Kiểm Tra độ Mạnh Của Mật Khẩu Với JavaScript Và Biểu Thức Chính Quy

Tôi đang thực hiện một số nghiên cứu về việc tìm một ví dụ điển hình về công cụ kiểm tra Độ bền mật khẩu sử dụng JavaScript và Biểu thức chính quy (biểu thức chính quy). Trong ứng dụng tại nơi làm việc của tôi, chúng tôi có đăng lại để xác minh độ mạnh của mật khẩu và nó khá bất tiện cho người dùng của chúng tôi.

Regex là gì?

Biểu thức chính quy là một chuỗi các ký tự xác định một mẫu tìm kiếm. Thông thường, các mẫu như vậy được sử dụng bởi các thuật toán tìm kiếm chuỗi cho tìm or tìm và thay thế hoạt động trên chuỗi hoặc để xác nhận đầu vào.

Bài viết này chắc chắn không dạy bạn biểu thức chính quy. Chỉ cần biết rằng khả năng sử dụng Biểu thức chính quy sẽ hoàn toàn đơn giản hóa việc phát triển của bạn khi bạn tìm kiếm các mẫu trong văn bản. Điều quan trọng cần lưu ý là hầu hết các ngôn ngữ phát triển đã tối ưu hóa việc sử dụng biểu thức chính quy… vì vậy thay vì phân tích cú pháp và tìm kiếm các chuỗi theo từng bước, Regex thường nhanh hơn nhiều ở cả phía máy chủ và phía máy khách.

Tôi đã tìm kiếm trên web khá nhiều trước khi tìm thấy một ví dụ của một số Biểu thức chính quy tuyệt vời tìm kiếm sự kết hợp giữa độ dài, ký tự và ký hiệu. Tuy nhiên, mã hơi quá so với sở thích của tôi và được điều chỉnh cho phù hợp với .NET. Vì vậy, tôi đã đơn giản hóa mã và đưa nó vào JavaScript. Điều này làm cho nó xác thực độ mạnh của mật khẩu trong thời gian thực trên trình duyệt của khách hàng trước khi đăng lại… và cung cấp một số phản hồi cho người dùng về độ mạnh của mật khẩu.

Gõ mật khẩu

Với mỗi hành trình của bàn phím, mật khẩu được kiểm tra dựa trên biểu thức chính quy và sau đó phản hồi được cung cấp cho người dùng trong một khoảng thời gian bên dưới nó.

Nhập mật khẩu:

Hàm cường độ mật khẩu JavaScript

Biểu thức chính quy thực hiện một công việc tuyệt vời trong việc giảm thiểu độ dài của mã. Hàm JavaScript này kiểm tra độ mạnh của mật khẩu và xem việc chặn mật khẩu đó dễ, trung bình, khó hay cực kỳ khó đoán. Khi người đó gõ, nó sẽ hiển thị các mẹo để khuyến khích nó mạnh mẽ hơn. Nó xác nhận mật khẩu dựa trên:

• Chiều dài – Nếu độ dài dưới hoặc trên 8 ký tự.
• trường hợp hỗn hợp – Nếu mật khẩu có cả chữ hoa và chữ thường.
• Số – Nếu mật khẩu bao gồm các số.
• Nhân vật đặc biệt – Nếu mật khẩu bao gồm các ký tự đặc biệt.

Chức năng hiển thị độ khó cũng như một số mẹo để tăng độ khó cho mật khẩu.

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; } }

Nếu bạn muốn cập nhật màu của đầu, bạn cũng có thể làm điều đó bằng cách cập nhật mã sau // Return results hàng.

// 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"; }

Hàm cường độ mật khẩu jQuery

Với jQuery, chúng ta không thực sự phải viết biểu mẫu với cập nhật oninput:

<form> <label for="password">Enter password:</label> <input type="password" id="password"> <p id="password-strength"></p> </form>

Chúng tôi cũng có thể sửa đổi màu của tin nhắn nếu muốn.

$(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'); } }); });

Tăng cường yêu cầu mật khẩu của bạn

Điều cần thiết là bạn không chỉ xác thực việc xây dựng mật khẩu trong JavaScript của mình. Điều này sẽ cho phép bất kỳ ai có công cụ phát triển trình duyệt bỏ qua tập lệnh và sử dụng bất kỳ mật khẩu nào họ muốn. Bạn LUÔN nên sử dụng quy trình kiểm tra phía máy chủ để xác thực độ mạnh của mật khẩu trước khi lưu trữ nó trên nền tảng của mình.

Hàm PHP cho độ mạnh mật khẩu

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"; } }

Hàm Python cho độ mạnh mật khẩu

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"

Hàm C# cho độ mạnh mật khẩu

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"; } }

Hàm Java cho độ mạnh mật khẩu

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"; } }

Và nếu bạn chỉ đang tìm kiếm một trình tạo mật khẩu tuyệt vời, thì tôi đã tạo một công cụ trực tuyến nhỏ xinh cho việc đó.

Trình tạo mật khẩu