ASP.NET Login Controls Overview
ASP.NET
provides robust login (authentication) functionality for ASP.NET Web
applications without requiring programming. The default Visual Studio project
templates for Web applications and for Web sites include prebuilt pages that
let users register a new account, log in, and change their passwords For
information about how to use the built-in login page templates, see Walkthrough:
Creating an ASP.NET Web Site with Basic User Login.
You
can also create your own pages that you can add ASP.NET login controls to in
order to add login functionality. To use the login controls, you create a Web
pages and then add the login controls to them from the Toolbox.
Typically,
you restrict access to ASP.NET pages by putting them into a protected folder.
You then configure the folder to deny access to anonymous users (users who are
not logged in) and to grant access to authenticated (logged-in) users. (The
default project template for Web projects includes a folder named Accounts that
is already configured to allow access only to logged-in users.) Optionally, you
can assign users to roles and then authorize users to access specific Web pages
by role.
By
default, login controls integrate with ASP.NET membership and ASP.NET forms
authentication to help automate user authentication for a Web site. For
information about how to use ASP.NET membership with forms authentication, see Introduction
to Membership.
By
default, the ASP.NET login controls work in plain text over HTTP. If you are
concerned about security, use HTTPS with SSL encryption. For more information
about SSL, see Configuring
SSL on a Web Server or a Web Site in
the IIS documentation.
|
Note
|
|
Login
controls might not function correctly if the Method of
the ASP.NET Web page is changed from POST (the default) to GET.
|
This
topic describes each ASP.NET login control and provides links to the control's
reference documentation.
This
topic contains the following sections:
Built-in Login Pages
When
you use the default Visual Studio template to create a Web site or Web
application, pages that support login functionality are created in the Account
folder. By default, pages in the Account folder are not accessible to anonymous
users, except the registration page (Register.aspx) and the login page
(Login.aspx). The settings that define access to pages in the Account folder
are configured in the Web.config file in that folder. The settings that define
access the Login page are configured in the root Web.config file.
The
following table lists the contents of the Account folder:
Login.aspx
Enables
users who have an account to log in by providing a user name and password. This
page includes a link to the registration page. The Login.aspx page is
accessible to anonymous users.
The
following illustration shows the login page in the browser.
Register.aspx
Enables
users to register and create a new account. This page is accessible to
anonymous users and to authenticated users.
ChangePassword.aspx
Enables
logged-in users to change their password. This page is accessible only to
authenticated users.
The
following illustration shows the change password page in the browser.
ChangePasswordSuccess.aspx
Displays
a message that indicates that the password was changed successfully. This page
is accessible to authenticated users only.
This
page does not use any ASP.NET login controls.
Web.config
Contains
the settings that define access to pages in the Account folder
Login Functionality in the Master Page
When
you use the default Visual Studio template to create a Web site or Web
application, the default master page (Site.master) contains the following
controls that provide login functionality.
The
Site.master page also includes a hyperlink to the login page, which is
accessible to all users.
Storing the Login Information
Login
(membership) information is stored in a database. By default, this is a local
database in the ASPNETDB.mdf file in the App_Data folder of the Web
application. The database can be created in the following ways:
·
You can use the Web Site Administration Tool to configure
membership and roles manually, which automatically creates the database.
·
When the first user registers and creates an account, and if the
database does not already exist, ASP.NET creates the database automatically.
This option does not provide a way to specify roles for a user.
Modifying the Membership Attributes
The
settings for ASP.NET membership are in the membership section of the root Web.config file. In the providers section you can change attributes such as the number of invalid
login attempts to allow, password length, and so on. For more information,
The Login Control
The Login control displays a user interface for user authentication. The Login control contains text boxes for the user name and password and a
check box that allows users to indicate whether they want the server to store
their identity using ASP.NET membership and automatically be authenticated the
next time they visit the site.
The Login control has properties for customized display, for customized
messages, and for links to other pages where users can change their password or
recover a forgotten password. The Login control can be used as a standalone control on a main or home page,
or you can use it on a dedicated login page.
If
you use the Login control with ASP.NET membership, you do not need to write code to
perform authentication. However, if you want to create your own authentication
logic, you can handle the Login control's Authenticate event and add custom authentication code.
The LoginView Control
The LoginView control allows you to display different information to anonymous
and logged-in users. The control displays one of two templates: the AnonymousTemplate or the LoggedInTemplate.
In the templates, you can add markup and controls that display information
appropriate for anonymous users and authenticated users, respectively.
The LoginView control also includes events for ViewChanging and ViewChanged,
which allow you to write handlers for when the user logs in and changes status.
The LoginStatus Control
The LoginStatus control displays a login link for users who are not authenticated
and a logout link for users who are authenticated. The login link takes the
user to a login page. The logout link resets the current user's identity to be
an anonymous user.
You
can customize the appearance of the LoginStatus control by setting the LoginText and LoginImageUrl properties.
The LoginName Control
The LoginName control displays a user's login name if the user has logged in
using ASP.NET membership. Alternatively, if your site uses integrated Windows
authentication, the control displays the user's Windows account name.
The PasswordRecovery Control
The PasswordRecovery control allows user passwords to be retrieved based on the e-mail
address that was used when the account was created. The PasswordRecovery control sends an e-mail message containing a password to the user.
You
can configure ASP.NET membership to store passwords using non-reversible
encryption. In that case, the PasswordRecoverycontrol
generates a new password instead of sending the original password to the user.
You
can also configure membership to include a security question that the user must
answer to recover a password. If you do, thePasswordRecovery control asks the question and checks the answer before recovering
the password.
The PasswordRecovery control requires that your application can forward e-mail message
to a Simple Mail Transfer Protocol (SMTP) server. You can customize the text
and format of the e-mail message sent to the user by setting the MailDefinition property.
The
following example shows a PasswordRecovery control declared in an ASP.NET page with MailDefinition property settings to customize the e-mail message.
<asp:PasswordRecovery ID="PasswordRecovery1" Runat="server"
SubmitButtonText="Get Password" SubmitButtonType="Link">
<MailDefinition From="administrator@Contoso.com"
Subject="Your new password"
BodyFileName="PasswordMail.txt" />
</asp:PasswordRecovery>
The CreateUserWizard Control
The CreateUserWizard control collects information from potential users. By default, the CreateUserWizard control adds the new user to the ASP.NET membership system.
·
User name
·
Password
·
Confirmation of password
·
E-mail address
·
Security question
·
Security answer
This
information is used to authenticate users and recover user passwords, if
necessary.
<asp:CreateUserWizard ID="CreateUserWizard1" Runat="server"
ContinueDestinationPageUrl="~/Default.aspx">
<WizardSteps>
<asp:CreateUserWizardStep Runat="server"
Title="Sign Up for Your New Account">
</asp:CreateUserWizardStep>
<asp:CompleteWizardStep Runat="server"
Title="Complete">
</asp:CompleteWizardStep>
</WizardSteps>
</asp:CreateUserWizard>
The ChangePassword Control
The ChangePassword control allows users to change their password. The user must first
supply the original password and then create and confirm the new password. If
the original password is correct, the user password is changed to the new
password. The control also includes support for sending an e-mail message about
the new password.
The ChangePassword control includes two templated views that are displayed to the
user. The first is the ChangePasswordTemplate,
which displays the user interface used to gather the data required to change
the user password. The second template is theSuccessTemplate,
which defines the user interface that is displayed after a user password has
been successfully changed.
The ChangePassword control works with authenticated and non-authenticated users. If a
user has not been authenticated, the control prompts the user for a login name.
If the user is authenticated, the control populates the text box with the user's
login name.
asp:Login control
Login control provides a ready to
use user interface that can be used as a Login interface in the web site.
Login control provides a ready to
use user interface that can be used as a Login interface in the web site. Internally,
When it is rendered on the page, it is implemented through
<table></table> HTML tag.
Its properties like BackColor,
ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. are implemented
through style properites of <table, tr, td/> tag.
Following are some important
properties that are very useful.
Properties of the Login Control
TitleText: Indicates the text to
be displayed in the heading of the control.
InstructionText: Indicates the
text that appears below the heading of the control.
UserNameLabelText: Indicates the
label text of the username text box.
PasswordLabelText: Indicates the
label text of the password text box.
FailureText: Indicates the text
that is displayed after failure of login attempt.
UserName: Indicates the initial value
in the username text box.
LoginButtonText: Indicates the
text of the Login button.
LoginButtonType Button/Link/Image. Indicates the type of login
button.
DestinationPageUrl Indicates the URL to be sent after
login attempt successful.
DisplayRememberMe true/false. Indicates whether to show
Remember Me checkbox or not.
VisibleWhenLoggedIn true/false. If false, the control is not
displayed on the page when the user is logged in.
CreateUserUrl Indicates the url of the create user page.
CreateUserText Indicates the text of the create user link.
PasswordRecoveryUrl Indicates the url of the password
recovery page.
PasswordRecoveryText Indicates the text of the password
recovery link.
Style of the Login Control
CheckBoxStyle Indicates the style property of the Remember
Me checkbox.
FailureStyle Indicates the style property of the
failure text.
TitleTextStyle Indicates the style property of the title
text.
LoginButtonStyle Indicates the style property of the Login
button.
TextBoxStyle Indicates the style property of the
TextBox.
LabelStyle Indicates the style property of the labels of text box.
HyperLinkStyle Indicates the style property of the
hyperlink in the control.
InstructionTextStyle Indicates the style property of the
Instruction text that appears below the heading of the control.
Events of the Login Control
LoggingIn Fires before user is going to authenticate.
LoggedIn Fires after user is authenticated.
LoginError Fires after failure of login attempt.
Authenticate Fires to authenticate the user. This is
the function where you need to write your own code to validate the user.
// Login Control
////////////////////////////
<asp:Login
ID="Login1" runat="server" BackColor="#F7F6F3"
BorderColor="#E6E2D8" BorderPadding="4" BorderStyle="Solid" BorderWidth="1px"
Font-Names="Verdana" Font-Size="0.8em" ForeColor="#333333"
OnAuthenticate="Login1_Authenticate"
OnLoginError="Login1_LoginError">
<TitleTextStyle BackColor="#5D7B9D"
Font-Bold="True" Font-Size="0.9em"
ForeColor="White" />
<InstructionTextStyle Font-Italic="True"
ForeColor="Black" />
<TextBoxStyle Font-Size="0.8em" />
<LoginButtonStyle BackColor="#FFFBFF"
BorderColor="#CCCCCC" BorderStyle="Solid"
BorderWidth="1px"
Font-Names="Verdana" Font-Size="0.8em"
ForeColor="#284775" />
</asp:Login>
asp:LoginView control
LoginView control is very simple
yet very powerful and customizable. It allows user to customize its view for
both anonymous user and logged in user.
LoginView control is very simple yet very powerful and
customizable. It allows user to customize its view for both anonymous user and
logged in user. Internally, When it is rendered on the page, it is implemented
through <table></table> HTML tag.
Its properties like BackColor, ForeColor,
BorderColor, BorderStyle, BorderWidth, Height etc. are implemented through
style properites of <table, tr, td/> tag.
// LoginView Control
////////////////////////////
<asp:LoginView
ID="LoginView1" runat="Server">
<AnonymousTemplate>
<span style="font-family:
Arial; font-size: 10pt;">Welcome, Guest
<asp:LoginStatus
ID="LoginStatus1" runat="Server" />
</span>
</AnonymousTemplate>
<LoggedInTemplate>
Welcome,
<asp:LoginName
ID="LoginName1" runat="Server" />
<asp:LoginStatus
ID="LoginStatus1" runat="Server" />
</LoggedInTemplate>
asp:PasswordRecovery control
PasswordRecovery control is a
ready to use control to help user to recover their password, if they forget.
PasswordRecovery control is a ready to use control to help user to
recover their password, if they forget. It has separate templates for each view
that can be easily customized. Internally, When it is rendered on the page, it
is implemented through <table></table> HTML tag.
Its properties like BackColor, ForeColor,
BorderColor, BorderStyle, BorderWidth, Height etc. are implemented through
style properites of <table, tr, td/> tag.
PasswordRecovery
control uses Membership service to retrieve or reset user's password.
NOTE:
This example is not working as this control users in-built Membership and Role
Manager Providers,
We will try to cover membership provider tutorials in future.
We will try to cover membership provider tutorials in future.
// PasswordRecovery Control
////////////////////////////
<asp:PasswordRecovery
ID="PasswordRecovery1" runat="server"
BackColor="#F7F6F3" BorderColor="#E6E2D8"
BorderPadding="4" BorderStyle="Solid"
BorderWidth="1px" Font-Names="Verdana"
Font-Size="0.8em">
<InstructionTextStyle
Font-Italic="True" ForeColor="Black" />
<SuccessTextStyle
Font-Bold="True" ForeColor="#5D7B9D" />
<TextBoxStyle
Font-Size="0.8em" />
<TitleTextStyle
BackColor="#5D7B9D" Font-Bold="True"
Font-Size="0.9em" ForeColor="White" />
<SubmitButtonStyle
BackColor="#FFFBFF" BorderColor="#CCCCCC"
BorderStyle="Solid"
BorderWidth="1px"
Font-Names="Verdana" Font-Size="0.8em"
ForeColor="#284775" />
</asp:PasswordRecovery>
asp:LoginStatus control
LoginStatus control is a very
simple and compact control that displays either Login (if user is not nog
logged in) or Logout (if user is logged in).
LoginStatus control is a very simple and compact control that
displays either Login (if user is not nog logged in) or Logout (if user is
logged in). When Login link is clicked, it automatredirects Internally, When it
is rendered on the page, it is implemented through <table></table>
HTML tag.
Its properties like BackColor, ForeColor,
BorderColor, BorderStyle, BorderWidth, Height etc. are implemented through
style properites of <table, tr, td/> tag.
// LoginView Control
////////////////////////////
<asp:LoginView
ID="LoginView1" runat="Server">
<AnonymousTemplate>
<span style="font-family:
Arial; font-size: 10pt;">Welcome, Guest
<asp:LoginStatus
ID="LoginStatus1" runat="Server" />
</span>
</AnonymousTemplate>
<LoggedInTemplate>
Welcome,
<asp:LoginName
ID="LoginName1" runat="Server" />
<asp:LoginStatus
ID="LoginStatus1" runat="Server" />
</LoggedInTemplate>
asp:LoginName control
LoginName control is used to
display current logged in user name.
LoginName control is used to display current logged in user name.
If the user is not logged in, this page doesn't render any thing. This control
gets the value by using Page.Identity.Name.
Its properties like BackColor, ForeColor,
BorderColor, BorderStyle, BorderWidth, Height etc. are implemented through
style properites of <span/> tag.
// LoginName Control
////////////////////////////
<asp:LoginName
ID="LoginName1" runat="server" FormatString="LoginName
Demo: Welcome, {0}" ForeColor="Blue"
BorderColor="ActiveBorder" BorderStyle="Double" />
asp:CreateUserWizard control
CreateUserWizard control is a
ready to use control that is used to create a new user to the website.
CreateUserWizard control is a
ready to use control that is used to create a new user to the website. In other
words we can say that it a replacement of Registration form of a website. It
has few steps to complete the registration process. Internally, When it is
rendered on the page, it is implemented through <table></table>
HTML tag.
Its properties like BackColor,
ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. are implemented
through style properites of <table, tr, td/> tag.
CreateUserWizard control uses
Membership service to create user's details.
Following are some important
events that are very useful.
Events of CreateUserWizard Control
ContinueButtonClick:-Fires when
user clicks Continue button in the last wizard step.
CreatingUser:- Fires before creating a new user.
CreatedUser:- Fires after new user created.
CreateUserError:-Fires when
creation of user is not successful.
NOTE:
This example is not working as this control users in-built Membership and Role
Manager Providers,
// CreateUserWizard Control
////////////////////////////
<asp:CreateUserWizard
ID="CreateUserWizard1" runat="server"
BackColor="#F7F6F3" BorderColor="#E6E2D8"
BorderStyle="Solid"
BorderWidth="1px" Font-Names="Verdana"
Font-Size="0.8em" Enabled="False">
<WizardSteps>
<asp:CreateUserWizardStep
runat="server">
</asp:CreateUserWizardStep>
<asp:CompleteWizardStep
runat="server">
</asp:CompleteWizardStep>
</WizardSteps>
<SideBarStyle
BackColor="#5D7B9D" BorderWidth="0px"
Font-Size="0.9em" VerticalAlign="Top" />
<TitleTextStyle
BackColor="#5D7B9D" Font-Bold="True"
ForeColor="White" />
<SideBarButtonStyle
BorderWidth="0px" Font-Names="Verdana"
ForeColor="White" />
<NavigationButtonStyle
BackColor="#FFFBFF" BorderColor="#CCCCCC"
BorderStyle="Solid"
BorderWidth="1px"
Font-Names="Verdana" ForeColor="#284775" />
<HeaderStyle
BackColor="#5D7B9D" BorderStyle="Solid"
Font-Bold="True" Font-Size="0.9em"
ForeColor="White"
HorizontalAlign="Center" />
<CreateUserButtonStyle
BackColor="#FFFBFF" BorderColor="#CCCCCC"
BorderStyle="Solid"
BorderWidth="1px"
Font-Names="Verdana" ForeColor="#284775" />
<ContinueButtonStyle
BackColor="#FFFBFF" BorderColor="#CCCCCC"
BorderStyle="Solid"
BorderWidth="1px"
Font-Names="Verdana" ForeColor="#284775" />
<StepStyle BorderWidth="0px"
/>
</asp:CreateUserWizard>
asp:ChangePassword control
ChangePassword control is a ready
to use control to help users to change their password.
ChangePassword control is a ready to use control to help users to
change their password. Internally, When it is rendered on the page, it is
implemented through <table></table> HTML tag.
Its properties like BackColor, ForeColor,
BorderColor, BorderStyle, BorderWidth, Height etc. are implemented through
style properites of <table, tr, td/> tag.
ChangePassword
control uses Membership service to change user's password.
// ChangePassword Control
////////////////////////////
<asp:ChangePassword
ID="ChangePassword1" runat="server"
BackColor="#F7F6F3" Enabled="False"
BorderColor="#E6E2D8"
BorderPadding="4" BorderStyle="Solid"
BorderWidth="1px"
Font-Names="Verdana"
Font-Size="0.8em">
<CancelButtonStyle
BackColor="#FFFBFF" BorderColor="#CCCCCC"
BorderStyle="Solid"
BorderWidth="1px"
Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284775"
/>
<InstructionTextStyle
Font-Italic="True" ForeColor="Black" />
<PasswordHintStyle
Font-Italic="True" ForeColor="#888888" />
<ChangePasswordButtonStyle
BackColor="#FFFBFF" BorderColor="#CCCCCC"
BorderStyle="Solid"
BorderWidth="1px" Font-Names="Verdana"
Font-Size="0.8em" ForeColor="#284775" />
<ContinueButtonStyle
BackColor="#FFFBFF" BorderColor="#CCCCCC"
BorderStyle="Solid"
BorderWidth="1px"
Font-Names="Verdana" Font-Size="0.8em"
ForeColor="#284775" />
<TitleTextStyle
BackColor="#5D7B9D" Font-Bold="True"
Font-Size="0.9em" ForeColor="White" />
<TextBoxStyle
Font-Size="0.8em" />
</asp:ChangePassword>
Using
the Login Control With ASP.NET 4.0
In
this tutorial we will explore ASP.NET’s Login Control and also briefly go over
creating user accounts so that we can test our Login Control.
Adding the Login Control
I
have created a new ASP.NET Empty Website in Microsoft Visual Web Developer and
have added a blank Web Form to my website. To add our Login Control, open up
your Web Form into Design mode and expand the Login tab in your toolbox. This
will show us all of the ASP.NET Login Controls. Then, drag and drop a Login
Control onto your Web Form.
What
you see now is a default ASP.Net Login Control, which should look pretty
similar to every other Login you have seen with the simple User Name and
Password Text Boxes, the Login button, and by default they even have a
‘Remember me next time’ Check Box. If you run the program you will be able to
interact with the Login control, but we will not really be able to test it
until we actually have a User Account to login to.
Creating a New Account
What
we are going to do here is very quickly create a User Account so that we can
test this Login Control that we have added. In order to do this we need to load
up the ASP.NET Website Administration Tool, in order to do this:
1.
In your Solution
Explorer find the ASP.NET Configuration icon at the top and click it.
2.
You should now be
viewing the ASP.NET Website Administration Tool. Here we will want to click on
the Security tab.
1.
Next, we want to
change our current authentication type to enable the creation of users. Under the
Users heading, click the Select authentication type link.
2.
On this page we
will want to change the option From local network, which does not allow us to
create users, to From the internet which will allow us to do so. Go ahead and
select the Radio Button next to From the internet and then click Done.
3.
Back at the
Security page, you will notice that the Users heading has been changed to
reflect the current number of users, and now contains two more links for Create
Users and Manage Users. We will want to click Create Users.
4.
Now at the Create
User page, we will want to fill out the appropriate information to make a User
Account here. Leaving all of the other options default, complete the form and
create a user that we will use to test our Login Control. (Note: This form
requires a secure password by default containing non-alphanumeric characters.
These settings can be changed, but that is outside the scope of this tutorial.)
With the appropriate information filled out, click Create User.
5.
You should see a
confirmation page after the User Account is created. With our User Account
created, go ahead and close the ASP.NET Website Administration Tool.
Testing
Now
we want to go ahead and test this out by loading up the Web Page that you added
the Login Control to. It is important to understand that our current website
doesn’t have any sort of content to display after a successful login, so we
will test this by first entering incorrect login information and then entering
a correct username/password. To test this:
1.
Enter a fake
Username and Password like fake/fake and click Login. (Note: We use a fake
username and password here because attempting to login with no information in
the Login Control will show a simple error indicating that the Username and
Password fields require data.)
2.
You should see an
error message that looks like this:
1.
Now enter the
Username and Password that you created with the ASP.NET Website Administration
Tool and click Login.
2.
If the login is
successful you will not see an error message, which tells us that our Login
Control is working!
The Web Form source looks like this:
<body>
<form id="form1" runat="server">
<div>
<asp:Login ID="Login1"
runat="server">
</asp:Login>
</div>
</form>
</body>
No comments:
Post a Comment