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

Posted 2023-03-27

【中文标题】如何使用 PKCE 为 React 单页应用程序实现 OAuth2 授权代码授予？

【英文标题】：How to implement the OAuth2 Authorization code grant with PKCE for a React single page application?

【发布时间】：2020-03-12 05:44:11

【问题描述】：

在我们的组织中，我们使用自己的自定义 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

【参考方案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

【讨论】：

非常感谢您的回复。如何明确设置我们自己的 OAuthProvider 端点？我们需要修改哪个文件来设置我们自己的 OAuth 提供者？ （是 identityserver-sample.js 吗？）。这个库是否支持带有 Auth 代码流的 PKCE？。

是的 - 该库支持身份验证代码 + pkce。默认情况下，您将 lib 指向基本权限 url - 如 in.my 示例：github.com/gary-archer/authguidance.websample1/blob/master/spa/…。但是，您也可以明确设置端点，如下所述：github.com/IdentityModel/oidc-client-js/wiki

如果您不熟悉这些东西，我的教程 + 代码示例应该会有所帮助 - 也许尝试更新它以针对您的 OAuth2 提供程序工作：authguidance.com/2017/09/24/basicspa-overview

当然——它使用非常广泛，如果你用谷歌搜索“vue oidc 客户端”之类的东西，那里有很多示例。使用经过认证的库意味着为您完成了严格的安全性 - 其中一些非常棘手 - 您可以避免错误 - 并且随着库的新版本发布，您可以免费升级。

我在答案中添加了一个更新，希望对@Hemanthvrm 有用