Allowing Visitors to Create New User Accounts

Although you can create user accounts through the ASP.NET Website Administration Tool, chances are you'll want to also allow users to create accounts on their own. This process can be handled by ASP.NET's CreateUserWizard login control, which provides a user interface very similar to that shown in the ASP.NET Website Administration Tool's Create User screen shown in Figure 20.4.

Let's create a new ASP.NET page in our website named CreateAccount.aspx. Add to the top of this page the text Create an Account and then drag the CreateUserWizard control from the Toolbox onto the page. (The CreateUserWizard control, along with the entire suite of login Web controls, can be found in the Login section of the Toolbox.) Figure 20.10 shows Visual Web Developer after this control has been added to the ASP.NET page.

Figure 20.10. The CreateUserWizard login control allows the user to create an account.

The CreateUserWizard control is a wizard Web control. Wizard Web controls consist of a number of steps that the user progresses through. By default, the CreateUserWizard has two steps: Sign Up for Your New Account and Complete. The first step prompts the user to choose a username, password, email, and security question and answer, just as we did when creating the user through the ASP.NET Website Administration Tool. The user is taken to the Complete step after successfully creating an account; this step simply displays a Your account has been created message. You can toggle between the two steps through the CreateUserWizard control's smart tag.

Take a moment to try out the CreateUserWizard control in your browser. When you first visit the page, you'll see the Sign Up for Your New Account step. After entering your user account and clicking the Create User button, you'll be taken to the Complete step, informing you that your new account has been created. In addition to creating a new account, the user is also logged in as this newly created account.

Along with a message, the Complete step includes a Continue button. If you try to click it, you'll see that nothing happens. If you want the user to be whisked to a particular page after clicking this button, simply set the control's ContinueDestinationPage property to the appropriate URL. For our site, when the user clicks the Continue button, let's have him automatically sent back to Default.aspx; therefore, set the ContinueDestinationPage property to Default.aspx.

Customizing the CreateUserWizard Control

The CreateUserWizard control contains a cornucopia of properties that can be tweaked to customize the appearance. These appearance-related properties can be broken down into the following three classifications:

• Properties that dictate the control's colors, fonts, and borders.

• Properties that specify the text used for the user interface elements in the control. This includes elements like the labels preceding each text box, the default text in the text boxes, the text displayed in the buttons, and so on.

• Properties that indicate what bits of information are collected by the Create User Account Wizard.

Let's examine some of the more interesting properties from each of these classifications.

Adjusting the Control's Colors, Fonts, and Borders

Throughout this book we have seen many examples of properties that tweak a control's colors, fonts, and borders. Like virtually all other Web controls, the CreateUserWizard control has the common set of aesthetic properties, which include BackColor, ForeColor, Font, and so on. There are also a number of properties in the Styles section of the Properties window that define the appearance for various portions of the control.

For example, if you want to have each of the text box labelsUser Name, Password, Confirm Password, E-mail, and so ondisplayed in red using a bold font, you could set the LabelStyle property's ForeColor and Font subproperties accordingly. To customize the appearance of the text at the top of each stepSign Up for Your New Account and Completeuse the TitleTextStyle property.

Did you Know?

Rather than manually setting these properties directly, I often start with the Auto Format option from the CreateUserWizard control's smart tag, which will set a number of these appearance-related properties. After Auto Format has done most of the work, I make any adjustments needed.

Specifying the Text for the Labels, Text Boxes, and Buttons

By default, the CreateUserWizard control labels each text box with text such as User Name, Password, Confirm Password, E-mail, and so on. Furthermore, it specifies default text for the error messages that may be displayed if the user enters an invalid email address or does not correctly duplicate her password in the Confirm Password text box. These defaults are all customizable through the control's properties, along with the text displayed in the Create User and Continue buttons. You can even provide default values for the text boxes in the create user step, if you so desire.

Table 20.1 lists a number of the properties that can be set to customize the labels, text boxes, and buttons in the control. For brevity, not all properties that fall into this classification are listed.

Table 20.1. The Text in the Labels, Text Boxes, and Buttons Can Be Customized

Property Name	Description
UserNameLabelText	Specifies the text displayed for the username text box label. (Defaults to User Name:.)
UserName	Provides the default value displayed in the username text box. (Empty, by default.)
PasswordLabelText	Specifies the text displayed for the password text box label. (Defaults to Password:.)
ConfirmPasswordLabelText	Specifies the text displayed for the confirm password text box label. (Defaults to Confirm Password:.)
EmailLabelText	Specifies the text displayed for the email text box label. (Defaults to E-mail:.)
Email	Provides the default value displayed in the email text box. (Empty, by default.)
QuestionLabelText	Specifies the text displayed for the security question text box label. (Defaults to Security Question:.)
Question	Provides the default value displayed in the security question text box. (Empty, by default.)
AnswerLabelText	Specifies the text displayed for the security answer text box label. (Defaults to Security Answer:.)
Answer	Provides the default value displayed in the security answer text box. (Empty, by default.)
CreateUserButtonText	Specifies the text displayed in the Create User button.
ContinueButtonText	Specifies the text displayed in the Continue button.
UserNameRequiredErrorMessage	Specifies the error message that is displayed if the user does not provide a username. (Defaults to User Name is required.)
PasswordRequiredErrorMessage	Specifies the error message that is displayed if the user does not provide a password. (Defaults to Password is required.)
EmailRequiredErrorMessage	Specifies the error message that is displayed if the user does not provide an email address. (Defaults to E-mail is required.)

In addition to UserNameRequiredErrorMessage, PasswordRequiredErrorMessage, and EmailRequiredErrorMessage, there are a number of other error message properties. You can find all of them in the Validation section of the Properties window. In the next section we'll explore some properties that can prohibit certain questions from being asked, such as the user's email address. If the user is not prompted for his email address, then the EmailRequiredErrorMessage property becomes moot.

