Creating Advance Level Login system with Logic captcha

Advance Level Login system with Logic captcha. Long ago, we talked about a simple easy login system. And today, I decided to improve the system. The new version will use the methods SHA1 + MD5 (with salt) to encode passwords. We also do not use cookies to store information, and will use the sessions. And, in this version I will implement an interesting logic captcha (where we will need to choose the correct answer in order to prove that we are human, not machine).

Contents

Our final result
Step 1. HTML
main_page.html
login_form.html
logout_form.html
Step 2. CSS
css/main.css
Step 3. JS
js/jquery-1.4.4.min.js
Step 4. PHP
index.php
Conclusion

Live Demo

[sociallocker]

download in package

[/sociallocker]

Our final result

OK, download the example files and lets start coding !

Step 1. HTML

As usual, we start with the HTML. This is main page code:

main_page.html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
  
<head> 
  
    <title>Advance Level Login system with Logic captcha</title> 
  
    <link rel="stylesheet" href="css/main.css" type="text/css" media="all" /> 
  
    <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script> 
  
</head> 
  
<body> 
  
    <div class="example" id="main"> 
  
        {login_form} 
  
    </div> 
  
    <div> 
  
        <hr style="clear:both;" /> 
  
        <h4><a href="https://www.script-tutorials.com/creating-advance-level-login-system-with-logic-captcha/">back to original article page</a></h4> 
  
    </div> 
  
</body> 
  
</html>

Here are all easy, isn’t it?. I just put one key {login_form} here, which we will use later.

login_form.html

<div class="bar"> 
  
    <a href="#" id="my_userarea">Log In</a> 
  
</div> 
  
<div style="display: none;" id="my_panel"> 
  
    <div class="column"> 
  
        <h3>My website title</h3> 
  
        <p>My website description. Our website was created for anybody. Here we can read recent news, tutorials, and find many useful information. Welcome !</p> 
  
        <p><a class="more" href="#about.php" rel="nofollow"><span>Read more</span></a></p> 
  
    </div> 
  
    <div class="column"> 
  
        <form class="login_form" action="index.php" method="post"> 
  
            <h3>Log In</h3> 
  
            <label>Nickname:</label><input type="text" name="username"> 
  
            <label>Password:</label><input type="password" name="password"> 
  
            <label>{captcha}</label><input type="text" name="captcha"> 
  
            <input type="submit" name="LogIn" value="Login"> 
  
            <a class="more" href="#forgot.php" rel="nofollow"><span>Forgot password?</span></a> 
  
        </form> 
  
    </div> 
  
    <div class="column"> 
  
        <h3>Still not our member? Join us!</h3> 
  
        <p>Which gives us a registration? This gives us opportunity to become full member of our website. You can communicate with another member etc..</p> 
  
        <p align="center"><a class="more" href="#registration.php" rel="nofollow"><span>Registration</span></a></p> 
  
    </div> 
  
    <div style="clear:both"></div> 
  
    <hr> 
  
    <div class="close"><a id="my_close" class="my_close">Hide this panel</a></div> 
  
</div> 
  
<script language="javascript" type="text/javascript"> 
  
$(document).ready(function() { 
  
    $('#my_userarea').click(function(){ 
  
        $('div#my_panel').slideToggle('slow'); 
  
        return false; 
  
    }); 
  
    $('#my_close').click(function(){ 
  
        $('div#my_panel').slideUp('slow'); 
  
        return false; 
  
    }); 
  
}); 
  
</script> 
  
<h3>You can use username "User1" of "User2" or "User3" and password "password" to login in system</h3>

This file is a template of login form (with three columns). I added here new one key: {captcha}. I will replace this key to value (question) of our new Logic captcha. Last template file – logout:

logout_form.html

<div class="bar"> 
  
    <a href="index.php?logout" id="my_userarea">Log Out</a> 
  
</div>

Step 2. CSS

Here are used CSS styles:

css/main.css

