How to Make a Password Strength Meter Like Google
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:
[ftf]
// 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;
}
[/ftf]
On the HTML side, I have setup a simple form to display the interaction the user will receive.
[ftf]
[/ftf]
The magic lies inside the event handler I spoke about above. The “onkeyup” event passes the current password, and the ID for this input item. The ID is used to reference the below div tags that show the strength meter and text. The ID allows for you to have more than one password meter per form, per page.
[ftf]
[/ftf]The algorithm can be enhanced if you wish to get more complicated with the strength checking. One can also adjust the colors and text for the various strength levels displayed to the user.[ftf]
// 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”;
}
[/ftf]
Further features could be displaying when a user has not entered a valid password, for example not a long enough length.
Here is a demo of the above code, and download links so you can implement this into your sign up pages. Enjoy!
Right Click to Download:
