How do you call a JSON web service, that requires basic authentication, using jQuery?

Question

I am somewhat novice at javascript, but I am trying to call a JSON web service that require basic authentication using jQuery (or anything that would work really).

I've not been able to come up with any real answers on Google. Is what I am trying to do possible?

See here for an example: http://stackoverflow.com/questions/671042/using-javascript-with-the-twitter-api/671054#671054 — onteria_, May 17 '11 at 02:59
+1: great question; explores an aspect of Ajax I had never even thought about. — Roy Tinker, May 17 '11 at 04:14
Is the JavaScript executing on a page that is hosted at the same domain as the web service? — Crescent Fresh, May 17 '11 at 04:46

score 10 · Answer 1 · edited Jul 08 '14 at 08:55

10

You will need to set the appropriate request header to pass the credentials. For example see here.

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

FYI I searched Google for jquery post with basic auth and this was the first link.

edited Jul 08 '14 at 08:55

Gavin

1,223
15
20

answered May 17 '11 at 02:58

mellamokb

56,094
12
110
136

encodeBase64 only converts to base 64. The username and password are sent basically clear text. – bleepzter May 17 '11 at 03:05
4

Correct, that is how basic authentication works. I wouldn't recommend it either, but it's what the OP asked for. – mellamokb May 17 '11 at 03:06
3

you can use https instead of http, then it won't be clear text – beetstra Oct 03 '12 at 13:05
What's about you want to prevent "write" the username and password in the code? If is javascript anyone can see it. Which alternatives do we have? – fabricioflores Apr 01 '15 at 23:24
@fabricioflores: That is a good point. It's just not clear from the OP's example how this is being used. It may be the username/password being used are already known to the user and so this is a convenience. If it is some sort of API key for 3rd-party integration that should not be known to the website user, then yes this is dangerous because secure information from the website owner will inadvertently be revealed to the user. In the latter case I would use a server-side call rather than JavaScript. – mellamokb Apr 02 '15 at 16:40

Philipp Gayret · Answer 2 · 2015-05-29T14:31:38.150

7

Here's the way to do it with jQuery for your copy and pasting needs:

$.ajax({
    url: "/somewhere",
    beforeSend: function(xhr) {
        xhr.setRequestHeader("Authorization", "Basic " + window.btoa(username + ":" + password));
    },
    success: function(result) {
        console.log(arguments);
    }
});

edited May 29 '15 at 14:31

answered Feb 02 '14 at 20:13

Philipp Gayret

4,870
1
28
34

score -5 · Answer 3 · answered May 17 '11 at 03:03

-5

Simple.

In asp.net create a reference to the service. Create a web page (with no UI) and make multiple methods in the code behind that are "wrappers" for that service (in C#/VB.NET). Decorate the methods with [WebMethod] and set the WebMethod's Serialization to JSON.

Alternatively you can do the same with any other language (pearl, php, whatever) by making a wrapper for the json web service.

The reason you need that wrapper is because that way you avoid the cross-site scripting... limitations in JS. Also if your page is served over HTTPS, than your JS calls to your wrapper will also be over HTTPS thus not having to worry about security.

Your JS wrapper will be taking care of negotiating the connection, authentication, etc...

The javascript within your other pages can post to the methods in this page as:

$.post('pagename/method_name', {data:value}, callback(){

});

or $.post, $.get, $.ajax... will all work.

answered May 17 '11 at 03:03

bleepzter

9,607
11
41
64

4

-1: Doesn't address the question. The OP made no reference to server-side technologies. – Roy Tinker May 17 '11 at 04:13
@bleepzter: Whoa, dude. Relax! You've got a nice answer here, but it may not be necessary for the OP's scenario. I know how you feel, but I've got quite a few answers under my belt with a `-1`. It's OK, it's part of the learning process, ok. Hang in there :) – mellamokb May 17 '11 at 05:02
bleepzter - Honestly, you'll have hard time in this work if you can't take a little criticism. 2 internet points are hardly worth that much trouble. – Kobi May 17 '11 at 05:15
While it looks as if this is an attempt to describe JSONP as a solution to cross scripting, (1) the OP didn't ask about cross-scripting, only auth, and (b) it doesn't explain how all this helps, and (c) the user may already be doing it. – bmargulies May 17 '11 at 10:26
Which doesn't make it an invalid suggestion. I understand if the suggestion in your view is a bit more... involved than what the op asked for. Fine. But it is a valid suggestion as far as knowledge and content.The opp explicitly asked `JSON web service that require basic authentication using jQuery (OR ANYTING THAT WOULD WORK, REALLY)...` Therefore as a shot in the dark the suggestion is fine. I want u to find a DEV who doesn't use server side technologies and EXPLICITLY DEVELOPS ONLY IN in JS/HTML. Please do so. Find me that person. I will gladly delete my post. Thanks for abusing the system! – bleepzter May 17 '11 at 13:19
@bleepzter: did you delete a comment earlier or something? Why are @mellamokb and @Kobi telling you to relax? – Crescent Fresh May 17 '11 at 18:20
@Crescent Fresh Someone else deleted that comment. I was upset because my suggestion was perfectly valid and got ducked points for no apparent reason. – bleepzter May 17 '11 at 19:32

How do you call a JSON web service, that requires basic authentication, using jQuery?

3 Answers3

Linked