通过 jQuery 和 Ajax 使用基本身份验证

IT技术 javascript jquery ajax authentication
2021-01-26 01:40:58

我正在尝试通过浏览器创建基本身份验证，但我无法真正到达那里。

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

地址应该是这样的：

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!');
    }
});
6个回答

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

beforeSend: function (xhr) {
    xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
},
@calebB 基本身份验证通常只是将用户名和密码公开以供任何人查看。这不仅仅是这里描述的方法的问题。如果使用基本身份验证或任何身份验证，则还应使用 SSL。
2021-03-14 01:40:58
beforeSend: function(xhr) { xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password)); }; 为我工作
2021-03-29 01:40:58
问题...如果我传递的凭据失败，则在 Chrome 中，用户会看到一个对话框以再次输入用户名/密码。如果凭据失败，如何防止出现第二个对话框？
2021-04-01 01:40:58
我正在使用您提供的示例，但它不起作用 ` $.ajax ({ url: " server.in.local/index.php ", beforeSend: function (xhr) { xhr.setRequestHeader(“Authorization”, “Basic ” + encodeBase64 (“username:password”) );}, succes: function(val) { //alert(val); alert("Thanks for your comment!"); } }); `
2021-04-02 01:40:58
这不会将用户名和密码公开给任何人看吗？即使它在 base64 中，他们也可以对其进行解码。与下面的答案相同。
2021-04-06 01:40:58

一年之内情况如何变化。除了代替 的 header 属性之外xhr.setRequestHeader，当前的 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!'); 
  }
});
@StefanoFratini - 你在这两个方面都是正确的。修复了用户名字段，很高兴了解抢占式身份验证与仅在挑战时响应。像在其他答案中一样明确设置标题将允许使用基本身份验证的这种“被动”变体。
2021-03-17 01:40:58
请参阅上面的评论，请更正此答案以指示 { "Authorization": "Basic " + btoa("user:pass") } 作为正确的标题
2021-03-20 01:40:58
它不应该是username不user？它也不完全相同：从在线文档和我的经验来看，它看起来不像某些 API 所要求的那样具有抢占性。换句话说，它Authorization仅在返回代码 401 时才发送标头。
2021-04-01 01:40:58
这是我一直在寻找的答案！对我来说，这个答案中的关键是如何使用“标头”来抢先发送身份验证。我的问题在这里得到了回答。stackoverflow.com/questions/28404452/...
2021-04-06 01:40:58
对我来说，上面的选项不起作用，这就像一个魅力..谢谢
2021-04-07 01:40:58

使用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

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

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

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

该BTOA功能的Base64编码字符串。

这是一个坏主意，因为您将随所有AJAX 请求一起发送登录信息，而不管 URL。此外，文档$.ajaxSetup()说“为未来的 Ajax 请求设置默认值。不推荐使用它。 ”
2021-03-24 01:40:58
其它你可能感兴趣的问题
上一篇将数据 URI 转换为文件，然后附加到 FormData 下一篇您是否建议在 JavaScript 中的每个语句后使用分号？