React 应用程序中的 OAuth 客户端机密
OAuth client secrets in React apps
我一直在尝试了解 OAuth2 和 OpenID Connect，这篇文章是迄今为止最有帮助的：
https://developer.okta.com/blog/2019/10/21/illustrated-guide-to-oauth-and-oidc
但这让我想知道：
如果“客户端机密”应该是 Client 和 Authorization Server 之间的机密（duh），并且资源所有者 永远不应该知道这件事......这在 React 之类的东西中是如何工作的，其中 Client 是 运行直接在“客户端”（冗余术语...）。
我猜你不应该公开分发你的“客户机密”，所以你显然不能将它与你的应用程序一起交付。
React SPA 是 'public client' 并且没有客户端密码，因为正如您所指出的，它不能。安全地存储在浏览器中。
对于 React，您将使用 Authorization Code Flow + PKCE 来让用户登录。这涉及使用在运行时生成的秘密 - 以及提供凭据的最终用户。
也可以（并在 2021 年推荐）通过前端后端代理涉及令牌的 OAuth 请求 API。
这允许 API 附加客户端密钥，实际上这会将 SPA 升级到 'confidential client'。
更多信息
这是我的一些示例代码，展示了在加密的 HTTP Only SameSite cookie 中存储刷新令牌的方法：
然后您可以使用 SaneSite cookie 从浏览器调用 APIs，或者您可以将令牌下载到浏览器并使用令牌调用 APIs。
我认为 2021 年将有更多库实现此类安全性。另请参阅 this video。
我一直在尝试了解 OAuth2 和 OpenID Connect，这篇文章是迄今为止最有帮助的：
https://developer.okta.com/blog/2019/10/21/illustrated-guide-to-oauth-and-oidc
但这让我想知道：
如果“客户端机密”应该是 Client 和 Authorization Server 之间的机密（duh），并且资源所有者 永远不应该知道这件事......这在 React 之类的东西中是如何工作的，其中 Client 是 运行直接在“客户端”（冗余术语...）。
我猜你不应该公开分发你的“客户机密”，所以你显然不能将它与你的应用程序一起交付。
React SPA 是 'public client' 并且没有客户端密码，因为正如您所指出的，它不能。安全地存储在浏览器中。
对于 React，您将使用 Authorization Code Flow + PKCE 来让用户登录。这涉及使用在运行时生成的秘密 - 以及提供凭据的最终用户。
也可以（并在 2021 年推荐）通过前端后端代理涉及令牌的 OAuth 请求 API。 这允许 API 附加客户端密钥，实际上这会将 SPA 升级到 'confidential client'。
更多信息
这是我的一些示例代码，展示了在加密的 HTTP Only SameSite cookie 中存储刷新令牌的方法：
然后您可以使用 SaneSite cookie 从浏览器调用 APIs，或者您可以将令牌下载到浏览器并使用令牌调用 APIs。
我认为 2021 年将有更多库实现此类安全性。另请参阅 this video。