带有 PKCE 实现的 Angular OpenID 代码流答案

【问题标题】：Angular OpenID Code flow with PKCE implementation带有 PKCE 实现的 Angular OpenID 代码流
【发布时间】：2020-01-13 08:03:17
【问题描述】：

我开始使用 Angular 8 作为我的客户端 Web 应用程序在我的简单 SPA 上学习和实施授权/身份验证。我为我的客户使用oidc-client-js 库，为我的 STS 使用identityserver4。我正在关注oidc-client-js on github 提供的示例。在上述示例中，它使用Implicit 流，但在阅读其他博客和论坛时，他们鼓励您将code 流与Pkce 一起使用，我现在正在尝试实施。下面是我的实现代码。

auth-service.ts

重定向 html

存根客户端

现在，我的问题是，当我单击客户端 Web 应用程序上的 Login 链接时，我收到以下错误。

但是，当我将其恢复为Implicit 流时，我可以成功登录到我的网络应用程序而没有任何问题。

有人可以指导我如何使用Pkce 实现code 流程吗？

非常感谢！

【问题讨论】：

标签： angular oauth-2.0 identityserver4 asp.net-core-2.2 oidc-client-js

【解决方案1】：

由于您使用的是身份验证代码流，因此您需要将其添加到回调页面上的 Oidc 客户端配置中。

response_mode: "query"

我通过查看 Brock 对此问题的评论发现了这一点：https://github.com/IdentityModel/oidc-client-js/issues/780

【讨论】：

【解决方案2】：

我有一些我认为会对你有所帮助的代码 + 文章，尽管它们不是 Angular 并且你需要翻译。您可以通过此页面上的步骤运行我的示例 SPA 的代码 - 也可以查看 iblog 的索引页面以了解初始 SPA 代码示例的内容：https://authguidance.com/2019/04/07/final-spa-overview。很高兴回答任何后续问题..

【讨论】：