CRM és adatplatformokE-mail marketing és automatizálás

Ellenőrizze a jelszó erősségét JavaScript- vagy jQuery-vel és reguláris kifejezésekkel (szerveroldali példákkal is!)

Néhány kutatást folytattam annak érdekében, hogy jó példát találjak egy Jelszóerősség-ellenőrzőre, amely használja JavaScript és a Reguláris kifejezések (regex). A munkahelyemen lévő alkalmazásban visszaküldjük a jelszó erősségét, és ez meglehetősen kényelmetlen a felhasználóink ​​számára.

Mi a Regex?

A reguláris kifejezés egy olyan karaktersorozat, amely meghatározza a keresési mintát. Az ilyen mintákat általában karakterlánc-kereső algoritmusok használják talál or megtalálni és pótolni karakterláncokon végzett műveletek vagy bemeneti ellenőrzés. 

Ez a cikk biztosan nem arra szolgál, hogy rendszeres kifejezéseket tanítson. Csak tudd, hogy a reguláris kifejezések használatának képessége abszolút leegyszerűsíti a fejlesztést, amikor mintákat keres a szövegben. Fontos megjegyezni azt is, hogy a legtöbb fejlesztési nyelv optimalizálta a rendszeres kifejezés használatát ... ezért a karakterláncok lépésenkénti elemzése és keresése helyett a Regex általában sokkal gyorsabb mind szerver, mind kliens oldalon.

Elég sokat kerestem az interneten, mire megtaláltam egy példa néhány nagyszerű reguláris kifejezés közül, amelyek hosszúság, karakterek és szimbólumok kombinációját keresik. A kód azonban kissé túlzó volt az én ízlésemnek, és .NET-re lett szabva. Ezért leegyszerűsítettem a kódot, és JavaScriptbe tettem. Így valós időben ellenőrzi a jelszó erősségét a kliens böngészőjében, mielőtt visszaküldené… és visszajelzést ad a felhasználónak a jelszó erősségéről.

Írja be a jelszót

A billentyűzet minden egyes löketével tesztelik a jelszót a reguláris kifejezéssel szemben, majd visszajelzést adnak a felhasználónak az alatta lévő tartományban.

JavaScript jelszó erősség funkció

A Reguláris kifejezések fantasztikus munkát végez a kód hosszának minimalizálásában. Ez a JavaScript funkció ellenőrzi a jelszó erősségét, és azt, hogy a lefóliázás könnyű, közepes, nehéz vagy rendkívül nehéz kitalálni. Miközben a személy gépel, tippeket jelenít meg, amelyekkel arra ösztönözheti, hogy erősebb legyen. Érvényesíti a jelszót a következők alapján:

  • Hossz – Ha a hossza 8 karakter alatt van vagy több.
  • Vegyes tok – Ha a jelszó kis- és nagybetűket is tartalmaz.
  • Számok – Ha a jelszó számokat tartalmaz.
  • Speciális karakterek – Ha a jelszó speciális karaktereket tartalmaz.

A funkció megjeleníti a nehézséget, valamint néhány tippet a jelszó további keményítéséhez.

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

Ha módosítani szeretné a hegy színét, ezt is megteheti a kód utáni frissítésével // Return results vonal.

// 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 jelszóerősségi függvény

A jQuery használatával valójában nem kell az űrlapot oninput frissítéssel írnunk:

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

Az üzenetek színét is módosíthatjuk, ha akarjuk. 

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

A jelszó igénylés keményítése

Alapvető fontosságú, hogy ne csak a jelszó-konstrukciót érvényesítse a JavaScript-ben. Ez lehetővé tenné, hogy bárki, aki rendelkezik böngészőfejlesztő eszközökkel, megkerülje a szkriptet, és bármilyen jelszót használjon. MINDIG használjon szerveroldali ellenőrzést a jelszó erősségének ellenőrzésére, mielőtt a platformon tárolná.

PHP funkció a jelszó erősségéhez

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-függvény a jelszó erősségéhez

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# funkció a jelszó erősségéhez

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 funkció a jelszó erősségéhez

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

És ha csak egy nagyszerű jelszógenerátort keresel, akkor ehhez készítettem egy jó kis online eszközt.

Jelszógenerátor

Douglas Karr

Douglas Karr CMO of OpenINSIGHTS és az alapítója a Martech Zone. Douglas több tucat sikeres MarTech startupnak segített, több mint 5 milliárd dolláros átvilágításban segédkezett a Martech akvizíciókban és befektetésekben, és továbbra is segíti a vállalatokat értékesítési és marketingstratégiáik megvalósításában és automatizálásában. Douglas nemzetközileg elismert digitális átalakulás és MarTech szakértő és előadó. Douglas egy Dummie's Guide és egy üzleti vezetői könyv szerzője is.

Kapcsolódó cikkek

Vissza a lap tetejére gombra
közel

Adblock észlelve

Martech Zone ingyenesen tudja biztosítani Önnek ezt a tartalmat, mivel webhelyünkkel bevételt szerezünk hirdetési bevételek, társult linkek és szponzorálás révén. Nagyra értékelnénk, ha eltávolítaná hirdetésblokkolóját, miközben megtekinti webhelyünket.