Javascript Login Page with PHP authentication script- Which implementation is Best?

Question

I wrote a working php authentication script for my HTTP file Server. Now, I want to write a login page with some nice graphics. I usually write my pages in HTML5, javacscript, and CSS. I am not sure how to implement the php authentication script. So far I have two ways I think I know of:

1. Write the login page in html5 and javascript, use ajax call to the php script after user enters name/password in input boxes, pass the username and password to the script, and have php return ether true or false depending on if that user was authenticated. Problem is, I do not know how to get php return true or false to javascript.

2. Write a PHP front controller model where the index.php loads html5, javascript, and css for graphics and if user is authenticated then redirect to the normal index.html document for the html file server. The problem with this is I am not familiar with using php as the front controller and I don't know if I can dynamically change elements with javascript for special effects just as if it was a normal html5 page.

Answer 1

I would suggest the first solution. You can use http://api.jquery.com/jQuery.post/ to get your php return to javascript.

Answer 2

You can use jQuery library for making Ajax request. Request will look this way (it's javascript):

function submitLogin(enteredUsername, enteredPassword) {

  $.post('login.php', {username: enteredUsername, password:enteredPassword},   
  function(response) {
      if (response.result == true) {
         // success code here
      } else {
         // fail code here
      }
  }, 'json');
}

login.php file should have this code:

<?php

$username = $_POST['username'];
$password = $_POST['password'];
//... check username and password here
echo json_encode(array('result' => true)); // this is response, true or false
exit;

?>

Answer 3

After doing alot of asking around on freenode, I found it is best to hide the documents outside of web root and have a server side script like php serve them itself after user authentication from the index.php.

I could use auth_basic from nginx, but I wanted a stronger encryption or hash - hence a server scripting language. I suppose the big fishes like facebook use webserver authentication like auth_basic module...but a much more customized and developed version. So, in my situation I will place the files outside of web root.