Decrease Font Size
Increase Font Size
   BLOG

Password Strength Indicator NuGet Package

Password Strength Indicator using jQuery and XML + NuGet Package|

Password strength Indicator with jQuery|

Password strength validation with jQuery v2.0|

Password strength Indicator NuGet package|

Password Strength indicator

Table of Contents

Introduction

Recently, I have the opportunity to review the plugin and make some enhancement to it. Here is the summary of the changes.

  • Updated the plugin to check for keyboard/character sequences (i.e., 123456, qwerty, …)
  • Added sample code using MVC5
  • Added the projects to GitHub (https://github.com/bryiantan/PasswordStrengthIndicator)
  • Added the plugin to NuGet (https://www.nuget.org/packages/PasswordStrengthIndicator/)
  • Fixed minor bugs

As mentioned in previous article, the purpose of the plugin is to provide guidance to user to choose a strong password. I wanted to reiterate that the plugin provides the following validation on client and server side:

  • Check if password contains x number of required Uppercase characters (A-Z)
  • Check if password contains any Lowercase characters (a-z)
  • Check if password contains x number of required Base 10 digits (0 through 9)
  • Check if password contains x number of required allowable Nonalphanumeric characters (special characters such as: ! @ # …)
  • Check if password meet the Minimum and Maximum password length requirement
  • Check if password exceeded the allowable Maximum consecutive repeated character
  • Check if password contains character sequences specified in the XML file

You need to write additional code/logic if you want to add functionality to perform the following:

  • Prevent obvious keyboard sequence (i.e., 123456, qwerty, …)
  • Prevent user from using previous x history password
  • Password maximum age
  • Prevent user from entering common character (i.e, Apple, Chicken, ...)
  • etc…

In this article, please allow me to share with everyone the following items:

  1. Review the element in the PasswordPolicy.xml
  2. Review the logic to check for keyboard/character sequences
  3. How I create and publish the NuGet package
  4. How to consume the package

What in the PasswordPolicy.xml?

Shown in table 1 is the list of xml node and its corresponding description

Table 1

Node Description
duration This is just an example. You can add a node and value in the XML file and then add the business logic to the PasswordStrengthIndicator.Core class
minLength The password minimum acceptable length
maxLength The password maximum acceptable length
numsLength The minimum number of required digits (0-9)
upperLength The minimum number of required upper case (A-Z)
specialLength The minimum number of required special characters
barWidth Specify the width of the bar indicator [Example: 100, 200]
barColor Specify the final color of the bar [Example: Yellow, Maroon, etc.…]
specialChars The allowable valid special characters
useMultipleColors Turn on/off multiple colors [red, blue, green]. 1=Yes, 0=No
maxConsecutiveRepeatedChars 0 = Allow repeat, no validation. [example: aaaaaaaaA will be valid]
1 and above = Specify maximum number of successive repetitions of a given character. Example:
• if 1, aa will not be valid because it repeated more than 1 time
• if 2, aaa will not be valid because it repeated more than 2 times
maxKeyboardSequence Specify the maximum allowable keyboard/character sequence. Example:
• if 2, 123 will not be valid, but 12 will be valid.
• If 3, qwer159 will not be valid, but qwe159 will be valid
Note: the sequence is defined in keyboardSequenceCharacters node)
keyboardSequenceCharacters Specify the keyboard/characters’ sequence. The node name could be a little misleading depending on the type of keyboard you’re using. You can be creative here and specify anything that you would consider a sequence in one string. Example: abcdefghijklmnopqrstuvwxyzzyxwvuts…
Note: not case sensitive

Logic to check for keyboard/character sequences

Shown in listing 1 and 2 are the server and client side validation code respectively. First, the code will retrieve the maximum character sequence (MaxKeyboardSequence) and sequence characters (KeyboardSequenceCharacters) from the PasswordPolicy.xml file. Then it will loop through the string/password entered by the user to find if any part of the string is subset of the string defined in KeyboardSequenceCharacters.

Here is an example. Let said a user entered Nin@Abc357, MaxKeyboardSequence and KeyboardSequenceCharacters was set to 2 and abcdefghijklmnopqrstuvwxyzzyxwvuts respectively. Initially, the logic will check if KeyboardSequenceCharacters contains Nin. Then it will check if it contains in@, n@A, @Ab, Abc and so forth. If the KeyboardSequenceCharacters was set to 3, then the validation check will begin with Nin@, in@A, n@Ab and so on. Based on the example, part of the password entered (Nin@Abc357) was a subset of KeyboardSequenceCharacters. Thus, user will receive a validation error like "Keyboard sequence character not allow…" on the client side. As mentioned earlier, please feel free to enter any string that you would consider a sequence under the KeyboardSequenceCharacters value.

Listing 1

 public static bool IsPasswordContainSequence(string strPassword, PasswordSetting passwordSetting)
        {
            int startIndex = 0;
            int num = 0;
            int length = passwordSetting.MaxKeyboardSequence + 1;
            string empty = string.Empty;
            string str1 = passwordSetting.KeyboardSequenceCharacters;
            while (num < strPassword.Length)
            {
                num = startIndex + length;
                string str2 = strPassword.ToLower().Substring(startIndex, length);
                if (str1.Contains(str2))
                    return true;
                ++startIndex;
            }
            return false;
        }

Listing 2

    this.getKeyboardSequenceChar = function (passwordVal) {
            var maxQwertySequence = password_settings.maxKeyboardSequence + 1;
            var keyboardSequenceCharacters = password_settings.keyboardSequenceCharacters;
            var num = 0;
            var startIndex = 0;
            if (passwordVal.length >= maxQwertySequence) {
                while (num < passwordVal.length) {
                    num = startIndex + maxQwertySequence;
                    var lastXsubString = passwordVal.substr(startIndex, maxQwertySequence);
                    if (keyboardSequenceCharacters.indexOf(lastXsubString.toLowerCase()) >= 0) {
                        return lastXsubString;
                    }
                    startIndex++;
                }
            }

How to create the NuGet package?

The very first step is to download and install the NuGet Package Project extension from http://nuproj.net/.
After the installation, open the Visual Studio IDE, navigate to File, New, Project and select NuGet under installed templates, Refer to figure 1.

Figure 2

new nuget project

Add two folders into the project, namely Content and lib. We can do this by right click the project, select Add and then select New Folder. I'll add the JavaScript, XML file and sample page into the Content folder. The files in the Content folder will be added into the target solution during the installation. Now, I want the PasswordStrengthIndicator.Core.dll to be added to the target reference during the installation. In order to do this, I will add the PasswordStrengthIndicator.Core.dll assembly into the lib folder. Next, I'll add web.config.install.xdt and web.config.uninstall.xdt into the Content folder. The purpose of these two files are to add and remove a key into/from the web.config appSettings section during package installation and uninstallation. At this point the solution should look like figure 3.

Figure 3

nuget project with files and folder

What in the web.config.install.xdt and web.config.uninstall.xdt file?

Shown in listing 3 and listing 4 are the contents of the web.config.install.xdt and web.config.uninstall.xdt respectively. During the package installation, the NuGet will check if appSettings element exists, if not, insert the element. Then it will check if the passwordPolicyXMLLocation key need to be inserted into the web.config file. In order to avoid complication, the passwordPolicyXMLLocation key will be removed from the web.config during package uninstallation and not the whole appSetting element.

Listing 3

        <?xml version="1.0" ?>
    <configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
        <appSettings xdt:Transform="InsertIfMissing">
       <add key="passwordPolicyXMLLocation" value="~/MyXML/PasswordPolicy.xml" 
            xdt:Locator="Match(key)" xdt:Transform="InsertIfMissing" />
        </appSettings>
    </configuration>

Listing 4

    <?xml version="1.0" ?>
    <configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
        <appSettings>
        <add key="passwordPolicyXMLLocation" xdt:Transform="Remove" xdt:Locator="Match(key)" />
        </appSettings>
    </configuration>

Package Setting

Right click the project and select properties to update package properties. Here you can specify the Package ID, Package Version, project URL, provide a summary and description of the package, license URL, etc. The package name is the combination of Package ID and Package Version. In this example, the package name will end up like NuGetPackage1.1.0.0.nupkg. So, don't forget to update the Package Version each time you updating the package. The nuget.org will not allow you to publish a package with the same name twice. You also can utilize the Readme.txt file to include more information about the package.

Figure 4

nuget package properties

How to test the package before publishing it?

Let start by opening a current web project or create a new web project. Go to Tools, NuGet Package Manager, Package Manager Settings. Click on the Package Sources, add (green plus sign) then click on the eclipse (…) to browse to the package location. After that, click on the Update button. Refer to figure 5 as an example.

Figure 5

nuget package source

Now, let go back to Tools, NuGet Package Manager, Manage NuGet Packages for Solution…. Change the package source to the name specified in figure 5 and click on Browse. Select the package and the project and then click on the Install button. Refer to figure 6.

Figure 6

nuget package test local

How to publish the package?

Once we have verified the package installed/uninstalled correctly. Navigate to https://www.nuget.org , login, create an account if you don’t have one. Click on the Upload Package menu item. Then click on browse and navigate to the package location. In our example the package name is NuGetPackage1.1.0.0.nupkg. Follow the instruction on the screen to complete the process.

How to install the PasswordStrengthIndicator NuGet Package?

From the menu, click on Tools, NuGet Package Manager, Manage NuGet Packages for Solution…. Make sure the package source is pointing to nugget.org. Click on Browse and search for PasswordStrengthIndicator or Bryian Tan You should see the result similar to figure 7. Choose the project you want to install this package to and then click on the install button.

Figure 7

nuget package install

Once the package installed successfully, the readme.txt will open up. You can go over it to learn more about the plugin. The following items should be in your project solution:

  1. MyXML folder which contains PasswordPolicy.xml and PasswordPolicy.xslt files
  2. PasswordStrengthIndicator.Example which contains Default.aspx.txt and jQuery_Password_Strength_Indicator.htm files
  3. Under the Scripts, you should see jquery.password-strength-2.0.min.js and jquery.blockUI.js
  4. You should see PasswordStrengthIndicator.Core being referenced by the project
  5. passwordPolicyXMLLocation key is being added into the appSettings section in the web.config

To run the test, open up the jQuery_Password_Strength_Indicator.htm file and update the jQuery reference. Rename the Default.aspx.txt to Default.aspx and update the jQuery reference.

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 because I might miss some important information in this article. Please send me an email if you want to help improve this article. Please use the following link to report any issues https://github.com/bryiantan/PasswordStrengthIndicator/issues.

Tested on: Internet Explorer 11,10,9.0, Firefox 43, Google Chrome 25.0 and Apple Safari 5.1.7
IE, Firefox, Google Chrome, Safari

History

12/26/2016 - Initial version

Watch this script in action

http://download.ysatech.com/ASP-NET-jQuery-Password-Strength-v2/

Download

Download Package (https://www.nuget.org/packages/PasswordStrengthIndicator/)
Download Source Code (https://github.com/bryiantan/PasswordStrengthIndicator)

Resources

ASP.NET - Password Strength Indicator using jQuery and XML
https://blogs.msdn.microsoft.com/webdev/2013/10/24/how-to-use-xdt-in-nuget-examples-and-facts/
http://nuproj.net/
A Step by Step Guide to Testing NuGet Packages Locally