Password Strength Indicator using jQuery and XML in ASP.NET

No.of Views2748
Bookmarked0 times
Downloads 
Votes0
By  bryiantan   On  13 Jan 2011 21:01:17
Tag : JQuery , Validation Control
ASP.NET Password Strength Indicator somewhat similar to AJAX PasswordStrength extender control behavior and implemented by using jQuery and XML. The password information is stored in an XML file.
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

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.

  1. Display password strength indicator in text and progress bar meter.
  2. The password policy, bar color and width are stored in the XML file and consume by the client-side and server side
  3. Use XSLT to transform the password policy XML file into HTML.


Figure 1
Password Strength steps

 

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
Project Structure

• 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. Shown below is the code in the jQuery.password-strength.js file.

Listing 1

(function($) {

    var password_Strength = new function() {

        //return count that match the regular expression
        this.countRegExp = function(passwordVal, regx) {
            var match = passwordVal.match(regx);
            return match ? match.length : 0;
        }

        this.getStrengthInfo = function(passwordVal) {
            var len = passwordVal.length;
            var pStrength = 0; //password strength
            var msg = "", inValidChars = ""; //message

            //get special characters from xml file
            var allowableSpecilaChars = new RegExp("[" + password_settings.specialChars + "]", "g")

            var nums = this.countRegExp(passwordVal, /\d/g), //numbers
			lowers = this.countRegExp(passwordVal, /[a-z]/g),
			uppers = this.countRegExp(passwordVal, /[A-Z]/g), //upper case
			specials = this.countRegExp(passwordVal, allowableSpecilaChars), //special characters
			spaces = this.countRegExp(passwordVal, /\s/g);

            //check for invalid characters
            inValidChars = passwordVal.replace(/[a-z]/gi, "") + inValidChars.replace(/\d/g, "");
            inValidChars = inValidChars.replace(/\d/g, "");
            inValidChars = inValidChars.replace(allowableSpecilaChars, "");

            //check space
            if (spaces > 0) {
                return "No spaces!";
            }

            //invalid characters
            if (inValidChars !== '') {
                return "Invalid character: " + inValidChars;
            }

            //max length
            if (len > password_settings.maxLength) {
                return "Password too long!";
            }

            //GET NUMBER OF CHARACTERS left
            if ((specials + uppers + nums + lowers) < password_settings.minLength) {
                msg += password_settings.minLength - (specials + uppers + nums + lowers) + " more characters, ";
            }

            //at the "at least" at the front
            if (specials == 0 || uppers == 0 || nums == 0 || lowers == 0) {
                msg += "At least ";
            }

            //GET NUMBERS
            if (nums >= password_settings.numberLength) {
                nums = password_settings.numberLength;
            }
            else {
                msg += (password_settings.numberLength - nums) + " more numbers, ";
            }

            //special characters
            if (specials >= password_settings.specialLength) {
                specials = password_settings.specialLength
            }
            else {
                msg += (password_settings.specialLength - specials) + " more symbol, ";
            }

            //upper case letter
            if (uppers >= password_settings.upperLength) {
                uppers = password_settings.upperLength
            }
            else {
                msg += (password_settings.upperLength - uppers) + " Upper case characters, ";
            }

            //strength for length
            if ((len - (uppers + specials + nums)) >= (password_settings.minLength - password_settings.numberLength - password_settings.specialLength - password_settings.upperLength)) {
                pStrength += (password_settings.minLength - password_settings.numberLength - password_settings.specialLength - password_settings.upperLength);
            }
            else {
                pStrength += (len - (uppers + specials + nums));
            }

            //password strength
            pStrength += uppers + specials + nums;

            //detect missing lower case character
            if (lowers === 0) {
                if (pStrength > 1) {
                    pStrength -= 1; //Reduce 1
                }
                msg += "1 lower case character, ";
            }

            //strong password
            if (pStrength == password_settings.minLength && lowers > 0) {
                msg = "Strong password!";
            }

            return msg + ';' + pStrength;
        }
    }

    //default setting
    var password_settings = {
        minLength: 12,
        maxLength: 25,
        specialLength: 1,
        upperLength: 1,
        numberLength: 1,
        barWidth: 200,
        barColor: 'Red',
        specialChars: '!@#$', //allowable special characters
        metRequirement: false
    };

    //password strength plugin 
    $.fn.password_strength = function(options) {

        //check if password met requirement
        this.metReq = function() {
            return password_settings.metRequirement;
        }

        //read password setting from xml file
        $.ajax({
            type: "GET",
            url: "PasswordPolicy.xml", //use absolute link if possible
            dataType: "xml",
            success: function(xml) {

                $(xml).find('Password').each(function() {
                    var _minLength = $(this).find('minLength').text(),
                    _maxLength = $(this).find('maxLength').text(),
                    _numsLength = $(this).find('numsLength').text(),
                    _upperLength = $(this).find('upperLength').text(),
                    _specialLength = $(this).find('specialLength').text(),
                    _barWidth = $(this).find('barWidth').text(),
                    _barColor = $(this).find('barColor').text(),
                    _specialChars = $(this).find('specialChars').text();

                    //set variables
                    password_settings.minLength = parseInt(_minLength);
                    password_settings.maxLength = parseInt(_maxLength);
                    password_settings.specialLength = parseInt(_specialLength);
                    password_settings.upperLength = parseInt(_upperLength);
                    password_settings.numberLength = parseInt(_numsLength);
                    password_settings.barWidth = parseInt(_barWidth);
                    password_settings.barColor = _barColor;
                    password_settings.specialChars = _specialChars;
                });
            }
        });

        return this.each(function() {

            //bar position
            var barLeftPos = $("[id$='" + this.id + "']").position().left + $("[id$='" + this.id + "']").width();
            var barTopPos = $("[id$='" + this.id + "']").position().top + $("[id$='" + this.id + "']").height();

            //password indicator text container
            var container = $('')
            .css({ position: 'absolute', top: barTopPos - 6, left: barLeftPos + 15, 'font-size': '75%', display: 'inline-block', width: password_settings.barWidth + 40 });

            //add the container next to textbox
            $(this).after(container);

            //bar border and indicator div
            var passIndi = $('
 
 
') .css({ position: 'absolute', display: 'none' }) .eq(0).css({ height: 3, top: barTopPos - 16, left: barLeftPos + 15, 'border-style': 'solid', 'border-width': 1, padding: 2 }).end() .eq(1).css({ height: 5, top: barTopPos - 14, left: barLeftPos + 17 }).end() //set max length of textbox //$("[id$='" + this.id + "']").attr('maxLength', password_settings.maxLength); //add the boder and div container.before(passIndi); $(this).keyup(function() { var passwordVal = $(this).val(); //get textbox value //set met requirement to false password_settings.metRequirement = false; if (passwordVal.length > 0) { var msgNstrength = password_Strength.getStrengthInfo(passwordVal); var msgNstrength_array = msgNstrength.split(";"), strengthPercent = 0, barWidth = password_settings.barWidth; //calculate the bar indicator length if (msgNstrength_array.length > 1) { strengthPercent = (msgNstrength_array[1] / password_settings.minLength) * barWidth; } $("[id$='PasswordStrengthBorder']").css({ display: 'inline', width: barWidth }); $("[id$='PasswordStrengthBar']").css({ display: 'inline', width: strengthPercent, 'background-color': password_settings.barColor }); //remove last "," character if (msgNstrength_array[0].lastIndexOf(",") !== -1) { container.text(msgNstrength_array[0].substring(0, msgNstrength_array[0].length - 2)); } else { container.text(msgNstrength_array[0]); } if (strengthPercent == barWidth) { password_settings.metRequirement = true; } } else { container.text(''); $("[id$='PasswordStrengthBorder']").css("display", "none"); //hide $("[id$='PasswordStrengthBar']").css("display", "none"); //hide } }); }); }; })(jQuery);

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 2for 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 2

<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 

<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 2
Password policy

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 3

(?=^.{12,25}$)(?=(?:.*?\d){2})(?=.*[a-z])(?=(?:.*?[A-Z]){2})(?=(?:.*?[!@#$%*()_+^&}{:;?.]){2})(?!.*\s)[0-9a-zA-Z!@#$%*()_+^&]*$

Shown in listing 4is 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 4

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
Password policy

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.

Conclusion

I hope someone will find this information useful and make your programming job easier. If you find any bugs or disagree with the contents or want to help improve this article, please drop me a line and I'll work with you to correct it. I would suggest downloading the demo and explore it in order to grasp the full concept of it because I might miss some important information in this article. Please send me an email if you want to help improve this article.

Resources

Dynamic Regular Expressions in Javascript
HTML <!DOCTYPE> Declaration
jQuery Password Indicator
Plugins/Authoring
Public functions from within a jQuery plug-in

Watch this script in action

live Demo

Downloads

Download Source

 
Sign Up to vote for this article
 
About Author
 
bryiantan
Occupation-Software Engineer
Company-
Member Type-Fresh
Location-Not Provided
Joined date-30 Jul 2009
Home Page-
Blog Page-http://blog.ysatech.com
 
 
Other popularSectionarticles
    In this article I will demonstration to how to validate whether to check at least one checkbox is checked in the Gridview in ASP.NET using JQuery. The JQuery is significant library to manipulate client html and css with less line of code.Before Jquery come up we have used the pure JavaScript to implement this features. I will give the JavaScript code as well in end of this article.
    Published Date : 30/Dec/2010
    Today I have implemented to my project to check and uncheck all checkboxes within gridview in asp.net. So in this article we focus how to implement this features using JQuery with less code. And also I have given live demonstration as well you can try it in live.
    Published Date : 29/Dec/2010
    In this article, I will explain how to sort custom objects array using JQuery. Let’s say you have array with custom objects, the custom object has few attributes as well, so in this case, you may need to sort objects with different order with specific attributes.
    Published Date : 12/Jan/2011
    The JQuery is powerful library to manipulate client side HTML, CSS, object and etc. On this article I will explain how to sort element within array using JQuery. In this demonstration I will show sort for string and numeric elements.
    Published Date : 11/Jan/2011
    Today I have introduced the new features for CodeGain article submit page to count characters for description textbox with JQuery on time. The character counter is support to users to display how many characters have entered and how many chars remaining in live.
    Published Date : 25/Dec/2010
Comments
There is no comments for this articles.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top
</