When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips
Search

Sections:
Book Reviews
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
Web Hosts
XML
Information:
Advertise
Feedback
Author an Article

ASP ASP.NET ASP FAQs Message Board Feedback
 
Print this Page!
Published: Wednesday, May 6, 2009

Customizing ASP.NET's CreateUserWizard Control To Display a Fixed Set of Security Questions

By Scott Mitchell


Introduction


ASP.NET's Membership system and its associated Web controls enable developers to create websites that support user accounts in a fraction of the time that it once did. In a nutshell, the Membership system and the specified provider handle the low-level details of creating a user account, validating a user's credentials, deleting an account, locking out an account, getting information about the currently logged on user, and so on. The associated Web controls, which are grouped under the Login section in the Visual Studio Toolbox, make creating typical user account-related user interfaces like login pages and registration pages as easy as drag and drop.

This article looks at one user account-related control in particular, CreateUserWizard. The CreateUserWizard control generates a user interface that enables a visitor to create a new account on the site. Specifically, the Countersignature renders a series of textboxes. What textboxes appear depend on the Membership provider settings, but when using the SqlMembershipProvider (which stores user account information in a Microsoft SQL Server database) the default settings generate six textboxes: one for the username, one for the password, one for confirming the password, one for the e-mail address, and one for both the security question and security answer.

The security question and answer are an additional form of security and represents a secret that only the registering user knows. For example, many sites include a page where a user who has forgotten his password can have it reset and e-mailed to him. You can reset a password via the MembershipUser class's ResetPassword method or by using the ASP.NET's PasswordRecovery control. Typically the user resetting their password is shown their security question and must correctly enter their security answer in order to proceed with the password reset.

It has been my experience that the default interface for the security question and answer in the CreateUserWizard control is suboptimal, especially for non-computer savvy users. It is not readily apparent what purpose the security question and answer textboxes fulfill. Also, by using a textbox you trust the user to enter a strong security question. I've seen users who use weak security questions that everyone knows the answer to, such as "What is 2 + 2?". These weak questions defeat the purpose of having a security question and answer in the first place. The good news is that it is remarkably easy to customize the CreateUserWizard control to provide more instructions concerning the security question and answer and to force the user to choose among a predefined set of security questions. Read on to learn more!

- continued -

Techniques for Customizing the CreateUserWizard Control


Out of the box the CreateUserWizard control generates a standard (albeit bland), two-step wizard for creating a new user account. As the following screen shot illustrates, the default user interface for the first step prompts the user for the information used to create a new account, including their username, password, e-mail address, and security question and answer. Each of these inputs is presented as a textbox allowing free-form entry.

The default CreateUserWizard control interface.

There are a few shortcomings of this default user interface. First, many registration collect additional information from the user, such as their country of residence, occupation, IM address, and so forth. Second, the security question is suboptimal for the reasons detailed in the Introduction. Rather than presenting the user with a textbox for the security question it would be ideal to include some text that explains the security question and have the user choose from a set of "approved" security questions. In other words, we want to update the CreateUserWizard's security question interface to look similar to the following:

The CreateUserWizard control's interface has been updated to include instructions and a fixed set of security questions.

As you can see in the screen shot above, the security question textbox has been replaced by a drop-down list of approved security questions. There's also a sentence explaining the purpose of the security question and answer. But how do we customize the CreateUserWizard to include our own set of security questions like this? Fortunately, the user account-related Web controls are very easy to customize.

The CreateUserWizard control can be customized in three primary ways:

  • By converting the Create User step (shown above) into a template, which allows for its markup to be highly customized. See Erich Peterson
  • 's article, Customizing the CreateUserWizard Control.
  • By adding one or more steps to the CreateUserWizard control's workflow. This method could be used to create a multi-step registration process, where the user is first prompted for the core information via the interface shown above. After entering that information and clicking "Create User" they'd be taken to an additional step with a user interface for collection information like the user's country of origin, IM address, and so on. For more details on this method see my tutorial, Storing Additional User Account Information (VB Version) (C# Version).
  • By creating event handlers. The CreateUserWizard control raises events at different points in its lifecycle - when moving from one step to another, when creating the account, and so on. You can create event handlers for these events and override or customize the control's behavior.
This article focuses on how to customize the security question portion, which is already in the Create User step. Therefore, we will use the first technique - converting the Create User step (shown above) into a template - to change the security question user interface from a textbox into a drop-down list.

Converting the Create User Step Into A Template


Converting the CreateUserWizard control's Create User step into a template is a cinch. Start by adding the CreateUserWizard control to an ASP.NET web page. Next, from the Designer, expand the CreateUserWizard control's smart tag and click the "Customize Create User Step" link.

Convert the Create User step into a template by selecting the Customize Create User Step option from the smart tag.

Clicking this smart tag option converts the Create User step from the following markup:

