Visual Basic 2010 Full Version is required

Walkthrough: Creating an ASP.NET Web Site with Basic User Login

Visual Basic 2010 Full Version is required
Many Web sites include content that is available only to people who have logged in (that is, who have been authenticated). By default, ASP.NET provides Web site project templates that include pages that let you perform authentication tasks.

Note
The ASP.NET Web project template that is illustrated in this walkthrough is new in Visual Studio 2010. This walkthrough shows you how to use an ASP.NET Web project template to create a Web site with basic login functionality. Tasks illustrated in this walkthrough include:

Creating an ASP.NET Web site. Creating a members-only page. The page will be accessible only to authenticated users (users who are logged in). Using the registration page, which enables users to register and create a new account. Logging in and accessing information that is available only to authenticated users. Using the change-password page, which enables users who have an account to change their password. Making the change-password page accessible to authenticated users (but only to authenticated users).

Prerequisites
In order to complete this walkthrough, you will need:
[Type text] Page 1

Microsoft Visual Web Developer 2010 Express or Visual Studio 2010 Full Version. SQL Server Express installed locally on your computer..

Installation of Visual Studio 2010 Full Version

[Type text]

Page 2

Depending on the memory and processing speed of your computer it may take a while to start the program

[Type text]

Page 3

Creating a New Web Site Project

[Type text] Page 4

You will start by creating a new ASP.NET Web site project. The project template that you use includes many of the elements that are required in order to create a site that supports authentication.

To create a new ASP.NET Web site

1. Start Visual Studio or Visual Web Developer. 2. In the File menu, click New Web Site. (If you do not see this option, click New, and then click Web Site.) The New Web Site dialog box is displayed.

3. Under Installed Templates, click Visual Basic and then select ASP.NET

Web Site.

[Type text]

Page 5

4. In the Web Location box, select File System and enter the name of the

folder where you want to keep the pages of the Web site. For example, enter the folder name C:\Websites\Login and then click OK. Visual Studio creates the folder and opens the Web site in Source view. Notice that the root Web site contains several files and folders including the Account folder, a Web.config file, the About.aspx and Default.aspx pages, and the Site.master master page.

[Type text]

Page 6

5. Press CTRL+F5 to run the page. The home of page of the Web site is displayed in the browser. Notice the menu items (Home, About) and the Log In hyperlink.

[Type text]

Page 7

6. Close the browser.

Creating a Members Only Page

[Type text] Page 8

In this section, you will create a members-only page. Only users who are logged in (authenticated users) can access this page. You will add a HyperLink control to the master page to redirect authenticated users to the membersonly page. When users who are not logged in (anonymous users) click the members-only hyperlink, they will be redirected to the login page where they can login or create an account.

To create the members only page

1. In Solution Explorer, right click the Account folder and then click Add

New Item.

Note
Make sure that you are creating the new page in the Account folder.

2. In the New Web Sites dialog box, select Web Form.

[Type text]

Page 9

3. In the Name text box, enter MembersOnly.aspx.

4. Select the Select master page check box and then click Add.

The Select a Master Page dialog box is displayed.

[Type text]

Page 10

5. Under Contents of folders, select Site.master and then click OK.

The MembersOnly.aspx page is created in the Account folder. The page is a content page for the Site.master page.
6. In Solution Explorer, double-click the MemberOnly.aspx page to open it,

and then switch to Design view.

[Type text]

Page 11

7. Add content to the main page. For example, you can add "Welcome to the members-only page. You have successfully logged in."

[Type text]

Page 12

In addition to the page that you have created, the Account folder contains the following pages and files:

Register.aspx. This page lets new users create an account. Login.aspx page. This asks for a user name and password. ChangePassword.aspx. This page lets registered users change their password. ChangePasswordSuccess.aspx. This page is displayed when users successfully change their password. A Web.config file.

By default, pages in the Account folder are not accessible to anonymous users, except the Register.aspx and the Login.aspx pages. The settings that define access to pages in the Account folder are configured in the Web.config file in that folder. The settings that define access to the Login page is configured in the root Web.config file. Next, you will modify the Menu control on the master page and add a menu item that links to the members-only page.
[Type text] Page 13

To add a menu item for the members-only page

1. In Solution Explorer, double-click the Site.master page to open it and

then switch to Design view.

2. Select the Menu control that contains the Home and About menu items,

and then click the smart tag of the menu control.

[Type text]

Page 14

3. Under Menu Tasks, click Edit Menu Items.

The Menu Item Editor is displayed.

4. Under Items, click the Add a root item button in the toolbar.

A new item is created in the menu tree.

[Type text]

Page 15

5. Select New Item.

[Type text]

Page 16

6. In the Properties window of the Menu Item Editor, set the Text property

to "Members Only".

[Type text]

Page 17

7. Click NavigateUrl and then click the ellipsis (...) button.

