Personalizing a web site involves adding a variety of features to suit both the needs of the user and the site owner -- such as restricting some areas of a site and/or allowing users to register and log in. This article shows you how to personalize a site using Visual Basic 2005. It is excerpted from chapter 12 of the book Programming Visual Basic 2005, written by Jesse Liberty (O'Reilly, 2005; ISBN: 0596009496).
Contributed by O'Reilly Media Rating: / 7 November 16, 2006
One of the hallmarks of a professional web site is the ability for users to personalize the site to their individual needs. Personalization means that the site remembers the user and the user’s preferences, profile information, and so forth.
In addition to allowing users to personalize your site, you may want to limit their access based on their identity. To accomplish this, you may want your users to “log in.” While you can use Windows security on an intranet, the harder task has always been to create a complete authentication and authorization system for Internet applications where you can’t know in advance who will be logging in. This is called forms-based security, and Visual Basic 2005 makes it a snap, with a ready-to-go set of controls and a complete database for managing both your users login information and their preferences.
Implementing Forms-Based Security
To begin, create a new web application named FormsBasedSecurity. Click on Web-Site -> ASP.NET Configuration to open the Web Site Administration Tool (WAT). Click on the Security tab, as shown in Figure 12-1.
Under Users, click on the link “Select authentication” and choose “From the Internet” as opposed to “From a local network.” Then click the Done button. When you return to the Security tab, you’ll find that the Users section has changed considerably, as shown in Figure 12-2.
Click on Create User and create one user for your site, as shown in Figure 12-3.
Figure 12-1. Web Site Administration Tool
Figure 12-2.User's section
By default, passwords must be “strong,” which is defined as having at least six characters and including at least one element of at least three of the four types of characters: English upper case, English lower case, Arabic numerals, and special characters (e.g., !, @, etc.). This is fully documented in the MSDN article “Strong Password Enforcement.”
TheCreateUserWizardhas aPasswordRegularExpressionproperty that allows you to substitute your own regular expression to determine the characteristics of acceptable passwords.
When you click the Create User button, you will receive confirmation that the user has been created. Click the Back button and you are returned to the WAT, which reports faithfully that one user has been created. Close the WAT for now.
The user has been added to the SqlExpress personalization database, as we’ll explore in depth next. For an alternative approach, using IIS rather than the WAT, see the section “Creating the User Through IIS.”
As an alternative to using the WAT, you can work through IIS to create the same effect.
To begin, create an new empty directory calledFormsBasedSecurityIIS.
In IIS manager (accessed through the control panel), create a virtual directory namedFormsBasedSecurityIIS, as shown in Figure 12-4.
Figure 12-4.Creating virtual directory
Give the new virtual directory the alias “FormsBasedSecurityIIS” and on the second step of the wizard, browse to the physicalFormsBasedSecurityIIS folder you just created. After the virtual directory is created, click Properties.
In the Properties window, click on the ASP.NET tab, and then click Edit Configuration. Within the Configuration settings dialog, click on the Authentication tab. Within that tab, set the Authentication mode toForms, as shown in Figure 12-5. Confirm that the Membership provider class is set toAspNetSqlMembershipProvider.
Figure 12-5. Set Authentication mode to Forms
Click OK to close all the dialogs. A Web.config file is created for you in theFormsBasedSecurityIISdirectory, as shown in Example 12-1.
ASP.NET 2.0 Forms-built security is built on a set of tables that must be created in your database: typically SQL Server or SQL Server Express. Fortunately, ASP.NET provides a utility named aspnet_regsql.exe, located in the <Drive:>\Windows\ Microsoft.NET\Framework\<versionNumber> folder on your web server, which sets up the tables for you. This utility program will create the required database and all its tables.
The easiest way to use this utility is to run aspnet_regsql.exe from the .NET command box, with no arguments. A wizard will walk you through the process. For more details, see the MSDN article “Installing the SQL Server Provider Database.”
You are now ready to create a new web site in the same location. A dialog box will warn you that you already have a web site in that location; choose Open Existing Site, as shown in Figure 12-6.
Figure 12-6.Open existing site
This instructs Visual Studio to use the site you’ve created, complete with the Web. config file already available for that site.
Your initial goal is to have two pages: a default page that displays different information depending on whether users are logged in or not, and a login page that allows the user to log in.
To have users log in, however, you must first create accounts. Create a new page called CreateAccount.aspx. (Right-click on the application and choose Add New Item. Choose web form and set the name to CreateAccount.aspx).
Click on the Design tab for your page, and then click on the Login tab in the Toolbox. Drag an instance ofCreateUserWizardonto your page, as shown in Figure 12-7.
Figure 12-7. CreateUserWizard
TheCreateUserWizardprompts the user for a username, a password (twice), an email address, and a security question and answer. All of this is configurable through the HTML that is created by this control; through the Properties window; or, more commonly, through the smart tag, as shown in Figure 12-8.
Figure 12-8.CreateUserWizard tasks
Click on the control and scroll through the properties to find theContinueDestinationPageURL. Click the ellipses (...) button and choose the Create Account page itself (CreateAccount.aspx), so that you’ll be brought back to the same page after the new user is confirmed. Click on the Document and scroll down the Properties window to the title of the page to Create User. Finally, set the CreateAccount.aspx page as your Start page, and fire up the application.
Assuming you created this application, using the WAT as described earlier, you will be prompted to create a Web.config file. Click OK to add the new Web.config file with debugging enabled.
When the page opens, you will be prompted to add a new user, as shown in Figure 12-9.
Figure 12-9.Testing CreateAccountWizard
Remember to use a strong password, as explained earlier.
When you click Create User, the account is created, and you are brought to a confirmation screen. Click Continue, and you are brought back to the Create Account screen to create a second account. Add a couple of accounts, then stop the application and examine your database.
To see the profile database, click on ServerExplorer and make a connection to <machine>\sqlexpress.aspnetdb.dbo.
You should find that a database named aspnetdb with many tables, including theaspnet_Userstable. You can display it by right-clicking and choosing Show Table Data, as shown in Figure 12-10.
With your user database in place, you are ready to create the page that will welcome the logged-in user.
Create a new page called Welcome.aspx and drag aLoginStatuscontrol from the Login section of the Toolbox.
A link marked Login is placed on the page, whose smart tag indicates that you are looking at the template for when the user is not logged in, as shown in Figure 12-11.
Figure 12-11.Not logged in
You can set the properties of theLoginStatuscontrol, for example, to change the text of the link. You can also drop down the view window to see the link and text for Logged In status.
Drag aLoginViewcontrol from the Toolbox, and drop it onto the page below theLoginStatus control. Here you may enter text and controls that will be displayed based on whether or not the user is logged in. Notice that this control has two views: Anonymous Template and Logged In Template. The template that will be displayed depends on whether the user has logged in.
Click on the smart tag and confirm that the view is set to Anonymous Template and type some text in the box, as shown in Figure 12-12.
Figure 12-12. Not logged in view
Now set theLoggedInTemplate. Since the user will be logged in when this template is displayed, you can use theLoginNamecontrol to welcome the user by name. Drag theLoginNamecontrol onto theLoginViewtemplate, as shown in Figure 12-13.
You are now ready to create the Login page for users to log in to the system (after having created an account). Add a new page named Login.aspx. Change to Design view, and drag a Logincontrol onto the page. To make your page look more professional, click on theAutoFormatlink from the smart tag, as shown in Figure 12-14.
Figure 12-14.Formatting the Login control
Pick one of the predefined formats for the control, as shown in Figure 12-15.
Figure 12-15. Pick a Format for the Login control
Make sure that the Welcome page is the Start page and run the application. The Welcome page will display its “Not Logged In” message. Click the link to go to the login page.
Enter a false name and/or incorrect password. TheLogincontrol will display an error message explaining your mistake; as shown in Figure 12-16.
Figure 12-16.Incorrect Logins are caught
Enter the correct name and password and you are brought back to the Welcome page. Your status is noted as logged in, you are greeted by name, and you are offered the opportunity to log out, as shown in Figure 12-17.
To add a password reminder, you must first change your existing login control to a template by clicking on the smart tag and choosing “Convert to template,” as shown in Figure 12-18.
Figure 12-18.Convert to template
The display will change to a template that you can modify. Add a link titled (for example) Recover Password, as shown in Figure 12-19.
Set theNavigateURLto the name of the page that will hold yourPasswordRecoverycontrol, then click the smart tag and choose End Editing.
Your next step, of course, is to create the new .aspx page, RecoverPW.aspx. Drag aPasswordRecovery control onto the page, and click the smart tag to choose the view you wish to edit, as shown in Figure 12-20.
Set theSuccessPageUrlproperty to Login.aspx. You may also want to confirm or change the Success Text as well as the other text fields (QuestionInstructionText,QuestionLabelText, etc.).
Figure 12-19. Adding password hyperlink to Login Template
Figure 12-20. Password Recovery control
Please check back next week for the continuation of this article.