时间戳

首页 > 解决方案 > 使用 OIDC PKCE 和 identityserver.io 反应 SPA

reactjs - 使用 OIDC PKCE 和 identityserver.io 反应 SPA

问题描述

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

概述

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

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

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

细节

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

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

标签： reactjssingle-page-applicationidentityserver4openid-connectpkce

解决方案

编辑 - 欢迎来到 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

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

推荐阅读