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

qojgxg4l  于 2022-12-11  发布在  React
关注(0)|答案(1)|浏览(193)

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

对于React SPA,是否有任何库/SDK可用于为自定义OAuth2提供程序实施OAuth2授权代码授予(使用PKCE)

我们可以找到Google、Facebook、Auth 0等知名提供商的React OAuth库,但无法找到任何自定义OAuth提供商的通用React OAuth库。Auth 0 React脚本:谷歌:https://www.npmjs.com/package/react-google-login FaceBook:https://www.npmjs.com/package/react-facebook-login

我是否可以使用SPA的本机(应用程序)React库?。我是否可以使用此本机React式库https://github.com/FormidableLabs/react-native-app-auth?。它同时支持OAuth2和OIDC提供程序。我们的自定义OAuth提供程序没有“. wellknown/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

eqzww0vc

eqzww0vc1#

通常我推荐这个库-这可能是最受尊敬的选择:https://github.com/IdentityModel/oidc-client-js
如果没有发现终结点,则可以根据需要显式设置终结点。但是,这将在一定程度上取决于OAuth2提供程序的功能。
另请参阅以下示例:https://github.com/skoruba/react-oidc-client-js

2021年更新

最近有2项变更影响了我之前的答案,这意味着上述选项不再是最佳选择:

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

目前,首选的解决方案是在OAuth工作中引入一个API来解决这些问题。这有点难以理解,但目标是避免对SPA架构的其他部分产生负面影响:

相关问题