PasswordStrength in ASP.NET AJAX Control Toolkit

God breathing through me

PasswordStrength in ASP.NET AJAX Control Toolkit

Published on March 25, 2008

ASP.NET AJAX control toolkit is a great set of helpful controls for ASP.NET AJAX. Usually many of these controls aren't covered in books and articles most likely because their usage is simple.

However, yesterday I was playing with PasswordStrength control included in ASP.NET AJAX control toolkit to use it in a project and thought it would be good to write a descriptive post about it since there is only one resource about this control which is its sample on ASP.NET site.

PasswordStrength is a simple control that shows the strength of the passwords that users enter in TextBoxes in a visual manner using ASP.NET AJAX. This control is customizable to show the strength in several ways.

All you need to use this control is a ScriptManager control on your page. After that, you can insert this control somewhere in your page. Obviously you need to use this control with TextBox controls that have their TextMode property set to Password.

There are two ways to add this control to your pages. One is adding the text element of this control to your page source and setting its TargetControlID property to the name of the TextBox that you want this control to validate it (or same thing in programming code). The other way which is easier is switching to design mode and drag and drop this control into the TextBox . This automatically generates necessary code for you.

This control has several properties that customize its behavior but many of them are optional and control uses their default values. The only property that you need to take care about is that TargetControlID which is required and must be set to the name of your TextBox control.

For this post I'm going to use an example where I create a registration page for a sample site that gets user's email as well as his or her password and its confirmation. I exclude some obvious stuff like validation and code logic for simplicity.

Here I want to use two PasswordStrength controls to check the strength of the entered passwords. In the simplest form my code would look like this:

		<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"

		 Inherits="PasswordStrengthSample._Default" %>

		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

		 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

		<html xmlns="http://www.w3.org/1999/xhtml">

		<head runat="server">

		    <title>PasswordStrength Sample</title>

		</head>

		<body>

		    <form id="form1" runat="server">

		    <ajaxControlToolkit:ToolkitScriptManager runat="server">

		    </ajaxControlToolkit:ToolkitScriptManager>

		    <h3>User Reigstration</h3>

		    Email:<br />

		    <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox><br />

		    Password:<br />

		    <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>

		    <ajaxControlToolkit:PasswordStrength ID="txtPassword_PasswordStrength" runat="server"

		        TargetControlID="txtPassword">

		    </ajaxControlToolkit:PasswordStrength>

		    <br />

		    Confirm Password:<br />

		    <asp:TextBox ID="txtConfirmPassword" runat="server" TextMode="Password"></asp:TextBox>

		    <ajaxControlToolkit:PasswordStrength ID="txtConfirmPassword_PasswordStrength" runat="server"

		        TargetControlID="txtConfirmPassword">

		    </ajaxControlToolkit:PasswordStrength>

		    <br />

		    <asp:Button ID="btnRegister" runat="server" Text="Register" />

		    <div>

		    </div>

		    </form>

		</body>

		</html>

This provides a result like something that you see here:

Output

This is the simplest form with default settings. But PasswordStrength is customizable via a set of properties. Here is a list and short description of its common properties. The full description is available here. Note that not all of these properties are very common and important.

DisplayPosition: -The relative position of the indicator to target control.
StrengthIndicatorType: Specifies the indicator type. You can use Text to show a text indicator or BarIndicator to show a visual bar indicator.
PreferredPasswordLength: Your preferred length for the password. This could be named MinimumPasswordLength to have a better meaning.
PrefixText: This text will be added before the indicator text when you set StrengthIndicatorType to Text.
TextCssClass: This CSS class will be applied to the indicator text display when you set StrengthIndicatorType to Text.
MinimumNumericCharacters: Minimum number of numeric characters in the password.
MinimumSymbolCharacters: Minimum number of symbol characters in the password.
RequiresUpperAndLowerCaseCharacters: Specifies if you prefer to have both lower case and upper case characters in the password.
TextStrengthDescriptions: A semi-colon separated list of text values that will be used as indicator text values when when you set StrengthIndicatorType to Text. You can insert from two to ten values. They will be used in the order of weakest to strongest.
TextStrengthDescriptionStyles: A semi-colon separated list of CSS classes that will be applied to the indicator when you set StrengthIndicatorType to Text. Note that the number of these styles must be equal to the number of text descriptions that you have set for TextStrengthDescriptions.
CalculationWeightings: A semi-colon separated list of numeric values that will be used to determine the strength characteristics. They must be four numbers and their summation must be 100.
BarBorderCssClass: A CSS class that will be applied to the border of indicator when you set StrengthIndicatorType to Text.
BarIndicatorCssClass: A CSS class that will be applied to the inner bar when you set StrengthIndicatorType to Text.

Having this background, let me customize this control in two ways. First I customize the first PasswordStrength control with text indicator and then customize the second one with the bar indicator.

For the first control I set some properties to control the length of the password and the minimum number of different characters in it. I also set its DisplayPosition property to show the indicator in the below right of the TextBox. The other property is PrefixText that I set it to "Your password is". I also set TextStrengthDescirptions property to a list of three values ("Weak", "Not Good" and "Good") and write three CSS classes with different background colors to set them in TextStrengthDescriptionStyles.

