ASP.NET - Password Strength Indicator using jQuery and XML - Update 3 [See Below]
Introduction
Last week, I had the opportunity to help implement and
integrate a strong password policy to the legacy web application developed using
ASP technology. The solution I proposed was to use jQuery to display the
password strength meter to help users create strong password. Then one of my
colleagues had asked "Do we have to modify the client-side script, code behind
and password policy page if the client decided to alter the password policy?"
The answer is "no", thanks to jQuery, the client-side script and code behind can
share the same XML file. The password policy information is stored to an XML
file and the client-side script and code behind are using the information in the
XML file to perform the password strength validation.
I found several fine jQuery plug-in to display the user's
password strength but I prefer to have something somewhat similar to the
ASP.NET AJAX PasswordStrength control. After spending some time doing
research, I was able to find all the necessary resources and assemble the jQuery
plug-in to achieve the goal. Listed below are the features of the plug-in and I
have put together a demo, everyone are welcome to download it.
- Display password strength indicator in text and
progress bar meter.
- The password policy, bar color and width are stored
in the XML file and consume by the client-side and server side
- Use XSLT to transform the password policy
XML file into HTML.
![password_strength_steps4.gif]()
![]()
![]()
Getting Started
Shown below is the content of the sample application. If
you want to test the Classic ASP code, deploy the application to your IIS Web
Server. The local ASP.NET Development Server does not support Classic ASP.
Figure 2
![folder_structure.gif]()
- Default.aspx - sample code in ASP.NET c# with
MasterPage
- Default.aspx2 - sample code in ASP.NET c# without
MasterPage
- Password_strength_Indicator.asp - sample code in
Classic ASP
- jQuery_Password_Strength_Indicator.htm - sample
code in HTML
- PasswordPolicy.xml - contains password policy
information
- Password.xslt - to transform PasswordPoclicy.xml
file into HTML format
- jQuery.password-strength.js - this is the plug-in
I have created
- Download latest jQuery library from
here
The password strength
indicator plug-in
In this section, I'll touch base briefly with the contents
in the jQuery.password-strength.js file. The code is very straight
forward and comments are included. There is a jQuery AJAX request to read the
XML file and populate the local variables based on the data in the XML file. If
you are unsure of the relative URL, I would recommend using absolute URL to your
XML file. The getStrengthInfo() function contains the logic to check the
password strength and return appropriate message based on user input. The
password strength meter bar and text position are relative to the Textbox
position.
Using the code
Include a Textbox control, jQuery library and the plug-in
into the web page. Change the txtPassword id to your desire id. Use this
line of code "var myPlugin = $("[id$='txtPassword']").password_strength();" to
call the plug-in. To check if the password met the password policy, call the
metReq() function with this line of code " myPlugin.metReq()". Please refer to
Listing 1 for full details. The jQuery $("[id$='txtPassword']") selector will
work with ASP.NET server control, so don't bother using my 'txtPassword.ClientID'.
The bar color, width and password policy information can be modified through the
XML file.
Listing 1
<div
style="height:400px">
<br
/>
<asp:label
runat="server"
id="lblPassword"
AssociatedControlId="txtPassword">Enter
Password:</asp:label>
<asp:TextBox
ID="txtPassword"
runat="server"></asp:TextBox>
<br
/>
<a
id="passwordPolicy"
href="#">Password
policy</a>
<br
/><br
/>
<asp:Button
ID="btnSubmit"
runat="server"
Text="Submit"
/>
<br
/><br
/><asp:Label
ID="ResultLabel"
runat="server"
Text=""></asp:Label>
</div>
<script
src="Script/jquery-1.4.4.min.js"
type="text/javascript"></script>
<script
src="Script/jquery.password-strength.js"
type="text/javascript"></script>
<script
type="text/javascript">
$(document).ready(function()
{
var myPlugin = $("[id$='txtPassword']").password_strength();
$("[id$='btnSubmit']").click(function()
{
return myPlugin.metReq();
//return true or false
});
$("[id$='passwordPolicy']").click(function(event)
{
var width = 350, height = 300, left = (screen.width
/ 2) - (width / 2),
top = (screen.height
/ 2) - (height / 2);
window.open("PasswordPolicy.xml",
'Password_poplicy',
'width=' + width +
',height=' + height +
',left=' + left +
',top=' + top);
event.preventDefault();
return false;
});
});
</script>
We can use the XLST to display the contents of the
PasswordPolicy.xml or write code to extract its contents. I preferred to use
XLST to avoid writing additional code. Displayed below is the password policy
page. If you want to learn more on how to displaying XML with XSLT click on
here.
Figure 3
![image3.gif]()
Code Behind or Server-side code
The regular expression that we are using is listed in
listing 3. The numbers are adjustable and come from the XML file.
Listing 2
(?=^.{12,25}$)(?=(?:.*?\d){2})(?=.*[a-z])(?=(?:.*?[A-Z]){2})(?=(?:.*?[!@#$%*()_+^&}{:;?.]){2})(?!.*\s)[0-9a-zA-Z!@#$%*()_+^&]*$
|
Shown in listing 4 is the code to generate regular
expression dynamically. So, tomorrow if your client told you to increase the
required numeric in the password policy, you don't have to search or create a
new regular expression. All you have to do is change the setting in the
PasswordPolicy.xml file. You can verify the regular expression
here.
Listing 3
void
btnSubmit_Click(object sender,
EventArgs e)
{
PasswordSetting passwordSetting =
Helper.GetPasswordSetting();
StringBuilder sbPasswordRegx =
new
StringBuilder(string.Empty);
//min and max
sbPasswordRegx.Append(@"(?=^.{" +
passwordSetting.MinLength + "," +
passwordSetting.MaxLength + "}$)");
//numbers length
sbPasswordRegx.Append(@"(?=(?:.*?\d){"
+ passwordSetting.NumsLength + "})");
//a-z characters
sbPasswordRegx.Append(@"(?=.*[a-z])");
//A-Z length
sbPasswordRegx.Append(@"(?=(?:.*?[A-Z]){"
+ passwordSetting.UpperLength + "})");
//special characters length
sbPasswordRegx.Append(@"(?=(?:.*?[" +
passwordSetting.SpecialChars + "]){"
+ passwordSetting.SpecialLength + "})");
//(?!.*\s) - no spaces
//[0-9a-zA-Z!@#$%*()_+^&] -- valid characters
sbPasswordRegx.Append(@"(?!.*\s)[0-9a-zA-Z"
+ passwordSetting.SpecialChars + "]*$");
if (Regex.IsMatch(txtPassword.Text,
sbPasswordRegx.ToString()))
{
ResultLabel.Text = "Password confront
password policy!";
}
else
{
ResultLabel.Text = "Password does not
confront password policy!";
}
}
Question and Answer
Why the progress bar indicators look different from the
one in the demo application?
Make sure that there is a proper DocType declare
before the <html> tag. Click
here to learn more
about it.
Figure 4
![image4.gif]()
How to change the TextBox to password mode?
For ASP.NET control, set the TextMode attribute to
"Password".
For HTML control, set the type property to "Password".
Why I'm getting the error "This type of page is not
served." when running the Classic ASP code on the local ASP.NET Development
Server?
Deploy the demo application to the IIS Web Application
Server.
Can I use this plug-in with other programming languages?
Yes.