ASP.NET 4.0 Login Controls Walkthrough

In this tutorial we will explore some of ASP.NET's Login Controls and demonstrate how they work with each other.

Enabling User Creation
At this point in the tutorial I have created a new ASP.NET Empty Web Site in Microsoft Visual Web Developer. The first thing that we want to do for this tutorial is enable user creation so that we can create users to test our Login Controls. To enable user creation:

1. Click the ASP.NET Configuration icon in the Solution Explorer to open up the ASP.NET Website Administration Tool.
2. In the ASP.NET Website Administration Tool click the Security tab.
3. Under the Users header click the Select authentication type link.
4. Select From the internet and click Done.
5. Close the ASP.NET Website Administration Tool.

Creating the Default.aspx Page
Now what we want to do is add a new Web Form to our project named Default.aspx. This is going to be our home page. The first thing that we are going to add to this page is the LoginView Control. To do this, open up the Default.aspx page in Design mode and:

1. Expand the Login tab in your toolbox.
2. Drag and drop a LoginView Control onto the Web Form.

This control is going to allow us to add different content into our page depending on if the person viewing the page is logged in or not.

Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.

Adding Content to the AnonymousTemplate
The AnonymousTemplate is going to be displayed to users who are not logged in to our website. We are going to want to display a few things to the people who are not logged in. First, we need to add in a Login Control so that they are able to login if they have an account. Under the Login Control I am also going to add two links, one for a password recovery page which will help them login if they have forgotten their password and another for a registration page that will allow them to create a new account if they don't have one. To do this:

1. Expand the LoginView Tasks menu.

2. Make sure the AnonymousTemplate View is selected.
3. Drag and drop a Login Control to the editable area of the LoginView Control.
4. Drag and drop a Hyperlink Control under the Login Control.
4.1.  Change the Text property of the Hyperlink to 'Forgot Password?'.
4.2.  Change the NavigateUrl property of the Hyperlink to 'PasswordRecovery.aspx'.
5. Drag and drop a Hyperlink Control under the Forgot Password Hyperlink.
5.1.  Change the Text property of the Hyperlink to 'Register Now!'.
5.2.  Change the NavigateUrl property of the Hyperlink to 'Register.aspx'.

Adding Content to the LoggedInTemplate
The LoggedInTemplate is going to be displayed to users who are currently logged in. Here, we are going to display a message saying 'Welcome, ' and the current username who is logged in. We are going to display a Logout link for them, and also a Change Password link. To do this:

1. Expand the LoginView Tasks menu.
2. Make sure the LoggedInTemplate View is selected.
3. In the editable area of the LoginView Control type in 'Welcome, '.
4. Drag and drop a LoginName Control right after the welcome text.
5. Drag and drop a LoginStatus Control underneath the welcome text.
6. Drag and drop a Hyperlink Control underneath the LoginStatus Control.
6.1.  Change the Text property of the Hyperlink to 'Change Password'.
6.2.  Change the NavigateUrl property of the Hyperlink to 'ChangePassword.aspx'.

Creating the Register.aspx Page
Next we are going to add the Register.aspx page that we linked our 'Register Now!' hyperlink to. Add a new Web Form titled 'Register.aspx' and open it up to Design mode. Here we will be creating a page where the user can create a new account, and then be redirected back to the Default.aspx where that user can login. To do this:

1. Drag and drop a CreateUserWizard Control onto the Web Form.
2. Change the ContinueDestinationPageUrl of the CreateUserWizard Control to 'Default.aspx'. This will link the Continue Button on the success view of the CreateUserWizard back to our home page so the user can log in with their new account.

We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.

Creating the PasswordRecovery.aspx Page
Next we are going to add the PasswordRecovery.aspx page that we linked our 'Forgot Password?' hyperlink to. Add a new Web Form titled 'PasswordRecovery.aspx' and open it up to Design mode. Here we will be creating a page that will allow the user to enter some information to retrieve their password via email. To do this:

1. Drag and drop a PasswordRecovery Control onto the Web Form.
2. Change the SuccessPageUrl property to 'Default.aspx'. This will link the user back to our home page when their password is sent to their email so they can login.

Creating the ChangePassword.aspx Page
Next we are going to add the ChangePassword.aspx page that we linked our 'Change Password' hyperlink to. Add a new Web Form titled 'ChangePassword.aspx' and open it up to Design mode. Here we will be creating a page that allows an already logged in user to change their password. To do this:

1. Drag and drop a ChangePassword Control onto the Web Form.
2. Change the SuccessPageUrl property to 'Default.aspx'. This will link the user back to the home page once their password is changed.

Configuring SMTP Settings
What we are going to do now is use one of our preexisting email accounts to send the email to our user containing their password. What I have done for this is setup a new Gmail account which I will be configuring here, but it is important to understand that the SMTP settings will be different based on your email provider. I chose Gmail because their SMTP settings are readily available on the internet. As you go through this just use the correct setting for whatever email it is you are using.

