How to do HTTP Basic Auth in Ajax

August 16th, 2007 · 6 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

Tags: AJAX · Javascript

Bookmark this article

del.icio.us:How to do HTTP Basic Auth in Ajax

newsvine:How to do HTTP Basic Auth in Ajax

blinklist:How to do HTTP Basic Auth in Ajax

reddit:How to do HTTP Basic Auth in Ajax

blogmarks:How to do HTTP Basic Auth in Ajax

smarking:How to do HTTP Basic Auth in Ajax

magnolia:How to do HTTP Basic Auth in Ajax

segnalo:How to do HTTP Basic Auth in Ajax

gifttagging:How to do HTTP Basic Auth in Ajax

6 responses so far ↓

1 alex // Aug 17, 2007 at 12:03 am

How exciting! I hope you will share more of the process and the result, too! Cheers
2 alex // Aug 17, 2007 at 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
3 Bobby Jack // Sep 24, 2007 at 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”
4 Arne // Oct 24, 2007 at 1:00 am

good post, I adapted it for YUI, which I use in a a current project.
5 marilyn // Feb 13, 2008 at 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…
6 On web development // Jun 17, 2008 at 5:16 am

The XMLHttpRequest Object supports Basic Auth natively.

xml = new XMLHttpRequest();
xml.open(’GET’,url, true, username, password);

Coder’s Eye

A site about one of the three passions in my life.