Walkthrough: Creating an ASP.NET Web Site with Basic User Login
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.
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:
Microsoft Visual Web Developer 2010 Express or Visual Studio 2010.
SQL Server Express installed locally on your computer. For information about how to install SQL Server Express, see How to: Connect to the AdventureWorksLT Database using an .MDF File.
Creating a New Web Site Project
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.
This walkthrough uses a Web site project. You could use a Web application project instead. For information about the difference between these Web project types, see Web Application Projects versus Web Site Projects in Visual Studio.
To create a new ASP.NET Web site
Start Visual Studio or Visual Web Developer.
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.
Under Installed Templates, click Visual Basic or C# and then select ASP.NET Web Site.
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.
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.
Close the browser.
Creating a Members Only Page
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 members-only 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
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.
In the New Web Sites dialog box, select Web Form.
In the Name text box, enter MembersOnly.aspx.
Select the Select master page check box and then click Add.
The Select a Master Page dialog box is displayed.
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.
In Solution Explorer, double-click the MemberOnly.aspx page to open it, and then switch to Design view.
Add content to the main page.
For example, you can add "Welcome to the members-only page. You have successfully logged in."
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.
To add a menu item for the members-only page
In Solution Explorer, double-click the Site.master page to open it and then switch to Design view.
Select the Menu control that contains the Home and About menu items, and then click the smart tag of the menu control.
Under Menu Tasks, click Edit Menu Items….
The Menu Item Editor is displayed.
Under Items, click the Add a root item button in the toolbar.
A new item is created in the menu tree.
Select New Item.
In the Properties window of the Menu Item Editor, set the Text property to "Members Only".
Click NavigateUrl and then click the ellipsis (...) button.
The Select URL dialog box is displayed.
Under Project folders, click Account.
Under Contents of folder, select MembersOnly.aspx and then click OK.
Click OK to close the dialog box.
Save and close the Site.master page.
In Solutions Explorer, right-click the Default.aspx page and then click Set as Start Page.
Creating a New Account
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
Press CTRL + F5 to run the site.
Click Members Only.
The login page is displayed.
Click Register.
The Register.aspx (Create a New Account) page is displayed.
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.
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.
Click Log Out.
You are redirected to the home page.
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.
To create a link to the change-password page
In Solution Explorer, double-click the Site.master page and switch to Design view.
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.
In the Properties windows, change the Text property to Change Password. You can accept the default ID.
In the Properties window, click NavigateUrl and click the ellipsis (...) button.
The Select URL dialog box is displayed.
Under Project folders, click Account.
Under Contents of folder, select ChangePassword.aspx and then click OK.
Press CTRL+F5 to run the page.
Notice that the Change Password link is accessible when you are not logged in.
Click Change Password.
You are redirected to the login page because the change-password page is accessible to authenticated users only.
Enter the user name and password that you created earlier, and then click Log In.
The change-password page is displayed.
Click Log Out.
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
In Solution Explorer, double-click Site.master.aspx to open it, and then switch to Design view.
Delete the Change Password hyperlink that you created earlier.
Switch to Source view.
From the Standard node of the Toolbox, drag a HyperLink control into the LoggedInTemplate element that is inside the LoginView control.
Set the Text property to Change Password.
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.
Under Project folders, click Account.
Under Contents folder, select ChangePassword.aspx and then click OK.
The markup for the hyperlink will resemble the following:
<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
Press CTRL+F5 to run the site.
The home page is displayed, but the Change your password link is not visible.
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.
Click Members Only.
You are redirected to the members-only page.
Click Change your password.
The change-password page is displayed.
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 members-only page.
To test the new password
Click Log Out. You will be redirected to the home page that anonymous users see.
Click Log In.
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. .
Click Members Only.
You are redirected to the members-only page. If you try to login with your old password authentication will fail.
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 prefer, you can also create your own login pages to provide the same functionality that is illustrated in the walkthrough. For more information, see Walkthrough: Creating a Web Site with Membership and User Login.
See Also
Tasks
Walkthrough: Creating a Web Site with Membership and User Login