body{background-color:#888;margin:0;padding:0} 
  
.example{position:relative;width:980px;height:700px;background-image:url(../images/background.jpg);border:1px #000 solid;margin:20px auto;padding:20px;-moz-border-radius:3px;-webkit-border-radius:3px} 
  
.bar{background-color:#444;height:24px;padding:10px} 
  
a#my_userarea{font-size:12px;position:relative;display:block;overflow:hidden;color:#909090;-webkit-border-radius:11px;-moz-border-radius:11px;text-decoration:none;border-radius:11px;background:url(../images/button-user-area.gif) repeat-x 0 0;text-shadow:#000 1px 1px;float:right;padding:4px 10px 3px} 
  
#my_panel{background-color:#272727;border:1px solid #444;color:#999;font-size:.85em;z-index:1001;padding:15px;position:absolute;width:948px} 
  
#my_panel .column{float:left;width:30%;padding:15px} 
  
#my_panel .column h3{color:#fff} 
  
#my_panel .login_form input,#my_panel .login_form label{margin-bottom:5px;display:block} 
  
#my_panel input[type=text],#my_panel input[type=password]{width:200px} 
  
#my_panel input[type=submit]{background:url(../images/button.png) no-repeat scroll right 0 transparent;width:72px;height:30px;color:#fff;border-width:0} 
  
.more{background:url(../images/more-left.png) no-repeat scroll 0 0 transparent;cursor:pointer;display:block;float:right;padding-left:11px;text-align:center;text-decoration:none} 
  
.more span{background:url(../images/more-right.png) no-repeat scroll right 0 transparent;color:#fff;display:block;height:30px;line-height:29px;padding:0 19px 0 8px} 
  
.more:hover{text-decoration:none;background-position:0 bottom} 
  
.more:hover span,#my_panel input[type=submit]:hover{background-position:right bottom} 
  
#my_panel .close{text-align:center} 
  
#my_panel .close a{color:#07BBE2;cursor:pointer}

Step 3. JS

For our example we only need jQuery library (for the effect of sliding)

js/jquery-1.4.4.min.js

Step 4. PHP

Our most important part of project – login functionality with captcha.

index.php

<?php 
  
// set error reporting level 
  
if (version_compare(phpversion(), "5.3.0", ">=") == 1) 
  
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED); 
  
else 
  
  error_reporting(E_ALL & ~E_NOTICE); 
  
// login system init and generation code 
  
$oAdvancedLoginSystem = new AdvancedLoginSystem(); 
  
$sLoginForm = $oAdvancedLoginSystem->getLoginBox(); 
  
echo strtr(file_get_contents('main_page.html'), array('{login_form}' => $sLoginForm)); 
  
// class AdvancedLoginSystem 
  
class AdvancedLoginSystem { 
  
    // variables 
  
    var $aExistedMembers; // Existed members array 
  
    var $aQuestions; // Logic questions 
  
    // constructor 
  
    function AdvancedLoginSystem() { 
  
        session_start(); 
  
        $this->aExistedMembers = array( 
  
            'User1' => array('hash' => 'b88c654d6c68fc37f4dda1d29935235eea9a845b', 'salt' => 'testing'), // hash = sha1(md5('password') . 'testing'); 
  
            'User2' => array('hash' => 'b88c654d6c68fc37f4dda1d29935235eea9a845b', 'salt' => 'testing'), 
  
            'User3' => array('hash' => 'b88c654d6c68fc37f4dda1d29935235eea9a845b', 'salt' => 'testing') 
  
        ); 
  
        $this->aQuestions = array( 
  
            1 => array('q' => 'Winter hot or cold?', 'a' => 'cold'), 
  
            2 => array('q' => '4 - 1 = ?', 'a' => '3'), 
  
            3 => array('q' => 'Sun is blue or yellow?', 'a' => 'yellow'), 
  
            4 => array('q' => 'Type "god" to process', 'a' => 'god'), 
  
            5 => array('q' => '4 + 3 = ', 'a' => '7'), 
  
            6 => array('q' => '10 > 5 ? (yes/no)', 'a' => 'yes') 
  
        ); 
  
    } 
  
    // get login box function 
  
    function getLoginBox() { 
  
        ob_start(); // get template of Logout form 
  
        require_once('logout_form.html'); 
  
        $sLogoutForm = ob_get_clean(); 
  
        if (isset($_GET['logout'])) { // logout processing 
  
            if (isset($_SESSION['member_name']) && isset($_SESSION['member_pass'])) 
  
                $this->performLogout(); 
  
        } 
  
        if ($_POST['username'] && $_POST['password'] && $_POST['captcha']) { // login processing 
  
            if ($this->checkLogin($_POST['username'], $_POST['password'], false) && $this->aQuestions[$_SESSION['captcha']]['a'] == $_POST['captcha']) { // successful login 
  
                unset($_SESSION['captcha']); 
  
                $this->performLogin($_POST['username'], $_POST['password']); 
  
                return $sLogoutForm . '<h2>Hello ' . $_SESSION['member_name'] . '!</h2>'; 
  
            } else { // wrong login 
  
                ob_start(); // get template of Login form 
  
                require_once('login_form.html'); 
  
                $sLoginForm = ob_get_clean(); 
  
                $sCaptcha = $this->getLogicCaptcha(); 
  
                $sLoginForm = str_replace('{captcha}', $sCaptcha, $sLoginForm); 
  
                return $sLoginForm . '<h2>Username or Password or Captcha is incorrect</h2>'; 
  
            } 
  
        } else { // in case if we already logged (on refresh page): 
  
            if ($_SESSION['member_name'] && $_SESSION['member_pass']) { 
  
                if ($this->checkLogin($_SESSION['member_name'], $_SESSION['member_pass'])) { 
  
                    return $sLogoutForm . '<h2>Hello ' . $_SESSION['member_name'] . '!</h2>'; 
  
                } 
  
            } 
  
            // otherwise - draw login form 
  
            ob_start(); 
  
            require_once('login_form.html'); 
  
            $sLoginForm = ob_get_clean(); 
  
            $sCaptcha = $this->getLogicCaptcha(); 
  
            $sLoginForm = str_replace('{captcha}', $sCaptcha, $sLoginForm); 
  
            return $sLoginForm; 
  
        } 
  
    } 
  
    // perform login 
  
    function performLogin($sName, $sPass) { 
  
        $this->performLogout(); 
  
        $sSalt = $this->aExistedMembers[$sName]['salt']; 
  
        $sPass = sha1(md5($sPass) . $sSalt); 
  
        $_SESSION['member_name'] = $sName; 
  
        $_SESSION['member_pass'] = $sPass; 
  
    } 
  
    // perform logout 
  
    function performLogout() { 
  
        unset($_SESSION['member_name']); 
  
        unset($_SESSION['member_pass']); 
  
    } 
  
    // check login 
  
    function checkLogin($sName, $sPass, $isHash = true) { 
  
        if (! $isHash) { 
  
            $sSalt = $this->aExistedMembers[$sName]['salt']; 
  
            $sPass = sha1(md5($sPass) . $sSalt); 
  
        } 
  
        return ($sPass == $this->aExistedMembers[$sName]['hash']); 
  
    } 
  
    // get logic captcha (question) 
  
    function getLogicCaptcha() { 
  
        $i = array_rand($this->aQuestions); 
  
        $_SESSION['captcha'] = $i; 
  
        return $this->aQuestions[$i]['q']; 
  
    } 
  
} 
  
?>

What we can see here: At the top, we simply creating instance of our class and call the method to render the login form. In the class constructor, we define an array of users with access to the system. Notice that now we have not only user name and it hashed password, but also Salt. All because we’re going to use SHA1 + MD5 encoding methods together to make more strong encryption. Also, I’m not forcing you to hardcode your users in class constructor like me, you can always store the user data anywhere else (in the database, or other cache files).

In addition to users, in the class constructor we see another array – this is our innovation – the logic captcha. Here I wrote an array of questions and answers for our captcha.

I hope that the rest logic is pretty clear to you. In the beginning we draw the login form. In this form we will draw our captcha (the question), and saving question ID in browser sessions. Suppose a user logs into the system. Here we checking entered data, hashing (SHA1+MD5+Salt) entered password (for verification with real hash code), and we checking entered answer from our captcha (as you remember – we already saved its ID in sessions). If everything correct – we allow to log in. Otherwise – we will draw notification (Username or Password or Captcha is incorrect). During login – we saving few params in sessions (member_name, member_pass) – possible you will use these params somewhere else. And last point – in case if we already have some info in sessions (member_name, member_pass) and this is correct params – we believe that the user is still in the system (maybe he just opened another page at your website via navigation).

Live Login Demo

Conclusion

I hope today’s article was very interesting for you. Who knows, maybe you decide to use it for your own site. Do not forget to thank for our work. Good luck in your work!