Use membership and user login to create a website (Visual Studio)

A website has a common requirement: a specific page allows only some members or other authenticated users to browse. In this case, the application must prompt the user to enter the name and password. The application must also include methods for hiding information from anonymous users (Unlogged users. This walkthrough demonstrates how to use the ASP. NET control and ASP. Net membership service to create an application that executes all these tasks. For more information, see.

Tasks involved in this drill include:

• Configure applications to include ASP. NET Membership Services and define users.

• Use the logon control to obtain user creden。 and display information to logon users.

• Protect one or more pages in the application so that only login users can view these pages.

• Allows new users to register on the website.

• Allow Members to change and reset their passwords.

Prerequisites

To complete this drill, you must:

• Microsoft Visual Web Developer.

• Microsoft Internet Information Service (IIS) installed on a local computer ).

• Microsoft Data Access Component (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 may need to upgrade the MDAC installed on your computer. For more information, see
  Msdn Library
  Microsoft Data Access Components (MDAC) installation (Microsoft Data Access Component (MDAC) installation ).

• Access to the email server that can forward emails. (The server does not need to be able to receive messages ). IIS includes the default SMTP virtual server, which is an email server suitable for this walkthrough. For more information about configuring the server, see. If you are using a LAN, contact the network administrator to  about accessing the email server.

Create a website

If you have created a website in Microsoft Visual Studio (for example, by using Walkthrough: creating a base web page topic in Visual Web Developer ), you can use this website and jump to the "Configure membership" section later in this exercise ". Otherwise, follow the steps below to create a new website and webpage.

Create a local IIS website

1. Open Visual Studio.

2. On the File menu, click New website ".

   The "New Website" dialog box appears.

3. Under "templates installed in Visual Studio", select "ASP. NET Website ".

4. Select "HTTP" in the "location" list box ". Click Browse ".

   The "select location" dialog box appears.

5. Select "Local IIS ".

6. Open "Local Web server ".

7. Select "default website ".

8. Click the "Create new web application" icon () on the website list and name the new website membership.

9. Click Open ".

   Close the "select location" dialog box.

10. In the language box, click the programming language you want to use.

    The programming language you select will be the default language for the website, but you can set the programming language for each page separately.

11. In the new website dialog box, click OK ".

    Visual Web Developer creates this website and a new page named default. aspx.

Configure membership

Later in this walkthrough, place the page in a protected subdirectory. You must create a subdirectory to configure security for it later in this walkthrough.

Add a new folder to the website

1. In Solution Explorer, right-click the website name and then click New Folder ".

2. Name the folder memberpages.

Before using ASP. NET membership, you must configure an application to enable membership and set users. You can use the website management tool, which provides a wizard-like interface for configuration settings.

In this walkthrough, define a single user.

Create a qualified user

1. Click ASP. NET configuration on the "website" menu ".

2. Select the "Security" tab, click the link pointing to "use Security Settings Wizard to configure security step by step", and then click "Next ".

3. Continue to step 1 of the wizard and select the "over the Internet" option.

   The wizard displays a page from which you can select the authentication method used by the website. This option specifies that the application will use forms authentication, meaning that the user will use the login page created later in this walkthrough to log on to the application.

4. Click "Next ".

   The wizard displays a message indicating that the user information will be stored using the advanced provider settings. By default, the membership information is stored in the Microsoft SQL Server quick release database file in the app_data folder on the website.

5. Click "Next ".

   The wizard displays the options for creating a role. This step will be performed independently later in this walkthrough. Therefore, do not select the "enable role for this Website" check box.

6. Click "Next ".

   The wizard displays a page where you can create a user.

7. Enter the information that defines the application user. Use the following values as a criterion (any desired values can be used, but note the items used for use later in this walkthrough ).

   • "User Name" Your name (do not have spaces), or sample name.

   • "Password. A strict password is required (including uppercase and lowercase letters, punctuation marks, and at least eight characters ).

   • "Email" is your personal email address. Later in this walkthrough, you will be sent an email to yourself, so you need a valid email address.

   • "Security Question" and "Security answer" are the questions and answers you can use to restore your password in the future.

8. Click create user ".

   The wizard displays the confirmation page.

   Note:
   Keep the website management tool open.

A folder named "memberpages" was created before this walkthrough. In this part of the walkthrough, a rule is created to ensure that only logged-on users can access the pages in this folder.

Configure access rules for the memberpages subdirectory

1. Click "Next" in the Wizard ".

   The wizard displays a page that allows you to create access rules.

2. In the Add new access rule box, expand the website node.

3. Select "memberpages", that is, the folder created earlier.

4. Select "anonymous user" under "apply rules ".

5. Under "permission", select "deny ".

   The rule being created rejects access from anonymous users (I .e. Unlogged users.

6. Click Add rule ".

   The new rule is displayed in the following grid. When a user requests a page in the "memberpages" subdirectory, the rule is checked to determine whether the user is allowed to access the page.

7. Click Finish ".

   The wizard has been completed. Close the wizard and return to the "Security" tab of the website management tool.

Configure email settings for the Application

In this walkthrough, the application needs to be able to send emails. To send a message, the application must be able to access the Simple Mail Transfer Protocol (SMTP) server, which forwards emails from the application to the email recipient.

IIS includes the default SMTP virtual server as an optional component. This server is applicable to this walkthrough. For more information about configuring the server, see. If you are using a LAN, contact the network administrator to  about accessing the email server.

After setting or determining how to access the SMTP server, you must configure the application to route emails to the server. You can generate an item in the web. config file of the website to complete the above operations. This file contains a series of settings to determine how the application runs.

Configure the application to use a specific SMTP Server

1. In website management tools, click the applications tab.

2. Under SMTP settings, click "Configure SMTP email settings ".

   This tool displays a page where you can configure email.

3. If you are using the SMTP virtual server on your computer, enter localhost as the "server name"; otherwise, enter the appropriate server name.

   According to the requirements of the SMTP server, including the port number and authentication information. For more information about how to configure these settings, contact the administrator.

4. In the "sender" box, type A valid email address.

5. Click Save, and then click OK on the confirmation page ".

   The website management tool creates a web. config file using the settings (if this file does not exist ).

   Note:
   The Web. config file is not displayed in Solution Explorer until the view is refreshed.

6. Disable the website management tool.

User Logon

As part of an application, you need to create a user ID so that the application can perform operations (such as displaying or hiding information) based on the user type ). To obtain the user ID, log on to the user.

In this walkthrough, a link is added to the home page to bring the user to the logon page, and then create the logon page.

Use the logon button to create a home page

1. Open or switch to the default. aspx page of the site. (If the default. aspx page does not exist, you can add this page or use another page .)

2. Switch to the design view.

3. Type Static text (for example, "welcome to our site"), and then use the "block format" drop-down list in the "format" toolbar to set the text format to Title 1.

4. From the logon group in the toolboxDrag the widget to the page.

By default, the loginstatus control is rendered as a link. After you click the control, the application will display the logon page. Now you can create a logon page.

Create logon page

1. In Solution Explorer, right-click the web application and select Add new project ". Add the "Web form" named login. aspx to the site.

   Note:
   In this walkthrough, the page name must be login. aspx. By default, configure Forms authentication to use a page with this name. Although this is not done in this walkthrough, you can change the default logon page (the page to which the user is redirected) in the web. config file ).

