Überprüfen Sie die Passwortstärke mit JavaScript oder jQuery und regulären Ausdrücken (auch mit serverseitigen Beispielen!)

Ich habe einige Nachforschungen angestellt, um ein gutes Beispiel für einen Password Strength Checker zu finden, der verwendet wird JavaScript und Reguläre Ausdrücke (regulärer Ausdruck). In der Anwendung bei meiner Arbeit führen wir einen Postback durch, um die Passwortstärke zu überprüfen, was für unsere Benutzer ziemlich unpraktisch ist.

Was ist Regex?

Ein regulärer Ausdruck ist eine Folge von Zeichen, die ein Suchmuster definieren. Normalerweise werden solche Muster von String-Suchalgorithmen für verwendet finden or suchen und Ersetzen Operationen an Zeichenfolgen oder zur Eingabeüberprüfung. 

Dieser Artikel soll Ihnen definitiv keine regulären Ausdrücke beibringen. Sie müssen nur wissen, dass die Verwendung regulärer Ausdrücke Ihre Entwicklung bei der Suche nach Mustern im Text absolut vereinfacht. Es ist auch wichtig zu beachten, dass die meisten Entwicklungssprachen die Verwendung regulärer Ausdrücke optimiert haben. Anstatt Schritt für Schritt Zeichenfolgen zu analysieren und zu suchen, ist Regex in der Regel sowohl auf Server- als auch auf Clientseite viel schneller.

Ich habe ziemlich viel im Internet gesucht, bevor ich gefunden habe ein Beispiel einer Reihe großartiger regulärer Ausdrücke, die nach einer Kombination aus Länge, Zeichen und Symbolen suchen. Allerdings war der Code für meinen Geschmack etwas übertrieben und auf .NET zugeschnitten. Also habe ich den Code vereinfacht und in JavaScript eingefügt. Dadurch wird die Passwortstärke in Echtzeit im Browser des Clients validiert, bevor es zurückgesendet wird … und dem Benutzer wird Feedback zur Passwortstärke gegeben.

Gib ein Passwort ein

Bei jedem Tastendruck wird das Kennwort anhand des regulären Ausdrucks getestet, und anschließend wird dem Benutzer in einem Bereich darunter eine Rückmeldung gegeben.

JavaScript-Passwortstärkefunktion

Das Reguläre Ausdrücke machen einen fantastischen Job, um die Länge des Codes zu minimieren. Diese Javascript-Funktion überprüft die Stärke eines Passworts und ob das Vereiteln leicht, mittel, schwer oder extrem schwer zu erraten ist. Während die Person tippt, zeigt sie Tipps an, um sie zu ermutigen, stärker zu werden. Es validiert das Passwort basierend auf:

• Länge – Wenn die Länge unter oder über 8 Zeichen liegt.
• Gemischter Fall – Wenn das Passwort sowohl Groß- als auch Kleinbuchstaben enthält.
• Zahlen – Wenn das Passwort Zahlen enthält.
• Sonderzeichen – Wenn das Passwort Sonderzeichen enthält.

Die Funktion zeigt die Schwierigkeit sowie einige Tipps zur weiteren Härtung des Passworts an.

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

Wenn Sie die Farbe der Spitze aktualisieren möchten, können Sie dies auch tun, indem Sie den Code nach aktualisieren // Return results Linie.

// 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-Passwortstärkefunktion

Mit jQuery müssen wir das Formular nicht wirklich mit einem Oninput-Update schreiben:

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

Wenn wir möchten, können wir auch die Farbe der Nachrichten ändern. 

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

Härten Sie Ihre Passwortanfrage

Es ist wichtig, dass Sie nicht nur die Kennwortkonstruktion in Ihrem Javascript überprüfen. Dies würde es jedem mit Browser-Entwicklungstools ermöglichen, das Skript zu umgehen und ein beliebiges Passwort zu verwenden. Sie sollten IMMER eine serverseitige Überprüfung verwenden, um die Kennwortstärke zu überprüfen, bevor Sie sie auf Ihrer Plattform speichern.

PHP-Funktion für die Passwortstärke

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-Funktion für die Passwortstärke

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#-Funktion für die Passwortstärke

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-Funktion für die Passwortstärke

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

Und wenn Sie einfach nur nach einem tollen Passwortgenerator suchen, habe ich dafür ein nettes kleines Online-Tool entwickelt.

Passwort Generator