Password Protecting Content with ASP.NET in Expression Web

Author : Jim Cheshire - Jimco Software and Books
Web site : www.jimcobooks.com

This article appeared in the Expression Newsletter; subscribe to get the next issue.

I hear from a lot of Expression Web users, and one of the most common questions I hear is "how do I password protect a website or part of a website in Expression Web?" There are many ways that you can go about password protecting content, but if the server that hosts your website is a Windows server and you can use ASP.NET, the ASP.NET membership features available in Expression Web offer an easy way to add powerful membership features to your site.

Expression Web's toolbox includes all of the ASP.NET Login controls that are supported by ASP.NET 2.0 and later. (See Figure 1.)  Some Expression Web users are hesitant to use these controls because they aren't programmers and don't want to have to learn how write code. However, as you'll see in this article, you can use the ASP.NET Login controls and membership features to password protect your content easily without writing any code at all.

Note : ASP.NET only protects ASPX pages, master pages, and user controls. If you want to password protect PHP pages or regular HTML pages, you'll need to use a different method.

_{Figure 1: The Login Controls}

How ASP.NET Password Protection Works

To password protect content using the ASP.NET Login controls in Expression Web, you'll follow these steps.

1. Add a login page to your website.
2. Configure ASP.NET to use Forms authentication.
3. Add users if necessary and create user roles (groups of users) if desired.
4. Add access rules to let ASP.NET know what content different users and/or roles are allowed to access in the website.

Steps 2 through 4 look more complicated than they really are. In this article, I'll show you how to use the Web Site Administration Tool to configure all of the necessary settings from a convenient web-based interface.

Adding a Login Page

ASP.NET membership uses an authentication mechanism built into ASP.NET called Forms authentication. Instead of using the operating system's login box, ASP.NET Forms authentication asks for a user's username and password using a standard web page, thereby allowing you to incorporate your website's look and feel into your login interface.

To create a login page for your users, follow these steps.

1. Select File, New, Page in Expression Web.
2. In the New dialog, select either General or ASP.NET in the left pane.
3. Select ASPX from the list of page types as shown in Figure 2.

_{Figure 2: Choosing the ASPX Page Type}

Notice that Expression Web provides the option of choosing a programming language in the lower-right corner of the New dialog box. We won't be writing any ASP.NET code in this article, so the choice of language is inconsequential. However, if you feel that you might want to enhance your pages with some ASP.NET code in the future, you might want to select a language that you are most comfortable with at this point. If you're most comfortable with the syntax of JavaScript, choose C#. However, if you are most comfortable with Visual Basic syntax, choose VB as the programming language.

Once you've created the new ASP.NET page, save it in the root of your website as login.aspx. You can use a different name for your login page, but if you do, it will require additional configuration that we won't cover in this article.

In order to enable users to log in using your new login page, you will need to add an ASP.NET Login control to the page. To do that, follow these steps.

1. Switch to Design view if necessary.
2. Drag a Login control from the Login section of the ASP.NET Controls section of the toolbox and drop it onto your page.
3. Click AutoFormat and choose an attractive format for your control if you wish.

Once you've finished these steps, your login page should look like the one shown in Figure 3.

_{Figure 3: The Login Page}

Keep in mind that you can use an Expression Web Dynamic Web Template or an ASP.NET Master Page to make the login page take on the look and feel of the rest of your website. You can also add other controls to this page if you wish. For example, if you want to allow users to create their own user ID for your website, you might want to add an ASP.NET CreateUserWizard control. You may also want to add a ChangePassword control or a PasswordRecovery control for a user who might have forgotten his or her password. We won't delve into these additional Login controls in this article, but I do go over them in-depth in my book The Expression Web Developer's Guide to ASP.NET 3.5.

Configuring Users and Access Rules

The configuration for ASP.NET Forms authentication is contained within a web configuration file, an XML file named web.config. Depending on how you configure your website, you may have more than one web.config file. In this article, we'll configure some access rules for a website that will use two different web.config files, one in the root of the site and another in a folder called admin.

You can manually add web.config files to your website and then add the necessary XML code for Forms authentication, but doing so can be tedious because XML is case-sensitive and errors in the web.config file can produce unintuitive error messages. A much better choice is to use the Web Site Administration Tool, a web-based interface for configuring an ASP.NET website.

Launching the Web Site Administration Tool

If you look at the Login Tasks popup that appears in Figure 3, you'll see an Administer Website link. That link is generated by ASP.NET and is designed to launch the Web Site Administration Tool. Unfortunately, Expression Web doesn't support the use of this link. If you click it, you'll see the error shown in Figure 4.

_{Figure 4: Web site administration service error in Expression Web.}

As it turns out, you can still use the Web Site Administration Tool with Expression Web. It's just not quite as easy as clicking a button. To launch the Web Site Administration Tool for use with your Expression Web website, follow these steps.

