Microsoft Virtual Labs

ASP.NET 2.0 Membership, Login Controls, and Role Management

ASP.NET 2.0 Membership, Login Controls, and Role Management

Table of Contents
ASP.NET 2.0 Membership, Login Controls, and Role Management ...................................... 1
Exercise 1 Add a Login Page.........................................................................................................................................2 Exercise 2 Apply Authentication and Authorization Settings .......................................................................................4 Exercise 3 Add Navigation Links to the Master Page ...................................................................................................6 Exercise 4 Enable Role-Based Security.........................................................................................................................9

ASP.NET 2.0 Membership, Login Controls, and Role Management

ASP.NET 2.0 Membership, Login Controls, and Role Management

Objectives
After completing this lab, you will be better able to: Build a login page around Login and CreateUserWizard controls Create an ASP.NET database for storing membership data, role data, and more Use the Web Site Administration Tool to select membership and role providers Use the Web Site Administration Tool to enable forms authentication and apply basic security settings Programmatically converse with a master page from a content page Use LoginStatus controls to display links for logging in and out Change the logout action of a LoginStatus control Enable the ASP.NET role management service Create roles and assign users to roles Create role-based access rules for your Web site Forms authentication is a popular means of securing Internet applications. In ASP.NETs brand of forms authentication, you designate a login page for logging in unauthenticated users and use URL directives to specify which pages require logins and which ones do not. When an anonymous (that is, unauthenticated) user attempts to access a page thats only available to authenticated users, ASP.NET automatically redirects them to the login page. ASP.NET 1.x simplified forms authentication by introducing declarative means for designating login pages and specifying authorization rules. ASP.NET 2.0 further simplifies forms authentication by providing the following facilities: A membership service for managing users and user credentials Login controls for logging in users, creating new users, and more A role management service for enacting role-based security In this lab, youll use all three to build a secure administrative interface for the MyComics application. Youll begin by creating a login page. Then youll secure the admin page you created in Lab 2 so that only authenticated users can access it, and add links to the master page for navigating to the admin page and logging in. Finally, youll use role-based security to tighten permissions on the admin page so that only administrators can access it.

Scenario

Estimated Time to Complete This Lab

60 Minutes

Page 1 of 10

ASP.NET 2.0 Membership, Login Controls, and Role Management

Exercise 1 Add a Login Page

Scenario
In this exercise, youll create a login page that includes a Login control for logging in existing users and a CreateUserWizard control for registering new users. Tasks
1. Enable database

Detailed Steps a. Click Start | All Programs | Microsoft Visual Studio 2005 | Visual Studio Tools | Visual Studio 2005 Command Prompt. b. Navigate to the C:\MSLabs\ASP.NET\LabFiles\Database directory. c. Type CacheSetup. d. Close the Visual Studio 2005 Command Prompt. e. Click Start | All Programs | Microsoft Visual Studio 2005 | Microsoft Visual Studio 2005. f. Click File | Open Web Site. g. Browse to C:\MSLabs\ASP.NET\Starter\<Language>\Lab4 and click Open. a. In the Solution Explorer, right-click C:\..\Lab4 and click Add New Item. b. Select Web Form from the Visual Studio installed templates. c. In the Name field, type Login.aspx. d. Ensure that the Place code in separate file checkbox is selected and click to select the Select master page checkbox. e. In the Language dropdown, select Visual C# or Visual Basic (depending on what language you are using for this lab) and click Add. f. In the Select a Master Page dialog, select Site.master and click OK. g. In the @ Page directive at the top of the Login.aspx, change Title=Untitled Page to Title=MyComics Login. h. At the bottom right of the design surface, click the Design button to views. i. Place the cursor in the Content control, and click Layout | Insert Table. j. Click to select the Template radio button, select Vertical split from the dropdown and click OK. k. Right-click the left table cell, point to Insert and click Cell to the Right. l. Click in the middle cell and, in the Properties pane, click the ellipsis next to the Style property. m. In the Style Builder, select Background in the left pane. n. In the Color dropdown, select Gray. o. In the Style Builder, select Position in the left pane. p. In the Width field, type 1 and ensure that the dropdown is populated with px. q. Click OK. r. Click in the left cell and, in the Properties pane, click the ellipsis next to the Style property. s. In the Style Builder, select Position in the left pane.

