使用OIDC PKCE和identityserver.io反应SPA

Question

作为学校作业，我必须做以下事情：

总览

创建一个执行以下操作的React SPA：

1. 使用带有PKCE的授权代码流对（欢迎使用IdentityServer4演示站点）进行身份验证

2. 使用正确的令牌调用（测试）

详情

在React中创建一个SPA 。这次必须使用React。

• 添加一个向SPA添加OIDC协议支持的库。确保支持带有PKCE的授权代码流

• 使用（欢迎使用IdentityServer4演示站点）作为授权服务器。该授权服务器通过PKCE支持授权代码流

• 使用正确的令牌调用（测试）并将结果显示给用户

• 在Netlify上托管react应用

作为该领域的初学者，我完全不理解作业。有人可以帮我吗？

Answer 1

编辑-欢迎来到！在这里变得友善，并帮助其他人。

为了变得友善，这里有一些建议和解决方案。但是，拜托，拜托，拜托-不要仅仅复制它，学习它的工作原理，仔细考虑，然后将其应用到您自己的react应用中。

首先，虽然Identityserver在https://identityserver4.readthedocs.io/上有很好的文档-它是非常面向代码的，可能很难入手。

因此，让我们看看竞争产品Auth0。他们也有不错的文档，并且还解释了一些协议。 https://auth0.com/docs/protocols/oauth2 https://auth0.com/docs/flows/concepts/auth-code-pkce 这些特别有趣。

现在，它们还具有您需要实现的方案。您可能会认为是这样的：https : //auth0.com/docs/architecture-scenarios/spa-api，但是它们在新指南中有些落后（但幸运的是，您的分配不是），SPA也应该使用代码流与PKCE，所以你这个更好：https://auth0.com/docs/architecture-scenarios/mobile-api （更多关于为什么这是更好地在这里：https://brockallen.com/2019/01/ 03 / oauth2 /中的隐式流状态）

阅读所有内容后，您需要找到一个可以为您执行oidc / oauth的优秀JS库。除非要攻读博士学位，否则在学校写自己的书毫无用处。

Google javascript oidc-> https://github.com/IdentityModel/oidc-client-js出现。嘿! 再次是来自身份服务器的家伙。他们是伟大的人，不是吗？他们肯定得到了你的支持。

现在，谷歌做出了oidc-client-js的反应-很好，有人击败了您：https：//github.com/skoruba/react-oidc-client-js

那应该让您开始。就像我说的，请不要让我后悔，要花点时间和精力来学习这些东西。稍后可能会导致有趣的工作：-)