Updated version of my code is presented here.

		<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"

		 Inherits="PasswordStrengthSample._Default" %>

		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

		 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

		<html xmlns="http://www.w3.org/1999/xhtml">

		<head runat="server">

		    <title>PasswordStrength Sample</title>

		    <style>

		    .TextStrengthWeak

		    {

		        background: red;

		    }

		    .TextStrengthNotGood

		    {

		        background: yellow;

		    }

		    .TextStrengthGood

		    {

		        background: blue;

		    }

		    </style>

		</head>

		<body>

		    <form id="form1" runat="server">

		    <ajaxControlToolkit:ToolkitScriptManager runat="server">

		    </ajaxControlToolkit:ToolkitScriptManager>

		    <h3>User Reigstration</h3>

		    Email:<br />

		    <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox><br />

		    Password:<br />

		    <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>

		    <ajaxControlToolkit:PasswordStrength ID="txtPassword_PasswordStrength" runat="server"

		        TargetControlID="txtPassword" DisplayPosition="BelowRight"

		        PrefixText="Your password is " StrengthIndicatorType="Text"

		        MinimumNumericCharacters="1" MinimumSymbolCharacters="1" PreferredPasswordLength="6"

		        RequiresUpperAndLowerCaseCharacters="true" TextStrengthDescriptions="Weak; Not Good; Good"

		        TextStrengthDescriptionStyles="TextStrengthWeak; TextStrengthNotGood; TextStrengthGood">

		    </ajaxControlToolkit:PasswordStrength>

		    <br />

		    Confirm Password:<br />

		    <asp:TextBox ID="txtConfirmPassword" runat="server" TextMode="Password"></asp:TextBox>

		    <ajaxControlToolkit:PasswordStrength ID="txtConfirmPassword_PasswordStrength" runat="server"

		        TargetControlID="txtConfirmPassword">

		    </ajaxControlToolkit:PasswordStrength>

		    <br />

		    <asp:Button ID="btnRegister" runat="server" Text="Register" />

		    <div>

		    </div>

		    </form>

		</body>

		</html>

Output

In the second case I use a bar indicator to show the visual strength of the password. I keep same settings for the number of characters in the password but change the indicator position to above right.

There are two other properties that I need to set to activate the bar indicator and they are BarBorderCssClass and BarIndicatorCssClass that get two CSS class names for the indicator border and the indicator, itself.

		<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"

		 Inherits="PasswordStrengthSample._Default" %>

		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

		 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

		<html xmlns="http://www.w3.org/1999/xhtml">

		<head runat="server">

		    <title>PasswordStrength Sample</title>

		    <style>

		    .TextStrengthWeak

		    {

		        background: red;

		    }

		    .TextStrengthNotGood

		    {

		        background: yellow;

		    }

		    .TextStrengthGood

		    {

		        background: blue;

		    }

		    .BarBorder

		    {

		        border-style: dashed;

		        border-width: 2px;

		        width: 180px;

		    }

		    .BarIndicator

		    {

		        color: orange;

		        background-color: orange;

		    }

		    </style>

		</head>

		<body>

		    <form id="form1" runat="server">

		    <ajaxControlToolkit:ToolkitScriptManager runat="server">

		    </ajaxControlToolkit:ToolkitScriptManager>

		    <h3>User Reigstration</h3>

		    Email:<br />

		    <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox><br />

		    Password:<br />

		    <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>

		    <ajaxControlToolkit:PasswordStrength ID="txtPassword_PasswordStrength" runat="server"

		        TargetControlID="txtPassword" DisplayPosition="BelowRight"

		        PrefixText="Your password is " StrengthIndicatorType="Text"

		        MinimumNumericCharacters="1" MinimumSymbolCharacters="1" PreferredPasswordLength="6"

		        RequiresUpperAndLowerCaseCharacters="true" TextStrengthDescriptions="Weak; Not Good; Good"

		        TextStrengthDescriptionStyles="TextStrengthWeak; TextStrengthNotGood; TextStrengthGood">

		    </ajaxControlToolkit:PasswordStrength>

		    <br />

		    Confirm Password:<br />

		    <asp:TextBox ID="txtConfirmPassword" runat="server" TextMode="Password"></asp:TextBox>

		    <ajaxControlToolkit:PasswordStrength ID="txtConfirmPassword_PasswordStrength" runat="server"

		        TargetControlID="txtConfirmPassword" DisplayPosition="AboveRight"

		        StrengthIndicatorType="BarIndicator" MinimumNumericCharacters="1"

		        MinimumSymbolCharacters="1" PreferredPasswordLength="6"

		        RequiresUpperAndLowerCaseCharacters="true"

		        BarBorderCssClass="BarBorder" BarIndicatorCssClass="BarIndicator">

		    </ajaxControlToolkit:PasswordStrength>

		    <br />

		    <asp:Button ID="btnRegister" runat="server" Text="Register" />

		    <div>

		    </div>

		    </form>

		</body>

		</html>

Output

The last point to mention is, this control is just a visual indicator of password strength and can't guarantee it because it just shows the user how secure is his password. You need to implement your own validation mechanism to block poor passwords.

You can download the sample code for this post from here.

4 Comments

Girish Singh
Apr 04, 2008 7:34 AM
#

It is true that many of these controls are not actually much covered in many books. Nice code I must say. Another article that I found with a simple application of ajax toolkit was on

http://www.mabaloo.com/Web-Development/AJAX-with-ASP.NET-using-Visual-Studio-2005-and-AJAX-Toolkit.html

Here the author creates a simple employee database application was a web service and uses ajax on it