How to use PHP-based authentication from non-PHP based AJAX app?

Question

I've been asked to create a stand-alone webapp using "straight" HTML and Javascript that does user authentication against an existing PHP app (backend is MySQL). Unfortunately, I really don't have a firm grasp on how PHP authentication works, and I'd rather not invest a lot of time in learning PHP just for this particular case.

I can see two possibilites so far

1) create a PHP wrapper around my new app and use native PHP authentication (don't like this)

2) create a simple REST-ful webservice around the PHP authentication (don't know how to do this)

Anything else I should consider? Help is much appreciated!

Answer 1

There is no such thing as PHP authentication. It is either:

• HTTP authentication, using HTTP headers.
• authentication by submitting an HTML form.

Maybe your website can call the login page of the PHP webapp, and check if it succeeded.

Answer 2

There is no one standard way of doing php authentication. Typically it involves storing some information or UID in sessions, but it's difficult to generalize.

You need to find out how the existing authentication works by looking at what forms are submitting where.

For example, if you find that the login form is something like

<form id="login" action="login.php">
<input type="text" name"username">
<input type="password" name="password">
</form>

You can emulate a form submission using an AJAX call.

Such a call might look something like this in JQuery:

<script>
$(document).ready(function() {
  $("form#login").bind("submit",function() {
    $.post("login.php", "username=INSERTUSERNAMEHERE&password=INSERTPASSWORDHERE");
    return false;
  });
});
</script>

Answer 3

"PHP authentication" usually accepts a user name and password, and subsequently (if they're correct) marks the current session as "logged in" somehow.

It may be enough to submit the application's login form via Ajax using the right credentials.

Answer 4

here's what I would do:

$('form#login').submit(function(e){
    e.preventDefault();
    var formValues = $(this).serialize();
    $.ajax({
      url: 'login.php',
      type: 'POST',
      dataType: 'html',
      data: formValues,
      success: function(data, textStatus, xhr) {
        $('.login-response').html(data);
      }
    });
});

and your html would be like this:

<form id="login" action="login.php">
    <input type="text" name"username">
    <input type="password" name="password">
    <div class="login-response"</div>
</form>