How to download a file using Angular with Bearer token

Question

we have secured our application using Azure AD + OpenID connect. The client application is developed in Angular and we are using 'angular-adal' library for integrating with azure ad. So whenever client makes api call to the server, it automatically includes bearer token in the request header. ( on the server we have 'passport-azure-ad' node library which validates the token)

We have download file functionality which is currently implemented as blow

Controller

    $scope.getURL = function (reportId) {
                return '/api/reports/download/' + reportId;
    };

HTML

     <form method="get" action="{{getURL(row.id)}}">
        <button class="btn btn-link" type="submit">Download Results</button>
     </form>

However it does not include the bearer token in the request when i click on download button, so server returns not authorized error. How do i included token in the request? whats the best way?

UPDATE1
As per the recommendation by Angular ADAL library, we can secure the route by setting 'requiredADLogin' property to true in $routeProvider. Like below

    $routeProvider.
         when("/todoList", {
              controller: "todoListController",
              templateUrl: "/App/Views/todoList.html",
              requireADLogin: true
      });

I am using $stateProvider. I have set the states for all other html page routes with 'requiredADLogin', and that works fine. How do i set $stateProvider for API route. My Download url is

'/api/reports/download/'+reportID

See: stackoverflow.com/questions/25009634/… Author suggests writing an interceptor to inject auth tokens into $http requests. — Kyle
How did you fix your problem ? I am encountering pretty much the same issue. Downlad a file with ADAL.js using ADFS authentication in my Web API. Hell the url is basically the same as well ! Thanks ! — Guigui

Karl Adler Karl Adler · Accepted Answer · 2016-04-26T20:13:33

I'm not familiar with Azure AD but I guess you need to set the Authentication token somehow like this in the header:

var req = {
 method: 'GET',
 url: '/api/reports/download/' + reportId,
 headers: {
   'Authorization': 'Bearer ' + token
 }
}

$http(req).then(function(){...}, function(){...});

How to download a file using Angular with Bearer token

1 Answers