使用 Angular SPA 的 PKCE 的 OKTA 授权代码流答案

【问题标题】：OKTA Authorization Code Flow with PKCE using Angular SPA使用 Angular SPA 的 PKCE 的 OKTA 授权代码流
【发布时间】：2021-04-12 03:19:27
【问题描述】：

我正在尝试使用 okta 作为 IAM 在 Angular 中实现身份验证。我想用 PKCE 实现授权代码流，因为隐式流会带来安全漏洞，暴露地址栏中的访问代码和 id 令牌。有人可以帮我看看实现示例吗？

【问题讨论】：

我建议从 developer.okta.com/code/angular 开始，它有多个示例和指南。这些库现在默认使用 PKCE 来避免您提到的隐式流程的问题。您在实施的某个特定部分是否遇到了困难？
在 OKTA 组织中创建客户端应用程序以使 PKCE 工作时，我是否选择允许的授权类型为授权代码或隐式或两者兼而有之？允许的授权类型代表用户的客户端授权代码 CHECK 隐式 CHECK 允许 ID 令牌具有隐式授权类型 CHECK 允许访问令牌具有隐式授权类型 CHECK 这是一个有效的设置吗？

【解决方案1】：

您有几个选项可以快速查看带有身份验证代码流 + PKCE 的 Angular 示例：

【讨论】：

我指的是这个例子。 github.com/okta/samples-js-angular/tree/master/custom-login 在这里，他们使用了好的登录小部件和 okta angular sdk，但流程不涉及生成质询代码以通过 POST 请求将其与访问和 id 令牌的授权代码一起交换。
另外，我正在阅读 Aarons Parecki 的博客文章 developer.okta.com/blog/2019/05/01/… 在这里，他展示了一种使用纯 JavaScript 使用 PKCE 实现身份验证代码流的方法，并遵循我之前提到的流程（生成代码挑战) 所有这一切都发生在当前版本的 okta angular sdk 的后台吗？使用 okta 登录小部件时会不会一样？
是的，Okta Angular SDK 和登录小部件为您处理代码挑战和所有 PKCE 内容。两者都依赖于 Auth JS，默认情况下启用 PKCE。 github.com/okta/okta-auth-js
谢谢马特！这让我的生活变得如此轻松。