5 Minutes to Forms Authentication

In case you couldn't tell by the last few posts I've made... I really like Forms Authentication! I wasn't very organized and just threw some random posts out here to share some idea's, but sometimes all you need in life is simplicity... so that's what this post will be, a simple Forms Authentication setup.

I recently had to add some type authentication to an existing web application, nothing fancy at all, bare-bones, just a username, a password, and no database connectivity. That's where this post comes in... when all you need is something quick.

We'll cover this in 3 steps. The first is creating your login form, second being your form's code behind, and the third being your web.config setup.

Step 1 - Create Your Web Form

We won't do anything fancy here, all you want is:

• A Username Textbox
• A Password Textbox
• A Button to submit your form
  
• A placeholder to display error messages

Let's get to it!

Create a new web form in your project. In our case, we will call our form "login.aspx". Next, go to the login.aspx page and create your form. We want to create elements for each of the items above, so our end result is this:

Please login to use this application
Username:
Password:

Our HTML to create our web form is:

<table>
<tr>
<td colspan="3" id="tdMessage" runat="server"></td>
</tr>
<tr>
<td colspan="3">Please login to use this application</td>
</tr>
<tr>
<td>Username:</td>
<td> </td>
<td><asp:TextBox ID="txtUsername" Runat="server" /></td>
</tr>
<tr>
<td>Password:</td>
<td> </td>
<td>
<asp:TextBox ID="txtPassword" Runat="server"
TextMode="Password" /></td>
</tr>
<tr>
<td colspan="3"><asp:Button ID="btnSub" Runat="server"
Text="Login"></asp:Button></td>
</tr>
</table>

Above we have 5 rows in our table. Row 1 is our TD tag (named tdMessage) that will house our error messages. Row 2 is static text asking the user to log in. Row 3 contains our Username textbox (named txtUserName), Row 4 has our Password textbox (named txtPassword), and Row 5 has our button (named btnSub)That's it, our HTML is built!

Step 2 - Your Code-Behind

Ahh yes, our almighty code-behind... an ASP.NET page is almost useless without it! Our code-behind will remain very simple, as there is no database connectivity needed (as you'll see in step 3)!

For starters, Import the System.Web.Security NameSpace into your login.aspx.vb file:

Imports System.Web.Security

Next, we want to handle all login events in our btnSub Click events. So, within the btnSub click event handler, we place the following code:

If Me.txtUsername.Text = "" Or Me.txtPassword.Text = "" Then
Me.tdMessage.InnerHtml = "<font color=""red"">Please enter proper login
credentials</font><br>"
Else
If FormsAuthentication.Authenticate(Me.txtUsername.Text, Me.txtPassword.Text) Then
FormsAuthentication.RedirectFromLoginPage(Me.txtUsername.Text, True)
Else
Me.tdMessage.InnerHtml = "<font color=""red"">Invalid Login, please try again</font><br>"
End If
End If

Just like everything else in this project, the logic is simple. If a username or password isn't supplied, set the error message to ask for proper login credentials. If both a username and a password are supplied, hand-off the username and password values to the FormsAuthentication.Authenticate function, which returns a true/false value on the credentials. If the username/password authenticates, call RedirectFromLoginPage, which sets the the Forms Authentication cookie, and let's the user go on their merry little way. Otherwise, the login credentials were invalid, so we display an error message asking the user to try again.

Step 3 - Setup Forms Authentication in your Web.Config

Last but not least, we need to setup Forms Authentication in our Web.Config, otherwise all that cool code you wrote above is worthless.

So, open your web.config file in your project, within the system.web node, add the following XML to the Authorization section:

<deny users="?" />

This means that all users who are not authenticated are denied, and therefore are sent to be authenticated.

Secondly, in our Authentication section, add the following XML:

<authentication mode="Forms">
<forms
name="ourFormsAuth"
path="/"
loginUrl="login.aspx"
protection="All"
timeout="30">
<credentials passwordFormat="Clear">
<user name="ourUser" password="ourPassword"/>
</credentials>
</forms>
</authentication>

And that's all it takes! We set our authentication mode to "Forms", meaning that now our app expects a form on the website to authenticate our user. The Forms XML has a name attribute, which is the name of the cookie, the path of where the cookie is stored, the Url of the login form (in our case login.aspx), our protection mode (set to "All" to validate and encrypt the data), and our timeout of the cookie, in minutes). And, if you wish, you can add additional user credentials:

<user name="ourUser1" password="ourPassword1"/>
<user name="ourUser2" password="ourPassword2"/>
<user name="ourUser3" password="ourPassword3"/>

Now when you run your project, a login form will appear, asking you for proper credentials. If you dont enter a proper combination of what you entered in the "credentials" section, it doesn't let you in. As I stated in the beginning of this post... pretty simple!