【问题标题】：React SPA with OIDC PKCE and identityserver.io使用 OIDC PKCE 和 identityserver.io 反应 SPA
【发布时间】：2019-11-17 22:37:51
【问题描述】：

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

概述

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

详情

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

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

【问题讨论】：

欢迎来到 SO！您能更清楚地了解哪些部分您不了解吗？即，您是否对制作 React SPA 感到满意，等等。
我简直不敢相信这是一个学校作业......
我做了一个简单的反应应用程序。因此，对于标准演示页面......对于其余部分，我对与 identiityserver.io 相关的 SPA、OIDC 和 PKCE 了解不多
那是哪所学校？听起来很酷。
比利时大学同学

【解决方案1】：

编辑 - 欢迎来到 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 的代码流，所以你最好这样做：@987654325 @ （更多关于为什么这里更好：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

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

【讨论】：