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

【问题标题】：Angular app using OAuth2 Code Flow with PKCE ( ADFS ) code validation error使用带有 PKCE ( ADFS ) 代码验证错误的 OAuth2 代码流的 Angular 应用程序
【发布时间】：2019-11-11 12:56:18
【问题描述】：

我正在尝试在具有 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 并查看它接收到的字符串以及与之比较的字符串吗？

【问题讨论】：

标签： angular oauth-2.0 adfs adfs4.0

【解决方案1】：

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

没有办法“逐步执行”ADFS。

C# 代码示例here 有效，可以指导您。

【讨论】：

【解决方案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% 正确的，它会给你一些比较的东西

【讨论】：

【解决方案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

【讨论】：