0

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

概述

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

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

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

细节

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

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

  • 使用（欢迎来到 IdentityServer4 演示站点）作为您的授权服务器。此授权服务器支持带有 PKCE 的授权码流

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

  • 在 Netlify 上托管 react 应用程序

作为这个领域的初学者，我完全不明白这个作业。有人可以帮帮我吗？

4

1 回答 1

17

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

为了表现得好，这里有一些指示和解决您的任务的方法。但是请，请，请 - 不要只是复制它，了解它是如何工作的，仔细考虑，将它应用到你自己的 react 应用程序中。

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

所以相反，看看 aut 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/the-state-of-the-implicit-flow-in-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

那应该让你开始。就像我说的，请不要让我后悔，花时间去学习这些东西。它可能会在以后导致有趣的工作:-)

于 2019-07-09T08:10:14.203 回答