1. If your website is a disk-based site, browse to one of the ASP.NET pages in your site so that the Microsoft Expression Development Server starts and loads your site.
2. Open a command line and switch to the WebDesigner folder of your Expression Web installation. By default, it's located at C:\Program Files\Microsoft Expression\Web 2\WebDesigner.
3. Run the following command.

   >expression.devserver /port:65000
   /path:C:\Windows\Microsoft.NET\Framework\v2.0.50727\ASP.NETWebAdminFiles
   /vpath:/asp.netwebadminfiles

Note : This command will likely appear on multiple lines in this article. When you enter the command, enter it as one command.

This command will launch a new instance of the Microsoft Expression Development Server for the Web Site Administration Tool. In order to use the Web Site Administration Tool for the website you are working on in Expression Web, you'll need to browse to the following URL.

http://localhost:65000/asp.netwebadminfiles/default.aspx?applicationPhysicalPath=<disk_path_to_website>&applicationUrl=/<name_of_website>

For example, suppose you are working on a website located at c:\users\jim\websites\mysite. The URL that you would use to manage this site using the Web Site Administration Tool is as follows.

http://localhost:65000/asp.netwebadminfiles/default.aspx?applicationPhysicalPath=C:\Users\jim\websites\mysite\&applicationUrl=/mysite

I realize that doing this is a little complicated. However, once you enter the URL once, you can bookmark it for future use for this particular website. I am also planning on developing an add-in for Expression Web that will place a toolbar button on the Expression Web toolbar that will automate this process entirely. Keep an eye on my website at www.jimcosoftware.com for updates on that.

Configuring Forms Authentication Using the Web Site Administration Tool

Warning : Make sure that you don't have the web.config file open in Expression Web while using the Web Site Administration Tool. If you do, you may unintentionally overwrite the changes that the Web Site Administration Tool makes to the web.config file.

Once you've browsed to the URL above, you will see the Web Site Administration Tool as shown in Figure 5. The first time that you browse to the Web Site Administration Tool for a particular site, ASP.NET will automatically create an App_Data folder in your website and add a SQL Server Express Edition database to it for your membership information. That process takes a few seconds, so be patient. (Later in this article, I'll provide a link containing information on using other types of databases.)

_{Figure 5: The Web Site Administration Tool}

To configure the Forms authentication for the website, use the options on the security tab. Click the Security tab or the Security link and you'll see the Security page as shown in Figure 6.

_{Figure 6: The Security Tab}

As you can see in the Users section, the authentication type is currently set to Windows. In order to use Forms authentication, you'll need to change that. Click the link that says Select Authentication Type and select From the Internet in the next page as shown in Figure 7.

_{Figure 7: Choose From the Internet in order to enable Forms authentication.}

Once you choose From the Internet, click the Done button in the lower-right corner to apply that change. When you do this, the Web Site Administration Tool will add a web.config file to the root folder of your application and it will configure it to use Forms authentication.

Creating Users

When the Security tab reloads, you'll see that you now have the option to create and manage users, enable roles, and configure access rules for the application as shown in Figure 8.

_{Figure 8: After enabling Forms authentication, more options appear.}

Click the Create User link. When you do, you'll see the screen shown in Figure 9 where you can create a new user. Keep in mind that ASP.NET membership features impose certain security restrictions on the password, so you'll want to make it fairly complex. If you want to change those requirements, you can find details on doing so at http://weblogs.asp.net/owscott/archive/2005/05/11/406550.aspx.

_{Figure 9: Creating a new user.}

Users that you create are added to the database in the App_Data folder by default. However, you can configure ASP.NET to store users in a different type of database by reconfiguring the ASP.NET membership features. For information on doing that, see the link provided in the More Resources section at the end of this article.

Creating Roles

Roles allow you to create groups of users so that you can easily control many users' access to parts of your website. For example, you might have a portion of your website that is available to some users and not to others. By creating a role and giving that role access to that portion of the website, you can give a particular user access by simply assigning the user to that role. This makes managing access to several portions of the website much easier and less prone to mistakes.

Before you can create a new role, you must first enable roles for the website. To do that, click the Enable Roles link shown in Figure 8. You'll then see the link to Create or Manage Roles highlighted in Figure 10.

_{Figure 10: Click Create or Manage Roles to create a new role.}

After you click Create or Manage Roles, enter the name of your new role and click the Add button. You'll see your new role listed and you'll have the option of managing your role (adding and removing users from the role) as shown in Figure 11.

_{Figure 11: A new role called Admins has been created.}

When you click the Manage link under Add/Remove Users, you'll be presented with a screen where you can locate users that you want to add to a particular role. As shown in Figure 12, you can place a check in the User Is In Role checkbox to add a user to a role. Clearing the check removes the user from that role.

