Learn how to create a secure login system using salt and pepper technique and using sha1 and md5 encryption in this great step by step Php Tutorial
UBL Designs Blog
CREATE A SECURE LOGIN SYSTEM IN PHP - PART 1
THIS TUTORIAL IS A LITTLE OUT DATED AND WE ARE PLANNING ON UPDATING THIS TO BENEFIT FROM MODERN DAY TECHNIQUES!
In this Php tutorial we will be showing how to make a secrure php login system that has the following features:
- Sql injection safe
- sha1 encryption
- md5 encryption
- salt and pepper techniques
- session usage
- cookie usage
This tutorial is going to be in 3 parts and there are videos you can follow if you find reading not as knowledgeable!
Part 1 - Login Page
We will be making 2 main pages which will be the login page and the user are page. As well as a logout page and a cookie management page.
Anway lets start this tutorial!
HTML Section - Login Page
We are going to start with the basic html which will be:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title><br> <link href="style.css" rel="stylesheet" type="text/css" /><br> </head> <body> </body> </html>
Now we i have also created some divs to wrap the form and error messages which are as follows:
<div id="loginwrap"> <h1>Login Area</h1> <div id="loginform"></div> <div id="loginwarning"></div>
For the stylesheet you can use the one provided in the download link at the bottom of the page if you want to style it the same as mine!
Ok now we have the html side of things done we not need the form side of it.
You the form will go inside the loginform div and it should be something like this:
<form action="#" method="post"> <input name="iebugaround" type="hidden" value="1"> <label>Username</label> <fieldset class="fieldset2"><input type="text" name="username" class="requiredField" value="<?php echo $uname ; ?>"/></fieldset> <label>Password</label> <fieldset class="fieldset2"><input type="password" name="password" class="text requiredField subject"/></fieldset> <fieldset> <input name="submit" id="submit" value="Submit" class="button big round deep-red" type="submit"/> </fieldset> </form>
The form has an action of # as this is basically just refreshing the page, i would however advice to call it to the page you are within, for instance if this will be your login.php page i would have the action as login.php.
I have a label of Username which just labels the input type which is set to accept text and the name of this is username.
Again i have a password input but as you can see the type is also called password. This is because it does not allow people to see what you are typing in the input area. The name is also called password.
You will notice i have a hidden input area called "iebugaround"! This is because Internet Explorer does not submit forms using the isset submit function that other browsers use so we counter this by doing a hidden value and a name and then call this in which will come later in the tutorial.
Last but not least we have a submit button which obviously submits the form!
That brings a head to the html part of this section!
The PHP Part - Login Page
The first thing we need to do is input some php tags, so go to line 1, above all html code we have created now and do some page tags like as follows:
<?php ?>
So within the php tags we need to create a connection which is done by setting a variable and using the mysql_connect function. You then ass in the database details etc. You then set another variable and use the mysql_select_db function which basically calls the database name with the connection you have just created.
We have done this by doing the following:
$connection = mysql_connect("localhost","loginuser","password") OR die(mysql_error());
$db_select = mysql_select_db("logintutorial",$connection) OR die(mysql_error()); So in the mysql_connect() you can see localhost which is your server, we then have a username which we have set to loginuser and a password which we have set to password. We then state if the connection is not made lets kill it and produce an error.
We the call the database name which is login tutorial within the mysql_select_db function as well as calling the connection we have just made, then we kill the connection and call an error if no connection is made.
No lets make a little error reporting so if people use the wrong password etc then people will know that.
So under the connection you have just made you will need to do:
$errors = array();
Basically this defines the variable errors as an array which means that all errors that are created are stored within the array untill we call them.
Now lets set a value to the username form.
At the moment your username input area looks like this:
<input type="text" name="username" class="requiredField" value=""/>
In the section where it states value"" you need to enter some php tags and then echo uname, like this:
<input type="text" name="username" class="requiredField" value="<?php echo $uname ; ?>"/>
The reason for this is because if someone enters a username and then gets the password wrong, rather than making the user input the username again it is still there. Also if the user gets the username wrong he/she can see where they went wrong.
We do not do this to the password as they would not be able to see it anyway!
At the moment if we ran the script we would get an error as we have not defined the variable uname.
So under the errors variable at the top of the page you need to check if the form has been submitted, if it has not then set the uname as blank.
You do this by doing the following:
if(isset($_POST["iebugaround"])){
} else {
$uname = "";
} Remember we made a hidden form earlier, well now this is where it comes in, we ask if iebugaround is set, if it is do something, else set the uname to "".
Now we have set this up, lets fetch the form details...
Under the iebugaround line you will need to create something like this:
//lets fetch posted details $uname = trim(htmlentities($_POST['username'])); $passw = trim(htmlentities($_POST['password']));
The first line is a comment letting you know what it is about.
The second line is setting the uname to post username, we have wrapped it in a trim function which strips spaces from the beginning and end of the inserted post. We then use htmlentities function which makes < / " > amoung others html values, for instance a < in html is infact < which makes it sage for the database which prevents sql injections.
The same goes with the passw varaible below.
Ok now we have called the posts we need to check if they have actually been submitted correctly, so under the few lines you have just created please input this:
//check username is present
if(empty($uname)){
//let echo error message
$errors[] = "Please input a username";
}
//check password was present
if(empty($passw)){
//let echo error message
$errors[] = "Please input a password";
} Ok we first ask if the uname is empty, if it is then put the please input username error message within the errors array.
We then ask if password is empty, if it is we put the error message within the error varaible array.
So now we have checked if the username and password is empty, if they are they throw out error messages within the array.
Now lets do something if they have infact been submitted correctly.
Under the lines you have just created you will need to do this:
if(!$errors){
} This basically says, if there was not errors in the posted section above then lets carry on within this section.
We now need to encrypt a password and check in the database to see if its correct information before logging in!
Inside the { } brackets we then do this:
//encrypt the password
$passw = sha1($passw);
$salt = md5("userlogin");
$pepper = "kikikikikicbtr";
$passencrypt = $salt . $passw . $pepper; This is a very basic form of salt and pepper technique.
We set the input password to the varaible passw and then we encrypt it using sha1 which is just about the best encryption out at the moment for small websites.
We then set a salt varaible and put in a random work and then encrypt it using the md5 encryption. The reason why we do not use the sha1 is it would take just that little londer to crack a password if different encryptions were used.
I would normally use sha256 or something like that but as we are using it for a basic website sha1 is fine.
The last one is pepper and we have set the varaible to a lot of random characters and we do not set any encryption to this, i would normally use probably another sha but again unless you have a huge website that has alot of private data this technique is ok.
We then put all of the passwords together into the passencrypt variable as you can see.
Now we have checked the form is correct and encrypted the password we now need to see if all the details the user has given are correct within the database.
We do this by doing this
//find out if user and password are present $query = "SELECT * FROM users WHERE username='".mysql_real_escape_string($uname)."' AND password='".mysql_real_escape_string($passencrypt)."'"; $result = mysql_query($query) OR die(mysql_error());
We start a database check with setting a variable which i have $query.
We select all from the user table where username and password match what was inserted within the form. You many of noticed that the uname and password is wrapped with mysql_real_escape_string(). This is because this takes away all coding that can effect the database, such as straight after the '
Anyway now you can see that we then have a result that then calls the $query variable using the mysql_query dunction, we then say if it cant connect to database then kill the connection and report an error.
That concludes the first part, You can view part 2 by clicking this link!
Comments
enzo 12 Apr, 2012
Hello! thanks for your tutorial it is really useful.
i have just one question. what encryption have you used for the password because i have trying to encrypt my own password in MD5 and SHA1 but nothing seems to work except your admin password
thanks in advance
Enzo
Admin 12 Apr, 2012
Hi Enzo, if you look above you will see the information needed!
Marinie 27 Mar, 2016
Hi admin and enzo :D I JUST WANT TO KNOW IF WHAT SHOULD I TYPE IN SHELL OF THE MYSQL TO SET A PASSWORD THAT WILL ENCRYPT IT BECAUSE LIKE WHAT ENZO OBSERVE ONLY THE USERNAME PASSWORD IS ENCRYPTED.
Marinie 28 Mar, 2016
But sir/ma'am it seems that it was not explain in the above of how does the encryption happen in the database ?
UBL Designs 23 Aug, 2017
The encryption is done in the server side and not the database
Web Development Company 21 Apr, 2012
Very nice solution. It is very useful to me. Please add the solution for validation of those fields. Thanks for giving this solution.
Aysha 13 Jan, 2013
Hey, thank you sooo much for the script.
girl 15 Apr, 2013
i put the user name admin and pass 7eec54842ae92700ea21f7289a2ed383d033e22ae348aeb5660fc2140aec35850c4da997kikikikikicbtr as database they said there is eror so what shall i do?
Admin 15 Apr, 2013
Could you tell us what the error says?
ultimAvalon 23 Apr, 2013
Hey Admin, Thanks for the great video. I am trying to learn a few PHP things and create a sort of PHP template where i can simply modify and use when needed. Main aim being to create: - A secure log in system (with PHP/MySQL) - a simple CMS system that would allow the adding,editing,removing of content (may that be text or images) This tutorial seem to help me with the first part! Creating the login page and using some pages when logged in. Having seen some other tutorials though i have to ask... everyone seems to prefer to put the SQL connect information on a separate file (global.php) then just call the .php that contains the info. Is there a reason you didnt follow that road? Thank you
Admin 23 Apr, 2013
This was just so all code was in the same place. I would suggest you to seperate your code. Have html code within html files, php within php, javascript within js files and so on. I would also suggest not to use mysql and to move to either mysqli or pdo due to the added security and functionality. We are updating this tutorial to be more functional and we will also be showing how to use pdo instead of the old mysql, using pdo prepared statements adds a lot more security than the standard mysql functions. Hope this helps :)
srilinux@gmail.com 31 Jul, 2013
nice this tutorial...but i am still waiting part 3
Admin 31 Jul, 2013
We are in the middle of re doing it all as its a little out dated. Thanks UBL
Comments are now closed for this post... – UBL Designs
Drelix76 7 Jan, 2012
This is what I have been looking for! a Full Tutorial! Thankyou!
Your the Best...
and also YOUTUBE sent me here :)