<asp:CreateUserWizard ID="CreateUserWizard1" runat="server">
   <WizardSteps>
      <asp:CreateUserWizardStep runat="server" />
      <asp:CompleteWizardStep runat="server" />
   </WizardSteps>
</asp:CreateUserWizard>

Into a template where you can view and modify the HTML and Web controls that makeup the user interface.

<asp:CreateUserWizard ID="CreateUserWizard1" runat="server"
   ContinueDestinationPageUrl="~/Default.aspx">
   <WizardSteps>
      <asp:CreateUserWizardStep runat="server">
         <ContentTemplate>
            <table border="0">
               <tr>
                  <td align="center" colspan="2">
                     Sign Up for Your New Account</td>
               </tr>
               <tr>
                  <td align="right">
                     <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">User Name:</asp:Label>
                  </td>
                  <td>
                     <asp:TextBox ID="UserName" runat="server"></asp:TextBox>
                     <asp:RequiredFieldValidator ID="UserNameRequired" runat="server"
                        ControlToValidate="UserName" ErrorMessage="User Name is required."
                        ToolTip="User Name is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
                  </td>
               </tr>
               ... A heckuva lot of content removed for brevity ...
         </ContentTemplate>
      </asp:CreateUserWizardStep>

      <asp:CompleteWizardStep runat="server" />
   </WizardSteps>
</asp:CreateUserWizard>

As expected, the security question user interface uses a TextBox control named Question and a RequiredFieldValidator to ensure that the user supplies a security question.

<asp:TextBox ID="Question" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="QuestionRequired" runat="server"
   ControlToValidate="Question" ErrorMessage="Security question is required."
   ToolTip="Security question is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>

To update the CreateUserWizard control's interface to include a fixed set of security questions, simply replace the above markup with a DropDownList control named Question and populated with the approved security questions. That part is important - make sure you set the DropDownList control's ID property to Question. You can also add any instructional text.

<asp:DropDownList ID="Question" runat="server">
   <asp:ListItem>What is your mother's maiden name?</asp:ListItem>
   <asp:ListItem>In what city were you born?</asp:ListItem>
   <asp:ListItem>What is your favorite sport?</asp:ListItem>
   <asp:ListItem>How much wood could a woodchuck chuck if a woodchuck could chuck wood?</asp:ListItem>
</asp:DropDownList>
<br />
<i>If you forget your password you will be asked the security question you choose here and prompted to enter the
answer you specify below.</i>

That's all there is to it! With that one change, the CreateUserWizard control's Create User step now includes a drop-down list with four security question choices. When creating an account, the user can select the question they want to answer and type their answer in the security answer textbox. The CreateUserWizard control saves the text of the selected security question along with the user's answer in the Membership system. Consequently, if the user attempts to reset their password they'll be asked the same security question they chose when registering their account.

The demo available for download at the end of this article includes a sample website with pages for signing in, for creating a new account, and for resetting a password. The following screen shot shows the CreateUserWizard control when creating an account for Scott. Note that I chose the security question "How much wood could a woodchuck chuck if a woodchuck could chuck wood?" and entered my answer as, "A lot!"

Scott is creating a new account and choosing a security question from the drop-down list.

Users who have misremembered their password can have it reset from the Forgot Password page (RecoverPassword.aspx), which uses the PasswordRecovery Web control. From this page the visitor - who is most likely anonymous - is prompted for their username. After entering that, the PasswordRecovery control displays the user's security question and prompts for the answer. As you can see, Scott is prompted with the security question "How much wood could a woodchuck chuck if a woodchuck could chuck wood?"

Before resetting his password Scott must enter his answer to the security question he selected.

What's Happening Behind The Scenes


It may come as a bit of a surprise that customizing the CreateUserWizard control to display a fixed set of security questions only required replacing the TextBox in the template with a DropDownList. When the user clicks the Create User button, the CreateUserWizard control gathers up their input and interfaces with the Membership API to create the new user account. It gathers up the user's input by searching the template for appropriately named Web controls. It expects the security question control to be named Question, which is why it was important that we set the DropDownList control's ID property to Question. In short, any Web control that implements the ITextControl interface (as the TextBox and DropDownList controls do) and is appropriately named can be substituted for the default TextBox interface. (If you do not want to name the new Web control by the predefined name, or if the user interface element does not implement ITextControl, you'll need to manually gather the user's inputs and programmatically create the user in the CreateUserWizard control's CreateUser event handler.)

Our replacement of the TextBox with a DropDownList did not affect the internal behavior of the CreateUserWizard control, which is why everything worked as expected even with our custom Create User step. Pretty neat, eh?

Happy Programming!

  • By Scott Mitchell


    Attachments:


  • Download the Demo Code Used in this Article

    Further Reading:


  • Examining ASP.NET 2.0's Membership, Roles, and Profile
  • Website Security Tutorials
  • Creating User Accounts (VB Version) (C# Version)
  • Customizing the CreateUserWizard Control
  • Storing Additional User Account Information (VB Version) (C# Version)


  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article