How to do HTTP Basic Auth in Ajax

Posted on | August 16, 2007 | 11 Comments

You can use HTTP Basic Authentication with Javascript/Ajax in just three steps. I’ll give you them in just a moment.

The Background

This morning, I was experimenting with Adobe AIR, writing a client to tell me whether I have games waiting for me to make a move on Weewar, and I needed to be able to use my username and “token” via Basic Auth to do that.

It was not easy to find how to do it. In fact, I had to connect a few dots to get it to work. Here you go:

Step 1

First, get Base64.js from Webtoolkit, and load it on your page. We need the encode routine from that library.

Step 2

Construct your Authorization header like so:


function make_base_auth(user, password) {
  var tok = user + ':' + pass;
  var hash = Base64.encode(tok);
  return "Basic " + hash;
}

Step 3

Use it in your Ajax call.


var auth = make_basic_auth('me','mypassword');
var url = 'http://example.com';

// RAW
xml = new XMLHttpRequest();
xml.setRequestHeader('Authorization', auth);
xml.open('GET',url)

// ExtJS
Ext.Ajax.request({
    url : url,
    method : 'GET',
    headers : { Authorization : auth }
});

// jQuery
$.ajax({
    url : url,
    method : 'GET',
    beforeSend : function(req) {
        req.setRequestHeader('Authorization', auth);
    }
});

Technorati Tags: ajax, javascript, extjs, xmlhttprequest, jquery

Category: AJAX, Javascript

Comments

11 Responses to “How to do HTTP Basic Auth in Ajax”

alex
August 17th, 2007 @ 12:03 am

How exciting! I hope you will share more of the process and the result, too! Cheers
alex
August 17th, 2007 @ 9:56 am

we have just noticed a slight bug on our end which seems relevant to what you are doing. The bug is fixed but we changed the headquarters url in the process. Check weewar.com/api for details. Cheers
Bobby Jack
September 24th, 2007 @ 9:01 am

Noticed a couple of bugs in the source here:

o Call to “make_basic_auth”, function defined as “make_base_auth”

o In that same function, reference to “pass” parameter, parameter is actually named “password”
Arne
October 24th, 2007 @ 1:00 am

good post, I adapted it for YUI, which I use in a a current project.
marilyn
February 13th, 2008 @ 6:41 pm

Just curious if you had any trouble with the setRequestHeader() being called before open() in that AJAX call. It’s causing an error over here in Firefox, and nothing seems to be happening in IE…
On web development
June 17th, 2008 @ 5:16 am

The XMLHttpRequest Object supports Basic Auth natively.

xml = new XMLHttpRequest();
xml.open(â€™GETâ€™,url, true, username, password);
Christoph
September 29th, 2008 @ 8:24 am

Thx for the tutorial. I am writing a small weewar-tool too. While trying to get the login working i found a small bug in step 3.
You need to execute xml.open() first an than user xml.setRequestHeader(). Otherwise you get an Error.
Chad Woolley
October 8th, 2008 @ 9:55 am

Nice post, thanks. This helped me.
Nathan Winant
October 8th, 2008 @ 4:44 pm

This was hugely helpful. Thanks!
ivan
March 25th, 2009 @ 6:38 am

function make_base_auth(user, password) {

password => pass

cheers, tnx
Hans Brough
May 12th, 2009 @ 1:02 pm

useful for making requests of same something from the same domain … but if you are using a service API (like twitter) using xmlhhtprequest isn’t allowed because of the same domain security rule in JS.

So… that brings to mind the script tag hack (otherwise known as JONP) but how to set the Authorization header in this case?