带有PKCE实现的Angular OpenID代码流

Question

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

auth-service.ts

重定向html

存根客户端

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

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

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

非常感谢！

Answer 1

由于使用的是Auth Code流，因此需要将其添加到回调页面上的Oidc客户端配置中。

response_mode: "query"

我通过查看布罗克（Brock）关于此问题的评论得出了答案：https://github.com/IdentityModel/oidc-client-js/issues/780

Answer 2

我有一些代码+编写的文章，虽然它们不是Angular，但我认为它们会对您有所帮助，您需要翻译。您可以通过此页面上的步骤运行我的样本SPA的代码-也许还可以查看iblog的“索引”页面，以获取有关初始SPA代码样本https://authguidance.com/2019/04/07/final-spa-overview的内容。很高兴回答任何后续问题..