Home.NET Creating ASP.NET Login Web Pages and Basic...
Creating ASP.NET Login Web Pages and Basic Configuration
This is another important tutorial on how to create a login page in ASP.NET 3.5. This is a part of a series of user management related tutorials in ASP.NET. You will learn how to create and configure a page that allows members to log into your website.
Contributed by Codex-M Rating: / 39 August 10, 2010
If you have not read those tutorials, it is highly recommended that you read those first in order to understand this material easily. These are the links:
This article has two main learning objectives which you can expect to know by the end of this tutorial. First, you will know how to create a login page for your ASP.NET website. Second, you will be able to perform basic configuration of ASP.NET login web controls.
Example: creating an ASP.NET login web page
For example, say you're starting from scratch in creating a login web page in your ASP.NET website. You're the first user of the website, as well as the administrator. What are the steps you need to take to get started? The following is the flow chart of the implementation:
According to the flow chart, you need to create your ASP.NET website first. This tutorial uses Visual Web Developer Express 2008 as the editor and Visual Basic as the language. Name your project aspnetloginexercise.
The website is then created, with the following initial files:
Default.aspx
Default.aspx.vb
web.config
App_Data
The flow chart above can be used to create a variety of user-management enabled ASP.NET websites in either small or large domains. Once you have a fully working login web page onto which an administrator can log in, you can start letting other users log into your website, or register them using the CreateUserWizard web control as discussed in this tutorial.
Now that you have created your ASP.NET website, the next step is to enable “Form-based authentication.” Details of this process are discussed in this tutorial.
To review, the main purpose of enabling form-based authentication is to allow the use of web forms for logging in. To do this, follow the steps below:
Go to the source code view of Default.aspx.
In Visual Web Developer menu, go to Website -> ASP.NET configuration.
The Website Administration tool will then be launched in the browser.
On the front page, click “Security.”
Under “Users,” click “Select authentication type.”
Under “How will users access your site?” click the radio button “From the Internet.”
Click “Done” (located at the bottom).
Now that you have enabled “form based authentication” using a web page, you need to create the first website user -- namely, yourself. Follow the steps below (still in the Website Administration Tool):
Click “Create User” under “Users.”
You need to enter information as completely as possible. Note your username and password; write it down on a piece of paper, because you will need that later. Click “Create User” when done. Do not forget to check “Active user.”
If you see the message “Complete; your account has been successfully created,” click Continue.
However, you only need to add one user for now, so click the “Security” link in the menu.
You need to create the “Administrator” role and assign your newly-created username as the website administrator. To do this:
Under Roles, click “Enable roles.”
Click “Create or Manage roles.”
Under “Create New role,” enter Administrator and then click “Add Role.”
Under “Add/Remove Users,” click “Manage.”
You need to type the username you created earlier, and then click “Find User.”
Once you see your username, mark the checkbox under “User Is In Role” checked. This will assign your username to the role of administrator.
Close the browser window of the Website Administration tool. The basic configuration has been completed.
The default login page in ASP.NET websites is called login.aspx. You need to create this page; its exact name should be “login.aspx.” To do this, go through the following steps.
Step 1. In Visual Web Developer, go to View -> Solution Explorer.
Step 2. In Solution Explorer, right click on your website local path (e.g. E:\aspdotnetprojects\aspnetloginexercise\) and click “Add New Item.” Under “Visual Studio Installed templates” select “Web Form.”
Step 3. Change the name from Default2.aspx to login.aspx.
Set the language to “Visual Basic” and check “Place code in separate file.”
Step 4. Click “Add.”
Step 5. Go to File -> Save All.
You will then see login.aspx added as the new ASP.NET web page in your root directory, in addition to Default.aspx.
You need to accomplish two important things on login.aspx. First, you need to show a login web form to anonymous users (using “AnonymousTemplate”). Second, you need to present a welcome message for logged-in users (using the “LoggedInTemplate”).
To do this, you need to use the “LoginView” web control (View -> Toolbox -> Login -> LoginView).
Step 1. Go to the source code view of login.aspx.
Step 2. Click and drag the “LoginView” web control to between the <form><div> and </form></div> tags.
Step 3. Go to the design view.
Step 4. Click the web control and the > symbol. You will then see two templates in a drop down; the default shown is the “AnonymousTemplate” while the other is the“Logged InTemplate.”
Make sure the “AnonymousTemplate” view is set first.
Step 5. Using the “AnonymousTemplate,” click and drag the “Login” web control (View -> Toolbox -> Login -> Login) to the box inside “LoginView1.” It should look like this after dragging:
Step 6. Now change the views to “LoggedInTemplate” by clicking > arrow and then selecting “LoggedInTemplate.”
It will then change to:
You will need to enter a welcome text for the logged-in user, as well as set it up to display the username.
Example:
Hi, [UserName]…Welcome back to the website!
Note: The web control [UserName] can be created by dragging LoginName from the toolbox (View -> Toolbox -> Login -> LoginName) to the box inside LoginView.
Screen shot:
The configuration of login.aspx is complete. For reference, below is the complete login.aspx source code:
Finally, at the home page (Default.aspx), you can add a login link which is dynamically controlled when a user is or is not logged in.
If the user is NOT logged in, the “login” hyperlink will be shown; otherwise, the “logout” link will be displayed.
This is normally what you see in standard ASP.NET websites. To do this, take the following steps.
Step 1. Add some text on your home page.
Example:
<form id="form1" runat="server"> <div> Hi, this is your homepage. IF you are logged in to my website, you will see the logout link below, otherwise a login link will be shown. </div> </form>
Step 2. Click and drag the LoginStatus web control (View -> Toolbox -> Login -> LoginStatus) next to the text paragraph. So it will now look like this:
<form id="form1" runat="server"> <div> Hi, this is your homepage. IF you are logged in to my website, you will see the logout link below, otherwise a login link will be shown. <br /> <br /> <asp:LoginStatus ID="LoginStatus1" runat="server" /> </div> </form>
Step 3. Go to the Design View, click the > of “Login.” You should see two templates:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> Hi, this is your homepage. IF you are logged in to my website, you will see the logout link below, otherwise a login link will be shown. <br /> <br /> <asp:LoginStatus ID="LoginStatus1" runat="server" /> </div> </form> </body> </html>
To test in the browser, go to Default.aspx, then File -> View in Browser. What you will see should look like the screen shot below:
Since the user is still not logged in, the Logged Out template of the LoginStatus web control is shown, so you will see the “Login” link below the text.
Clicking the “Login” link automatically takes you to the login page. If you are logged in, the “login” link you saw earlier on the home page changes to “Logout.”
Now that you have created a basic login page, you can also incorporate or create a new page to sign up new users (using CreateUserWizard). Also, you do not need to create a new database for your applications, since ASP.NET has already created a database for you, named ASPNETDB.MDF, which you can also use for your applications (aside from user management purposes).
Dynamic Sitemap and Navigation in ASP.Net
