如何使用基本身份validation与jQuery和AJAX？

我试图通过浏览器创build一个基本的身份validation，但我不能真正到达那里。

如果这个脚本不在这里，那么浏览器authentication将会接pipe，但是我想告诉浏览器用户即将进行authentication。

地址应该是这样的：

http://username:[e-mail]/ 

我有一个表单：

 <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!'); } }); 

Answer 1

使用jQuery的beforeSendcallback来添加一个带有authentication信息的HTTP头：

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

Answer 2

一年中情况如何变化 除了用来replacexhr.setRequestHeader的头部属性xhr.setRequestHeader ，当前的jQuery（1.7.2+）还包含一个用户名和密码属性以及$.ajax调用。

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

编辑从注释和其他答案：要清楚 – 为了抢先发送身份validation没有401 Unauthorized响应，而不是setRequestHeader （前-1.7）使用'headers' ：

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

Answer 3

使用beforeSendcallback来添加一个带有如下validation信息的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!'); } }); 

Answer 4

或者，只需使用1.5中介绍的headers属性：

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

参考： jQuery Ajax API

Answer 5

上面的例子有点混乱，这可能是最好的方法

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

我从Rico和Yossi的答案中综合了上述内容

btoa函数base64编码一个string

Answer 6

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

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

Answer 7

正如其他人所build议的，您可以直接在ajax调用中设置用户名和密码：

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

或者如果你不想以纯文本存储你的信用，请使用headers属性：

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

无论发送方式如何，服务器都必须非常有礼貌。 对于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 

说明：

对于某些跨域请求，浏览器会发送缺lessauth头文件的预检OPTIONS请求。 将您的auth指令包装在LimitExcept标签内，以正确响应预检。

然后发送几个头告诉浏览器允许它进行身份validation，并且访问控制允许来源授予跨站请求的权限。

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

Answer 8

JSONP不能用于基本身份validation，因此jQuery beforeSendcallback将不能用于JSONP / Script。

我设法通过添加用户和密码到请求（例如user：[e-mail]）来解决这个限制。 这几乎适用于任何浏览器， 但不支持通过URL进行身份validation的IE （调用将不会被执行）。

请参阅http://support.microsoft.com/kb/834489 。

Answer 9

根据SharkAlley的答案，它也与nginx的工作，我正在寻找解决scheme，以从服务器后面的nginx jQuery获取数据，并通过基本身份validation限制，这对我的作品：

 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; } } 

而JS是：

 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/

Answer 10

有三种方法可以实现，如下所示

方法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 }, });