CRM a dátové platformyEmail Marketing & Automatizácia

Skontrolujte silu hesla pomocou JavaScriptu alebo jQuery a regulárnych výrazov (aj s príkladmi na strane servera!)

Robil som prieskum zameraný na nájdenie dobrého príkladu kontroly sily hesla, ktorá používa JavaScript a Pravidelné výrazy (regex). V aplikácii v mojej práci robíme spätný príspevok na overenie sily hesla a je to pre našich používateľov dosť nepohodlné.

Čo je Regex?

Regulárny výraz je postupnosť znakov, ktoré definujú vzor vyhľadávania. Takéto vzory sa zvyčajne používajú v algoritmoch vyhľadávania reťazcov nájsť or nájsť a nahradiť operácie s reťazcami alebo na overenie vstupu. 

Tento článok vás rozhodne nemá učiť regulárne výrazy. Vedzte, že schopnosť používať regulárne výrazy úplne zjednoduší váš vývoj pri hľadaní vzorov v texte. Je tiež dôležité poznamenať, že väčšina vývojových jazykov optimalizovala použitie regulárneho výrazu ... takže namiesto postupnej analýzy a vyhľadávania reťazcov je Regex zvyčajne oveľa rýchlejší na strane servera aj klienta.

Než som našiel, dosť som prehľadal web príklad niektorých skvelých regulárnych výrazov, ktoré hľadajú kombináciu dĺžky, znakov a symbolov. Kód bol však na môj vkus trochu prehnaný a prispôsobený pre .NET. Kód som teda zjednodušil a vložil do JavaScriptu. To umožňuje overiť silu hesla v reálnom čase v prehliadači klienta pred jeho odoslaním späť... a poskytuje používateľovi spätnú väzbu o sile hesla.

Zadajte heslo

Pri každom stlačení klávesnice sa heslo testuje proti regulárnemu výrazu a potom sa používateľovi poskytuje spätná väzba v rozsahu pod ním.

Funkcia sily hesla JavaScript

Pravidelné výrazy urobte fantastickú prácu pri minimalizácii dĺžky kódu. Táto funkcia JavaScript kontroluje silu hesla a to, či je jeho prekazenie ľahké, stredné, ťažké alebo extrémne ťažké uhádnuť. Keď osoba píše, zobrazuje tipy, ako ju povzbudiť, aby bola silnejšia. Overuje heslo na základe:

  • Dĺžka – Ak je dĺžka menšia alebo väčšia ako 8 znakov.
  • Zmiešaný prípad – Ak heslo obsahuje veľké aj malé písmená.
  • Čísla – Ak heslo obsahuje čísla.
  • Špeciálne znaky – Ak heslo obsahuje špeciálne znaky.

Funkcia zobrazuje náročnosť, ako aj niekoľko tipov na ďalšie posilnenie hesla.

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

Ak by ste chceli aktualizovať farbu hrotu, môžete to urobiť aj aktualizáciou kódu za // Return results linka.

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

Funkcia sily hesla jQuery

S jQuery v skutočnosti nemusíme písať formulár s aktualizáciou oninput:

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

Ak chceme, môžeme tiež upraviť farbu správ. 

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

Vystuženie vašej požiadavky na heslo

Je dôležité, aby ste nielen overili konštrukciu hesla vo svojom JavaScripte. To by umožnilo komukoľvek s nástrojmi na vývoj prehliadača obísť skript a použiť akékoľvek heslo, ktoré chce. Pred uložením hesla na vašu platformu by ste mali VŽDY využiť kontrolu na strane servera na overenie sily hesla.

PHP funkcia pre silu hesla

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

Funkcia Python pre silu hesla

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"

Funkcia C# pre silu hesla

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 funkcia pre silu hesla

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 ak práve hľadáte skvelý generátor hesiel, vytvoril som na to pekný malý online nástroj.

Generátor hesiel

Douglas Karr

Douglas Karr je CMO OpenINSIGHTS a zakladateľ spoločnosti Martech Zone. Douglas pomohol desiatkam úspešných startupov MarTech, asistoval pri due diligence v hodnote viac ako 5 miliárd dolárov v akvizíciách a investíciách Martech a naďalej pomáha spoločnostiam pri implementácii a automatizácii ich predajných a marketingových stratégií. Douglas je medzinárodne uznávaný odborník na digitálnu transformáciu a MarTech a rečník. Douglas je tiež publikovaným autorom príručky Dummie a knihy obchodného vedenia.

súvisiace články

Tlačidlo späť nahor
Zavrieť

Zistený blok reklám

Martech Zone vám tento obsah môže poskytnúť bezplatne, pretože naše stránky speňažujeme prostredníctvom príjmov z reklám, pridružených odkazov a sponzorstiev. Ocenili by sme, keby ste pri prezeraní našej stránky odstránili blokovanie reklám.