ASP.NET 2.0 comes with several new security controls (located under the Login tab in the Toolbox; see Figure 1) that greatly simplify the life of a Web developer. Using the new security controls, you can now perform tasks such as user logins, registration, password changes, and more, with no more effort than dragging and dropping controls onto your Web form.
In this article, I will show you how you can use these new controls to perform user authentication.
To begin, lets explore using the LoginView, LoginStatus and LoginName controls. First, let's build a Web project using Visual Studio 2005 Beta 2, so go ahead and launch the Visual Studio IDE. From the File menu, click New Web Site to create a new Web project. Name the project C:\SecurityControls.
You need to set the ContinueDestinationPageURL property of the CreateUserWizard control so that when the Continue button is clicked the user can be redirected to another page, such as a welcome page.
In the Default.aspx Web form, drag and drop the LoginView control. The LoginView control is a container control that displays different information depending on whether the user is logged in or not.
Populate the LoginView control with the text shown in Figure 2. Also, drag and drop the Login control onto the LoginView control. The text that you have just typed will be displayed when the user is not yet authenticated (anonymous). The Login control displays a link to allow the user to be redirected to another page to log into the application.
In the Smart Tasks menu of the LoginView control, change the Views to "LoggedInTemplate" (Figure 3).
With the view changed, enter the text shown in Figure 4 into the LoginView control. This text will be displayed once the user has been authenticated. Drag and drop the LoginName control onto the LoginView control. The LoginName control will display the name of the user that is used to log into the application.
Using the Login Control
Let's now add a new Web form to the project (right-click on project name in Solution Explorer and select Add New Item...) and name it Login.aspx. Your application will use this form to let users log into the application.
Note that the passwords of users are Salt Hashed before they are stored in the Password field of the aspnet_Membership table.
Drag and drop the Login control onto Login.aspx. You can apply formatting to the Login control to make it look more professional. Click on the Smart Tag of the Login control and select the Auto Format...link (Figure 5).
Select the Colorful scheme and the Login control should now look like Figure 6.
By default, ASP.NET 2.0 uses Windows authentication, which is not very flexible if you are targeting Internet users. And so you will change the default authentication mode from Windows to Forms.
Add a Web.config file to your project (right-click on project name in Solution Explorer and select Add New Item.... From the list of available choices select Web Configuration File).
In Web.config, change the authentication mode from Windows to Forms by adding the following line of code. You use forms authentication so that you can add users to your Web site without needing to create the user accounts in Windows.
<system.web>
<authentication mode="Forms"/>
...
Adding a New User to Your Application
Before you proceed to test the application, you need to create a new user for the application. You can use the ASP.NET Web Site Administration Tool (WAT) to add a new user to your application. To invoke the WAT, select Website and then choose ASP.NET Configuration (Figure 7).
The WAT will be displayed in a new Web page. Click the Security link to go to the Security tab (Figure 8).
The Security tab allows you to perform tasks such as creating and deleting users as well as creating roles and access rules for your application. Click on the Create user link to add a new user to your application (Figure 9).
Supply the required information for the new user account (Figure 10). Note that the password must have a combination of numeric, alphabetical, and special characters. Be sure to supply at least seven characters for the password. Click Create User to add the new user.
You are now ready to test the application. Select Default.aspx in Solution Explorer and press F5. Click the Login link to log into the application and then enter the account information. When you have successfully logged into the application, the Login link changes to Logout. Figure 11 shows the sequence of events.
Creating New Users
Besides creating user accounts for users, you can also allow users to create new accounts themselves. This is useful in scenarios where you allow users to create free accounts in order to access your application, such as in a discussion forum.
To allow users to create new accounts, use the CreateUserWizard control. Drag and drop the CreateUserWizard control onto Default.aspx and apply the Colorful scheme. The control should now look like Figure 12.
To test the application, press F5. You can now create a new user account yourself (Figure 13). Supply the needed information and click Create User.
When the user is created successfully, you will see the screen as shown in Figure 14.
Where Is the User's Information Stored?
So far you have seen how to create users using the WAT as well as using the CreateUserWizard control. You're probably wondering where this information is stored. If you now examine the Solution Explorer and refresh the App_Data folder (right-click on it and select Refresh Folder), you will see an item named ASPNETDB.MDF (Figure 15).
The ASPNETDB.MDF is a SQL Server 2005 Express database that ASP.NET 2.0 uses by default to store application-related data such as user accounts, profiles, etc. To examine the database, double-click it and you'll see its content displayed in the Database Explorer (Figure 16). Specifically, the aspnet_Membership and aspnet_Users tables will store the user accounts information that you have just created in the previous sections. To view the content of the tables, right-click on the table name and select Show Table Data.
One really nice feature of ASP.NET 2.0 is that there is no need to create custom databases to store your users' information. And you don't even need to worry about hashing the users' password to store them securely. ASP.NET 2.0 does this automatically for you.
Recovering Lost Passwords
Recovering/resetting lost passwords is a common task that you need to perform as an administrator. The PasswordRecovery control allows users to perform this mundane task themselves by automatically retrieving the password and then sending it to the user via e-mail.
Password recovery makes sense only if you store the password as plain text and not its hashed value. However, by default, the settings in the machine.config file specify that all passwords be hashed before they are stored in the member database. Machine.config also disables password retrieval by default.
To store the user's password in plain text, add the following entry in Web.config.
...
<system.web>
<membership
defaultProvider="SqlProvider"
userIsOnlineTimeWindow="15">
<providers>
<clear />
<add
name="SqlProvider"
type="System.Web.Security.
SqlMembershipProvider"
connectionStringName="LocalSqlServer"
applicationName="SecurityControls"
enablePasswordRetrieval="true"
enablePasswordReset="true"
requiresQuestionAndAnswer="true"
requiresUniqueEmail="true"
passwordFormat="Clear" />
</providers>
</membership>
...
Specifically, you are clearing all the Membership Providers and then adding a new SqlMembershipProvider. Note that you need to set the enablePasswordRetrieval (to true) and passwordFormat (to Clear) attributes in order to allow passwords to be retrieved.
If you set the passwordFormat as Hashed, then you must set enablePasswordReset to false.
Now drag and drop the PasswordRecovery control onto Default.aspx and then apply the Colorful scheme. The PasswordRecovery control now looks like Figure 17.
In the Properties window of the PasswordRecovery control, set the From and Subject fields under the MailDefinition property as shown in Figure 18.
You also need to have SMTP service configured on your machine for the PasswordRecovery control to send an e-mail. To configure SMTP service on your machine, start WAT, choose Application, then choose Configure SMTP e-mail settings.
To test the application, press F5. You will be prompted for your user name and then your security question. If the answer to the security question is correct, the password will be e-mailed to you; otherwise you will get an error message on the page like that shown in Figure 19.
For security reasons, it is not a good idea to send a user's password through e-mail. Hence, you really need to consider using this option very carefully.
Changing Passwords
Besides recovering lost passwords, you also need to allow users to change their passwords. In ASP.NET 2.0, you can do so using the ChangePassword control.
Since a user can only change their password after they have logged in, you will now create a new folder in your application that is accessible to only authenticated users.
You can add a new folder to your application by right-clicking on the project name in Solution Explorer, choose Add Folder, and then choose Regular Folder. Name the folder "Members." Now add a new Web form to this new folder (right-click on Members and then select Add New Item...). Name the new Web form ChangePassword.aspx (Figure 20).
To restrict accesses to the Members folder, add the following <location> element to Web.config.
...
</system.web>
<location path="Members">
<system.web>
<authorization>
<deny users="?" />
</authorization>
</system.web>
</location>
</configuration>
Essentially, pages within the Members folder are only accessible to authorized users (all anonymous users (?) will be denied access).
Drag and drop the ChangePassword control onto ChangePassword.aspx and apply the Colorful scheme (Figure 21).
To test the application, in Solution Explorer select the ChangePassword.aspx file in the Members folder and press F5. You will first be redirected to the login.aspx page (for authentication) and once authenticated the ChangePassword.aspx page will be loaded. You can now change your password (Figure 22).