Dictating What Information Users Must Provide

By default, the CreateUserWizard control requires that the user provide a username, password, email address, and security question and answer to be able to create a new account. You can, however, decide whether to prompt the user for an email address or password. In the Behavior section of the Properties window, you'll find the AutoGeneratePassword and RequireEmail Boolean properties.

When RequireEmail is true (the default), the user is prompted to enter an email address when signing up. If you do not need to know the user's email address, you can set RequireEmail to False. I recommend leaving this property as true because it provides a communication channel between you and the user. Furthermore, various login Web controls, including the CreateUserWizard, provide the ability to email an informational message to the user. Of course, for this functionality to be utilized, the user's email address must be known.

The AutoGeneratePassword property, if true, does not prompt the user to enter and confirm a password; rather, the system automatically creates a random password. When AutoGeneratePassword is False (the default), the user chooses her own password.

A usability concern with assigning a random password is how to inform the user of this new password. That is, imagine that you set the AutoGeneratePassword property to true, thereby removing the Password and Confirm Password text boxes from the user interface. After the user enters his username, email address, and security question and answer, and clicks the Create User button, an account is created with a random password and the user is logged in. The problem is, the user doesn't know his password! How will he log back in to the site at some later point in time?

The common solution is to email the user his new, randomly selected password after he has created his account, along with instructions on how to change his password. To accomplish this, the CreateUserWizard control provides a MailDefinition property that can be configured to send an email to the user after he's created his account.

Emailing Users a Message After Creating Their Accounts

The CreateUserWizard control can optionally send an email message to the user who just created the account. This email message can provide the user with her username and password, along with any instructions and information necessary. To provide this functionality, the website must be configured to support sending email; we examined how to accomplish this earlier in this hour in the "Configuring a Website's SMTP Settings" section.

To send an email to new users, we must first define the content of the email message in a file. This file must exist within the website project and can be a text file or an HTML file, depending on whether you want the email message to be plain-text or HTML-formatted. In this file we can optionally use the placeholders <%UserName%> and <%Password%> to indicate where the user's username and password should appear.

Imagine that we wanted to send a user a plain-text email message that invited him to our site and contained just his username. We could accomplish this by creating a new text file in our website project with the contents shown in Listing 20.1. If, instead, we wanted to provide an HTML-formatted email that listed, say, both the user's username and password in a bulleted list, we could create an HTML file in our website project that contained the markup shown in Listing 20.2.

Did you Know?

To add a text file or HTML page to your website, right-click on the project name in the Solution Explorer and choose the Add New Item menu option. In the Add New Item dialog box, you'll find Text file and HTML page file types.

Listing 20.1. This Plain-text Email Includes the User's Username

1: Hello <%UserName%>! 2: 3: You have just created a new account on MySite.com. Thanks! 4: You can login at any time by visiting http://MySite.com/Login.aspx 5: 6: If you have any problems logging in, please contact [e-mail]. 

Listing 20.2. This HTML-formatted Email Includes Both the Username and Password

[View full width]

 1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd">  2: <html xmlns="http://www.w3.org/1999/xhtml" >  3:   <head>  4:     <title>Welcome to My Website!</title>  5:     <style type="text/css">  6:       body { font-family: Verdana; font-size: medium; }  7:     </style>  8:   </head>  9:   <body> 10:     <h1> 11:       <span style="color: #990000; ">Welcome to My Website!</span> 12:     </h1> 13:     <p> 14:         According to our records you have created a new account on our website. Your login 15:         information is: 16:     </p> 17:     <ul> 18:         <li>Username: <%UserName%></li> 19:         <li>Password: <%Password%></li> 20:     </ul> 21:     <p style="text-align: center"> 22:         If you have any questions, please email me at </span> 23:         <a href="mailto:[e-mail]"><em>[e-mail]</em></a> 24:     </p> 25:   </body> 26: </html> 

After the contents of the email message have been defined in a separate file, having the CreateUserWizard send the email message is as simple as setting a few subproperties in the control's MailDefinition property. The MailDefinition has four germane subproperties:

• BodyFileName This is the name of the file that contains the email body of the message sent to the user who created the account.

• From The from address of the email sent to the user. Recall that when the website was configured to support email, we specified a default from address. If you want this default from address used, simply leave this subproperty blank.

• IsBodyHtml A Boolean property that indicates whether the email is sent as HTML-formatted or as plain-text. It defaults to False, meaning emails are sent as plain-text.

• Subject The subject of the email message.

After these properties have been set, any newly created user will automatically receive an email. Figure 20.11 shows the email message received when the HTML-formatted email template from Listing 20.2 is used.

Figure 20.11. The email message sent to new user accounts.

Creating Inactive User Accounts

Whereas most sites allow users to create a new account by simply providing a username, password, and email address, some sites are more selective about their membership and want to make members inactive by default. An inactive member cannot log in to the site until she is made active. Recall that in the ASP.NET Website Administration Tool's Manage Users screen, shown in Figure 20.5, we could mark users active or inactive.

By default, newly created user accounts are active, but this is configurable through the CreateUserWizard control's DisableCreatedUser property. By default, this is set to False, which means the created user is not made inactive. However, to make the user inactive, simply set this property to true. As you may have guessed, when this property is set to true, the user is not automatically logged in after creating her account.

Did you Know?

If you make newly created users inactive, rather than redirecting them to the site's home page after creating a new account, you may want to send them to a page that explains that their account is currently inactive. This page should also include the policies used by your site to determine whether a user is marked as active.

Furthermore, if you send an instructional email, as discussed in the "Emailing Users a Message After Creating Their Accounts" section, be sure to inform the users that their account is currently inactive.