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

Question

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

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

我们可以为 Google、Facebook、Auth0 等知名提供商找到 React OAuth 库。但是我们找不到任何用于自定义 OAuth Provider 的通用 React OAuth 库。 Auth0 React 脚本：https://auth0.com/docs/libraries/auth0-spa-js 谷歌：https://www.npmjs.com/package/react-google-login 脸书：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 React Code Sample
• Articles