caching.

2. Open the Web site.

3. Add a page to the

Web site.

Page 2 of 10

ASP.NET 2.0 Membership, Login Controls, and Role Management Tasks Detailed Steps t. u. v. w. In the Width field, type 50 and select % in the dropdown. Click OK. In the Properties pane, select top from the valign dropdown. Click in the right cell and, in the Properties pane, select top from the valign dropdown. Youre now ready to add controls to the page.

4. Add a Login control

and a CreateUserWizard control.

a. Drag a Login control from the Login section of the Toolbox and drop it into the left table cell. b. Drag a CreateUserWizard control from the Login section of the Toolbox and drop it into the right table cell. c. Press Ctrl+F5 to launch Login.aspx. If you want to polish the pages appearance, use the Auto Format command in both the Login Tasks and CreateUserWizard Tasks menus. d. Close the browser and return to Visual Studio 2005.

Page 3 of 10

ASP.NET 2.0 Membership, Login Controls, and Role Management

Exercise 2 Apply Authentication and Authorization Settings

Scenario
In this exercise, youll turn on forms authentication and configure the admin page so that its accessible only to authenticated users. Youll also configure the application to use ASP.NETs SQL Server membership provider and create a database for the provider to use. Tasks
1. Move the admin

Detailed Steps a. In the Solution Explorer right-click C:\..\Lab4 and select New Folder. b. Name the folder Secure and press Enter. c. Drag Admin.aspx and Admin.aspx.cs<vb> to the Secure folder. a. Click Website | ASP.NET Configuration to display ASP.Net Web Application Administration. b. In ASP.Net Web Application Administration, click the Security tab at the top of the page or the Security link in the body of the page. c. Click Use the security Setup Wizard to configure security step by step to start the Security Setup Wizard. d. In Step 1: Welcome, click Next. e. In Step 2: Select Access Method, click to select the From the internet radio button and click Next. f. In Step 3: Data Store, click Next. g. In Step 4: Define Roles, click Next. Youll enable role management later. h. In Step 5: Add New Users, fill in the form with the following values: User Name: Joe Password and Confirm Password: P@ssw0rd E-mail: Joe@contoso.com Security Question: One plus two? Security Answer: 12 Remember the user name and password you enter here because youll need them later on. i. Click Create User. j. Click Next. k. In Step 6: Add New Access Rules, expand the Lab4 node under Select a directory fort this rule and select the Secure folder. l. Under Rule applies to, click to select the Anonymous users radio button. m. Under Permission, ensure that the Deny radio button is selected and click Add This Rule to add the rule to Web.config denying unauthenticated users access to the Secure directory. n. Click Next. o. In Step 7: Complete, click Finish. p. Close the Internet Explorer window and switch to Visual Studio 2005. q. In the Solution Explorer, right-click the Secure folder and select Refresh Folder.

page.

2. Run the Security

Setup Wizard.

Page 4 of 10

ASP.NET 2.0 Membership, Login Controls, and Role Management Tasks Detailed Steps r. In the Solution Explorer, double-click Secure/Web.config. A new Web.config file was added to the Web site by the Security Setup Wizard. That file is in the Secure folder, and it contains authorization rules for the Secure directory. s. Inspect the <authorization> element. How does this element relate back to the authorization rule you created in the Security Setup Wizard that denies anonymous users access to resources in the Secure folder? Even though it doesnt appear in the Solution Explorer window, a new ASPNETDB.mdf database file was added to the Web site. t. In the Solution Explorer, right-click the App_Data folder and click Refresh Folder. By creating a user through the Web Admin you created a SQL Server database contained within your application. This database contains the security settings for this application. u. Right-click ASPNETDB.MDF and select Open. v. You will be transferred to the Server Explorer window displaying a connection for the ASPNETDB database. w. Expand Tables and review the elements inside.
3. Test the security

settings.

