Sending basic authentication information via form

Question

I am working on a site that currently uses a basic authentication dialog box login system, that is the type of dialog that you get if you go here: http://www.dur.ac.uk/vm.boatclub/password/index.php I did not set this system up and am not in a position to easily/quickly work around it, but it DOES work. The issue however is that the dialog box is not very helpful in telling you what login information you have to use (that is which username and password combination), and so I would like to replace it with a form. I had been thinking that this wasn't possible but I wanted to ask in order to find out.

Is it possible to set up an HTML form that sends the data to the server such that it accepts it in the same way that it would using this dialog box? Alternatively is it possible to set up a PHP script that would take normal form data and process it somehow passing it to the server such that it logs in?

Edit: After being told that this is basic authentication I went around and have managed to find a way that works and keeps the user persistently logged in. However, this does not work in internet explorer. The solution was simply to redirect the user to: http://username:[email protected]/vm.boatclub/password/index.php But Internet Explorer removed it due to phishing uses about 3 years ago. Is there a way to use javascript to get the browser to access the site in this way? Or will I have to simply change my UI?

Answer 1

After a fair bit of research I found a way that works in both Chrome and IE, that is all that I've tested it in, but the logic of the code does not suggest it should break anywhere. It is based upon this article:

http://www.peej.co.uk/articles/http-auth-with-html-forms.html

Which is rather in depth but the crux of it is this - on the form submit you make an AJAX request into the basic authenticated folder. AJAX requests can accept username and password information for basic auth, and once the browser has authed once it's authorised in that realm, i.e. it will stay logged in. The previous article does it in pure javascript, so to add something other than simply explaining the link here's a (hopefully fairly transparent) implementation using jQuery:

  $(document).ready(function()
  {
    $('#loginForm').submit(function()
    {
      var username = $('#usernameInput').val();
      var password = $('#passwordInput').val();

      $.ajax(
        {
          'password' : password,
          'username' : username,
          'url'      : 'http://www.website.com/basic-auth-file.php',
          'type'     : 'GET',
          'success'  : function(){ window.location = 'http://www.website.com/basic-auth-file.php'; },
          'error'    : function(){ alert('Bad Login Details');},
        }
      );

      return false;
    });
  });

This achieved what I wanted, and is relatively simple to understand, however I would implore anyone who wanted this to go out and didn't know about basic auth to go out and do the research!