How to Create Secure Login Page in PHP/MySQL Part I

In our previous tutorial we discuss on how to create a secure registration page using three different approaches. They are: mysql: How to Create Secure Registration Page in PHP/MySQL Part I mysqli: How to Create Secure Registration Page in PHP/MySQL Part II PDO: How to Create Secure Registration Page in PHP/MySQL Part III This time we will create a secure login script based on our previous tutorial. So be sure to read it especially on how to create our database. I will combine two approaches here begining with mysql extension.

mysql extension

Now let's create the login form. login.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Login Form</title>
  5. </head>
  6.  
  7. <form id="form1" name="form1" method="post" action="login.php">
  8. <table width="510" border="0" align="center">
  9. <tr>
  10. <td colspan="2">Login Form</td>
  11. </tr>
  12. <tr>
  13. <td>Username:</td>
  14. <td><input type="text" name="username" id="username" /></td>
  15. </tr>
  16. <tr>
  17. <td>Password</td>
  18. <td><input type="password" name="password" id="password" /></td>
  19. </tr>
  20. <tr>
  21. <td>&nbsp;</td>
  22. <td><input type="submit" name="button" id="button" value="Submit" /></td>
  23. </tr>
  24. </table>
  25. </form>
  26. </body>
  27. </html>
login.php
  1. <?php
  2. $username = $_POST['username'];
  3. $password = $_POST['password'];
  4.  
  5. $conn = mysql_connect('localhost', 'root', '');
  6. mysql_select_db('login', $conn);
  7.  
  8. $username = mysql_real_escape_string($username);
  9. $query = "SELECT password, salt
  10. FROM member
  11. WHERE username = '$username';";
  12.  
  13. $result = mysql_query($query);
  14.  
  15. if(mysql_num_rows($result) == 0) // User not found. So, redirect to login_form again.
  16. {
  17. header('Location: login.html');
  18. }
  19.  
  20. $userData = mysql_fetch_array($result, MYSQL_ASSOC);
  21. $hash = hash('sha256', $userData['salt'] . hash('sha256', $password) );
  22.  
  23. if($hash != $userData['password']) // Incorrect password. So, redirect to login_form again.
  24. {
  25. header('Location: login.html');
  26. }else{ // Redirect to home page after successful login.
  27. header('Location: home.html');
  28. }
  29. ?>
Note, that we are still using the mysql_real_escape_string to secure our login page. Plus using password hashing with salt.

mysqli extension

login.html Modify the above code from: <form id="form1" name="form1" method="post" action="login.php"> to <form id="form1" name="form1" method="post" action="login2a.php"> login2a.php Procedural style
  1. <?php
  2. $username = $_POST['username'];
  3. $password = $_POST['password'];
  4.  
  5. $conn = mysqli_connect('localhost', 'root', '', 'login');
  6.  
  7. $username = mysqli_real_escape_string($conn, $username);
  8. $query = "SELECT password, salt
  9. FROM member
  10. WHERE username = '$username';";
  11.  
  12. $result = mysqli_query($conn, $query);
  13.  
  14. if(mysqli_num_rows($result) == 0) // User not found. So, redirect to login_form again.
  15. {
  16. header('Location: login.html');
  17. }
  18.  
  19. $userData = mysqli_fetch_array($result, MYSQL_ASSOC);
  20. $hash = hash('sha256', $userData['salt'] . hash('sha256', $password) );
  21.  
  22. if($hash != $userData['password']) // Incorrect password. So, redirect to login_form again.
  23. {
  24. header('Location: login.html');
  25. }else{ // Redirect to home page after successful login.
  26. header('Location: home.html');
  27. }
  28. ?>
As you can see, we just changed some few line based on our previous script called login.php. This is because we are using procedural style of mysqli extension. Code equivalent: mysql_connect() = mysqli_connect() mysql_query() = mysqli_query() login2b.php Object Oriented style Again, change the action properties under form tag in login.html script from login2a.php to login2b.php
  1. <?php
  2. $username = $_POST['username'];
  3. $password = $_POST['password'];
  4.  
  5. $mysqli = new mysqli('localhost', 'root', '', 'login');
  6.  
  7. $username = $mysqli->real_escape_string($username);
  8.  
  9. $query = "SELECT password, salt
  10. FROM member
  11. WHERE username = '$username';";
  12.  
  13. $result = $mysqli->query($query);
  14.  
  15. if($result->num_rows == 0) // User not found. So, redirect to login_form again.
  16. {
  17. header('Location: login.html');
  18. }
  19.  
  20. $userData = mysqli_fetch_array($result, MYSQL_ASSOC);
  21. $hash = hash('sha256', $userData['salt'] . hash('sha256', $password) );
  22.  
  23. if($hash != $userData['password']) // Incorrect password. So, redirect to login_form again.
  24. {
  25. header('Location: login.html');
  26. }else{ // Redirect to home page after successful login.
  27. header('Location: home.html');
  28. }
  29. ?>
On procedural style we use the following code and its equivalent in object oriented style: mysqli_connect() = new mysqli() mysqli_query() = $mysqli->query() In our next tutorial, we will create a new article to differentiate PDO from the above code. PDO is a bit different so we will not cover it here.

Comments

Submitted byTimia Breederveld (not verified)on Thu, 06/04/2015 - 23:13

Hi, this was very helpful, so THANKS! Could you post a tut following on this one with a log out function, forgot password and change password? I am alreadu searching and trying for many days how to do that without any result. Timia

Add new comment