Monday, May 11, 2009

HTTP Basic Authentication with JQuery

I had a need to do basic authentication with JQuery (Not the most secure, I know, but some sites only accept this method).

I found the following page:

HTTP Basic Authentication using AJAX | Waves

It involves encoding the username and password with a Base64 library, and then setting the request header for the ajax call, like this:


$.ajax({
'url': 'http://host.com/action/',
'otherSettings': 'othervalues',
'beforeSend': function(xhr) {
xhr.setRequestHeader("Authentication", "Basic " + encodeBase64(username + ":" + password) //May need to use "Authorization" instead
},
sucess: function(result) {
alert('done');
}
});


EDIT 11/2/2010:


Some people have been noting that "Authorization" instead of "Authentication" seems to work better for them. The "Authentication" method works for me - I found it from this question on stack overflow: http://stackoverflow.com/questions/671042/using-javascript-with-the-twitter-api/671054#671054

15 comments:

  1. Hi,

    Great post.

    How does cross domain AJAX requests come into play here. My javascript is served from host A and AJAX post request is going to host B.

    My browser is giving me security exception complaining access is denied. I did some research and found out that setting the document.domain property would help. But it didn't.

    Any thoughts?

    Phani

    ReplyDelete
  2. In your code you copied you changed Authorization to Authentication. They're not equivalent.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. you can add password and username params in jQuery ajax request. No need for headers and encoders, just:
    $.ajax({
    'url': 'http://host.com/action/',
    'otherSettings': 'othervalues',
    username: 'name',
    password: 'pass',
    sucess: function(result) {
    alert('done');
    }
    });

    ReplyDelete
  5. @Fica,

    I have found that when I use the username / password in the AJAX settings, the browser still tries to use NTLM authentication (I think) on the first try. If you cancel out of that prompt, then the subsequent requests DO work; but I get that first prompt each time I clear HTTP Authentication data.

    If I use the setRequestHeader() approach for Basic authentication, it works seemlessly from the first request - no prompts at all.

    Not sure why I get the prompt using the other approach.

    ReplyDelete
  6. Thanks for the helpful post.

    If it would be possible to change the "Authentication" to "Authorization" in your post, that would save some people (like me) a lot of time debugging why it's not working. ;) Thanks. :)

    ReplyDelete
  7. @dan - I have updated the post to mention this. Thanks for the comment!

    ReplyDelete
  8. Thanks for the info. With beforesend callback it's working, but with username+password settings, jquery sends values sometimes even when they're empty. Now, it works perfectly. Thanks again!

    ReplyDelete
  9. after authorization, how redirect after?

    ReplyDelete
  10. Is anybody make it working with cross domain. I am having problems to get basic authentication from cross domain url. Here is the example code:

    .ajax({
    'url': url,
    'method': 'GET',
    'beforeSend': function(xhr) {
    xhr.setRequestHeader("Authorization", "Basic " + credentials);
    },
    sucess: function(result) {
    alert('XHR Request Success <>' + result);
    },
    error:function (xhr, ajaxOptions, thrownError){
    alert(xhr.status + '<>' + thrownError + '<>' + xhr.responseText);
    });
    });

    ReplyDelete
    Replies
    1. Hi!

      Did you solve this problem? I've got exactly the same problem and I am loosing my mind with that? I am really appreciated if you share your knowledge about this. I have HTML5-client and JAVA REST-services in cross domain url.

      Cheers,
      Sami

      Delete
  11. How to Access Web Service of PHP in JavaScript which will give response in Json Object

    ReplyDelete
  12. How to Access Web Service of PHP in JavaScript which will give response in Json

    ReplyDelete