The Select URL dialog box is displayed.

[Type text]

Page 18

8. Under Project folders, click Account. 9. Under Contents of folder, select MembersOnly.aspx and then click OK.

[Type text]

Page 19

10. Click OK to close the dialog box.

11. Save and close the Site.master page. 12. In Solutions Explorer, right-click the Default.aspx page and then click Set as Start Page.

[Type text]

Page 20

[Type text]

Page 21

F5

[Type text]

Page 22

Click members only tab

[Type text]

Page 23

Creating a New Account

[Type text] Page 24

Because you do not have an account yet, you have to register before you can log in to access the members-only page. Anonymous users can access the home page (Default.aspx) and the About page, but content for authenticated users on the master page will not be accessible. Similarly, content in the Account folder (except for the registration page and login page) is unavailable to anonymous users. If anonymous users try to access content that is protected, they are redirected to the login page.

To create a new account

1. Press CTRL + F5 to run the site. 2. Click Members Only. The login page is displayed.
3. Click Register.

The Register.aspx (Create a New Account) page is displayed. 4. Enter the requested information. For example, you can enter the ScottBrown for the user name, scott@example.com for email, and a password. By default, the password must be at least six characters long. The user name does not require non alphanumeric characters, and the e-mail address does not have to be unique.
5. Click Create User.

When you finish registering for a new account, you are redirected to the members-only page. Notice that your user name is displayed next to Log Out.
6. Click Log Out.

You are redirected to the home page. 7. Close the browser.

Changing Password
In this section, you will create a hyperlink on the home page to redirect users to the change password page. You will use this page to change your password when you are logged in.
[Type text] Page 25

To create a link to the change-password page

1. In Solution Explorer, double-click the Site.master page and switch to

Design view. 2. From the Standard node of the Toolbox, drag a HyperLink control to the master page and drop it next to the Log In hyperlink. For this part of the walkthrough, it does not matter where you put the HyperLink control.
3. In the Properties windows, change the Text property to Change

Password. You can accept the default ID. 4. In the Properties window, click NavigateUrl and click the ellipsis (...) button. The Select URL dialog box is displayed.
5. Under Project folders, click Account. 6. Under Contents of folder, select ChangePassword.aspx and then click

OK. 7. Press CTRL+F5 to run the page. Notice that the Change Password link is accessible when you are not logged in.
8. Click Change Password.

You are redirected to the login page because the change-password page is accessible to authenticated users only.
9. Enter the user name and password that you created earlier, and then

click Log In. The change-password page is displayed.

10. Click Log Out.

11.

When you are returned to the home page, close the browser.

Next, you will modify the Change Password hyperlink to make it accessible only to users are logged in. You do this by adding the hyperlink to the HeadLoginView control on the master page.

To make the change-password link available only to logged-in users

[Type text] Page 26

1. In Solution Explorer, double-click Site.master.aspx to open it, and then

switch to Design view.

2. Delete the Change Password hyperlink that you created earlier. 3. Switch to Source view. 4. From the Standard node of the Toolbox, drag a HyperLink control into the

LoggedInTemplate element that is inside the LoginView control.

5. Set the Text property to Change Password. 6. After the runat="server" attribute, type "NavigateUrl=" and then

double-click Pick URL from the pop-up list. The Select Project Item dialog box is displayed.
7. Under Project folders, click Account. 8. Under Contents folder, select ChangePassword.aspx and then click OK.

The markup for the hyperlink will resemble the following: Copy <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Account/ChangePassword.aspx"> Change Password </asp:HyperLink> Note that this hyperlink will not be visible in Design view, because the contents of the LoggedInTemplate element are not visible by default.

Testing the Web Site

You can now test the change-password functionality of the Web site.

To test the change password page

1. Press CTRL+F5 to run the site. The home page is displayed, but the Change your password link is not visible.
[Type text] Page 27

2. Click Log In and enter your user name and password.

You are redirected to the home page. Notice that your name and the Change your password link are now visible.
3. Click Members Only.

You are redirected to the members-only page.

4. Click Change your password.

The change-password page is displayed. 5. Enter a new password. Click Change Password. If the change is successful, the success page will be displayed.

Testing the New Password

Next you will use your new password to login again and access the membersonly page.

To test the new password

1. Click Log Out. You will be redirected to the home page that anonymous

users see. 2. Click Log In. 3. Enter your user name and the new password and then click Log In. You are redirected to the home page. You can now access content that is available to authenticated users. .
4. Click Members Only.

You are redirected to the members-only page. If you try to login with your old password authentication will fail. 5. Close the browser.

Next Steps
In this walkthrough, you used pages that are part of the ASP.NET Web site project template in order to create a Web site that authenticates users. If you
[Type text] Page 28

prefer, you can also create your own login pages to provide the same functionality that is illustrated in the walkthrough.

[Type text]

Page 29