使用 angular-oauth2-oidc 的 Angular 与 OAuth 2 授权代码授权流程答案

【问题标题】：Angular with OAuth 2 Authorization Code grant flow using angular-oauth2-oidc使用 angular-oauth2-oidc 的 Angular 与 OAuth 2 授权代码授权流程
【发布时间】：2020-10-15 06:29:23
【问题描述】：

在即将推出的 OAuth 2.1 中，即使对于像 Angular 这样的公共客户端应用程序，也建议使用授权码授予流程。

但 Angular 应用程序通常是 SPA，这意味着没有内置的服务器端来存储 client_secret。

库“angular-oauth2-oidc”声称支持代码授权流程，但我找不到任何可用的开源解决方案。

尝试过 Vouch Proxy，但它设置了包含 access_token 和 id_token 的 cookie，但 angualr-oauth2-oidc 无法识别该 cookie。 angualr-oauth2-oidc 中的代码流被实现为对 https://{your-authentication-server}/token.oauth2 的 xhr 请求，因此这两个不匹配。

非常感谢任何想法、更正或解决方法。

【问题讨论】：

标签： angular oauth-2.0 angular-oauth2-oidc

【解决方案1】：

您的问题不够清楚，我会尽力回答——如果您有任何不同之处，请纠正我。

正如项目的main page 中提到的那样

自版本 8 起，该库支持代码流和 PKCE，以符合 OAuth 2.0 安全最佳当前实践文档的当前草案。这也是即将推出的 OAuth 2.1 的基础。

PKCE 是 client_secret 的一种替代品，最初是为移动应用程序设计的，但最终与 SPA 共享。它依赖redirect_uri 确保您的浏览器运行预注册的应用程序，然后使用code verifier 将以下令牌请求绑定到原始挑战。

对于那些来自 dotnet 世界的人来说，最有机的开源 STS 是 Identity Server。对于那些来自 Java 世界的人来说，更直观的可能是Keycloak。 official documentation 说明了与第一个的通信，但您可以在下面的同一页面中找到多个教程的链接。

【讨论】：

PKCE 绝不是 client_secret 的替代品。 OAuth2 定义了两种类型的客户端：机密（可以安全地存储 client_secret）和公共（不能安全地存储 client_secret）。基本上，您可以在代码流中使用 angular-oauth2-oidc，而无需指定 client_secret。您只需确保已在身份验证提供程序中将您的应用程序注册为公共客户端。 PKCE 只是用于防止中间人攻击的附加安全层。
我知道理论 - 设置和自定义身份验证是我的日常工作。有了答案，我只想用最简单的语言解释 OP 最简单的方法。可以关闭 PKCE，但不建议这样做，默认情况下客户端和服务器端都打开
我相信你知道你在说什么。只是说PKCE绝对不是client_secret的一种替代品。这是两个完全不同的东西......
它们的工作方式完全不同。它们都为达到相同的目标而工作：确保用户在 idp 的网页上执行的登录操作绑定到特定应用程序的上下文。对我来说，这足以说明这些绝对不从最终用户的角度来看。