React 应用程序中的 OAuth 客户端机密

Question

我一直在尝试了解 OAuth2 和 OpenID Connect，这篇文章是迄今为止最有帮助的：

https://developer.okta.com/blog/2019/10/21/illustrated-guide-to-oauth-and-oidc

但这让我想知道：

如果“客户端机密”应该是 客户端 和 授权服务器 以及 资源所有者 之间的机密 (duh) > 永远不应该知道它......这在 React 之类的东西中是如何工作的，其中 Client 直接在“客户端”中运行（冗余术语......）。

我猜您不应该公开分发您的“客户机密”，因此您显然不能将其与您的应用程序一起提供。

Answer 1

React SPA 是“公共客户端”，没有客户端密码，因为正如您所指出的，它不能。安全地存储在浏览器中。

对于 React，您将使用 Authorization Code Flow + PKCE 让用户登录。这涉及到使用在运行时生成的秘密 - 以及提供凭据的最终用户。

还可以（并在 2021 年推荐）通过后端 API 代理涉及令牌的 OAuth 请求。 这允许 API 附加客户端机密，实际上这会将 SPA 升级为“机密客户端”。

更多信息

这是我的一些示例代码，展示了在加密的 HTTP Only SameSite cookie 中存储刷新令牌的方法：

• SPA
• BFF

然后，您可以使用 SaneSite cookie 从浏览器调用 API，也可以将令牌下载到浏览器并使用令牌调用 API。

我认为 2021 年将有更多的库可以实现这种类型的安全性。另请参阅 this video。