CRM i plataformes de dadesMàrqueting per correu electrònic i automatització

Comproveu la força de la contrasenya amb JavaScript o jQuery i expressions regulars (amb exemples del costat del servidor, també!)

Estava fent algunes investigacions sobre com trobar un bon exemple d’un comprovador de força de contrasenya que utilitzi JavaScript i Expressions regulars (regex). A l'aplicació del meu treball, fem una publicació per verificar la seguretat de la contrasenya i és bastant incòmode per als nostres usuaris.

Què és Regex?

Una expressió regular és una seqüència de caràcters que defineixen un patró de cerca. Normalment, aquests patrons s’utilitzen en algorismes de cerca de cadenes trobar or cercar i substituir operacions en cadenes o per a la validació d’entrada. 

Definitivament, aquest article no us ensenya expressions regulars. Només heu de saber que la possibilitat d'utilitzar expressions regulars simplificarà absolutament el vostre desenvolupament a mesura que cerqueu patrons de text. També és important tenir en compte que la majoria dels llenguatges de desenvolupament han optimitzat l’ús d’expressions regulars ... de manera que en lloc d’analitzar i cercar cadenes pas a pas, Regex sol ser molt més ràpid tant al costat del servidor com del client.

Vaig buscar al web bastant abans de trobar-lo un exemple d'unes grans expressions regulars que busquen una combinació de longitud, caràcters i símbols. Tanmateix, el codi era una mica excessiu per al meu gust i adaptat per a .NET. Així que vaig simplificar el codi i el vaig posar en JavaScript. Això fa que validi la força de la contrasenya en temps real al navegador del client abans de tornar-la a publicar... i proporciona alguns comentaris a l'usuari sobre la força de la contrasenya.

Escriviu una contrasenya

Amb cada cop del teclat, la contrasenya es prova amb l'expressió regular i, a continuació, es proporciona informació a l'usuari en un interval inferior.

Funció de força de contrasenya de JavaScript

El Expressions regulars fer un treball fantàstic per minimitzar la longitud del codi. Aquesta funció de JavaScript comprova la força d'una contrasenya i si endevinar-la és fàcil, mitjà, difícil o extremadament difícil d'endevinar. A mesura que la persona escriu, mostra consells per animar-la a ser més forta. Valida la contrasenya en funció de:

  • Longitud – Si la longitud és inferior o superior a 8 caràcters.
  • Cas mixt – Si la contrasenya té caràcters en majúscules i minúscules.
  • Nombres – Si la contrasenya inclou números.
  • Caràcters especials – Si la contrasenya inclou caràcters especials.

La funció mostra la dificultat i alguns consells per endurir encara més la contrasenya.

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

Si voleu actualitzar el color de la punta, també podeu fer-ho actualitzant el codi després de // Return results line.

// 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ó de força de contrasenya de jQuery

Amb jQuery, en realitat no hem d'escriure el formulari amb una actualització oninput:

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

També podem modificar el color dels missatges si ho desitgem. 

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

Enduriment de la sol·licitud de contrasenya

És essencial que no només valideu la construcció de la contrasenya dins del vostre JavaScript. Això permetria a qualsevol persona amb eines de desenvolupament de navegadors evitar l'script i utilitzar la contrasenya que vulgui. SEMPRE hauríeu d'utilitzar una comprovació del servidor per validar la força de la contrasenya abans d'emmagatzemar-la a la vostra plataforma.

Funció PHP per a la força de la contrasenya

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ó Python per a la força de la contrasenya

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ó C# per a la força de la contrasenya

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ó Java per a la força de la contrasenya

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

I si només esteu buscant un gran generador de contrasenyes, he creat una petita eina en línia per a això.

Generador de contrasenya

Douglas Karr

Douglas Karr és CMO de OpenINSIGHTS i el fundador de la Martech Zone. Douglas ha ajudat a desenes d'empreses d'èxit de MarTech, ha ajudat en la diligència deguda de més de 5 mil milions de dòlars en adquisicions i inversions de Martech i continua ajudant les empreses a implementar i automatitzar les seves estratègies de vendes i màrqueting. Douglas és un expert i conferenciant de MarTech en transformació digital reconegut internacionalment. Douglas també és autor publicat d'una guia de Dummie i d'un llibre sobre lideratge empresarial.

Articles Relacionats

Torna al botó superior
a prop

Adblock detectat

Martech Zone és capaç de proporcionar-vos aquest contingut sense cap cost perquè monetitzem el nostre lloc mitjançant ingressos publicitaris, enllaços d'afiliats i patrocinis. Agrairem que elimineu el bloquejador d'anuncis mentre visualitzeu el nostre lloc.