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

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

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

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

我通过在请求中添加用户和密码（例如用户：pw@domain.tld). 这适用于除InternetExplorer之外的几乎所有浏览器，InternetExplorer不支持通过URL进行身份验证（调用将不会执行）

请参阅。

使用添加带有身份验证信息的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"}

---

参考资料：

一年内情况如何变化。除了代替

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未经授权的

响应的情况下抢先发送身份验证，而不是

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

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

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

---

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

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

我从Rico和Yossi的回答中得出以上结论

---

该函数对字符串进行编码。

正如其他人所建议的，您可以在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

AuthUserFile/path/to/.htpasswd
AuthType Basic
AuthName“随便”
需要有效用户
标头始终设置访问控制允许标头授权
标头始终将访问控制允许凭据设置为true
setenif Origin“^（.*？$”Origin_=0
标头始终设置访问控制允许原点%{Origin\u is}e env=Origin\u is

说明： 对于某些跨域请求，浏览器会发送缺少身份验证标头的飞行前选项请求。将您的身份验证指令包装在limitException标记中，以正确响应飞行前

然后发送几个标题，告诉浏览器允许对其进行身份验证，访问控制允许源站对跨站点请求授予权限

---

在某些情况下，通配符作为访问控制允许来源的值不起作用：您需要返回被调用方的确切域。使用SetEnvIf捕捉该值。

根据Sharkaley answer，它也适用于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) {
    },
});

我认为有用的文章：

这个话题的答案

---

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

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

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

方法2:

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

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

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

方法3:

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

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

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

---

让我向您展示ApacheAlternative-IIS，它在开始真正的jQueryAjax身份验证之前需要它

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

<?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>

所以您不希望浏览器处理基本身份验证？为什么不使用基于表单的身份验证？@no.good.at.coding如果您需要在身份验证之后与第三方API集成（这就是我正在尝试做的），我使用的是u给出的示例，但它不起作用`$.ajax（{url:，beforeSend:function（xhr）{xhr.setRequestHeader（“授权”，“基本”+encodeBase64（“用户名：密码”）；}，成功：函数（val）{//alert（val）；alert（“感谢您的评论！”；}）`<代码>发送前：函数（xhr）{xhr.setRequestHeader（“授权”，“基本”+btoa（用户名+”：“+密码））；}适用于meProblem…如果我通过的凭据失败，则在Chrome中，用户将显示一个对话框，再次输入username/pwd。如果凭据失败，我如何防止出现第二个对话框？这不会让用户名和密码公开给任何人看吗？即使它在base64中，他们也可以解码它。与下面的答案相同。@caleb基本身份验证通常只保留用户名和密码，供任何人查看。这不仅仅是这里描述的方法的问题。如果使用的是基本身份验证或任何身份验证，那么也应该使用SSL。它不应该是

用户名

而不是

用户

？而且它也不完全一样：从在线docos和我的经验来看，它看起来不像某些API所要求的那样抢占先机。换句话说，只有当返回代码401时，它才会发送

授权
头。@StefanoFratini-您在这两方面都是正确的。修复了用户名字段，了解抢占式身份验证与仅在质询时响应是很好的。在其他答案中明确设置标题将允许使用基本身份的“被动”变体。对我来说，上面的选项不起作用，这就像一个符咒。。感谢您的上述评论，请更正此答案，将{“授权”：“基本”+btoa（“用户：通过”）}作为正确的标题