a. In the Solution Explorer select Default.aspx and press Ctrl+F5. b. Verify that Default.aspx (not the login page) appears in your browser. c. Change Default.aspx in the browsers address bar to Secure/Admin.aspx. Verify that Login.aspx appears. d. Log in with a user name of Joe and a password of P@ssw0rd. e. Verify that Admin.aspx appears in the browser. f. Click the browsers Back button twice to return to Default.aspx. g. Change Default.aspx in the browsers address bar to Secure/Admin.aspx again. h. Verify that Admin.aspx appears without requiring another login. i. Close the browser and return to Visual Studio.

Page 5 of 10

ASP.NET 2.0 Membership, Login Controls, and Role Management

Exercise 3 Add Navigation Links to the Master Page

Scenario
In this exercise, youll add links to the master page for navigating to Admin.aspx and for logging in and out. The former link will be a conventional HyperLink control, the latter a LoginStatus control. Youll also add a public method to the master page enabling the login page to hide these links. Tasks
1. Add links to the

Detailed Steps a. In the Solution Explorer, double-click Site.master to open it in the designer in Source view. b. Find the table cell containing the HyperLink control that points to ~/Images/MyComics.gif. Currently the cells content is defined like this:
<asp:HyperLink ID=HyperLink1 ImageUrl=~/Images/MyComics.gif NavigateUrl=~/Default.aspx Runat=server>Hyperlink</asp:HyperLink>

master page.

c. Replace the previous contents of the cell with the following: Text can be found in C:\ MSLabs\ASP.NET\LabFiles\lab4.txt.
<table width=100% cellpadding=0 cellspacing=0> <tr> <td> <asp:HyperLink ID=HyperLink1 ImageUrl=~/Images/MyComics.gif NavigateUrl=~/Default.aspx Runat=server /> </td> <td align=right valign=top> <asp:Panel ID=LinksPanel Runat=server> <asp:HyperLink ID=AdminLink Text=Admin NavigateUrl=~/Secure/Admin.aspx Runat=server ForeColor=White Font-Names=Verdana Font-Size=10pt EnableTheming=False Style=text-decoration: none /> <span style=font-size: 10pt; color: white; font-family: Verdana>|</span> <asp:LoginStatus ID=LoginStatusControl Runat=server ForeColor=White Font-Names=Verdana Font-Size=10pt EnableTheming=False Style=text-decoration: none /> <span style=font-size: 10pt; color: white; font-family: Verdana> &nbsp; </span> </asp:Panel> </td> </tr> </table>

What youre doing is embedding a 1-row, 2-cell HTML table inside an existing cell the one containing the MyComics bannerand placing the existing HyperLink in the left-hand cell while adding a HyperLink and a LoginStatus control to the right-hand Page 6 of 10

ASP.NET 2.0 Membership, Login Controls, and Role Management Tasks Detailed Steps cell. Putting the new controls in their own cell enables you to position them in the banners upper-right corner. Youre also encapsulating the controls (and the text that separates them) in a Panel control so that later on you can show and hide them by toggling the Panels Visible property. This modification could have been made in Design view, but its arguably easier to do it in Source View. Visual Studio is completely supportive of hand-written HTML, and for good reason! d. In the Solution Explorer, select Default.aspx and press Ctrl+F5. e. Verify that links entitled Admin and Login appear in the pages upper-right corner. Also verify that clicking either link takes you to the login page. f. Close the browser and return to Visual Studio. a. In the Solution Explorer, expand Site.maser and right-click Site.master.<cs or vb> and select Open. b. Add the following method to the Site class: C#
public void HideBannerLinks () { LinksPanel.Visible = false; }

2. Hide the links on the

login page.

VB
Public Sub HideBannerLinks() LinksPanel.Visible = False End Sub

c. Open Login.aspx in Design view. d. Double-click the body of the page to add a Page_Load method to Login.aspx.<cs. Or vb> e. Add the following statement to the body of the Page_Load method: C#
((Site) Master).HideBannerLinks ();

VB
CType(Master, Site).HideBannerLinks()

