如何使用 .net core api 保护 react.js spa

Question

我正在尝试使用 adal 登录保护 react.js spa 应用程序并使用 .net core wepApi 进行身份验证。

我能够从 react SPA 调用的 azure 中获取 JWT（使用 react-adal 模块）并检索基本用户信息。

欢乐开始 由于大多数 MSFT 示例都基于其 mvc 方法，因此它们在 webconfig 文件中具有用于签名令牌的密码，前端应用程序无法访问该密码。

我如何使用密码签署 JWT 令牌而不将其推送到 SPA 应用程序，因为它可以在 Web 控制台中读取？

我的一个想法是在 SPA 中启动登录，然后使用 webapi 端点作为重定向链接（并在状态字段中提供连接 ID），然后通过 ajax 我可以在 SPA 上进行重定向，但仍然存在JWT 上没有签名。

Answer 1

我目前的部分解决方案是：

1. 有react-adal 用于验证用户是否已登录
2. 当没有令牌时，react-adal 进行身份验证，但是当我抓取令牌并将其存储在数据库中时，重定向是在一个特殊页面上。这里的诀窍是：需要将hash 更改为query-string 以获取令牌服务器端（因为在# 之后的所有内容都不会转发到网络服务器），所以一个简单的javascrip 将# 替换为?并重定向到另一个端点。
3. 然后重定向到主应用程序

由于 URL 仅用于重定向（在 adal login 之后） - 这是典型的 man-in-the-middle 场景，但可以生成自己的令牌。