To configure our SMTP Settings:

1. Click the ASP.NET Configuration icon in the Solution Explorer to open up the ASP.NET Website Administration Tool.
2. In the ASP.NET Website Administration Tool click the Application tab.
3. Under the SMTP Settings header, click the Configure SMTP e-mail settings link.
4. Under the Configure SMTP Settings header, configure the following properties.
5. Server Name, the SMTP of your email provider, in my case smtp.gmail.com.
6. Server Port, the Port of your email provider, in my case 587.
7. From, the email you will be using, in my case PWRecoveryTutorial@gmail.com.
8. Under Authentication, choose Basic
9. Sender's user name, the username we use to login to the email we are using, in my case PWRecoveryTutorial@gmail.com.
10. Sender's password, the password we use to login to the email account we are using here.
11. Click Save.
12. Close the ASP.NET Website Administration Tool.

What this actually does is provide a nice user-friendly view of these options and then stores the changes you make in your Web.Config file. Go ahead and open up your Web.Config file from the Solution Explorer. Here you should see something similar to this:

<mailSettings>     <smtp from="PWRecoveryTutorial@gmail.com">         <network host="smtp.gmail.com" password="xxxx" port="587"         userName="PWRecoveryTutorial@gmail.com" />     </smtp>   </mailSettings>

You will notice that the options we configured were added in here. For the email provider I am using, I am required to enable SSL (Secure Sockets Layer) for me to be able to actually send these emails out. To do this I am simply going to add enableSsl="true" in the network tag. So now my mail settings look like:

<mailSettings>     <smtp from="PWRecoveryTutorial@gmail.com">         <network host="smtp.gmail.com" password="xxxx" port="587"         userName="PWRecoveryTutorial@gmail.com" enableSsl="true" />     </smtp>   </mailSettings>

Note that yours will appear differently based on your email provider and that you don't have to enable SSL unless your email provider requires it.

If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!

Testing
So what we have here is an interactive website where someone can load this up, create a new account, change the password to that account, logout, use the password recovery to have a new password generated and emailed to them, and then finally login with their new password. Furthermore, they should be able to do this and be redirected to the correct page whenever necessary. To test this and make sure everything is working:

1. Load up your website.
2. Click the Register Now! link.
3. Create a new account.
4. Click the Change Password link.
5. Change your password.
6. Click Logout.
7. Click the Forgot Password? link and fill out the information in the PasswordRecovery Control.
8. Check the email you used for the account you are testing to find your new password.
9. Use your new password to login.

Here we have demonstrated and tested all of the Login Controls that we used to create this simple user based website.

The Default.aspx source looks like this:

<body>     <form id="form1" runat="server">     <div>         <asp:LoginView ID="LoginView1" runat="server">             <AnonymousTemplate>                 <asp:Login ID="Login1" runat="server">                 </asp:Login>                 <br />                 <asp:HyperLink ID="HyperLink1" runat="server"                      NavigateUrl="PasswordRecovery.aspx">Forgot Password?</asp:HyperLink>                 <br />                 <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="Register.aspx">Register Now!</asp:HyperLink>             </AnonymousTemplate>             <LoggedInTemplate>                 Welcome,                  <asp:LoginName ID="LoginName1" runat="server" />                 <br />                 <asp:LoginStatus ID="LoginStatus1" runat="server" />                 <br />                 <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="ChangePassword.aspx">Change Password</asp:HyperLink>             </LoggedInTemplate>         </asp:LoginView>     </div>     </form> </body>

The Register.aspx source looks like this:

<body>     <form id="form1" runat="server">     <div>         <asp:CreateUserWizard ID="CreateUserWizard1" runat="server"              ContinueDestinationPageUrl="~/Default.aspx">             <WizardSteps>                 <asp:CreateUserWizardStep ID="CreateUserWizardStep1" runat="server">                 </asp:CreateUserWizardStep>                 <asp:CompleteWizardStep ID="CompleteWizardStep1" runat="server">                 </asp:CompleteWizardStep>             </WizardSteps>         </asp:CreateUserWizard>     </div>     </form> </body>

The PasswordRecovery.aspx source looks like this:

<body>     <form id="form1" runat="server">     <div>         <asp:PasswordRecovery ID="PasswordRecovery1" runat="server" SuccessPageUrl="~/Default.aspx">         </asp:PasswordRecovery>     </div>     </form> </body>

The ChangePassword.aspx source looks like this:

<body>     <form id="form1" runat="server">     <div>         <asp:ChangePassword ID="ChangePassword1" runat="server" SuccessPageUrl="~/Default.aspx">         </asp:ChangePassword>     </div>     </form> </body>