如何从AJAX调用中触发浏览器的基本身份验证对话框?

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?

我正在使用基本的身份验证来保护仅在公司网络中公开的一组WCF web服务，我想知道是否有一种方法可以在web服务返回401错误时，在AJAX调用中触发浏览器的凭据对话框?

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.

目前，我的AJAX调用接收401作为常规失败请求，并没有提示浏览器做任何事情。但是，如果我将相同的URI和复制粘贴到浏览器的URL栏中，返回的401会正确触发基本身份验证对话框。

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

有没有办法让AJAX回调告诉浏览器弹出这个对话框?

8 个解决方案

#1

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

动态创建一个iframe与您的url和附加到文档。它会触发身份验证形式。jQuery snipet添加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
    }
});

#2

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

不能，您需要用凭据提供请求。

See How to use Basic Auth with jQuery and AJAX?

了解如何在jQuery和AJAX中使用基本的Auth吗?

#3

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.

您应该建议打开/显示/插入一个表单以允许插入用户名和密码，而不是使用给定的凭据重新发送AJAX请求。我不会在浏览器上弹出凭据。

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

如何设置可以在这里阅读的身份验证头:如何使用jQuery和AJAX的基本身份验证?

#4

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

是的，您可以从AJAX调用它。只需将请求与以下标题一起传递:

withCredentials: true

withCredentials:真

#5

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:

我遇到了几乎相同的401问题，除了我的请求是cross domain。但我希望原因是一样的。按照开发人员的指示。我终于成功地使用了mozilla - Access control CORS:

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?

我认为xhttp。withCredentials是解决方案。这不是头!您允许浏览器通过cookie与服务器通信。下面的答案解释了很多XHR2的凭据——哪些cookie被发送了?

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.

没有xhttp。有证书的人总是401(未经授权的)。但是使用它，浏览器添加了所需的头授权:Basic dgvfoofoofoofoofoofoofoosawvuda ==或触发登录对话框，此时还没有凭据可用。

#6

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

收到401响应的服务器会告诉您:“您不是经过身份验证的，或者根本没有经过身份验证，或者身份验证不正确，但是请重新进行身份验证并再次尝试。”为了帮助您，它将始终包含一个www - header，描述如何进行身份验证

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

使用jQuery的前述回调来添加带有身份验证信息的HTTP头

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

#7

Do you meet the conditions highlighted in this SO answer?

你满足这个SO答案中突出的条件吗?

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.

同样，基于此另一个答案，您可能希望检查从后端返回的头文件是否与从浏览器或AJAX调用请求的头文件相同。

#8

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

当您检查401条件时，您可以触发一个重定向:

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

#1