How do I trigger the browser's Basic Authentication dialog from an AJAX call?

Question

I'm using basic authentication to secure a set of WCF web services exposed only inside our corporate network, and I was wondering if there was a way to trigger the browser's credentials dialog to appear from an AJAX call when the web service returns with a 401 error?

Currently my AJAX call receives the 401 as a regular failed request and doesn't prompt the browser to do anything. However, if I take the same URI and copy-paste it into into the browser's URL bar, the returned 401 correctly triggers the Basic Authentication dialog.

Is there any way to get the AJAX callback to tell the browser to pop up that dialog?

Answer 1

Dynamically create an iframe with your url and append to document. It'll trigger authentication form. jQuery snipet to add iframe

$('<iframe src="your_url"></iframe>').appendTo('body')

A very simplified example is here:

var url = 'your_url_here';
$.ajax({
    url: url,
    error: function(response){
        if(response.status==401){           
            $('<iframe src="'+url+'"></iframe>').appendTo('body');          
        }
    },
    success:function(){
        //your success code here
    }
});

Answer 2

You can't, you'll need to provide the request with the credentials.

See How to use Basic Auth with jQuery and AJAX?

Answer 3

As found somewhere in the stack :

Receiving a 401 response is the server telling you, “you aren’t authenticated–either not authenticated at all or authenticated incorrectly–but please reauthenticate and try again.” To help you out, it will always include a WWW-Authenticate header that describes how to authenticate

Use jQuery's beforeSend callback to add an HTTP header with the authentication information

beforeSend: function (xhr) {
xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
},

Answer 4

Do you meet the conditions highlighted in this SO answer?

Also based on in this other answer you may want to check that the headers returned from your backend are the same whether you request it from the browser or from an AJAX call.

Answer 5

you could just trigger a redirect when you check for the 401 condition:

window.location = "https://example.com"

Answer 6

You would suggest to open/display/insert a form to allow inserting username and password and than resend the AJAX Request with the given credentials. I wouldn't really on browsers credential popup.

How you set authentication header you can read here: How to use Basic Auth with jQuery and AJAX?

Answer 7

Yes, you can invoke it from AJAX. Just pass the request with the following header:

withCredentials: true

Answer 8

I have faced almost the same 401 problem, except for my request was cross domain. But I hope the reason is the same. Following the instructions on developer.mozilla - Access control CORS I have finally succeeded with simple:

var xhttp=new XMLHttpRequest();
xhttp.withCredentials = true;
xhttp.open("GET", "https://my.foo.server/app/resource", true);
xhttp.send();

I think the xhttp.withCredentials is the solution. It is not header! You let browser to communicate with server through cookies. The following answer explains a lot XHR2 withCredentials - which cookies are sent?

Without xhttp.withCredentials there was always 401 (Unauthorized). But using it, the browser added the required header Authorization:Basic dGVFooFooFooFoosaWVudA== or triggered the login dialog, when credentials were not available yet.