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 回答