Question

我正在尝试通过浏览器创建基本身份验证，但我无法真正实现这一目标。

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

地址应该是：

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

Answer 1

使用jQuery的beforeSend回调添加带有身份验证信息的HTTP标头：

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

Answer 2

一年中情况如何变化。除了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响应的情况下抢先发送身份验证，而不是setRequestHeader（在-1.7之前）使用'headers'：

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

Answer 3

使用beforeSend callback添加带有身份验证信息的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对字符串进行编码。

Answer 6

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

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

OR 如果您不想以纯文本格式存储凭据，请使用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

说明：

对于某些跨域请求，浏览器会发送缺少您的身份验证标头的预检 OPTIONS 请求。将您的身份验证指令包含在 LimitExcept 标记内，以正确响应预检。

然后发送一些标题告诉浏览器它可以进行身份验证， Access-Control-Allow-Origin 可以为跨站点请求授予权限。

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

Answer 7

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

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

Answer 8

JSONP不能用于基本身份验证，因此jQuery beforeSend回调将无法与JSONP / Script一起使用。

我设法通过在请求中添加用户和密码来解决此限制（例如用户：pw@domain.tld）。这适用于除Internet Explorer 之外的任何浏览器，其中不支持通过URL进行身份验证（不会执行调用）。

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

Answer 9

根据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) {
    },
});

我发现有用的文章：

本主题的答案
http://enable-cors.org/server_nginx.html
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 
  },
});

Answer 11

让我向您展示和 Apache 的替代方案 - 在开始真正的 JQuery Ajax 身份验证之前需要它的 IIS

例如，如果我们有 /secure/* 路径。我们需要创建 web.config 并禁止访问。只有在发送应用之前必须能够访问 /secure 路径中的页面

<?xml version="1.0"?>
<configuration>
  <system.web>
    <!-- Anonymous users are denied access to this folder (and its subfolders) -->
    <authorization>
      <deny users="?" />
    </authorization>
  </system.web>
</configuration>



<security>
   <authentication>
      <anonymousAuthentication enabled="false" />
      <basicAuthentication enabled="true" />
   </authentication>
</security>

使用jQuery和Ajax的基本身份验证

11 个答案:

说明：