2. Switch to the design view on the login. ASPX page.

3. From the logon group in the toolboxDrag the widget to the page.

   The login control is a single control that prompts the user to enter creden。 and verify them.

Logon error displayed

The login control includes verification to help users enter correct information. For example, if the user skips the password, the verification program control displays an asterisk (*) next to the password box (*). AddControl to provide more complete information about logon errors.

Show detailed logon errors

1. Drag the validationsummary control from the validate group in the toolbox to the page.

2. In the "properties" Window of the validationsummary control, SetSet the property to login1 (the default ID of the previously added login control ).

Displays information about logon users.

Modify the home page to customize the display based on whether the user logs in. Anonymous Users will see a general message asking them to log on. Login users will see a welcome message containing their login name.

Display of custom login users

1. Switch to or open the default. aspx page.

2. From the logon group in the toolboxDrag the widget to the page.

   Display the loginview control and open its anonymoustemplate template. This template allows you to define what you will see before logon.

3. Click the editing area of the loginview control to activate the editing.

4. In the editing area of the anonymoustemplate template of the loginview control, type "You are not logged on yet. Click the logon link to log on ."

5. In the View list on the loginview task panel, click loggedintemplate ". If the "loginview task" template is not displayed, right-click the title of the loginview control and select "show Smart Tag ".

   Now define the content that will be displayed to the logged-on user.

