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

还有一个脚本:

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

当前回答

根据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/

2015-02-10 18:23:34

其他回答

一年中事情发生了怎样的变化。除了头属性的位置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 (pre -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!'); 
  }
});

2012-08-14 21:03:10

JSONP不能与基本身份验证一起工作，因此jQuery beforeSend回调不能与JSONP/Script一起工作。

我设法通过向请求添加用户和密码(例如用户:pw@domain.tld)来解决这个限制。这适用于几乎所有浏览器，除了不支持通过url进行身份验证的Internet Explorer(调用将不会被执行)。

见http://support.microsoft.com/kb/834489。

2012-02-10 10:46:59

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

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

2017-05-18 10:18:19

根据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/

2015-02-10 18:23:34

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

2012-03-08 04:58:44

使用jQuery和Ajax进行基本身份验证

推荐文章

最新文章

标签