Angular 带有 PKCE 实现的 OpenID 代码流
Angular OpenID Code flow with PKCE implementation
我开始使用 Angular 8 作为我的客户端 Web 应用程序在我的简单 SPA 上学习和实施授权/身份验证。我为我的客户使用 oidc-client-js 库，为我的 STS 使用 identityserver4。我正在关注 oidc-client-js on github 提供的样本。在上述示例中，它使用 Implicit 流程，但在阅读其他博客和论坛后，他们鼓励您使用 code 流程和 Pkce 代替，我现在正在尝试实现.下面是我的实现代码。
auth-service.ts
重定向html
存根客户端
现在，我的问题是，当我在我的客户端网络应用程序上单击 Login link 时，我收到以下错误。
但是，当我将其恢复为 Implicit 流程时，我可以毫无问题地成功登录到我的 Web 应用程序。
有人可以指导我如何使用 Pkce 实现 code 流程吗？
非常感谢！
我有一些我认为会对您有所帮助的代码 + 评论，尽管它们不是 Angular，您需要翻译。您可以通过此页面上的步骤 运行 我的示例 SPA 的代码 - 也许还可以查看 iblog 的索引页面以获取有关初始 SPA 代码示例的文章：https://authguidance.com/2019/04/07/final-spa-overview。很高兴回答任何后续问题..
由于您使用的是授权码流程，因此您需要将其添加到回调页面上的 Oidc 客户端配置中。
response_mode: "query"
我通过查看 Brock 对这个问题的评论弄明白了：https://github.com/IdentityModel/oidc-client-js/issues/780
我开始使用 Angular 8 作为我的客户端 Web 应用程序在我的简单 SPA 上学习和实施授权/身份验证。我为我的客户使用 oidc-client-js 库，为我的 STS 使用 identityserver4。我正在关注 oidc-client-js on github 提供的样本。在上述示例中，它使用 Implicit 流程，但在阅读其他博客和论坛后，他们鼓励您使用 code 流程和 Pkce 代替，我现在正在尝试实现.下面是我的实现代码。
auth-service.ts
重定向html
存根客户端
现在，我的问题是，当我在我的客户端网络应用程序上单击 Login link 时，我收到以下错误。
但是，当我将其恢复为 Implicit 流程时，我可以毫无问题地成功登录到我的 Web 应用程序。
有人可以指导我如何使用 Pkce 实现 code 流程吗？
非常感谢！
我有一些我认为会对您有所帮助的代码 + 评论，尽管它们不是 Angular，您需要翻译。您可以通过此页面上的步骤 运行 我的示例 SPA 的代码 - 也许还可以查看 iblog 的索引页面以获取有关初始 SPA 代码示例的文章：https://authguidance.com/2019/04/07/final-spa-overview。很高兴回答任何后续问题..
由于您使用的是授权码流程，因此您需要将其添加到回调页面上的 Oidc 客户端配置中。
response_mode: "query"
我通过查看 Brock 对这个问题的评论弄明白了：https://github.com/IdentityModel/oidc-client-js/issues/780