Provjerite jačinu lozinke pomoću JavaScripta ili jQueryja i regularnih izraza (i sa primjerima na strani servera!)

Radio sam neko istraživanje kako bih pronašao dobar primjer provjere jačine lozinke koja koristi JavaScript i Regularni izrazi (regex). U aplikaciji na mom poslu radimo povratnu objavu kako bismo provjerili snagu lozinke i to je prilično nezgodno za naše korisnike.

Šta je Regex?

Regularni izraz je niz znakova koji definiraju obrazac pretraživanja. Obično takve obrasce koriste algoritmi pretraživanja nizova za pronaći or pronaći i zamijeniti operacije na stringovima ili za provjeru ulaznosti. 

Ovaj članak definitivno ne želi naučiti vas regularnim izrazima. Samo znajte da će mogućnost upotrebe regularnih izraza apsolutno pojednostaviti vaš razvoj dok tražite uzorke u tekstu. Takođe je važno napomenuti da je većina razvojnih jezika optimizovala upotrebu regularnih izraza ... pa, umjesto raščlanjivanja i pretraživanja nizova korak po korak, Regex je obično mnogo brži i na serveru i na strani klijenta.

Prilično sam pretraživao web prije nego što sam pronašao primjer nekih sjajnih regularnih izraza koji traže kombinaciju dužine, znakova i simbola. Međutim, kod je bio malo pretjeran za moj ukus i skrojen za .NET. Zato sam pojednostavio kod i stavio ga u JavaScript. Ovo ga čini validacijom jačine lozinke u realnom vremenu na klijentovom pretraživaču pre nego što je ponovo objavi... i pruža neke povratne informacije korisniku o jačini lozinke.

Upišite lozinku

Sa svakim potezom tipkovnice, lozinka se testira u odnosu na regularni izraz, a zatim se korisniku pruža povratna informacija u rasponu ispod nje.

JavaScript funkcija jačine lozinke

The Regularni izrazi uradite fantastičan posao minimiziranja dužine koda. Ova Javascript funkcija provjerava jačinu lozinke i da li je njeno probijanje lako, srednje, teško ili izuzetno teško pogoditi. Dok osoba kuca, prikazuje savjete kako je ohrabriti da bude jača. Potvrđuje lozinku na osnovu:

• dužina – Ako je dužina ispod ili veća od 8 znakova.
• Mixed Case – Ako lozinka ima i velika i mala slova.
• brojevi – Ako lozinka uključuje brojeve.
• posebne znakove – Ako lozinka sadrži posebne znakove.

Funkcija prikazuje poteškoću kao i neke savjete za dalje učvršćivanje lozinke.

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

Ako želite ažurirati boju vrha, to možete učiniti i ažuriranjem koda nakon // Return results linija.

// 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 funkcija jačine lozinke

Uz jQuery, zapravo ne moramo pisati obrazac sa oninput ažuriranjem:

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

Također možemo promijeniti boju poruka ako želimo. 

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

Utvrđivanje zahtjeva za lozinkom

Bitno je da u svom Javascriptu ne potvrdite samo konstrukciju lozinke. To bi omogućilo svima koji imaju alate za razvoj preglednika da zaobiđu skriptu i koriste lozinku koju god žele. Uvijek biste trebali koristiti provjeru na strani poslužitelja za provjeru snage lozinke prije nego što je pohranite na svojoj platformi.

PHP funkcija za jačinu lozinke

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 funkcija za jačinu lozinke

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# funkcija za jačinu lozinke

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 funkcija za jačinu lozinke

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

A ako samo tražite odličan generator lozinki, napravio sam lijep mali online alat za to.

Generator lozinki