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: stackoverflow.com/questions/671042/… — onteria_
– onteria_, Commented May 17, 2011 at 2:59
+1: great question; explores an aspect of Ajax I had never even thought about. — Roy Tinker
– Roy Tinker, Commented May 17, 2011 at 4:14
Is the JavaScript executing on a page that is hosted at the same domain as the web service? — Crescent Fresh
– Crescent Fresh, Commented May 17, 2011 at 4:46

Gavin · Accepted Answer · 2014-07-08 08:55:50Z

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 8, 2014 at 8:55

Gavin

1,24315 silver badges20 bronze badges

answered May 17, 2011 at 2:58

mellamokb

56.9k12 gold badges111 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

bleepzter Over a year ago

encodeBase64 only converts to base 64. The username and password are sent basically clear text.

mellamokb Over a year ago

Correct, that is how basic authentication works. I wouldn't recommend it either, but it's what the OP asked for.

beetstra Over a year ago

you can use https instead of http, then it won't be clear text

fabricioflores Over a year ago

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?

mellamokb Over a year ago

@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.

Philipp Gayret · Accepted Answer · 2015-05-29 14:31:38Z

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, 2015 at 14:31

answered Feb 2, 2014 at 20:13

Philipp Gayret

5,1501 gold badge31 silver badges34 bronze badges

Comments

bleepzter · Accepted Answer · 2011-05-17 03:03:56Z

-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, 2011 at 3:03

bleepzter

10.1k12 gold badges44 silver badges67 bronze badges

7 Comments

Roy Tinker Over a year ago

-1: Doesn't address the question. The OP made no reference to server-side technologies.

mellamokb Over a year ago

@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 :)

Kobi Over a year ago

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.

bmargulies Over a year ago

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.

bleepzter Over a year ago

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!

|

Collectives™ on Stack Overflow

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

3 Answers 3

5 Comments

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related