asp.net - 我可以在响应 header 中将不记名 token 传递给 Angular JS 应用程序吗？

Question

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

我需要将不记名 token 添加到应用程序中，以便它可以调用各种 Web API 服务。

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

用户流程...

1. 用户访问members.domain.com，但他/她未经身份验证。
2. 用户重定向至 OAuth 提供商。
3. 用户向提供商进行身份验证。
4. 然后用户将被重定向回members.domain.com。用户现已通过身份验证，并且拥有 cookie。
5. 初始应用程序页面通过 MVC 管道呈现。根据用户声明(例如 role="recruiter"等)检查声明并使用菜单选项(等)呈现 UI。

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

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

Answer 1

更新:我将根据您更新的问题彻底更改我的答案。

你想做的事情对我来说实际上听起来不错。听起来您将在客户端检查 JWT 作为您的不记名 token 。

为此，您需要执行以下两项操作之一:

1. 如果您想通过使用 cookie 使您的应用程序更加“安全”，您可以在后端创建一个路由(/me 或类似的内容)，当请求时，返回当前登录用户的所有个人数据(他们的声明，以及呈现 UI 所需的任何数据)。当 Angular 应用程序启动时，它可以向该页面发出请求，将通过已设置的 cookie 进行身份验证，并且仅将渲染所需的任何数据返回到前端。

2. 如果您想在纯 JS 中完成所有操作，但冒着更容易受到 XSS 攻击的风险，那么您可以将其存储在 HTML5 本地存储中，而不是将用户的 Bearer token 存储在 cookie 中。这样，您的 Angular 应用程序就可以直接在浏览器中通过 Javascript 访问 token 来渲染页面。这可能会提供更快的性能，但这意味着任何可以在您的域上运行恶意 JS 的人也将能够读取用户的 Bearer token (来自 LocalStorage)，并可能导致问题。

最后:如果您选择 LocalStorage 路线，并将 Bearer token 存储在 LocalStorage 中，那么您可以执行以下操作来验证向后端发出的 Angular API 请求:

1. 从 LocalStorage 中获取不记名 token 。
2. 向后端发出 API 请求，将 Bearer token 放入 HTTP Authorization header 中。
3. 在后端，解析 HTTP Authorization header ，并获取 token 。
4. 验证 token 以确保 JWT 有效/未过期/等。
5. 就是这样!

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