Password strength meters are becoming more and more popular amongst web services. Google uses one when creating a Google account. One can argue how useful these meters really are, but non-the-less they are fairly cool for users. So how does one go about making one of these meters? Well it’s fairly straight forward.

The basic break down is we add an event handler on your password field that will check the password for every key input the user types. This allows for an updated meter as the user types the password. When you get into the algorithm that actually checks how secure a password is, there are many routes you can go. When researching for this project, I chose to base my code off of the kind folks over at Intelligent Web. There theory is to calculate how many different combinations there are for the password you enter, then determine how many days it would take to crack your password. The algorithm returns a percentage that we then in turn convert to a nice GUI for the end user to see. So let’s take a look at the code:

The JavaScript is fairly straight forward. There are settings at the top for different checks to enable or disable. Here is the JavaScript:

// Password strength meter v1.0
// Matthew R. Miller - 2007
// www.codeandcoffee.com
// Based off of code from http://www.intelligent-web.co.uk

// Settings
// — Toggle to true or false, if you want to change what is checked in the password
var bCheckNumbers = true;
var bCheckUpperCase = true;
var bCheckLowerCase = true;
var bCheckPunctuation = true;
var nPasswordLifetime = 365;

// Check password
function checkPassword(strPassword)
{
// Reset combination count
nCombinations = 0;

// Check numbers
if (bCheckNumbers)
{
strCheck = “0123456789″;
if (doesContain(strPassword, strCheck) > 0)
{
nCombinations += strCheck.length;
}
}

// Check upper case
if (bCheckUpperCase)
{
strCheck = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
if (doesContain(strPassword, strCheck) > 0)
{
nCombinations += strCheck.length;
}
}

// Check lower case
if (bCheckLowerCase)
{
strCheck = “abcdefghijklmnopqrstuvwxyz”;
if (doesContain(strPassword, strCheck) > 0)
{
nCombinations += strCheck.length;
}
}

// Check punctuation
if (bCheckPunctuation)
{
strCheck = “;:-_=+\|//?^&!.@$£#*()%~<>{}[]“;
if (doesContain(strPassword, strCheck) > 0)
{
nCombinations += strCheck.length;
}
}

// Calculate
// — 500 tries per second => minutes
var nDays = ((Math.pow(nCombinations, strPassword.length) / 500) / 2) / 86400;

// Number of days out of password lifetime setting
var nPerc = nDays / nPasswordLifetime;

return nPerc;
}

// Runs password through check and then updates GUI
function runPassword(strPassword, strFieldID)
{
// Check password
nPerc = checkPassword(strPassword);

// Get controls
var ctlBar = document.getElementById(strFieldID + “_bar”);
var ctlText = document.getElementById(strFieldID + “_text”);
if (!ctlBar || !ctlText)
return;

// Set new width
var nRound = Math.round(nPerc * 100);
if (nRound < (strPassword.length * 5))
{
nRound += strPassword.length * 5;
}
if (nRound > 100)
nRound = 100;
ctlBar.style.width = nRound + “%”;

// Color and text
if (nRound > 95)
{
strText = “Very Secure”;
strColor = “#3bce08″;
}
else if (nRound > 75)
{
strText = “Secure”;
strColor = “orange”;
}
else if (nRound > 50)
{
strText = “Mediocre”;
strColor = “#ffd801″;
}
else
{
strColor = “red”;
strText = “Insecure”;
}
ctlBar.style.backgroundColor = strColor;
ctlText.innerHTML = “” + strText + ““;
}

// Checks a string for a list of characters
function doesContain(strPassword, strCheck)
{
nCount = 0;

for (i = 0; i < strPassword.length; i++)
{
if (strCheck.indexOf(strPassword.charAt(i)) > -1)
{
nCount++;
}
}

return nCount;
}

Demo: http://www.codeandcoffee.com/2007/06/how-to-make-a-password-strength-meter-like-google/

Download: http://www.codeandcoffee.com/wp-content/uploads/pwd_strength.js

Source: http://www.codeandcoffee.com/2007/06/how-to-make-a-password-strength-meter-like-google/

Related Listings:

1. Make a Password Strength Meter Like Google Password strength meters are becoming more and more popular amongst...
2. ExtJS Password Meter These forms do not do anything and have very little...
3. Password Fields With strength Meter This script is built with no framework. It works based...
4. Show Simple Password Fields A simple Javascript bookmarklet shows password field values. In form...
5. HashMask – Another Experiment in Password Masking HashMask is an attempt to find a more secure middle...

Do you like this post?

Email: