Files requiring authentication when folder is already authenticated ajax

Question

Files requiring authentication when folder is already authenticated ajax

339 Views Asked by Suleman Mirza At 19 October 2024 at 19:33

Intro:

I have a website in IIS and it have a folder called "container/files" which needs basic authentication to access, the folder files will have some 8 to 9 files which a user will download through my website. Also I want to store username and password inside the application, so don't want to see that windows dialog for authentication.

What I have Done:

I have written a ajax request which gives me access to the folder and lists all the files using my userID and password, but when I click on a file to download, it asks me for authentication again.

What I want to Achieve:

How do I bypass this file level authentication as user is already authenticated to access this folder, why can't he just download the files.?

My code :

$(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>

Original Q&A

There are 2 best solutions below

Elisheva Wasserman On 16 June 2015 at 14:49

Which Authentication are you using? if asp.net Forms Authentication, then you should use FormsAuthentication.SetAuthCookie, to save the credentials you've sent

if you site is available to every one and only "files" folder is secure, then put another web.config in "files" folder, and configure

See this article for basic authentication http://www.asp.net/web-api/overview/security/basic-authentication

I assume you work with windows credentials, basically you don't have to send these credentials to the server in ajax request, server should store them as soon as user enters you site. So make sure you have Windows mode

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

**Suleman Mirza** · Accepted Answer

Solved this issue by updating above code and calling ajax promise on all files also so that whenever folder gets authenticated and displays all files, clicking on files will authenticate them with same creds and it will open the files too.

$(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>

Files requiring authentication when folder is already authenticated ajax

There are 2 best solutions below

Related Questions in JQUERY

Related Questions in AJAX

Related Questions in IIS

Related Questions in FILESYSTEMS

Related Questions in BASIC-AUTHENTICATION

Trending Questions

Popular # Hahtags

Popular Questions