how to call a php function from javascript or if that can't be done, some direction on what I should do

Question

Hi, I've created a jquery dialog modal box for logging into my website:

$('#login').dialog({
  modal: true,
  position: 'center',
  autoOpen: false,
  title: 'Login',
  height: '750px',
  width: '300px',
  zIndex: 9999,
  closeOnEscape: false,
  buttons: {
    'Login': function() {
      $(this).dialog('close');
      $('#mask').hide();
      Login();
    },
    'Cancel': function() {
      $(this).dialog('close');
      $('#mask').hide();
    }
  }
});

I've created a php function called Login() in a separate php file, is it possible for me to call that php function when they click on the Login button? If not, how can I get that dialog's Login box to use php to attempt logging in.

Answer 1

Update: Do this over an SSL connection for true security

You simply need to make a behind-the-scenes request using AJAX. For example, $.post in jQuery.

1. Click Login
2. Get username/password from dialog.
3. $.post() it to the /login.php file that contains the login code
4. Process this request in PHP.
5. Output one thing if the login is succesful, or another if it fails.
6. Recieve this output in the callback function of $.post
7. Either call window.location = '/nextpage.php' or display an error message.

As per http://docs.jquery.com/Ajax/jQuery.post, you have 4 arguments to $.post:

$.post( url, [data], [callback], [type] )

so that

function onLogin(data)
{
    if(data['success'])
        window.location = 'nextpage.php';
    else
        alert(data['error']);
}

var u = get_username_from_form();
var p = get_password_from_form();

$.post(
   '/login.php', 
   {username: u, password: p}, 
   onLogin, 
   'json' 
)

and in the file login.php, you would:

<?php

$username = (isset($_POST['username']) ? $_POST['username'] : '');
$password = (isset($_POST['password']) ? $_POST['password'] : '');

//Assuming you wrote the authenticate() function
if(authenticate($username, password))
{
   echo json_encode(array('success' => true));
   exit;
}
else
{
   echo json_encode(array('success' => false, 'message' => 'Login Failed!'));
   exit;
}

Answer 2

@gahooa:

this is a great answer! however, you'll definitely want to use an message digest on that password (preferrably with some padding) to make it so that people can't see their username / password clear text.

http://pajhome.org.uk/crypt/md5/scripts.html Here's a great set of JavaScript that will encrypt the information before you send it over the network.

Basically the concept is that you can store the user's password as this encrypted format (also a really good idea) or dynamically compute them if you wish, but after both have been digested they should match.

And then you'd add just 1 function to (gahooa's code):

$.post(
   '/login.php', 
   {username: u, password: hex_md5(p)}, // here
   onLogin, 
   'json' 
);

This is not the most secure that you can be, as you could consider doing a salt as well, where you do this:

var salt = '$@.@^-^$'; // any random value with $p3c14l ch@|2$ (special chars)

$.post(
   '/login.php', 
   {username: u, password: hex_md5(hex_md5(p) + salt)}, // here
   onLogin, 
   'json' 
);

then in the server-side authentication function you'd do a comparison of the hashed values, i.e.:

<?php

    $salt = '$@.@^-^$'; // same as on client-side

    function authenticate( $user, $pass ){
       ...
       if( md5( md5( $storedPassword ) . $salt ) == $_POST['username'] ){ ... }
       ...
    }

?>

or, like I said, you could store the already hashed version

md5( md5( $_POST['signup_password'] ) . $salt )

of users' passwords when they sign up (and convert all existing ones)