如何使用 PKCE 为 React 单页应用程序实现 OAuth2 授权代码授权？

Question

在我们的组织中，我们使用我们自己的自定义 Oauth2 提供者（它没有“.well-known/OpenID-configuration”发现端点，因为它不是 OIDC 提供者）。我们有一个充当Oauth2 客户端的React 单页应用程序(SPA) ，该 SPA 使用自定义 OAuth2 提供程序的 OAuth2 端点（授权、令牌和撤销）来授权最终用户。

对于 React SPA，是否有任何库/SDK 可用于为自定义 OAuth2 提供程序实现 OAuth2 授权代码授权（使用 PKCE）？

我们可以为 Google、Facebook、Auth0 等知名提供商找到 React OAuth 库。但是我们找不到用于自定义 OAuth 提供程序的任何通用 React OAuth 库。Auth0阵营脚本：https://auth0.com/docs/libraries/auth0-spa-js 谷歌：https://www.npmjs.com/package/react-google-login Facebook的：HTTPS：//www.npmjs。 com/package/react-facebook-login

我可以为 SPA 使用本机（应用程序）React 库吗？。我可以使用这个原生反应库https://github.com/FormidableLabs/react-native-app-auth吗？。它支持 OAuth2 和 OIDC 提供商。我们的自定义 OAuth 提供程序没有“.well-known/OpenID-configuration”发现端点。所以我们将在配置中指定我们的 OAuth 端点

const config = {
  clientId: '<your-client-id>',
  clientSecret: '<your-client-secret>',
  redirectUrl: ‘redirectURL', 
  scopes: ['email:accounts:read'], /
  serviceConfiguration: {
    authorizationEndpoint: 'https://OAuthProvider/oauth/authorize',
    tokenEndpoint: 'https://OAuthProvider/oauth/token',
    revocationEndpoint: 'https://OAuthProvider/oauth/revoke',
  },
}

我尝试使用以下库，但它仅适用于 OIDC 提供商，因为它使用 OIDC 发现“.well-known/OpenID-configuration”来查找 OIDC 端点。但是我们的自定义 OAuth 提供程序没有发现通道。

https://github.com/googlesamples/appauth-js-electron-sample

最初，我们考虑使用隐式流，但不推荐使用。https://developer.okta.com/blog/2019/05/01/is-the-oauth-implicit-flow-dead

Answer 1

通常我推荐这个库 - 这可能是最受尊敬的选项：https : //github.com/IdentityModel/oidc-client-js

如果您没有发现端点，则可以根据需要显式设置端点。但是，这在一定程度上取决于您的 OAuth2 提供程序功能。

另请参阅此示例：https : //github.com/skoruba/react-oidc-client-js

2021 更新

最近有 2 个变化影响了我之前的答案，这意味着上述选项不再是最佳选择：

• 最近的浏览器 cookie (SameSite=strict) 被认为更强
• 浏览器会在 SPA 流程的某些部分丢弃第 3 方 cookie，例如在通过隐藏的 iframe 更新令牌时

目前，首选的解决方案是在 OAuth 工作中使用 API，以解决这些问题。理解起来有点棘手，但这些资源展示了如何在不影响 SPA 架构的其他部分的情况下：

• Curity 反应代码示例
• 文章