Comprobe a forza do contrasinal con JavaScript ou jQuery e expresións regulares (tamén con exemplos do servidor!)

Estiven a investigar sobre como atopar un bo exemplo dun comprobador de forza de contrasinal que use JavaScript Expresións regulares (Rex). Na aplicación do meu traballo, volvemos facer unha publicación para verificar a forza do contrasinal e é bastante inconveniente para os nosos usuarios.

Que é Regex?

Unha expresión regular é unha secuencia de caracteres que definen un patrón de busca. Normalmente, estes patróns úsanse por algoritmos de busca de cadeas para atopar or atopar e substituír operacións en cadeas ou para validación de entrada. 

Este artigo definitivamente non é para ensinarche expresións regulares. Só ten que saber que a posibilidade de usar expresións regulares simplificará absolutamente o seu desenvolvemento mentres busca patróns no texto. Tamén é importante ter en conta que a maioría das linguaxes de desenvolvemento optimizaron o uso de expresións regulares ... así que en vez de analizar e buscar cadeas paso a paso, Regex adoita ser moito máis rápido tanto no servidor coma no cliente.

Busquei bastante na web antes de atopalo un exemplo dalgunhas grandes expresións regulares que buscan unha combinación de lonxitude, caracteres e símbolos. Non obstante, o código era un pouco excesivo para o meu gusto e adaptado para .NET. Entón simplifiquei o código e poñoo en JavaScript. Isto fai que valide a forza do contrasinal en tempo real no navegador do cliente antes de publicalo de novo... e ofrece algúns comentarios ao usuario sobre a forza do contrasinal.

Escribe un contrasinal

Con cada golpe de teclado, o contrasinal compróbase contra a expresión regular e, a continuación, proporciónaselle comentarios ao usuario nun espazo debaixo dela.

Función de fortaleza do contrasinal de JavaScript

o Expresións regulares facer un traballo fantástico para minimizar a lonxitude do código. Esta función de Javascript comproba a solidez dun contrasinal e se frustralo é fácil, medio, difícil ou extremadamente difícil de adiviñar. A medida que a persoa escribe, mostra consellos para fomentar que sexa máis forte. Valida o contrasinal baseándose en:

• lonxitude – Se a lonxitude é inferior ou superior a 8 caracteres.
• Caso Mixto – Se o contrasinal ten maiúsculas e minúsculas.
• Números – Se o contrasinal inclúe números.
• Personaxes especiais – Se o contrasinal inclúe caracteres especiais.

A función mostra a dificultade, así como algúns consellos para reforzar aínda máis o contrasinal.

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

Se queres actualizar a cor da punta, tamén podes facelo actualizando o código despois de // Return results liña.

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

Función de fortaleza do contrasinal de jQuery

Con jQuery, en realidade non temos que escribir o formulario cunha actualización oninput:

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

Tamén podemos modificar a cor das mensaxes se o desexamos. 

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

Endurecendo a súa solicitude de contrasinal

É esencial que non valide só a construción do contrasinal no seu Javascript. Isto permitiría a calquera persoa con ferramentas de desenvolvemento do navegador ignorar o script e empregar o contrasinal que lle gustaría. SEMPRE debería empregar unha verificación do servidor para validar a intensidade do contrasinal antes de gardalo na súa plataforma.

Función PHP para fortalecer o contrasinal

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

Función de Python para fortalecer o contrasinal

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"

Función C# para reforzar o contrasinal

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

Función Java para reforzar o contrasinal

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

E se só estás a buscar un xenial xerador de contrasinais, creei unha pequena ferramenta en liña para iso.

Xerador de contrasinal