Implementing Membership Functionality to a Website
This tutorial will walk you through building membership functionality and login controls into your website to secure your data.
What You Will Need For This Tutorial
- Microsoft Visual Studio 2010 or Microsoft Visual Web Developer 2010 Express
- A computer with an internet connection and Microsoft Windows 7 operating system
- A basic understanding of the web and some programming experience would be helpful
Topics That Will Be Covered
- Overview of membership functionality and role based security
- Overview of ASP.NET Security administration tools
- Setting up and implementing a membership login control with users
Start A New Website
Open Visual Web Developer 2010 and in the file menu select the new website option from the dropdown menu or on the start page.
Select Empty ASP.NET Website from the list in the center. This will start your project without the default webpage.
We want to add some pages to our website now. Right click on the name of the website in the solution explorer and select Add New Item.
When the Add New Item display opens, select Web Form from the installed templates list.
In the name box type Home.aspx and make sure the place code in separate file box is checked, and the select master page box is unchecked.
For our website, we are going to need 3 more pages to complete the setup. Repeat steps 1 through 6 three more times to create following pages: Login.aspx, PasswordRecovery.aspx, and SignUp.aspx.
We have our pages created so let’s switch gears and take a look at some of the aspects of membership functionality.
Overview of Membership Functionality
In Visual Studio 2010 and Visual Web Developer 2010, implementing membership functionality using the membership class through the ASP.NET web application administration page. Creating a membership control is very easy and requires almost no coding. Here are a few of the advantages of adding a membership control to your website:
Limited Access to pages: Using the membership control lets you create sections of your website that are “off limits” to the general public by implementing a password login accompanied by a customer account. This is seen everywhere on the internet in websites such as social networking sites that require a fee to join. This control can also be used to make the site or sections of the site limited to a certain group of people. The information on these sites is governed by the membership control.
Role based security: Role based security is based on the concept of authenticating and authorizing a user for access and then defining that access based on the user’s role. This is accomplished through the login and password method. Without a stored login and password, the user can’t “identify” who they are. When a user has successfully logged in, his or her privileges or level of access to the website is based on the role that was created for the login.
Now that we have a basic understanding of the membership functionality we can look at the ASP.NET security administration tools that allow us to create and manage the user accounts for our website.
Overview of The ASP.NET Security Administration Tools
In the toolbar click on the website menu, then click on ASP.NET configuration.
This will open your browser and the home page ASP.NET Application Administration will appear as seen above.
Click on the security tab near the top of the page to navigate to the security administrative tools.
This page gives you access to the tools used to create, manage, or delete user roles for the website you are currently creating.
In the first column to the left under Users, click the hyperlink Select authentication type. Be sure the top selection From the internet is selected.
This indicates that the website will be accessed from the public internet as opposed to a local area network.
In the middle column under Roles, click the Enable roles link and the page will refresh with a new link in the list titled Create or Manage roles.
Now that the roles have been enabled, click the Create or Manage role link.
In the new role name box, type Basic User.
This function lets you create and name a new role. The name can be anything and based on the type of access you want to give the user, you can name the role accordingly (Example: Administrator). For the purposes of this tutorial we will keep it simple with the name “Basic User”.
Click Add Role.
On the bottom right corner of the page, click the back button and then click the create user link in the Users column (far left).
Now that a role has been created we need to create a user for that role.
Fill out the form with a mock user name, password, e-mail, and security question.
It is important to note that the password must be “strong”. This means that there must be a combination of at least 7 or more letters, numbers and at least one non-alphanumeric symbol (Example: -, +, _). For this tutorial any email address will work as the email address will not be used for anything in this tutorial. The security question can be anything, just make sure you remember both the security question and password, because you will need them to access the account you just created shortly.
Click on the Basic User box to check it. This is the name of the role you just created. This will connect the user account with the role.
Click Create user. Click Continue in the success page.
Notice that when you click the continue button it takes you back to the create User page. You can add as many users as you need using this method. There is also a function that we will build into our website shortly that will let us create a new account from a webpage on that site.
We have a user account and role created for our website so now it is time to set up our website so it will accept or decline access based on the login information.
Setting Up and Implementing A Membership Login Control With Users
First we will start with a login control and attach a link on that control to the password recovery page. Open the login page you created earlier in the tutorial and switch to design view.
In the Toolbox under the Login list click on the login control and drag it into the page. On the login control, there is a small menu box in the upper right of the control. Click the box to display the login tasks menu.
The tasks menu for each control gives you different commands and options. Click Auto Format and then click Professional from the schemes menu then click Apply.
This option allows you to change the appearance of the control based on a pre-configured list of design styles.
With the login control still selected go to the properties panel and find the PasswordRecovery function (under links) and click the ellipsis button to the right.
This creates a link on the login controller that directs the user to the password recovery page (which we will build shortly).
In the function just above PasswordRecoveryUrl type the text Forgot Password? in the empty box to the right of the PasswordRecoveryText function.
Save your work and open the PasswordRecovery.aspx Page. Make sure you are in design view and in the Toolbox under the login menu, click on the PasswordRecovery control and drag it onto the page.
On the PasswordRecovery control, there is a small menu box in the upper right of the control. Click the box to display the PasswordRecovery tasks menu.
Notice that this menu contains a dropdown list called “views”. There are three views in the list. These views are the different states in which the PasswordRecovery control will appear on the page.
Click Auto Format and then click Professional from the schemes menu then click Apply. Be sure to complete this option for each view so the theme is consistent throughout the user experience.
Save your work and open the SignUp.aspx page. Be sure you are in design view and in the Toolbox under the Login menu, click on the CreateUserWizard control and drag it onto the page.
This control is set up so a user can create a new account from the internet. This is a very basic setup for this control and can be modified to accept and require different kinds of information (such as payment information) to create an account. For now we will leave it with the default settings.
On the CreateUserWizard control, there is a small menu box in the upper right of the control. Click the box to display the CreateUserWizard tasks menu.
Click Auto Format and then click Professional from the schemes menu then click Apply. Be sure to complete this option for both views so the theme is consistent throughout the user experience.
With the CreateUserWizard selected, go to the properties panel and click on the blank box to the right of the ContinueDestinationPageUrl (under behavior) then click on the ellipsis.
This provides an automatic link back to the login page after the user has created the account.
Select the login.aspx page and click Ok.
Up to this point we have created all of the membership login controls for the website. Now we need a page to tie everything together.
Save your work and open the Home.aspx page. Switch to source view and copy and paste the following code onto the page just under the closing head tag.
<form id="form1" runat="server">
Login Status:<br />
<asp:LoginStatus ID="LoginStatus1" runat="server" />
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/SignUp.aspx">Sign up for a New Account!</asp:HyperLink>
Login Name:<br />
<asp:LoginName ID="LoginName1" runat="server" />
Login View:<br />
<asp:LoginView ID="LoginView1" runat="server">
You are currently logged out.
Congradulations! You are logged in!
This is a simple page layout that contains a LoginView control (also accessible from the Toolbox under the Login menu). The login view control displays the information based on the user’s status. For this tutorial you will notice that the LoginView control has two different views: Logged in and not logged in.
In the solution explorer right click on the Home.aspx page and select Set as Start Page.
Debug or run the application.
You will notice that you are not logged in based on the text in the page. Click the login link (provided by the code) and enter the information you used to create your user account earlier. Notice that you can also navigate using the “forgot password” link to retrieve your password information. Sense we have not set up an email, this function will not work, but you should have a general idea of how it works at this point. You can also create a new account if you forgot the one you created by clicking on the “sign up for a new account” link in the Home.aspx page. So there you have it. Although this is a very basic set up, the applications for this setup are very broad. This should give you a solid starting point.