AMIT3023 Web Application Programming Practical Exercise 7

Practical Exercise 7

Q1. Creating SQL Server Express Database

• Create [Practical7] ASP.NET web application project in Visual Studio.

• Create a new SQL Server Express database named [UserDB.mdf] in the [App_Data] folder.

• Create a new table named [Member] with the following fields:

• Fill the [Member] table with the following records:

• Create a new table named [Admin] with the following fields.

• Fill the [Admin] table with the following records:

Q2. Creating Database View

• Create a new database view named [User] that extract login data from both tables. The SQL
required is as follows:

Academic Year 2020/2021 Page 1 of 12

AMIT3023 Web Application Programming Practical Exercise 7

• Right-click the [User] view and select [Show Results] to examine its data:

Q3. Adding Database View to OR Designer

• Add a new DBML (LINQ to SQL Classes) file named [UserDB.dbml] to the project.

• From Server Explorer, drag-and-drop the [Member] table, the [Admin] table and [User]
view to the Object Relational (OR) Designer. The following entity classes should be
generated:

Q4. Configuring Authentication

• In Solution Explorer, open the [Web.config] file under the root folder.

• Add a new <authentication> element under the hierarchy [configuration > system.web].
Type the XML codes as shown below:

Academic Year 2020/2021 Page 2 of 12

AMIT3023 Web Application Programming Practical Exercise 7

Other sections are

not shown for brevity

We are implementing
Forms Authentication

URL for the default landing page

(after login) and the login page

Remember the user login session for 14 days

(14 X 24 X 60 = 20160 minutes) if he opts for

Q5. Configuring Authorization

• Within the same [Web.config] file, add a new <location> element under the hierarchy
[configuration]. Write authorization rules to prevent Anonymous users from accessing the
[Protected.aspx] page:

The setting is applied to

[Protected.aspx] page

Anonymous users are denied

from accessing the page

• Create a new [Web.config] file under the [MemberOnly] folder. Add a new <authorization>
element under the hierarchy [configuration > system.web]. Write authorization rules to
allow ONLY Member users to access the folder:

ONLY Member users are allowed to

access to the folder (and its pages)

Academic Year 2020/2021 Page 3 of 12

AMIT3023 Web Application Programming Practical Exercise 7

• Create a new [Web.config] file under the [AdminOnly] folder. Add a new <authorization>
element under the hierarchy [configuration > system.web]. Write authorization rules to
allow ONLY Admin users to access the folder:

ONLY Admin users are allowed to

access to the folder (and its pages)

• Test the result. You should be denied from accessing the [Protected.aspx] page, as well as
pages under the [MemberOnly] and [AdminOnly] folder.

Q6. Programming the Hash Function

• Add a new C# class file named [Security.cs] under the root folder:

• Add the following additional using statements:

NOTE: You can also add an using statement automatically by placing the mouse cursor on
the targeted class (e.g. Encoding) and press [Ctrl + .] to activate and select an option (e.g.
add using statement) from the smart tag menu.

• Within the class, create a new method named GetHash. The method should convert a
plaintext password to its base64 encoded hash by using the SHA-256 hash function:

Academic Year 2020/2021 Page 4 of 12

AMIT3023 Web Application Programming Practical Exercise 7

Convert string
to byte array

Compute the hash, which

works with byte array only

Convert byte array to

base64 encoded string

Q7. Programming the Register Page

• Create [Register.aspx] page:

Double-click on this
CustomValidator

• Double-click on the CustomValidator with error message [The [Username] has been used].
Program its ServerValidate event handler to detect duplicated username:

Get the input

Reject the username if it has

been used by any of the users
(both Member and Admin)

Academic Year 2020/2021 Page 5 of 12

AMIT3023 Web Application Programming Practical Exercise 7

• Double-click on btnRegister. Program the btnRegister_Clicked event handler to insert a new

Member account:

Compute the password

hash for storing in the
database

Redirect user to the

[Successful.aspx] page

• Open the [Successful.aspx] page:

• Switch to Source View. Write the following HTML and JavaScript codes to redirect the user
to [Login.aspx] after 3 seconds:

Perform the JavaScript codes

(the 1st parameter) after 3000
milliseconds (3 seconds)

• Test the result. Try to register a new Member account. Once register successfully, you
should be redirected to the [Successful.aspx] page. After 3 seconds, you will be redirected
again to the [Login.aspx] page.

Q8. Programming the Login Page

• Create [Login.aspx] page:

Academic Year 2020/2021 Page 6 of 12

AMIT3023 Web Application Programming Practical Exercise 7

CustomValidtor: cvNotMatched

• Add the following additional using statement:

