PDA

View Full Version : [TUT] Secure Login Page



Kyle Undefined
10-28-2009, 08:52 PM
Have an Admin console you want to have to login to but don't know how to get it done? Well then you've come to the right place! smile.gif

Login pages are very useful for websites, whether you want to lock down membership pages or make users login to download files, the reasons are endless. This tutorial is going to be based on the need of a login page for an Admin console on a website, it will be limited to one account, but I will write another one to show how to connect to a database.

Now, let's begin shall we?

First of all, open your program of choice, mines VS 2005 as usual. http://img.photobucket.com/albums/v489/LilDukey/open.jpg

Then, go to your project and a new page. It can be a content page or just a plain page. I'm going to name mine login.aspx. http://img.photobucket.com/albums/v489/LilDukey/item.jpg

Next, go into the code behind file and in the Page_Load write the following code. http://img.photobucket.com/albums/v489/LilDukey/login1.jpg
You will notice that my page inherits from a custom Page Class, don't worry about this, the default Page Class will still work.
Time to explain the code above :

* If Not Page.IsPostBack Then - This checks to see if the user hit refresh or F5. If they didn't, then bind the page.
* Private Sub BindData() - This is just a routine that will hold any special binding code.


Once you have that setup, import System.Web.Security http://img.photobucket.com/albums/v489/LilDukey/import-1.jpg

Now, go into the actual HTML view of the page (Also called Design view). Here is where you can decide how you want to do this. I'm going to create a Panel so I can switch the whole login section on and off. You can use a Div here with it set to runat="server" I'm going to place a Table inside of my Panel so I can easily setup the structure of the page. I'm making the first row host two Labels, one for telling the user to enter his Email and Password to login and the other to tell the user if they entered in wrong data. Make a Textbox for the Email and Password, make them both required by using a RequiredFieldValidator. I add a Regex to the Email Textbox to verify it is a correctly formatted address.

Here is the RegEx: ^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$

Next, add a button so the user can submit their Email and Password. Here is how mine looks. http://img.photobucket.com/albums/v489/LilDukey/login2.jpg

I added another Panel underneath the one I just created, you can do it however you want. http://img.photobucket.com/albums/v489/LilDukey/panel.jpg

Next, go back to the code behind and create the Page_PreRender, then add a check to see if the user is loged in (The code comes included when you Import the Security dll). If they are, it shows the loged in Panel (Or whatever you choose to use), if not, it displays the login Panel. Then we set the Email Textbox to focus.
http://img.photobucket.com/albums/v489/LilDukey/login3.jpg

Now, in the code behind again, make the Button Click event. This is where the magic happens. When the button gets click, the first thing we do is check to see if the Page.IsValid. This checks to see if all the validators passed or not. If that goes through, we want to see if the Email and Password they entered match what is stored in the Web.config (I'll show you how to set this up). If it is, then set a Cookie and take them to where they were headed.
http://img.photobucket.com/albums/v489/LilDukey/login4.jpg

Time for the final piece, setting up the Web.config to store the Email and Password. The following bit of code goes in the <system.web> tag. http://img.photobucket.com/albums/v489/LilDukey/login5.jpg
You won't have to change any of the above code except for the Email and Password (of course) and forms name, it must be in that style, you need to keep the .ASPXAUTH and just add your project name to the end.

And there you have it. A login page to keep your Admin console safe :D . If you have any questions or comments please feel free to leave them here. Thanks for reading!

~Camo

Zyt3x
10-28-2009, 10:29 PM
ARGH! My eyes! It hurts to read that text that's inside those pictures :S
Please save with better quality on the JPEG or save as PNG, as it is now I find it hard to focus on the text and I have to move closer to the screen.