ตรวจสอบความแข็งแรงของรหัสผ่านด้วย JavaScript หรือ jQuery และ Regular Expressions (พร้อมตัวอย่างฝั่งเซิร์ฟเวอร์ด้วย!)

ฉันกำลังทำการวิจัยเกี่ยวกับการค้นหาตัวอย่างที่ดีของตัวตรวจสอบความแข็งแรงของรหัสผ่านที่ใช้ JavaScript และ นิพจน์ทั่วไป (regex). ในแอปพลิเคชันที่ทำงานของฉัน เราโพสต์กลับไปเพื่อตรวจสอบความรัดกุมของรหัสผ่าน และค่อนข้างไม่สะดวกสำหรับผู้ใช้ของเรา

Regex คืออะไร?

นิพจน์ทั่วไปคือลำดับของอักขระที่กำหนดรูปแบบการค้นหา โดยปกติรูปแบบดังกล่าวจะใช้โดยอัลกอริทึมการค้นหาสตริงสำหรับ พบ or ค้นหาและแทนที่ การดำเนินการกับสตริงหรือสำหรับการตรวจสอบอินพุต 

บทความนี้ไม่ได้สอนนิพจน์ทั่วไป เพียงแค่ทราบว่าความสามารถในการใช้นิพจน์ทั่วไปจะทำให้การพัฒนาของคุณง่ายขึ้นอย่างมากเมื่อคุณค้นหารูปแบบในข้อความ สิ่งสำคัญที่ควรทราบคือภาษาสำหรับการพัฒนาส่วนใหญ่ได้ปรับให้เหมาะสมกับการใช้นิพจน์ทั่วไป ... ดังนั้นแทนที่จะแยกวิเคราะห์และค้นหาสตริงทีละขั้นตอนโดยทั่วไปแล้ว Regex จะเร็วกว่ามากทั้งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์

ฉันค้นหาเว็บค่อนข้างน้อยก่อนที่จะพบ ตัวอย่าง ของนิพจน์ทั่วไปที่ยอดเยี่ยมบางรายการที่มองหาการผสมผสานระหว่างความยาว อักขระ และสัญลักษณ์ อย่างไรก็ตาม โค้ดนั้นค่อนข้างมากเกินไปสำหรับรสนิยมของฉันและปรับแต่งมาสำหรับ .NET ดังนั้นฉันจึงลดความซับซ้อนของโค้ดและใส่ไว้ใน JavaScript สิ่งนี้ทำให้ตรวจสอบความยากของรหัสผ่านตามเวลาจริงบนเบราว์เซอร์ของลูกค้าก่อนที่จะโพสต์กลับ… และให้คำติชมแก่ผู้ใช้เกี่ยวกับความรัดกุมของรหัสผ่าน

พิมพ์รหัสผ่าน

ในแต่ละจังหวะของแป้นพิมพ์รหัสผ่านจะถูกทดสอบกับนิพจน์ทั่วไปจากนั้นป้อนกลับให้กับผู้ใช้ในช่วงที่อยู่ด้านล่าง

ฟังก์ชันความแข็งแกร่งของรหัสผ่าน JavaScript

พื้นที่ นิพจน์ทั่วไป ทำงานได้อย่างยอดเยี่ยมในการย่อความยาวของโค้ดให้เหลือน้อยที่สุด ฟังก์ชัน Javascript นี้ตรวจสอบความแข็งแกร่งของรหัสผ่านและดูว่ารหัสผ่านนั้นง่าย ปานกลาง ยาก หรือยากต่อการเดาหรือไม่ ขณะที่คนพิมพ์จะแสดงเคล็ดลับในการกระตุ้นให้แข็งแกร่งขึ้น มันตรวจสอบรหัสผ่านตาม:

• ความยาว – หากความยาวต่ำกว่าหรือมากกว่า 8 ตัวอักษร
• กรณีผสม – หากรหัสผ่านมีทั้งตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก
• เบอร์ – หากรหัสผ่านมีตัวเลข
• ตัวละครพิเศษ – หากรหัสผ่านมีอักขระพิเศษ

ฟังก์ชั่นนี้แสดงความยากรวมถึงเคล็ดลับบางประการในการทำให้รหัสผ่านแข็งขึ้น

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

หากคุณต้องการอัปเดตสีของทิป คุณสามารถทำได้เช่นกันโดยอัปเดตโค้ดหลัง // Return results เส้น

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

ฟังก์ชันความแข็งแกร่งของรหัสผ่าน jQuery

ด้วย jQuery เราไม่จำเป็นต้องเขียนแบบฟอร์มด้วยการอัปเดต oninput:

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

เรายังสามารถปรับเปลี่ยนสีของข้อความได้หากต้องการ 

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

การทำให้คำขอรหัสผ่านของคุณแข็งขึ้น

สิ่งสำคัญคือคุณต้องไม่เพียงตรวจสอบการสร้างรหัสผ่านภายใน Javascript ของคุณ สิ่งนี้จะช่วยให้ทุกคนที่มีเครื่องมือพัฒนาเบราว์เซอร์สามารถข้ามสคริปต์และใช้รหัสผ่านใดก็ได้ที่พวกเขาต้องการ คุณควรใช้การตรวจสอบฝั่งเซิร์ฟเวอร์เสมอเพื่อตรวจสอบความปลอดภัยของรหัสผ่านก่อนจัดเก็บไว้ในแพลตฟอร์มของคุณ

ฟังก์ชัน PHP สำหรับความแข็งแกร่งของรหัสผ่าน

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 เพื่อความแข็งแกร่งของรหัสผ่าน

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# สำหรับความแข็งแกร่งของรหัสผ่าน

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 เพื่อความแข็งแกร่งของรหัสผ่าน

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

และหากคุณกำลังมองหาเครื่องมือสร้างรหัสผ่านที่ยอดเยี่ยม ฉันได้สร้างเครื่องมือออนไลน์ขนาดเล็กสำหรับสิ่งนั้นแล้ว

สร้างรหัสผ่าน