Beginning ASP.NET 2.0 With CSharp (2006) [eng]

Chapter 4

Passport authentication isn’t as widely adopted as Microsoft perhaps would have liked, but some sites on the Internet do link to the Passport network to handle web site authentication (for example, Expedia.com). Passport authentication relies on the entire repository of user accounts being accessible from anywhere in the wired world, a bit like a central active directory for web accounts.

This book uses Forms authentication to handle all authentication with the Wrox United application.

Wrox United Security

The Wrox United site that you’ve been working on so far needs to have some security applied to it if you want to be able to include some personalization in the site. In the finished site (www.wroxunited.net), you’ll see that there is shopping cart functionality built in to the site. Additionally, the finished site will also have an administration area, where you can edit fixtures, team members, and much more. This all means that you’re going to have to add some users and roles at some stage. Because you have gained plenty of experience of using the configuration tool, you can now perform the first stage in this process. The next Try It Out walks you through the user accounts and roles configuration for the Wrox United site. At this stage, you don’t have to worry about locking down parts of the site — that’s a task for later in the book.

1.Open the final version of the Wrox United site in VWD. Then click the Website menu and select ASP.NET Configuration. This launches the configuration tool for the site. Figure 4-32 shows the configuration screen that is displayed for the finished version of the site.

Figure 4-32

128

Membership and Identity

2.Click the Security link to go to the section where you can configure users and roles. As you did previously in this chapter, launch the security setup wizard. As you walk through the wizard, select the following:

The application will be used over the Internet.

Roles are enabled.

Roles should be defined for Administrator, FanClubMember, Manager, Owner, and Reporter (see Figure 4-33).

3.Look at the user accounts. The user accounts predefined with the Wrox United application are shown in Figure 4-34.

4.Take a look at the configuration for the finished application. You’ll see that the preconfigured user accounts are each members of different roles, so while the ChrisH account is a member of the Reporter role, Jim is a member of the Owners role, and Lou is a member of the Fan Club.

5.After you finish the wizard, look at a couple of subfolders within the WroxUnited directory that contain specific areas of the site — the Admin and the FanClub sections. These areas have some access restrictions on them.

Figure 4-33

129

Chapter 4

Figure 4-34

6.Go to the section for managing Access Rules and you’ll see the following rules:

For the main WroxUnited folder, anonymous access is allowed.

For the FanClub folder, only members of the FanClub role can access the folder — all other users are denied access.

For the Admin folder, access is denied to all users.

How It Works

With the Wrox United application, you have access to the configuration of a fully functional web application. Feel free to have a look through this configuration using both the Administration Tool and the Web.config file to see how the basic permissions are enabled. This example is only a taste of what will come later in the book, because Chapter 11 covers the details of role-based access to a site and shows you different techniques for enabling and disabling content by role.

The code generated for filtering access to the FanClub folder has been added to the Web.config file that lives within the FanClub folder. This code is as follows:

130

Membership and Identity

<?xml version=”1.0” encoding=”utf-8”?> <configuration>

<system.web>

<authorization>

<allow roles=”FanClubMember” /> <deny users=”*” />

</authorization>

</system.web>

</configuration>

Notice that the FanClubMember role has been defined as the only role that has permission to access the content in this folder.

The directory-level permission created in this example has created a restricted zone in the site. Chapter 11 walks through some examples using the Administration section and the Fan Club sections, demonstrating different parts of ASP.NET 2.0 technology. These examples will rely on an understanding of the foundations built in this section.

Summar y

This chapter discussed the basics of security, the concept of identity, and the process involved in logging on to a site. These are familiar concepts to anyone who spends time on the Internet, surfing fan sites, community portals, or online shops. Because these concepts are so universal, you’ve seen how ASP.NET 2.0 is designed to make the process of creating sites that use this functionality.

The core concepts to understand are as follows:

Identity: The concept of an individual as described by a set of attributes that make that individual unique.

Authentication: The concept of identifying a user to a server by passing a set of credentials to the server. If the server can identify the user attempting to connect, he or she will be authenticated.

Authorization: The process of taking authenticated user credentials and comparing them against a set of access control list information, providing the answer to the question “can this user access the requested resource?”

Personalization: The capability to provide information that is specific to the currently logged-in user.

Membership: The concept of belonging. This chapter considered the concept of users being members of specific roles.

The next chapter expands on the concept of personalization and looks at how ASP.NET sites can be personalized.

131

Chapter 4

Exercises

1.Change the configuration of your Chapter 4 web site to allow anonymous access, but to deny access to one specific user account.

2.Add a subfolder to the Chapter 4 web site called Admin. Within this folder, add a page called MainAdmin.aspx with a LoginName control on it and any other controls you might want. Change the access permissions for that specific folder so that only members of the Administrators group can view the page.

132

5

