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

Question

在我们的组织中，我们使用自己的自定义Oauth2提供程序(由于它不是OIDC提供程序，因此不具有“.well-known/OpenID-configuration”发现终结点)。我们有一个 React 单页应用程序(SPA)，它充当 Oauth2客户端，此SPA使用自定义OAuth2提供程序的OAuth2端点(授权，代做和吊销)来授权最终用户。

对于React SPA，是否有任何库/SDK可用于实现自定义OAuth2提供程序的OAuth2授权代码授予(带有PKCE)？

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

是否可以将 native (应用程序)React库用于SPA ？我可以使用此 native 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提供程序没有发现 channel 。

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

如果您遇到困难，请发回邮件-我可以为您提供帮助。