6. Click the edit area of the loginview control to activate the edit, and then type you are logged in. Welcome ,.

7. From the logon group in the toolboxDrag the control to the end of the text in the template.

Test Logon

Now you can test the application login capability.

Test Logon

1. In Solution Explorer, right-click "default. aspx" and click "set as start page ".

   This will configure the website so that the default. aspx page will first appear when the site is running.

2. Press Ctrl + F5 to run the website.

   The home page (default. aspx) appears in the browser and displays the "login" link and general message.

3. Click the logon link.

   The created logon page is displayed.

4. Type the user login name created before this walkthrough and click "Log on ". (Do not enter the password .)

   The asterisk (*) is displayed next to the password box, and an error message is displayed in the validationsummary control.

5. Enter the user name and password, and click "Log on ".

   If you enter the correct creden。, return to the home page. This page displays the "logout" link, your username, and the welcome message defined for the login user.

6. Close your browser.

Restrict access to private pages of members

A typical task of many websites is to configure pages so that only login users can view these pages. Before this walkthrough, create the "memberpages" sub-directory and create rules to restrict access to pages in sub-directories. In this section of the drill, add the page to a protected subdirectory and test the access rules.

Create a dedicated member page

1. In Solution Explorer, right-click the memberpages folder and click Add new item. Then, add a new web form named members. aspx ".

   Note:
   Make sure that the page is created in the "memberpages" folder.

2. In the "design" view, add text to the page (for example, "Everyone, welcome !") The exact text does not matter. You only need to recognize this page when you see it in your browser.

Now you can add a link from the home page to the dedicated page for members. In the actual application, you may want to place the link to the page for use only by Members in the login template of the loginview control. In this way, visitors to the site cannot see this link before logon. However, in this walkthrough, this link is available to all users, so that you can view the effect of a dedicated member page without logging on first.

Add a link to a dedicated member page

1. Switch to or open the default. aspx page.

2. From the "standard" group of the "toolbox ",Drag the widget to the page.

3. In the Properties window of the hyperlink control, SetSet the attribute to members page and setSet property ~ /Memberpages/members. aspx to point to the previously created page.

Test member page

You can test this page by visiting a dedicated member page as an anonymous user and logon user.

Test member page

1. Press Ctrl + F5 to run the website.

2. Do not log on when the default. aspx page appears in the browser. Instead, click the "members page" link.

   You will be redirected to the login. ASPX page because anonymous users are not allowed to access the page only for members.

3. On the logon page, type the user name and password used in the previous sections of this exercise to log on.

   You will be redirected to the Members. ASPX page because the user name used for Logon has been authorized to access this page.

4. Close the browser window.

Create a new user

