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!
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.
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:
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.
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.
Clicking this smart tag option converts the Create User step from the following markup:
<asp:CreateUserWizard ID="CreateUserWizard1" runat="server">
|
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"
|
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>
|
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">
|
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!"
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?"
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!
Attachments:
Further Reading:
