Building a Web Site with Membership and User Login

• Download source - 238.5 KB

Introduction

A basic obligation for Web sites is to permit only some members or only authenticated users to access certain pages and perform desired operations. In such case, the application must ask the user for his/her user name and password. The application must also embrace a way to conceal information from anonymous users (users who are not logged in/not authenticated/guest users). In this article, I'll show you how to use ASP.NET controls and ASP.NET membership services to create an application that executes all these responsibilities.

What This Article Consists Of?

1. How to configure an application to comprise ASP.NET membership services.
2. How to define users.
3. How to use login controls to get user credentials and to display information to logged-in users
4. How to shield one or more pages in an application so that only logged-in (authenticated) users can access them.
5. How to permit new users (Guest users) to register at your site.
6. How to permit members (authenticated) to change and reset their passwords.

What You'll Need For It?

1. Microsoft Visual Studio 2005 profession edition
2. Microsoft Internet Information Services (IIS) installed locally on your computer (For more information, see the next section "How to install IIS")
3. SQL Server Express Edition installed locally on your computer
4. Microsoft Data Access Components (MDAC) version 2.7 or later. If you are using Microsoft Windows XP or Windows Server 2003, you already have MDAC 2.7. However, if you are using Microsoft Windows 2000, you might to need to upgrade the MDAC already installed on your computer. For "Microsoft Data Access Components (MDAC) Installation", visit this link.
5. Access to an e-mail server that can forward e-mail messages. (The server does not have to be able to receive messages.) IIS includes the Default SMTP virtual server, a mail server that is suitable for this article. For configuring this server, visit this link.

How to Install ISS?

1. Click on Start Menu, choose control panel
2. Click on Switch to classic view link
3. Click on Add or Remove Programs icon
4. Click on Add/Remove Windows Components icon. Windows components wizard appears on the screen as shown in the following figure:

   

5. Double Click on Internet Information Services (IIS) option:

   

6. Select all the check boxes and click on OK button
7. Click on Next button; it starts configuring the selected components
8. If everything goes correctly; you'll get the message like "you have successful completed the windows components wizard"
9. Finally click on Finish button

Building the Website

Build a new Web site and your first web page by following these steps.

To Build a Local IIS Web Site

1. Open Visual Studio 2005.
2. On the File menu, click New option, and on sub menu click Web Site option. The New Web Site dialog box appears.
3. Under Visual Studio installed templates, select ASP.NET Web Site.
4. In the Location list box, select HTTP. Click Browse. The Choose Location dialog box appears.
5. Select Local IIS.
6. Open Local Web Servers.
7. Select Default Web Site.
8. Click the Create New Web Application icon () above the list of Web sites and then name the new Web site membership.
9. Click Open. The Choose Location dialog box closes.
10. In the Languages box, click the programming language you prefer to work in (in this article, I used C#) The programming language you choose will be the default for your Web site, but you can set the programming languages for each page individually.
11. Click OK in the New Web Site dialog box. Visual Studio creates the Web site and a new page named Default.aspx.

Configuring Membership

Later in this article, I'll explain how to put pages into a subdirectory that is protected. You must create the subdirectory now itself so that you can configure security for it later.

To Add a New Folder to the Web Site

1. In Solution Explorer, right-click the name of your Web site (http://localhost/membership/) and click New Folder option
2. Name the folder as MemberPages.

Before you work with ASP.NET membership, you must configure your application to facilitate membership and to set up users. You can use the Web Site Administration tool, which provides a wizard-like interface for making configuration settings. When you complete the Setup Wizard, a SQL Server database named ASPNETDB.MDF is created in the App_Data folder of the project.

For this, you will characterize a single user.

Steps to Create a Membership User

1. On the Website menu, click ASP.NET Configuration.
2. Select the Security tab, click the link to Use the security Setup Wizard to configure security step by step, and then click Next button.
3. Proceed to Step 2 of the wizard and select From the Internet option. The wizard displays a page where you can select the authentication method that your Web site will use. This option specifies that your application will use Forms authentication, where users will log in to the application using a login page. I'll explain how to create it later in this article.

4. Click Next. The wizard displays a message stating that user information will be stored using Advanced provider settings. By default, membership information is stored in a Microsoft SQL Server Express database file in the App_Data folder of your Web site
5. Click Next. The wizard displays an option to create roles. I'll explain how to perform this step separately later in this article.
6. Clear the Enable roles for this web site check box, and click Next. The wizard displays a page where you can create new users.
7. Enter information that defines a user of your application. Use the following values as guidelines (you can use any values that you like, but be sure to note your entries for later in the article) as shown in the following figure:

   

   • User Name Your name (with no spaces), or a sample name.
   • Password A password. A strong password is required (one that includes uppercase and lowercase letters, punctuation, and that is at least eight characters long).
   • E-mail Your personal e-mail address.
   • Security Question and Security Answer Type a question and answer that can be used later if you need to recover your password.
8. Click Create User button. The wizard displays a confirmation page.

Adding New Access Rules for Subdirectory

Earlier in the article, you created a folder named MemberPages. And in this section of the article, I'll explain how to create a rule that makes sure that only logged-in users can access pages in that folder.

To Set Up Access Rules for the MemberPages Subdirectory

1. In the wizard, click Next. The wizard displays a page that allows you to create access rules.
2. In the Add New Access Rule box, expand the node for your Web site as shown in the following figure:

   

3. Select MemberPages, the folder you created earlier.
4. Under Rule applies to, select Anonymous users radio button option.
5. Under Permission, select Deny radio button option. The rule you are creating rejects access to anonymous users - that is, users who have not logged in.
6. Click Add This Rule. The new rule is displayed in the grid below. When users request a page from the MemberPages subdirectory, the rules are checked to determine whether the user is allowed access to the page.

   

7. Click Finish button. You are now done with the wizard. The wizard closes and you are returned to the Security tab of the Web Site Administration tool.

Configuring the Application for E-Mail

For an ingredient of this article, the application desires to be able to send e-mail messages. To send e-mail messages, your application must have right of entry to a Simple Mail Transport Protocol (SMTP) server, which forwards e-mail messages from your application to an e-mail recipient. IIS includes the Default SMTP virtual server as a voluntary component, which is appropriate for this article.

To Configure the Application to Use a Specific SMTP Server

1. In the Web Site Administration tool, click the Application tab.
2. Under SMTP Settings, click Configure SMTP e-mail settings.The tool displays a page where you can configure e-mail.
3. If you are using the SMTP virtual server that is on your computer, enter localhost as the Server Name; otherwise, enter the appropriate server name.
4. Include information for the port number and for authentication according to the requirements of your SMTP server as shown in the following figure:

5. In the From box, type a valid e-mail address.
6. Click Save, and in the confirmation page, click OK. The Web Site Administration tool creates a Web.config file (if one did not already exist) with the settings you have made as follows:

   < ?xml version="1.0" encoding="utf-8"?>
   < configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">
       < system.web>
           < authorization >
               < deny users="?" />
           < /authorization >
           < authentication mode="Forms" />
       < /system.web>
       < system.net>
           < mailSettings>
               < smtp from="mymail@mail.domain.com">
                   < network host="localhost" password="" userName="" />
               < /smtp>
           < /mailSettings>
       < /system.net>
   < /configuration>

   The Web.config file will not appear in Solution Explorer until you refresh the view.

7. Close the Web Site Administration tool

How to Log the User In?

As an element of your application, you need to establish the user's identity so that the application can perform actions such as:

1. Showing or hiding information based on who the user is, and
2. To get the user's identity, you have the user log in

In this article, I'll show you how to add a link on the home page that takes users to a login page, and then you will create the login page.

To Create a Home Page with a Login Button

1. Open the Default.aspx page of your web site.
2. Switch to Design view.
3. Type static text such as Welcome to My site and, in the Formatting toolbar, use the Block Format drop-down list to format the text as Heading 1.
4. From the Login group of the Toolbox, drag a LoginStatus control onto the page as shown in the following figure:

   

By default, the LoginStatus control is delivered as a link. When users click it, the application displays a login page. You can now create the login page.

To Create a Login Page

1. In Solution Explorer, right-click your Web application (http://localhost/membership) and select Add New Item. Add a Web Form named Login.aspx to your site.
2. In the Login.aspx page, switch to Design view.
3. From the Login group of the Toolbox, drag a Login control onto the page as show in following figure:

   

Displaying Login Errors

The Login control comprises validation to help users enter correct information. You can provide more information for login errors by adding a ValidationSummary control to the page.

To Display Detailed Login Errors

1. From the Validation group of the Toolbox, drag a ValidationSummary control onto the page.
2. In the Properties window for the ValidationSummary control, set the ValidationGroup property to Login1, which is the default ID of the Login control you added previously as shown in the following figure:

   

Exhibiting Information for Logged-In Users

Now I'll show you how to modify the home page to customize the display depending on whether the user is logged in. Anonymous users will see a standard message inviting them to log in. Logged-in users will see a message that welcomes them by their logged-in name.

To Modify the Display for Logged-in Users

1. Open the Default.aspx page.
2. From the Login group of the Toolbox, drag a LoginView control onto the page. The LoginView control is displayed with its AnonymousTemplate template open. This template allows you to define the content that users will see before they have logged in.
3. Click the edit area of the LoginView control to activate editing.
4. In the edit area of the LoginView control's AnonymousTemplate template, type Hello! You are not logged in. Click the Login link to sign in.
5. On the LoginView Tasks panel, in the Views list, click LoggedInTemplate. If you do not see the LoginView Tasks panel, right-click the heading of the LoginView control and select Show Smart Tag. You are now defining the content that will be displayed to users who have already logged in.
6. Click the edit area of the LoginView control to activate editing, and then type You are logged in. Welcome.
7. From the Login group of the Toolbox, drag a LoginName control into the template after the text.

Testing Login

You can now test the login capability of your application.

To test login

1. In Solution Explorer, right-click Default.aspx and click Set As Start Page. This configures the Web site so that when you run the site, the Default.aspx page appears first.
2. Press CTRL+F5 to run the Web site. The home page (Default.aspx) appears in the browser.
3. Click the Login link. The login page you created is displayed.
4. Type the login name of the user you created earlier in the article (in this article, I created user as Shreekumar).
5. Type both a user name and password and then click Log In. If you entered the correct credentials, you are returned to the home page. The page now displays a Logout link, your user name, and the welcome message that you defined for the logged-in user as shown in following figure:

   

6. Close the browser.

Limiting Access for Members-Only Pages

Earlier in this article, you created the MemberPages subdirectory and created an access rule that limits access to pages in the subdirectory. In this section of the article, I'll show you how to add a page to the protected subdirectory and test the access rule.

To Create the Members-only Page

1. In Solution Explorer, right-click the MemberPages folder, click Add New Item, and add a new Web Form named Members.aspx.
2. In Design view, add text to the page, such as Welcome, Members! or you can add something different. You can now add a link to the members-only page from the home page. Put the members-only page link in the logged-in template of the LoginView control. That way, visitors to your site would not see the link until they were logged in.

To Add a Link to the Members-only Page

1. Open the Default.aspx page.
2. From the Standard group of the Toolbox, drag a HyperLink control onto the LoginView control next to UserName control.
3. In the Properties window for the HyperLink control, set the Text property to Members page and the NavigateUrl property to ~/MemberPages/Members.aspx to point to the page that you created previously.

Testing the Members-Only Page

You can test the members-only page by accessing it as a logged-in user.

To Test the Members-only Page

1. Press CTRL+F5 to run the Web site.
2. In the login page, type the user name and password that you used earlier. You are redirected to (Default.aspx) home page.
3. Click the Members page link. You are redirected to the Members.aspx page because the user name you are logged in as has been authorized to access the page as shown in the following figure:

4. Close the browser window.

Registration of New Users

In the first part of this article, you created a user with the Web Site Administration tool. That approach is helpful if you are functioning with a tiny, defined list of users; but in many Web sites, however, users are allowed to register themselves. ASP.NET includes the CreateUserWizard control that executes the same duty you performed earlier using the Web Site Administration tool.

In this part of the article, I'll show you how to add a facility that allows users to register on your Web site. To start, you will create a registration page.

To Create a Registration Page

1. In Solution Explorer, right-click the name of your Web site (http://localhost/membership), click Add New Item, and add a new Web Form named Register.aspx.
2. In the Register.aspx page, switch to Design view and type static text such as Register into the page. In the Formatting toolbar, use the Block Format drop-down list to format the text as Heading 1.
3. From the Login group of the Toolbox, drag a CreateUserWizard control onto the page as shown in the following figure:

   

4. In the Properties window for the CreateUserWizard control, set the ContinueDestinationPageUrl property to ~/Default.aspx.
5. This configures the control so that when users click Continue after creating a user, the control returns to the home page.
6. From the Standard group of the Toolbox, drag a HyperLink control onto the page. In the Properties window for the HyperLink control, set the Text property to Home and the NavigateUrl property to ~/Default.aspx.

Now I'll show you how to add a link to the home page that displays the registration page. For this, assume that you want to display the registration link only to users who are not logged in (Guest Users).

To Create a Registration Link on the Home Page

1. Open the Default.aspx page.
2. Right-click the LoginView control added previously. Select Show Smart Tag. In the LoginView Tasks panel, select AnonymousTemplate from the Views list box to activate editing in the anonymous template.
3. From the Standard group of the Toolbox, drag a HyperLink control into the anonymous template. In the Properties window for the HyperLink control, set the Text property to Register and the NavigateUrl property to ~/Register.aspx. The Register link will be displayed only to users who are not logged in.

To Test Registration

1. Press CTRL+F5 to run the Web site and display the Default.aspx page. Because you are not logged in, the page containing the Register link is displayed.
2. Click the Register link. The registration page is displayed.
3. In the text boxes, enter a new user name, a password, an e-mail address, and a security question and answer as show in the following figure:

   

4. Click Create User. A confirmation message is displayed.
5. Click the Continue button. You are returned to the home page as a logged-in user. Note that the Login link has changed to Logout and that the information displayed in the Login control is from the LoggedInTemplate property, not from the AnonymousTemplate property.
6. Click the Logout link. The page changes to display the information for anonymous users.
7. Click the Login link.
8. Enter the credentials for the user you just created.You are logged in as the new user.
9. Close the browser window.

Changing User Passwords

Users sometimes might want to change their passwords, and it is often unrealistic to perform this task by hand. You can therefore use another ASP.NET control to allow users to change passwords on their own. To change a password, users must know their existing password.

Now I'll show you how to add a page where logged-in users can change their password.

To Create a Password-change Page

1. In Solution Explorer, right-click the MemberPages folder, click Add New Item, and add a new Web Form named ChangePassword.aspx.
2. You are putting the page in the members-only folder because only logged-in (Authenticated) users can change their passwords.
3. In the ChangePassword.aspx page, switch to Design view and type static text such as Change User Password. In the Formatting toolbar, use the Block Format drop-down list to format the text as Heading 1.
4. From the Login group of the Toolbox, drag a ChangePassword control onto the page as shown in the following figure:

   

5. In the Properties window for the ChangePassword control, set ContinueDestinationPageUrl property to ~/Default.aspx. This configures the control so that when users click Continue after changing a password, the control returns to the home page.

Now I'll show you how to add a link to the home page that displays the password-change page. You will make the link available only to users who are logged in.

To Create a Password-change Link on the Home Page

1. Open the Default.aspx page.
2. Right-click the LoginView control and then click Show Smart Tag. In the LoginView Tasks menu, in the Views list, click LoggedInTemplate.
3. This switches the LoginView control to edit mode for the content that will appear to users who are logged in.
4. From the Standard group of the Toolbox, drag a HyperLink control into the editing region. In the Properties window for the HyperLink control, set the Text property to Change password and the NavigateUrl property to ~/MemberPages/ChangePassword.aspx.
5. The Change password link will be displayed only to users who are logged in, which is the opposite of the Register link you created earlier.

To Test Password Change

1. Press CTRL+F5 to run the Web site.
2. In the Default.aspx, page, click the Login link and log in as one of the users you have created. When you are finished, you are returned to the home page as a logged-in user.
3. Click the Change password link.
4. In the password-change page, enter the old password and a new password, and then click Change Password.
5. Click Continue.
6. On the home page, click Logout.
7. Click the Login link.
8. Enter the new password. You are logged in with the new password.
9. Close the browser window.

Recovering a Password

It is widespread knowledge that users will frequently forget their passwords. At this point I'll show you how to add a password recovery page to your Web site so that they can once again log in to your site. Password recovery can take two forms:

1. You can send users the password they selected (or that you created for them when you set up the site). This choice requires that the site store the password using reversible encryption.
2. You can send users a new password, which they can change using the Change Password page you created earlier. This option is useful if the Web site stores passwords using a non-reversible encryption scheme such as hashing.

By default, the ASP.NET membership system shelters passwords by hashing them, meaning that the passwords cannot be recovered. Therefore, for this part of the article, your Web site will send users a new password.

To Add Password Recovery

1. In Solution Explorer, right-click the name of your Web site (http://localhost/membership), click Add New Item, and add a new Web Form named RecoverPassword.aspx.
2. In the RecoverPassword.aspx page, switch to Design view and type static text such as Reset my password. In the Formatting toolbar, use the Block Format drop-down list to format the text as Heading 1.
3. From the Login group of the Toolbox, drag a PasswordRecovery control onto the page as shown in the following figure:

   

4. From the Standard group of the Toolbox, drag a HyperLink control onto the page. In the Properties window for the HyperLink control, set the Text property to Home and the NavigateUrl property to ~/Default.aspx.
5. Switch to the Default.aspx page.
6. Right-click the LoginView control and then click Show Smart Tag. In the LoginView Tasks menu, in the Views list, click AnonymousTemplate.
7. This switches the LoginView control to edit mode for the content that will appear to users who are not logged in.
8. From the Standard group of the Toolbox, drag a HyperLink control into the template. In the Properties window for the HyperLink control, set the Text property to Forgot your password? and the NavigateUrl property to ~/RecoverPassword.aspx.

To Test Password Recovery

1. Press CTRL+F5 to run the Web site.
2. By default, you are not logged in, so you see the anonymous template of the LoginView control.
3. Click the Forgot your password? Link.
4. The RecoverPassword.aspx page appears.
5. Type your user name and click Submit. The security question is displayed and you are prompted to type the security answer as shown in the following figure:

6. Type the answer and click Submit.
7. If you entered a correct answer, the Web site resets your password and sends you an e-mail message with the new password.

Summary

There are numerous themes available to learn much more about ASP.NET membership services and Login controls. I have covered a tiny segment about these things. Hope this will help all the beginners to start up. Please give your feedback and suggestion.

References

• MSDN Help

History

• March 21, 2009: Initial version
• April 21, 2009: Added source code