如何使用 express JS 在 React JS 中实现 Open ID 连接

Question

我已经使用 express-openid-connect 在后端 Express 应用程序中实现了 OIDC 使用作为 ADFS 的提供者并在成功验证后，Express 应用程序将信息保存到会话中并且后端 API 受到保护。 mechanism/library 我可以使用什么来保护我的使用 OIDC 的 React 应用程序并且还可以同时访问受保护的 API？ React 和 Node 在不同的域上，基本上它们是独立的并且部署在不同的服务器上。

Answer 1

网站模型

express 库适用于您使用 Node.js 网站为 React 应用的静态内容提供服务的场景。如果还没有安全 cookie，对 index.html 文件的请求将触发重定向。

用户登录后，将写入仅 HTTP 加密的 cookie，然后您可以通过网站中的其他路由调用 API，如 this section of the docs 中所述。 Web 后端解密 cookie，然后提供可从网站转发到 API 的访问令牌。

SPA 静态内容主机

如果您只想将 SPA 作为静态内容提供，类似于像 webpack 这样的开发 Web 服务器，那么快速解决方案不是正确的架构选择，您需要不同的选择。你不能把这些东西放在一起。

然而，当前的安全最佳实践意味着您只能在浏览器中使用安全 cookie，因此您需要解决这个问题，而且这绝非易事。短期内最简单的选择可能是通过 express 提供静态内容。

更多信息

我们在 Curity 有很多关于 SPA 架构的信息，从 SPA Best Practices and a React Code Example 开始，但它非常具有架构性，而且 SPA 安全是一个棘手的话题。因此，您需要根据成本和收益与利益相关者讨论需求。