将基本身份验证与jQuery和ajax结合使用。

Question

将基本身份验证与jQuery和ajax结合使用。我试图通过浏览器创建一个基本的身份验证，但我无法真正做到这一点。如果这个脚本不在这里，浏览器身份验证将接管，但我想告诉浏览器，用户即将进行身份验证。地址应该是：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的beforeSend回调以添加带有身份验证信息的HTTP标头：

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

Answer 2

一年后情况会发生怎样的变化。除了头属性之外，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!'); 
  }});

Answer 3

使用发送前回调若要添加包含身份验证信息的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中引入的Header属性：

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

参考资料：jQueryAjaxAPI