MENU

Check Password Strength Using Ajax in ASP.NET

Filed Under: , on
In modern application it becomes important to protect personal account information and for this their is an option known as password strength. In this article we will learn about the Ajax PasswordStrength Checker control which shows the message based on the password policy we have set.
The following are some of the common properties of the Ajax PasswordStrength control:
  • BarBorderCssClass: Used to set custom css class for border of PasswordStrength control.
  • BarIndicatorCssClass: Used to set custom css class for password strength Bar Indicator.
  • CalculationWeightings: Set the Calculation Weightings for strength Bar Indicator.
  • DisplayPosition: Sets the display position for strength indicator ,default is right.
  • HelpHandleCssClass: Sets the CSS class for help link.
  • HelpHandlePosition: Sets the help link position,default is AboveRight.
  • HelpStatusLabelID: sets the help status Lable Id.
  • MinimumLowerCaseCharacters: Defines the how many minimum lower case letter in password.
  • MinimumNumericCharacters: Defines how many numeric characters in password.
  • MinimumSymbolCharacters: Defines minimum occurrences of Special symbol characters.
  • MinimumUpperCaseCharacters: Defines the how many minimum upper case letter in password.
  • PreferredPasswordLength: Defines the length of the password.
  • PrefixText: Defines prefix for password which should be start from prefix.
  • RequiresUpperAndLowerCaseCharacters: Specifies whether the password must required both upper and lower case characters .if yes then required ,if no then not required.
  • StrengthIndicatorType: Defines the strenght indicator type whether it will be BarIndicator or Text.
  • StrengthStyles: Used to specify CSS class for strength indicator.
  • TextCssClass: Used to specify CSS class for text.
  • TextStrengthDescriptions: Used to specify text to describe password strength such as good,strong ,very strong etc.
  • TextStrengthDescriptionStyles: Used to specify CSS class for strength indicator text description.
I hope you got the basic Idea about the Ajax control Toolkit password strength control.

Now let us see the preceding explanation by creating a sample web application as in the following:
  1. "Start" - "All Programs" - "Microsoft Visual Studio 2010".

  2. "File" - "New Project" - "C#" - "Empty WebSite" (to avoid adding a master page).

  3. Provide the website a name: "UsingPasswordStrengthValidator" or another as you wish and specify the location.

  4. Then right-click on the Solution Explorer and select "Add New Item" and Add Web Form.

  5. Drag and drop one Button, a TextBox onto the
    section of the Default.aspx page.
  6. Add the reference of Ajax Control toolkit from nuget or directly from the official website of Ajax Control toolkit. To add using the nuget package manager, type ajax control toolkit in NuGet package manager search and click on search button. Here's a screenshot for making things clear:
ajax control toolkit

7.  After installing, the Ajax control will get added automatically into the toolbox. Now click on upper right hand corner of the textbox and add the PasswordStrength control to textbox control as in the following screenshot:

PasswordStrength

Now the default.aspx page source code will look like the following:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>    
        
    <!DOCTYPE html>    
        
    <html xmlns="http://www.w3.org/1999/xhtml">    
    <head runat="server">    
        <title></title>    
    </head>    
    <body>    
        <form id="form1" runat="server">    
            <div>    
                <table style="margin-top: 30px">    
                    <tr>    
        
                        <td>Enter Password    
                        </td>    
                        <td>    
                            <asp:TextBox ID="txtPassword" TextMode="Password" runat="server"></asp:TextBox>    
        
                            <ajaxToolkit:PasswordStrength ID="txtPassword_PasswordStrength" runat="server" BehaviorID="txtPassword_PasswordStrength" TargetControlID="txtPassword" />    
        
                        </td>    
                    </tr>    
                </table>    
            </div>    
        
        </form>    
    </body>    
    </html>

Now let us set PasswordStrength control properties:
  • PreferredPasswordLength : 10
  • MinimumLowerCaseCharacters : 2
  • MinimumUpperCaseCharacters : 2
  • MinimumNumericCharacters : 2
  • RequiresUpperAndLowerCaseCharacters : True
  • StrengthIndicatorType : Text.
After setting the values for PasswordStrength control, the code will look like the following:
<ajaxToolkit:PasswordStrength ID="txtPassword_PasswordStrength" runat="server"   
BehaviorID="txtPassword_PasswordStrength" TargetControlID="txtPassword"  
 MinimumLowerCaseCharacters="2" MinimumNumericCharacters="2"   
MinimumUpperCaseCharacters="2" PreferredPasswordLength="10" />

Now let us run the application, and enter some different text as we defined in properties. Here's the screenshot:

run the application
After entering one more character (.), the strength of the password will look like the following screenshot:

enter one more character
Now enter the passwords which is like the one defined under the properties of PasswordStrength control. After that it will show the following message:

Enter password
The complete Default.aspx code is given below: 

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>    
        
    <!DOCTYPE html>    
        
    <html xmlns="http://www.w3.org/1999/xhtml">    
    <head runat="server">    
        <title></title>    
    </head>    
    <body>    
        <form id="form1" runat="server">    
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>    
            <div>    
                <table style="margin-top: 30px">    
                    <tr>    
        
                        <td>Enter Password    
                        </td>    
                        <td>    
                            <asp:TextBox ID="txtPassword" TextMode="Password" runat="server"></asp:TextBox>    
        
                            <ajaxToolkit:PasswordStrength StrengthIndicatorType="Text" ID="txtPassword_PasswordStrength" runat="server" BehaviorID="txtPassword_PasswordStrength" TargetControlID="txtPassword" MinimumLowerCaseCharacters="2" MinimumNumericCharacters="2" MinimumUpperCaseCharacters="2" PreferredPasswordLength="10" />    
        
                        </td>    
                    </tr>    
                </table>    
            </div>    
        
        </form>    
    </body>    
    </html>

From all the above examples we learned about the Password Strength control.
Notes 
  • Please add Ajax control toolkit dll reference as shown in this article.
  • Don't forget to give the reference of Script manager.
Summary
From all the preceding examples you have learned about the Password Strength control. I hope this article is useful for all readers. If you have a suggestion then please contact me or mention it in the comments section.

Post a Comment

www.CodeNirvana.in

Protected by Copyscape
Copyright © Compilemode