文件夹已通过身份验证时需要身份验证的文件 ajax

Files requiring authentication when folder is already authenticated ajax

简介:

我在 IIS 中有一个网站,它有一个名为 "container/files" 的文件夹,需要基本身份验证才能访问,文件夹文件将有大约 8 到 9 个文件,用户将通过我的网站下载这些文件。此外,我想在应用程序中存储用户名和密码,所以不想看到用于身份验证的 windows 对话框。

我做了什么:

我已经写了一个 ajax 请求,它允许我访问该文件夹并使用我的用户 ID 和密码列出所有文件,但是当我单击要下载的文件时,它再次要求我进行身份验证。

我想达到的目标:

我如何绕过此文件级身份验证,因为用户已经通过身份验证可以访问此文件夹,为什么他不能直接下载文件。?

我的代码:

$(function() {

    var id = "ss221",
        pass = "test12",
        url = "container/files/",
        $s = $(".shell ul");

    // Setup our method to retrieve the file list
    var getFiles = function() {
        $.ajax({
            url: url,
            type: 'GET',
            headers: {
                "Authorization": "Basic " + btoa(id + ":" + pass)
            },
            success: function(data) {
                alert('ok');
                var links = $(data).find("a");
                // for each item in links...
                links.each(function(l) {
                    // extract the href attr
                    var href = $(this).attr("href");
                    $s.append("<li><a target='_blank' href=\"" + href + "\">" +
                        $(this).text() + "</a></li>");
                });
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert("error");
            }
        });
    };
    // assign my click handler to #btnGet
    $("#btnGet").click(function() {

        $(".shell ul").empty();
        getFiles();
    });
});
.shell {
    width: 300px;
}

.shell ul li {
    list-style: none;
}

.shell a {
    color: #232323;
    display: block;
    width: 100%;
    height: 30px;
    margin: .5em 0;
    padding: 5px 10px;
    font-weight: bold;
    border: 1px solid #999;
    border-radius: 3px;
    text-decoration: none;
}
<!doctype html>
<html>
<meta charset="utf-8">

<head>
    <style type="text/css">

    </style>
</head>

<body>
    <div>
        List All files here...
    </div>
    <button id="btnGet">
        get</button>
    <div class="shell">
        <!-- This is the place we're going to build our list -->
        <ul>
        </ul>
    </div>
</body>
<!-- Get us some jQuery goodness! -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript">
</script>

</html>

您使用的是哪种身份验证? 如果 asp.net 表单身份验证,则您应该使用 FormsAuthentication.SetAuthCookie 来保存您发送的凭据

如果您的站点对每个人都可用并且只有 "files" 文件夹是安全的,那么 将另一个 web.config 放入 "files" 文件夹,并配置

请参阅本文了解基本身份验证 http://www.asp.net/web-api/overview/security/basic-authentication

我假设您使用 windows 凭据,基本上您不必在 ajax 请求中将这些凭据发送到服务器,服务器应在用户进入您的站点后立即存储它们。 所以确保你有 Windows 模式

 <system.web>
    <authentication mode="Windows" />
</system.web>

通过更新上面的代码并在所有文件上调用 ajax promise 解决了这个问题,这样每当文件夹通过身份验证并显示所有文件时,单击文件将使用相同的凭据对其进行身份验证并打开文件也是。

$(function() {

  var id = "ss221",
    pass = "test12",
    $s = $(".shell ul");

  // Setup our method to retrieve the file list
  var getAuthenticated = function(url) {
    return $.ajax({
      url: url,
      type: 'GET',
      headers: {
        "Authorization": "Basic " + btoa(id + ":" + pass)
      }
    });
  };
  $(".shell ul").empty();
  var promise = getAuthenticated("files/");
  promise.success(function(data) {

    var links = $(data).find("a");
    // for each item in links...
    links.each(function(l) {
      if (l > 0) {
        // extract the href attr
        var href = $(this).attr("href");
        $s.append('<li><a class="file-download" rel="nofollow" onclick="' + getAuthenticated(href) + '"  href="' + href + '" >' +
          $(this).text() + '</a></li>');
      }

    });

    $("#downloadBtn").on("click", function(e) {
      e.preventDefault();
      $('.file-download').multiDownload({
        delay: 500
      });
    });

  });



});
.shell {
  width: 300px;
}
.shell ul li {
  list-style: none;
}
.shell a {
  color: #232323;
  display: block;
  width: 100%;
  height: 30px;
  margin: .5em 0;
  padding: 5px 10px;
  font-weight: bold;
  border: 1px solid #999;
  border-radius: 3px;
  text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="shell">
  <!-- This is the place we're going to build our list -->
  <ul>
  </ul>
  <input type="button" id="downloadBtn" value="Download ALL">
</div>