Styling with Themes

The process of developing any web application usually revolves around two main areas: functionality and appearance. The functionality aspect of a web application includes the structure of the site, the behavior of the controls, the user experience, code for securing the application, what happens when the user clicks a button, and so on. The appearance of a site is somewhat more aesthetic, and involves the use of color, images, the layout of pages, and to some extent, the style of code that is rendered to the browser. A successful application will strike a good balance between the two sides, providing a visually pleasant site that is easy to use and to work with for all users, and it’s the balancing act between the two sides where many sites fail.

This chapter starts by introducing the fundamental tools available for styling web applications, before introducing the styling capabilities of Visual Web Developer. It goes through the basics of styling individual controls before moving style information into a separate CSS file, and then introduces themes — a new technique for styling pages and sites.

In this chapter, the following topics are discussed:

Styling a web site, from styling individual elements to the use of CSS style sheets

Developing style sheets for an application in VWD

Using ASP.NET 2.0’s themes and skins to rapidly develop styled web content that conforms to a standard look and feel

Adding style to the Wrox United site using themes and skins

Additionally, this chapter also discusses the concepts of usability and accessibility, which are two important areas of web design that should be considered when developing any web site.

Styling a Site

It may sound obvious, but the front page appearance of a site is the first thing your visitors will see, and although we are told never to judge a book by its cover (particularly in the case of Wrox

Chapter 5

author mug shots!), most of us will still have an initial impression of a site based on its appearance, whether it’s a fairly neutral response (it’s okay, it does the job, where’s the search box?), a positive response (neat, slick, pretty, show me more!), or a negative response (yuk, messy, I’m going somewhere else!). Initial impressions count, so it’s important that you get them right.

In any site design there are common elements; for example, some kind of header that gives you a company name, an idea of what the site is about, or a reflection of why you are looking at the site. You will also find areas such as menus, search boxes, groups of links, footers, and so on. A page without these sorts of elements will only be relevant to a specific audience; for example, a developer proving a concept, or the reader of a book who’s trying out some new technology. Positioning these elements precisely is important, as is structuring the content to fit the style of site you’re trying to develop.

Styling and laying out a site is an integral part of web development. Although laying out a site is one aspect, the styling of a site can be a bit trickier. This chapter focuses on styling pages and the rules and hierarchy involved in this process — laying out elements and positioning items on a page is part of web design that is discussed throughout this book.

Style Attributes

The easiest and quickest way to change the way an element appears on a page is to add a style attribute. The style attribute can be applied to any visible element on a page. For example:

<div style=”font-weight:bold;color:red;border-bottom:solid 2pt navy”>This is a

styled “div” tag</div>

Figure 5-1 shows how this style attribute will look in Internet Explorer.

Figure 5-1

In the following Try It Out, you start by creating a web site that you can use to host all of the examples in this chapter.

1.In VWD, open the starter web site called Chapter05 (C:\BegASPNET2\Chapters\Begin\ Chapter05). This starter site contains just a few files to give you a head start on the examples within this chapter.

134

Styling with Themes

2.Add a new blank .aspx page and call it Default.aspx. Switch straight to Source View and type the following highlighted lines of code between the Form tags:

<form id=”form1” runat=”server”>

<div style=”font-weight:bold; color:red; border-bottom:solid 2pt navy;”> This is a styled “div” tag

</div>

</form>

Notice how Visual Web Developer helps you as you type in the style information (see Figure 5-2).

Figure 5-2

3.Switch over to Design View and see how your formatting has been applied to the page, as shown in Figure 5-3.

4.Notice how the style tag has the style attribute information visible in the properties pane. If you click somewhere within the value for the Style attribute, you’ll notice the ellipsis button (. . .) next to the style information. Click this button and you will see the Style Builder dialog box, shown in Figure 5-4.

This dialog box comes in very handy when you are styling elements, because you won’t have to remember the individual syntax for each style. All you need to do is select the attributes you want to apply to the element and click OK to apply the style. Go ahead and do that with another page.

5.Create another .aspx page and call it StyledPage1.aspx. In this page, add a simple <div> element with the text This is highlighted text and a Heading 1 (h1) element with the text This is also highlighted text.

135

Chapter 5

Figure 5-3

Figure 5-4

6.Using the Style Builder dialog box (see Figure 5-5), set the style for both elements to use the Trebuchet MS font family, and set them to appear in Navy. This will add the following code to Source View for you automatically:

136

Styling with Themes

<div style=”font-family: ‘Trebuchet MS’;Color: Navy;”> This is highlighted text.</div>

<h1 style=”font-family: ‘Trebuchet MS’;Color: Navy;”> This is also highlighted text.</h1>

Figure 5-5

7.View the page in your browser to see the finished article. It should look similar to Figure 5-6.

Figure 5-6

137