在 Angular 内从 Adal 访问 Bearer Token 以进行经过身份验证的下载

Question

我在 Angular.JS SPA 中使用 Adal.JS 时遇到问题：在用户通过身份验证后（正常的 AAD 重定向流程），Bearer Token 将按原样添加到 Authorization-Header应该是。

现在是棘手的部分：在某些情况下，我需要从服务器下载一个只有授权用户才能访问的文件。不幸的是，我还没有针对这种情况的合适解决方案。当我使用 $window.open('domain.com/api/getSecretFile?id=1'); 在新的 window 中触发文件下载（以保持 angular 实例处于活动状态）时，浏览器不会将 Bearer-Token 添加到 Authorization-Header（因为它在 angular) 之外 --> 服务器将拒绝未经授权的调用 - 这是 100% 合乎逻辑的。那么我该如何解决这个问题呢？

我的想法：将 window open 调用更改为 $window.open('domain.com/api/getSecretFile?id=1&token=mybearertoken'); 之类的内容，以便 API 可以以某种方式检查此附加参数。因此，我需要获取 Angular 内某处可用的 Bearer Token。但是哪里？我如何访问 Bearer Token？有什么想法吗？

在我的例子中，服务器端部分是由 ASP.Net 实现的。对于这部分，有一个可用的解决方案：.NET Web API 2 OWIN Bearer Token Authentication direct call

但首先我需要访问令牌。或者也许有不同的正确方法来解决问题？提前致谢！

Answer 1

我找到了在 Angular 中访问 Bearer 令牌的解决方案：

app.controller('someController', ['adalAuthenticationService', function (adalAuthenticationService) {

  var resource = adalAuthenticationService.getResourceForEndpoint('domain.com/');
  var tokenStored = adalAuthenticationService.getCachedToken(resource);
  alert(tokenStored);
}]);

domain.com 将是您 Adal.JS 初始化中 Endpoints 下定义的资源：adalAuthenticationServiceProvider.init(...).

Answer 2

您可以定义端点列表并使用拦截器调用。

在 Angular 内从 Adal 访问 Bearer Token 以进行经过身份验证的下载

Access Bearer Token from Adal within Angular for authenticated Download

authorization

angularjs

adal

bearer-token

adal.js