In the first part of the drill, you have used the website management tool to create a user. This policy is useful if you use a small user list (for example, when creating a user for a small team. However, many websites allow users to register on their own. ASP. NET includesControl. The tasks executed by this control are the same as those that you previously run using the website management tool.

In this section of the drill, a function is added to allow users to register on the website. The registration page is created first.

Create registration page

1. In Solution Explorer, right-click the website name, click Add new item, and add a new web form named register. aspx ".

   Note:
   Make sure that the page is created in the root directory of the website instead of in the memberpages folder.

2. On the register. ASPX page, switch to the design view and type static text (such as "register") on the page "). In the format toolbar, use the block format drop-down list to set the text format to Title 1.

3. Drag the createuserwizard control from the logon group in the toolbox to the page.

4. In the "properties" Window of the createuserwizard control, SetSet property ~ /Default. aspx.

   This control is configured so that when you click "continue" after creating a user, the control can return to the home page.

5. Drag the hyperlink control from the standard group in the toolbox to the page. In the "properties" Window of the hyperlink control, set the text attribute to home and the navigateurl attribute ~ /Default. aspx.

Now you can add a link to the home page, which displays the registration page. In this walkthrough, it is assumed that only the registration link is displayed to Unlogged-on users.

Create a registration link on the homepage

1. Switch to or open the default. aspx page.

2. Right-click the previously added loginview control and select "display Smart Tag ". On the "loginview task" Panel, select "anonymoustemplate" in the "View" list box to activate editing in the anonymous template.

3. Drag the hyperlink control from the standard group in the toolbox to an anonymous template. In the "properties" Window of the hyperlink control, set the text attribute to register and the navigateurl attribute to register. aspx. The "register" link is only displayed to non-logged-on users.

Now you can test the registration process.

Test Registration

1. Press Ctrl + F5 to run the website and display the default. aspx page.

   Because you have not logged on yet, the page containing the "register" link is displayed.

2. Click "register.

   The registration page is displayed.

3. In the text box, enter the new user name, strict password, email address, and security question and answer. (These five items are required .)

4. Click create user ".

   The confirmation message is displayed.

5. Click "continue.

   Return to the home page as a logon user. Note that the "login" link has been changed to "logout" and the information displayed in the login control comes fromAttribute, not fromAttribute.

6. Click the Logout link.

   The page is changed to display information applicable to anonymous users.

7. Click the logon link.

8. Enter the creden of the user you just created.

   Log on as a new user.

9. Close the browser window.

Change Password

Sometimes you may want to change the password, but manual execution of this task is usually not practical. Therefore, you can use another ASP. Net Control to change your password. To change the password, you must know the existing password.

In this walkthrough, a page is added, on which logon users can change their passwords.

Create password change page

1. In Solution Explorer, right-click the memberpages folder and click Add new item. Then, add a new web form named changepassword. aspx ".

   Note:
   Make sure that the page is created in the "memberpages" folder.

   Place this page in a dedicated member folder because only logged-on users can change their passwords.

2. On the changepassword. ASPX page, switch to the design view and type static text (for example, Change Password "). In the format toolbar, use the block format drop-down list to set the text format to Title 1.

3. From the logon group in the toolboxDrag the widget to the page.

4. In the "properties" Window of the changepassword control, SetSet property ~ /Default. aspx

5. This control is configured so that the user can change the password and click "continue" to return to the home page.

Now you can add a link to the home page, which displays the password change page. This link will only be available to login users.

Create a password change link on the homepage

1. Switch to or open the default. aspx page.

2. Right-click the loginview control and click "show Smart Tag ". In the "View" List of the "loginview task" menu, click "loggedintemplate ".

   This will switch the loginview control to the editing mode of the content displayed to the login user.

3. Drag the hyperlink control from the standard group in the toolbox to the editing area. In the "properties" Window of the hyperlink control, set the text attribute to change password and the navigateurl attribute ~ /Memberpages/changepassword. aspx.

   The "Change Password" link is only displayed to the login user, which is opposite to the previously created "Registration" link.

Now you can test the password change process.

Test Password Change

1. Press Ctrl + F5 to run the website.

2. On the default. aspx page, click the logon link and Log On As the created user.

   Return to the home page as a logon user.

3. Click "Change Password.

4. On the password change page, enter the old and new passwords, and then click "Change Password ".

5. Click continue ".

6. On the homepage, click logout ".

7. Click the logon link.

8. Enter the new password.

   In this way, log on with the new password.

9. Close the browser window.

Restore Password

Sometimes users forget their passwords. You can add a password recovery page to the website so that you can log on to the website again. The password can be restored in two ways:

• You can send users the selected password (or the password created for the user when the website is set ). This option requires the site to use recoverable encryption to store passwords.

• You can send a new password to the user. You can use the previously created password change page to change the password. This option is useful if the website uses an unrecoverable encryption scheme (such as a hash) to store passwords.

Note:
For websites that require advanced security, we recommend that you do not use an email to return a plaintext password. For highly secure websites, we recommend that you use an encrypted method (such as Secure Socket Layer (SSL) To return the password.

By default, the ASP. NET membership system uses the hash algorithm to generate a password to ensure its security. This means that the password cannot be recovered. Therefore, in this part of the walkthrough, the website will send a new password to the user.

Note:
To restore the password, the website must be able to send an email. If the Website Cannot be configured to send emails (as described in "Configure application email settings" in the previous walkthrough), the password recovery function cannot be added to the website.

Add password recovery

1. In Solution Explorer, right-click the website name, click Add new item, and add a new web form named recoverpassword. aspx ".

   Note:
   Make sure that the page is created in the root directory of the website instead of in the memberpages folder.

2. On the recoverpassword. ASPX page, switch to the design view and type static text (for example, "reset the password to a new value "). In the format toolbar, use the block format drop-down list to set the text format to Title 1.

3. From the logon group in the toolboxDrag the widget to the page.

4. Drag the hyperlink control from the standard group in the toolbox to the page. In the "properties" Window of the hyperlink control, set the text attribute to home and the navigateurl attribute ~ /Default. aspx.

5. Switch to the default. aspx page.

6. Right-click the loginview control and click "show Smart Tag ". In the "View" List of the "loginview task" menu, click "anonymoustemplate ".

   This switches the loginview control to the editing mode of the content displayed to the Unlogged-on user.

7. Drag the hyperlink control from the standard group in the toolbox to the template. In the "properties" Window of the hyperlink control, set the text attribute to forgot your password ?, Set the navigateurl attribute ~ /Recoverpassword. aspx.

Now you can test password recovery.

Test password recovery

1. Press Ctrl + F5 to run the website.

2. By default, it is not a logged-on user, so you can see the anonymous template of the loginview control.

3. Click "Forgot your password ?" Link.

   The recoverpassword. ASPX page appears.

4. Enter the user name and click Submit ".

   A security prompt is displayed and you are prompted to enter a security answer.

5. Enter the Security answer and click Submit ".

   If you enter the correct answer, the website will reset the password and send you an email with the new password.

Subsequent steps

This walkthrough illustrates a simple but complete solution for creating an application, this solution prompts the user to enter creden。, display information to the login user, so that the user can restore the forgotten password and restrict access to the page. You can use the technologies and controls described in this walkthrough to create more complex pages and applications. For example, you may want:

• Create other users and define roles (groups) (such as "managers", "sales", or "members"), and assign users to different roles. For more information, see Walkthrough: using roles to manage website users.

• Change the membership provider from the default access provider to the SQL provider. Storing the Membership Information in the ACCESS database applies to small to medium-sized sites, but if the site traffic is large, Microsoft SQL server should be used as the member qualification storage area. For more information, seeAnd.

• Change the appearance of the logon control. The login, passwordrecovery, and createuserwizard controls support templates, allowing you to configure the text and buttons they contain and change the color, Font, and other visual features of the controls. For more information, seeTopics.

• Create rules that not only restrict anonymous users, but also restrict specific users or roles to access pages or folders.

• Combine the membership and configuration file attributes so that you can store user-specific settings for each user. For more information, see Drill: maintain Website user information with configuration file attributes.

• Combines the logon control with the master page. The master page allows you to define a page layout that can be used for all pages in the application. For more information, see Walkthrough: create and use the ASP. NET master page in visual web developer.

• Add the forgot password recovery function. For more information, see.