使用jQuery和Ajax进行基本身份验证

我试图通过浏览器创建一个基本的身份验证，但我真的无法到达那里。

如果这个脚本不在这里，浏览器将接管身份验证，但我想告诉浏览器用户即将进行身份验证。

地址应该是这样的:

http://username:password@server.in.local/

我有一个表格:

<form name="cookieform" id="login" method="post">
<input type="text" name="username" id="username" class="text"/>
<input type="password" name="password" id="password" class="text"/>
<input type="submit" name="sub" value="Submit" class="page"/>
</form>

还有一个脚本:

var username = $("input#username").val();
var password = $("input#password").val();


function make_base_auth(user, password) {
var tok = user + ':' + password;
var hash = Base64.encode(tok);
return "Basic " + hash;
}
$.ajax
({
type: "GET",
url: "index1.php",
dataType: 'json',
async: false,
data: '{"username": "' + username + '", "password" : "' + password + '"}',
success: function (){
alert('Thanks for your comment!');
}
});
828881 次浏览
小开
最佳答案

使用jQuery的beforeSend回调函数添加一个带有身份验证信息的HTTP头:

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

JSONP不能与基本身份验证一起工作，因此jQuery beforeSend回调不能与JSONP/Script一起工作。

我设法通过向请求添加用户和密码(例如用户:pw@domain.tld)来解决这个限制。这适用于几乎任何不支持通过url进行身份验证的浏览器除了Internet 探险家(调用将不会被执行)。

看到http://support.microsoft.com/kb/834489。

小开

使用beforeSend回调添加一个带有身份验证信息的HTTP头，如下所示:

var username = $("input#username").val();
var password = $("input#password").val();


function make_base_auth(user, password) {
var tok = user + ':' + password;
var hash = btoa(tok);
return "Basic " + hash;
}
$.ajax
({
type: "GET",
url: "index1.php",
dataType: 'json',
async: false,
data: '{}',
beforeSend: function (xhr){
xhr.setRequestHeader('Authorization', make_base_auth(username, password));
},
success: function (){
alert('Thanks for your comment!');
}
});
小开

或者，简单地使用1.5中引入的headers属性:

headers: {"Authorization": "Basic xxxx"}

参考:jQuery Ajax API

小开

一年中事情发生了怎样的变化。除了代替xhr.setRequestHeader的header属性外，当前的jQuery(1.7.2+)还包含了带有$.ajax调用的用户名和密码属性。

$.ajax
({
type: "GET",
url: "index1.php",
dataType: 'json',
username: username,
password: password,
data: '{ "comment" }',
success: function (){
alert('Thanks for your comment!');
}
});

编辑评论和其他答案:为了在没有401 Unauthorized响应的情况下抢先发送身份验证，使用'headers'而不是setRequestHeader (pre -1.7):

$.ajax
({
type: "GET",
url: "index1.php",
dataType: 'json',
headers: {
"Authorization": "Basic " + btoa(USERNAME + ":" + PASSWORD)
},
data: '{ "comment" }',
success: function (){
alert('Thanks for your comment!');
}
});
小开

使用jQuery ajaxSetup函数，它可以为所有ajax请求设置默认值。

$.ajaxSetup({
headers: {
'Authorization': "Basic XXXXX"
}
});
小开

上面的例子有点让人困惑，这可能是最好的方法:

$.ajaxSetup({
headers: {
'Authorization': "Basic " + btoa(USERNAME + ":" + PASSWORD)
}
});

我从Rico和Yossi的回答中得到了以上答案。

btoa函数Base64编码一个字符串。

小开

正如其他人建议的那样，你可以直接在Ajax调用中设置用户名和密码:

$.ajax({
username: username,
password: password,
// ... other parameters.
});

或如果你不想以纯文本形式存储你的凭证，可以使用headers属性:

$.ajax({
headers: {"Authorization": "Basic xxxx"},
// ... other parameters.
});

无论你用哪种方式发送，服务员都必须非常有礼貌。对于Apache，你的.htaccess文件应该是这样的:

<LimitExcept OPTIONS>
AuthUserFile /path/to/.htpasswd
AuthType Basic
AuthName "Whatever"
Require valid-user
</LimitExcept>


Header always set Access-Control-Allow-Headers Authorization
Header always set Access-Control-Allow-Credentials true


SetEnvIf Origin "^(.*?)$" origin_is=$0
Header always set Access-Control-Allow-Origin %{origin_is}e env=origin_is

解释:

对于一些跨域请求，浏览器会发送一个预先的选项请求，该请求缺少您的身份验证头。将身份验证指令包装在LimitExcept标记中，以正确响应preflight。

然后发送一些头信息告诉浏览器允许它进行身份验证，并通过Access-Control-Allow-Origin为跨站点请求授予权限。

在某些情况下，*通配符不起作用作为Access-Control-Allow-Origin的值:您需要返回被调用方的确切域。使用SetEnvIf来捕获这个值。

小开

根据SharkAlley的回答，它也适用于nginx。

我正在寻找一种解决方案，通过jQuery从nginx后面的服务器获取数据，并受到Base Auth的限制。这对我来说很管用:

server {
server_name example.com;


location / {
if ($request_method = OPTIONS ) {
add_header Access-Control-Allow-Origin "*";
add_header Access-Control-Allow-Methods "GET, OPTIONS";
add_header Access-Control-Allow-Headers "Authorization";


# Not necessary
#            add_header Access-Control-Allow-Credentials "true";
#            add_header Content-Length 0;
#            add_header Content-Type text/plain;


return 200;
}


auth_basic "Restricted";
auth_basic_user_file /var/.htpasswd;


proxy_pass http://127.0.0.1:8100;
}
}

JavaScript代码是:

var auth = btoa('username:password');
$.ajax({
type: 'GET',
url: 'http://example.com',
headers: {
"Authorization": "Basic " + auth
},
success : function(data) {
},
});

我觉得有用的文章:

  1. 这个话题的答案
  2. http://enable-cors.org/server_nginx.html
  3. http://blog.rogeriopvl.com/archives/nginx-and-the-http-options-method/
小开

有3种方法可以实现这一点，如下所示

方法1:

var uName="abc";
var passwrd="pqr";


$.ajax({
type: '{GET/POST}',
url: '{urlpath}',
headers: {
"Authorization": "Basic " + btoa(uName+":"+passwrd);
},
success : function(data) {
//Success block
},
error: function (xhr,ajaxOptions,throwError){
//Error block
},
});

方法2:

var uName="abc";
var passwrd="pqr";


$.ajax({
type: '{GET/POST}',
url: '{urlpath}',
beforeSend: function (xhr){
xhr.setRequestHeader('Authorization', "Basic " + btoa(uName+":"+passwrd));
},
success : function(data) {
//Success block
},
error: function (xhr,ajaxOptions,throwError){
//Error block
},
});

方法3:

var uName="abc";
var passwrd="pqr";


$.ajax({
type: '{GET/POST}',
url: '{urlpath}',
username:uName,
password:passwrd,
success : function(data) {
//Success block
},
error: function (xhr,ajaxOptions,throwError){
//Error block
},
});

提交答案