f. In the Solution Explorer, select Default.aspx and press Ctrl+F5. g. Click the Admin link in the upper-right corner. When the login page appears, verify that the Admin and Login links do NOT appear. h. Log in with a user name of Joe and a password of P@ssw0rd. i. Verify that Admin.aspx appears, and that the link in the upper-right corner reads Logout instead of Login.
3. Change the logout

action.

a. In the Admin page, click the Logout button in the upper-right corner. b. Close the browser and return to Visual Studio. Rather than return to the login page after clicking Logout, you might prefer to return to the home page (Default.aspx). c. Open Site.master in Design view and select the LoginStatusControl control. d. In the Properties window, set the LogoutAction property to Redirect. e. In the Properties window, set the LogoutPageUrl property to ~/Default.aspx. f. In the Solution Explorer, select Default.aspx and press Ctrl+F5. g. Click the Admin link and log in with a user name of Joe and a password of P@ssw0rd. h. Click Logout and verify that you return to Default.aspx. Also verify that the link

Page 7 of 10

ASP.NET 2.0 Membership, Login Controls, and Role Management Tasks Detailed Steps i. j. k. l. in the upper-right corner reads Login. Click the Admin link and log in with a user name of Joe and a password of P@ssw0rd. Click the MyComics logo in the upper-left corner of the page. Verify that you go back to Default.aspx and that the LoginStatus control reads Logout rather than Login. Close the browser and return to Visual Studio.

Page 8 of 10

ASP.NET 2.0 Membership, Login Controls, and Role Management

Exercise 4 Enable Role-Based Security

Scenario
In this exercise, youll enable ASP.NETs role manager and configure it to use the SQL Server provider. Youll also create an account named Administrator and a group named Administrators. You will assign the Administrator account to the Administrators group. Then youll modify the sites security settings so that only Administrators can view Admin.aspx. Tasks
1. Enable the ASP.NET

Detailed Steps a. Click Website | ASP.NET Configuration command to launch the Web Site Administration Tool. b. Click the Security tab. c. Click Enable roles. d. Switch to Visual Studio 2005. e. In the Solution Explorer, double-click Web.config. Can you spot the change that was just made? a. Switch to the ASP.NET Web Application Administration page. b. Under Roles click Create or Manage roles. c. In the New role name text box type Administrators and click the Add Role button. d. Click the Back button in the lower right corner of the page to return to the main Security page. a. Under Users, click Create user. b. Fill out the form with the following values: User Name: Administrator Password and Confirm Password: P@ssw0rd. E-Mail: Administrator@contoso.com Security Question: One plus three? Security Answer: 13 c. Check the Administrators box so the new userAdministratorwill be added to the Administrators group. d. Click the Create User button. e. Click the Back button to return to the main Security page. a. Under Access Rules, click Manage access rules. b. Select the Secure folder. c. Click the Delete link to the right of the anonymous users. d. Answer Yes when prompted for confirmation. e. Click Add new access rule. f. In the Add New Access Rule ensure that the Secure folder is selected. g. Ensure that the Role radio button is selected and the Allow radio button is selected. h. Click OK. This adds a rule allowing administrators access to the Secure folder.

role manager.

2. Create an

Administrators group.

3. Create an

Administrator account.

4. Make Admin.aspx

off limits to nonadministrators.

Page 9 of 10

ASP.NET 2.0 Membership, Login Controls, and Role Management Tasks Detailed Steps i. Click Add new access rule. j. In the Add New Access Rule ensure that the Secure folder is selected. k. Select the All users radio button and ensure that the Deny radio button is selected. l. Click OK. This adds a rule denying all users access to the Secure folder. m. Click Done. n. Switch to Visual Studio 2005. o. At the Visual Studio 2005 dialog, click Yes. p. In the Solution Explorer, double-click the Secure/Web.config file q. Inspect the <authorization> element. What changes did the Web Site Administration Tool make? r. In the Solution Explorer, select Default.aspx and press Ctrl+F5. s. Click the Admin link and log in with a user name of Joe and a password of P@ssw0rd. What happens? t. Log in again as Administrator with a password of P@ssw0rd. u. Verify that Admin.aspx appears.

Page 10 of 10