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

Question

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

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

我们可以为 Google、Facebook、Auth0 等知名提供商找到 React OAuth 库。但是我们找不到任何用于自定义 OAuth Provider 的通用 React OAuth 库。 Auth0 反应脚本：https://auth0.com/docs/libraries/auth0-spa-js Google: 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 更新令牌时

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

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

How to implement the OAuth2 Authorization code grant with PKCE for a React single page application?

oauth

oauth-2.0

single-page-application

reactjs

openid-connect