Page 1 of 1

Secure Login Page

#1 CamoDeveloper  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 20
  • View blog
  • Posts: 250
  • Joined: 12-June 09

Posted 07 August 2009 - 09:53 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! :)

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. Posted Image

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. Posted Image

Next, go into the code behind file and in the Page_Load write the following code. Posted Image
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 Posted Image

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. Posted Image

I added another Panel underneath the one I just created, you can do it however you want. Posted Image

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. Posted Image

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.
Posted Image

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. Posted Image
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

Is This A Good Question/Topic? 1
  • +

Replies To: Secure Login Page

#2 dev_sajo  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 01-January 10

Posted 28 January 2010 - 05:06 AM

View PostCamoDeveloper, on 7 Aug, 2009 - 08:53 PM, said:

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! :)

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. Posted Image

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. Posted Image

Next, go into the code behind file and in the Page_Load write the following code. Posted Image
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 Posted Image

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. Posted Image

I added another Panel underneath the one I just created, you can do it however you want. Posted Image

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. Posted Image

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.
Posted Image

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. Posted Image
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


________________________________________________________________________________________

Hello Sir/Madam.

your code will do no issue, but i dont want to set my password & userID in web.config file.
It should be in Table of our database.
So how to tacle this problem.....
plz suggest me.

thanks,
Regards.

This post has been edited by dev_sajo: 28 January 2010 - 05:08 AM

Was This Post Helpful? 0
  • +
  • -

#3 inswins  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 13
  • Joined: 04-September 10

Posted 06 October 2010 - 09:18 PM

yes..
this is what i'm looking for..
but i agree with mr dev_sajo..
how can we set the password and username to the database..?
Was This Post Helpful? 0
  • +
  • -

#4 Fungle  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 249
  • View blog
  • Posts: 337
  • Joined: 06-March 10

Posted 14 November 2010 - 02:46 PM

Very useful Tutorial, I have to learn this as a part of my course, Thanks alot ^^
Was This Post Helpful? 0
  • +
  • -

#5 gosu  Icon User is offline

  • New D.I.C Head

Reputation: -5
  • View blog
  • Posts: 18
  • Joined: 16-October 10

Posted 21 February 2011 - 12:28 PM

View Postinswins, on 06 October 2010 - 09:18 PM, said:

yes..
this is what i'm looking for..
but i agree with mr dev_sajo..
how can we set the password and username to the database..?


when you create the data base you will make a user name and a pass word

mysql> mysql-p -u root
password: abcdefghi........

thats how you log in but you must grant all acess on to your name :D
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1