我可以在响应标头中将不记名令牌传递给 Angular JS 应用程序吗？答案

【问题标题】：Can I pass a bearer token to an Angular JS app in the response headers?我可以在响应标头中将不记名令牌传递给 Angular JS 应用程序吗？
【发布时间】：2017-01-05 19:44:36
【问题描述】：

由于各种原因，我需要使用服务器技术，在本例中是 ASP.Net 来呈现我的 Angular JS 应用程序。因此，当用户请求索引页面时，请求将通过 ASP.Net 管道，该管道将为应用程序提供脚本、视图等。

我需要在应用程序中获取一个不记名令牌，以便它可以调用各种 Web API 服务。

从安全角度来看，在响应标头中将不记名令牌传递给用户浏览器是否可以接受？然后，当 Angular JS 应用程序启动时，它会从标头中读取值并将其放入本地存储中以供后续 API 请求使用。

用户流程...

用户转到未通过身份验证的 members.domain.com。
用户重定向到 OAuth 提供者。
用户通过提供者进行身份验证。
然后用户被重定向回 members.domain.com。用户现在已通过身份验证，并且他们有一个 cookie。
初始应用程序页面通过 MVC 管道呈现。根据用户声明（例如 role="recruiter" 等），检查声明并使用菜单选项（等）呈现 UI。

这会在用户浏览器上呈现初始应用程序，并根据用户声明创建菜单选项。

现在缺少的部分是在浏览器中获取可用于调用各种 API 的不记名令牌。

【问题讨论】：

标签： asp.net angularjs security authentication bearer-token

【解决方案1】：

更新：我将根据您更新的问题完全改变我的答案。

您尝试做的实际上对我来说听起来不错。听起来您将在客户端检查 JWT 作为您的 Bearer 令牌。

为此，您需要做以下两件事之一：

1234563在用户的个人数据中（他们的声明，以及呈现您的 UI 所需的任何内容）。当 Angular 应用程序启动时，它可以向该页面发出请求，将通过已设置的 cookie 进行身份验证，并将返回所需的任何数据到前端进行渲染。 1234563这样，您的 Angular 应用程序可以直接在浏览器中通过 Javascript 访问令牌以呈现页面。这可能会提供更快的性能，但这意味着任何可以在您的域上运行恶意 JS 的人也将能够读取用户的 Bearer 令牌（来自 LocalStorage），并可能导致问题。

最后：如果您使用 LocalStorage 路线，并将 Bearer 令牌存储在 LocalStorage 中，那么您可以对后端的 Angular API 请求进行身份验证：

从 LocalStorage 中获取不记名令牌。
向后端发出 API 请求，将 Bearer 令牌放入 HTTP Authorization 标头。
在您的后端，解析出 HTTP Authorization 标头，并获取令牌。
验证令牌以确保 JWT 有效/未过期等。
就是这样！

用于验证 API 请求的标准 HTTP 标头是 HTTP 授权，因此如果您想要执行您所描述的流程（使用 LocalStorage），只需将您的令牌放入 HTTP 授权中即可。大多数 Web 框架会自动处理此标头的解析，并会在那里查找凭据，例如您将要发送的令牌。

【讨论】：

谢谢。我是否理解通过将 cookie 设置为 HTTPS，Angular 应用程序可以访问它？我正在使用的身份框架（据我目前的理解）期望在标头中传递不记名令牌以获得对 API 服务的访问。
啊，如果您已经在使用特定的身份验证框架，该框架要求您在 HTTP 授权标头中拥有令牌，那么您别无选择，只能按照您的提议去做.许多身份验证框架让您选择如何进行身份验证：通过 HTTP 授权标头或通过 cookie，其中，对于安全站点 IMO，cookie 是一个更好的选择。通过使用仅 https 的 cookie，这意味着您的 cookie 只能通过加密的 SSL 连接设置——您的 Angular 应用程序仍会像往常一样自动发送 cookie。
调用服务的流程是使用基于请求的不记名令牌。我的问题更多是关于如何首先将该令牌放入 Angular 应用程序中。我可以为此使用隐式流程，但我有需要我的应用程序的要求。要通过 ASP.Net 呈现，所以我需要一种服务器端技术将令牌放入浏览器的方法。因此，请考虑发送应用程序的初始响应中的标头。到浏览器。
啊，在这种情况下，您有两个选择。 A) 使用 OAuth2 密码授予流程。这将使您的 Angular 应用程序将用户名/密码发送到您的后端，并取回一个访问令牌，然后您可以将其存储在本地存储中。 B) 让您的 Angular 应用程序将用户名/密码发布到后端的端点，该端点对用户进行身份验证，生成令牌，然后创建 cookie。任何一种方法都可以正常工作。但后者在传统上更“安全”，因为浏览器中运行的代码无法访问 cookie，因此不太容易受到 JS 攻击。
我已将问题更新为更具体一点，并更详细地解释我的用户流程。

【解决方案2】：

您可以使用此代码...

var loginApp = angular.module("LoginApp", ["LocalStorageModule"]);

loginApp.service("loginService", function ($http, $q) {
this.loginService = function (url, method, data, headers) {
    var deferred = $q.defer();
    $http({
        method: method,
        headers: headers,
        data: data,
        url: url
    })
        .success(function (response) {
            deferred.resolve(response);
        })
        .error(function (error) {
            deferred.reject(error);
        });
    return deferred.promise;
};});

loginApp.controller("LoginController", [
"$http", "loginService", "localStorageService",
function (http, service, localStorageService) {
    var self = this;
    localStorageService.remove("authorizationData");
    self.login = function () {

        var url = "http://localhost:port/token";
        var data = "grant_type=password&username=" + self.username + "&password=" + self.password;

        service.loginService(url, "POST", data, { 'Content-Type': "application/x-www-form-urlencoded" })
            .then(function (response) {

                var obj = {
                    token: response.access_token,
                    userName: response.userName
                };
                localStorageService.set("authorizationData", obj);
            }, function (error) {
                alert("username or password incorrect");
            });
    };
}]);

【讨论】：