_{Figure 12: The User Is In Role checkbox allows for the management of roles.}

Configuring Access Rules

Once you've added your users and configured your roles, you are ready to set up access rules so that you can control who can and who can't access certain portions of your website. (You can, of course, also control access to your entire website.) To create access rules, click the Create Access Rules link shown in Figure 10 and you'll be taken to the Add New Access Rule screen shown in Figure 13.

_{Figure 13: The Add New Access Rule screen.}

The first thing you want to do in the Add New Access Rule dialog is to specify the directory to which the rule should apply. In Figure 13, I've selected the root directory of my site because I am configuring a rule that I want to apply to the entire site.

Important Note : You can see the _vti_cnf folder in Figure 13. Don't create access rules directly on the _vti folders. These folders are used by Expression Web and when you publish the site, these folders might not be transferred.

Once you've selected the directory for your access rule, choose to whom the rule should apply. You can choose a particular role, a particular user, all users, or only anonymous users. (In Figure 13, I have selected Anonymous Users because I am configuring a rule that requires users to log in before accessing any part of my website.) You'll then need to choose whether your rule should allow access or deny access. In Figure 13, I've selected Deny because I want to deny access to all anonymous requests to my website.

Once you've configured the rule, click OK to add the new rule. Access rules go into effect immediately.

Managing Access Rules

You can manage your access rules by clicking the Manage Access Rules link shown in Figure 10. When you click this link, you'll be taken to the Manage Access Rules screen shown in Figure 14.

_{Figure 14: The Manage Access Rules screen.}

In Figure 14, the access rules for the admin directory are displayed. (The rules that are displayed differ depending upon which directory you select in the Manage Access Rules screen.) When any file in the admin directory is browsed, ASP.NET will apply the access rules in the order listed. However, ASP.NET won't necessarily apply all of the access rules. Instead, it will stop applying access rules as soon as it encounters a rule that applies to the current user. Using the configuration shown in Figure 14, if a user who is a member of the Admins role browses a file in the admin folder, he or she will be denied access because the first rule listed denies access to everyone. The second rule that allows access to the Admins role would have no effect.

In order to resolve this problem, I need to change the order of the first and second rules. To do that, click on Admins on the second rule in order to select that rule and then click Move Up as shown in Figure 15 to move it up in the list.

_{Figure 15: Reordering a Rule}

Figure 16 shows the new access rule list after the rules have been reordered.

_{Figure 16: The new order of access rules.}

With the new rule order, when a member of the Admins role browses a file in the admin folder, the first rule will apply and will grant access to the file. All other rules will be ignored because the first applicable rule that's encountered always wins. If the user is not a member of the Admins group, ASP.NET will move on the second rule. That rule will deny access to everyone, effectively preventing anyone other than Admins from access files in the admin folder.

The Resulting web.config File

In order to fully wrap up what's going on under the covers as you use the Web Site Administration Tool, let's have a look at the web.config files that were created by the Web Site Administration Tool.

The listing below shows the contents of the web.config file located in the root folder of the website.

<configuration>
    <system.web>
        <roleManager enabled="true" />
        <authentication mode="Forms" />
        <authorization>
            <deny users="?" />
        </authorization>
    </system.web>
</configuration>

The <roleManager> element that you see in this listing enables roles for the application and the <authentication> element sets the authentication mode to ASP.NET Forms authentication. The next element defines an <authorization> section. This is where the access rules are configured. In the web.config file in the root of the website, there is one access rule that denies access to all anonymous users. (Anonymous users are indicated by a question mark in ASP.NET access rules.)

Because we also created a couple of access rules for the admin folder, the Web Site Administration Tool created a web.config file in the admin folder as well. The listing below shows the contents of that web.config file.

<configuration>
    <system.web>
        <authorization>
            <allow roles="Admins" />
            <deny users="*" />
        </authorization>
    </system.web>
</configuration>

In this web.config file, two access rules are configured. The first one allows access to anyone in the Admins role. The second rule denies access to everyone. (Remember that access rules are applied in the order in which they appear, and as soon as an access rule applies, no more access rules are evaluated.) When you change the order of access rules using the Web Site Administration Tool, what you're doing is changing the order of the <allow> and <deny> elements in the web.config file.

Conclusion

In this article, you've seen how you can use the ASP.NET membership features in Expression Web and you've learned how to use the Web Site Administration Tool to easily manage your site's users, roles, and access rules without having to worry about writing any code. I hope that you'll use this knowledge to explore some of the ASP.NET Login controls further so that you can add powerful membership features to your website.

More Resources

Scott Guthrie, Microsoft Corporate VP of the .NET Developer Division, has a great blog post that contains a large number of great resources for customizing ASP.NET membership features and some common "gotchas" that you might encounter when using Forms authentication.