Phase 8: Logging in the user

When the user fills in the login form, the login is processed by a Javascript function.

Figure: Login Form

The Javascript follows

function processLogin() {
oFormObject = document.forms['loginForm'];
var email = oFormObject.elements["login-email"].value;
var password = oFormObject.elements["login-password"].value;
password = hex_md5(password);
    
    var navigate = 'ScoreEngine.php?mode=processLogin&email=' + email + '&password=' + password;
  
    $.ajax({
     type : 'Get',
     url  : navigate,
     async : true,
     cache : false,
     
     success : function(text) {
     submitScore(totalScore, email);
     showScoreBoard(totalScore, email);
     },
     error : function() {
      //Do nothing
     }  
    });
   }

In the code above, the username and password are retrieved from the login form presented to the user. For security purposes, the password is not stored in the database. A hash of the password is generated upon registration and stored. When logging in, the password provided by the user is also hashed and is compared with the hash in the database.

The hashing requirement presented a challenge. A hashing method had to be found which was compatible with both Javascript and PHP. Luckily, a BSD-style Javascript hashing algorithm was found courtesy of Paul Johnston (http://pajhome.org.uk/crypt/md5 TODO: Make me a link). This receives a string as input and outputs a PHP-compatible MD5 hash.

Once the username and hashed password have been retrieved, they need to be sent to the PHP script. However, this must be done in the background (without any page refreshes) - a clear need for AJAX. For this purpose the jQuery library was used to send AJAX requests to the PHP script (ScoreEngine.php).

function checkLogin() {
  global $dbBallGame;
  $email = $_GET['email'];
  $password = $_GET['password'];
  
  $qry = "SELECT * FROM user WHERE username = \"$email\" AND password = \"$password\"";

  $result = mysql_query($qry, $dbBallGame) or die(mysql_error());
  if (mysql_num_rows($result) > 0) {
   echo "true";
  } else {
   echo "false";
  }
 }

The script checks the authentication details against the database and returns a true or false. This is then processed by the Javascript function and a result is displayed depending on the PHP function output.

The following diagram summarizes the above.

Figure 7.1: Deployment