Angular 使用带有 PKCE ( ADFS ) 代码验证错误的 OAuth2 代码流的应用

Question

我正在尝试在具有 ADFS 2019 的 Angular 客户端中实施 code flow with pkce。我目前收到错误 Unable to validate code_verifier.

我正在使用以下算法生成 code_verifier 和 code_challenge：

code_verifier = base64UrlEncode(randomString(length)) 其中 length=45
code_challenge = base64UrlEncode(sha256(code_verifier))

我已经检查了我发送的 code_verifier 以及我从 ADFS 收到的 code，它与构建登录名 url 时生成的匹配。

我的实现有问题吗？

编辑：我能以某种方式调试 ADFS 并查看它接收到的字符串和它与之比较的字符串吗？

Answer 1

是 - 您可以查看 ADFS 中的事件日志，看看是否记录了任何错误。

无法"step-through" ADFS。

C# 代码示例 here 有效并且可能会指导您。

Answer 2

只是一个想法 - 但出色的 oidc 客户端库也许能够为您处理这个问题。

一个选项可能是将我基于标准的 SPA 示例（以易于调试的简单程序方式编码）重新指向您的 ADFS 基础 url： https://authguidance.com/2017/09/24/basicspa-overview/

这应该只涉及更新配置文件中的 OAuth 设置： https://github.com/gary-archer/authguidance.websample1/blob/master/spa/spa.config.json

不确定它是否有帮助 - 但我知道我的 SPA 中的 PKCE 处理是 100% 正确的，它会给你一些可以比较的东西

Answer 3

我已通过进行以下更改使其正常工作：


 - Skipped encoding the code_verifier
 - Changed the hashing steps for the code_challenge. 
I was turning the ArrayBuffer into an Array, the Array into a string and base64UrlEncode the string.
What I changed here was that I directly encoded the ArrayBuffer and skipped the conversions.

我使用一个库将所有这些功能引入 JS https://www.npmjs.com/package/@waiting/base64/v/4.2.4

Angular 使用带有 PKCE ( ADFS ) 代码验证错误的 OAuth2 代码流的应用

Angular app using OAuth2 Code Flow with PKCE ( ADFS ) code validation error

adfs

oauth-2.0

angular

adfs4.0