As a freelancer I get all kinds of requests for all kinds of scripts, most involving security of some sort, but what amazes me is that most of these people never ask for a password strength script. Maybe they have their own solution, maybe they’re just not thinking about it or don’t see the necessity.
In today’s day and age, I think it should be mandatory to keep your data as secure as possible, yes I’m pointing out the obvious over here. No matter what kind of security you implement on your side, your user can be the biggest threat to you in the end. How many people are using “password” or “suzan” as their password. You can limit this kind of behavior and also bring to your users attention the fact that, yes a familiar password is easy to remember, but it is just as easy to crack.
So here is a simple script that implements AJAX and jQuery to display a nice password strength meter for user when signing up. Geek out continues below.
> This is a very small plugin for jQuery.
> Naturally, jQuery is required to run it. You can download jQuery HERE and of course it’s free.
Now let’s get into the meat of this already, shall we?
First up, you’re going to need the JavaScript files from HERE. Unpack the files and upload to the proper directory on your server. Eeezzee peezzzyyy!
Now you need to insert the following code anywhere BEFORE the password field on your page.
<script type="text/javascript" src="js/jquery.js"></script> // make sure you adjust your path!
<script type="text/javascript" src="js/jquery.pstrength-min.1.2.js">
</script>
<script type="text/javascript">
$(function() {
$('.password').pstrength();
});
</script>
Insert the class “password” into the dialogue box so we know it’s identified as a password box. Example:
<INPUT class="password" type=password name="Password">
Now for the last step, adding new tags to your existing CSS file. Something like this should do the trick, but you can change as you see fit.
.password {
font-size : 12px;
border : 1px solid #000000;
width : 200px;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
.pstrength-minchar {
font-size : 10px;
}
And there you have it! All done. You can change a few settings inside jquery.pstrength-min.1.2.js, such as messages, length/height of the bar, etc… just make sure you know what you’re playing with!!!
EXAMPLE:
Password:
Ed. Note: Try using common passwords like “pass” “password” “love” “sex” “1234″, etc.. and see what happens. Common phrases like these can be included in the jquery.pstrength-min.1.2 JavaScript file.