AJAX Control toolkit PasswordStrength Extender using C#
Looking for a Tutorial based on the AJAX control toolkit PasswordStrength Extender?
Test your Might! Well not really, want to add an easy and simple way to require stronger passwords to your website? Have some sensitive information you would like saved, and stored online? Then the PasswordStrength Control may be the tool for you!
This AJAX control is so easy to use you might end up using for all of your websites and projects,
The PasswordStrength Control Attaches to an ASP Textbox and with a use of a label you define where they password entered is sufficient enough per your standards. You can define how many characters are required. You can also require you password to include symbols as well, you can even enforce capitalization. By having a label message or text with some CSS styling you can display a meter of how strong the password is. The text messages that describe the current strength of the password can also be configured and their default values have localization support built-in. The second and third extenders’ strings are being pulled from Toolkit resources files
We encourage you to download the source code to follow the tutorial, as this control can get a little tricky you can then reference the code. Our goal is to make learning AJAX easy.
Step 1. Add a new webform
Let’s begin by opening Visual Studio 2010
Go ahead and add a new webform and we will name it PasswordStrength.aspx
Go to Design View
Step 2. Adding AJAX
Let’s Enable AJAX by dragging over the AJAX Control Tool Script Manager
Remember you must always add a Tool Script Manager to your webpage to enable the AJAX control toolkit feature.
Step 3. Design
We will begin by adding a Textbox. – Remember to set the Target ID of the TextBox; this will be the text box where you will enter your password.
Next let’s add a PasswordStrength Extender. You can either drag & drop or you can click on the tab tool to the right of the textbox, and you will be asked to add an extender. From there choose the Password Strength Extender.
Remember to set the Target controls and Properties.
Now let’s add a label control to the document, you can drag and drop this as well, let’s place right below, this label will aid your users, with instructions, for Example passwords need to needs to 7 characters long with 1 symbol and 1 capital letter.
Now we can add Styles to the textbox indicator, to spruce it up a bit.
You can find the Styles in the source code as well.
The markup of the page will look like
border: solid 2px #cccccc;
border-top: solid 2px #a0a0a0;
<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
<asp:Label ID="Label2" runat="server" Font-Bold="true" Font-Size="14px" Text="Enter Password: "></asp:Label>
<asp:TextBox CssClass="textbox" ID="TextBox1" runat="server" Width="200"></asp:TextBox>
<cc1:PasswordStrength runat="server" ID="PasswordStrength1"
TextStrengthDescriptions="Poor; Weak; Good; Strong; Excellent"
StrengthStyles="barIndicator_poor; barIndicator_weak; barIndicator_good; barIndicator_strong; barIndicator_excellent">
Load the page in the browser and it should look like this:
As you can see above, we added a Textbox and PasswordStrength Extender Below the TextBox you enter your password and you have a meter to the right gauging how strong the password is.
This Control is very flexible and should be used at every opportunity where password strength is needed, particularly on a high traffic website.