Sjekk passordstyrken med JavaScript eller jQuery og regulære uttrykk (også med eksempler på serversiden!)

Jeg forsket på å finne et godt eksempel på en passordstyrkekontroll som bruker Javascript og Vanlig uttrykk (regex). I applikasjonen på jobben min legger vi tilbake et innlegg for å bekrefte passordstyrken, og det er ganske upraktisk for brukerne våre.

Hva er Regex?

Et vanlig uttrykk er en sekvens av tegn som definerer et søkemønster. Vanligvis brukes slike mønstre av strengesøkealgoritmer for finne or Finn og erstatt operasjoner på strenger, eller for validering av inndata. 

Denne artikkelen skal definitivt ikke lære deg vanlige uttrykk. Bare vet at muligheten til å bruke Regular Expressions vil absolutt forenkle utviklingen din når du søker etter mønstre i tekst. Det er også viktig å merke seg at de fleste utviklingsspråk har optimalisert bruk av vanlig uttrykk ... så i stedet for å analysere og søke i strenger trinnvis, er Regex vanligvis mye raskere både server og klientside.

Jeg søkte ganske mye på nettet før jeg fant det et eksempel av noen flotte regulære uttrykk som ser etter en kombinasjon av lengde, tegn og symboler. Koden var imidlertid litt overdreven etter min smak og skreddersydd for .NET. Så jeg forenklet koden og la den i JavaScript. Dette gjør at den validerer passordstyrken i sanntid på klientens nettleser før den publiseres tilbake ... og gir tilbakemelding til brukeren om passordets styrke.

Skriv et passord

For hvert tastetrykk testes passordet mot det vanlige uttrykket, og tilbakemelding blir gitt til brukeren i et spenn under det.

JavaScript-passordstyrkefunksjon

De Vanlig uttrykk gjør en fantastisk jobb med å minimere lengden på koden. Denne Javascript-funksjonen sjekker styrken til et passord og om det er enkelt, middels, vanskelig eller ekstremt vanskelig å gjette det. Mens personen skriver, viser den tips for å oppmuntre den til å bli sterkere. Den validerer passordet basert på:

• Lengde – Hvis lengden er under eller over 8 tegn.
• Blandet sak – Hvis passordet har både store og små bokstaver.
• Numbers – Hvis passordet inneholder tall.
• Spesielle tegn – Hvis passordet inneholder spesialtegn.

Funksjonen viser vanskelighetsgraden samt noen tips for å herde passordet ytterligere.

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

Hvis du vil oppdatere fargen på spissen, kan du også gjøre det ved å oppdatere koden etter // Return results linje.

// 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 passordstyrkefunksjon

Med jQuery trenger vi faktisk ikke å skrive skjemaet med en oninput-oppdatering:

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

Vi kan også endre fargen på meldingene hvis vi ønsker det. 

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

Forherde passordforespørselen

Det er viktig at du ikke bare validerer passordkonstruksjonen i Javascript. Dette vil gjøre det mulig for alle med nettleserutviklingsverktøy å omgå skriptet og bruke det passordet de ønsker. Du bør ALLTID bruke en sjekk på serversiden for å validere passordstyrken før du lagrer den på plattformen.

PHP-funksjon for passordstyrke

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-funksjon for passordstyrke

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#-funksjon for passordstyrke

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-funksjon for passordstyrke

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

Og hvis du bare leter etter en flott passordgenerator, har jeg bygget et fint lite nettverktøy for det.

Passordgenerator