• Double-click on btnLogin. Program the btnLogin_Clicked event handler to login the user if
the login credentials are matched. Otherwise, display the relevant error message:

Use LINQ query to select the

user record with matching
username and password

Compute the password

hash before comparison

If a matching user record

is found, login the user

Otherwise, display
the error message

NOTE: Unlike typical circumstances, the CustomValidator named cvNotMatched is not

attached with any server-side validation code. This is because our login logic has already
performed the necessary login credentials checking. Thus, the CustomValidator is mainly
used for displaying the error message only in our scenario here.

Academic Year 2020/2021 Page 7 of 12

AMIT3023 Web Application Programming Practical Exercise 7

Q9. Programming the Logout Page

• Create [Logout.aspx] page:

• Add the following additional using statement:

• Program the Page_Load event handler to logout the user if he is an authenticated user.
Force the browser to reload the page after logout:

If it is an authenticated user

Logout the user and

reload the page

• Test the result. Try to login by using any of the Member or Admin accounts available in the
database. Passwords for all the default accounts are [password]. After login, you should be
able to access to the [Protected.aspx] page. Try to logout also.

• However, you still unable to access to the pages under the [MemberOnly] and [AdminOnly]
folders even if you login with the relevant Member or Admin account. This is because forms
authentication does not role-based authorization by default.

Q10. Enabling Role-based Authorization

• Open the [Security.cs] C# class file.

• Add the following additional using statements:

• Open the data file named [Code Snippets.txt] as given to you. Copy all the codes in the data
file and paste them within the Security class block. You should now have 2 additional public
static methods in the class: LoginUser and ProcessRoles.

Academic Year 2020/2021 Page 8 of 12

AMIT3023 Web Application Programming Practical Exercise 7

• Open the [Login.aspx] page. Modify the btnLogin_Clicked event handler as shown below:

Remove or comment out

the original login function

Replace the original login function

with this call to the LoginUser method

• In Solution Explorer, add the [Global.asax] file under the root folder.

• Add the following Application_PostAuthenticateRequest event handler to the file:

NOTE: The event handler is not in the [Global.asax] file by default. You will have to add it
manually (you can copy-and-paste other event handler and modify accordingly).

• Test the result. Try to login by using any of the Member or Admin accounts available in the
database. Passwords for all the default accounts are [password]. After login, you should be
able to access to the pages under the [MemberOnly] or [AdminOnly] folder now (depending
if you are using Member or Admin account).

Q11. Enabling Sitemap Security Trimming

• Currently, the menu displays all menu items regardless if the user has access to them. We
want to show ONLY menu items that are accessible by the current user:

Academic Year 2020/2021 Page 9 of 12

AMIT3023 Web Application Programming Practical Exercise 7

• In Solution Explorer, open the [Web.config] file under the root folder.

• Add a new <siteMap> element under the hierarchy [configuration > system.web]. Type the
XML codes as shown below:

Indicate the default sitemap provider is

sitemap1 (which is to be added below)

A name for the sitemap

provider (or settings)

Get sitemap data

from the default
[Web.sitemap] file

Enable sitemap Type of the

security trimming sitemap provider

• Within the same [Web.config] file, locate the <location> element we have created earlier.
Add 3 more <location> elements to refine our authorization rules:

• Open the [Logout.aspx] page. Modify the Page_Load event handler as shown below:

Academic Year 2020/2021 Page 10 of 12

AMIT3023 Web Application Programming Practical Exercise 7

Remove or comment
out this original line

We redirect the user to [Home.aspx]

after logout (as now Anonymous users
can longer access to the logout page)

• Open the [Web.sitemap] XML file. Add the roles attribute to the Member and Admin
sitemap nodes:

• Test the result. The menu should now display (or hide) menu items depending on the user
login status and role:

Before login

After login using

Member account

Q12. Using Login Controls

• Open the master page [Site.Master].

Academic Year 2020/2021 Page 11 of 12

AMIT3023 Web Application Programming Practical Exercise 7

• Drag-and-drop a LoginView control and a LoginStatus control from the Toolbox to the
footer section of the master page as shown below:

A LoginView Control A LoginStatus Control

• Create the following contents in the AnonymousTemplate of the LoginView control:

Display the text

[Please Login]

• Create the following contents in the LoggedInTemplate of the LoginView Control:

Display the text A LoginName control. Set its

[Welcome Back] Font.Bold property to True

• Select the LoginStatus control. Modify its properties as follows:

LoginImageUrl = ~/Images/Login.png
LogoutImageUrl = ~/Images/Logout.png
• Test the result. Try to login and examine the result at the footer section of the page:

Before login: Click the

image button to navigate
to the login page

Username of the
user is shown After login: Click
the image button
to logout

Academic Year 2020/2021 Page 12 of 12