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

Question

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

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

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

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

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

Answer 1

您的问题不够清楚，我会尽力回答 - 如果您寻找任何不同的内容，请纠正我。

正如项目主页中提到的那样

从版本 8 开始，该库支持代码流和 PKCE，以与 OAuth 2.0 安全最佳当前实践文档的当前草案保持一致。这也是即将推出的 OAuth 2.1 的基础。

PKCE

是

client_secret

的一种替代品，最初是为移动应用程序设计的，但最终与 SPA 共享。它依靠

redirect_uri

确保您的浏览器正在运行预先注册的应用程序，然后使用

code verifier

将以下令牌请求绑定到原始挑战。

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

Answer 2

我/我们创建了一个开源库，它就是这样做的，我在这里写了一篇关于如何设置它的文章：https://abstarreveld.medium.com/set-up-a-spa-bff-with -asp-net-core-and-angular-in-3-steps-net-8-18527d73bc43.

我们构建的解决方案的工作原理如下：

• 它基本上是 CDN + 反向代理 + 服务器端身份验证

• 用户导航至 https://yoursite.whatever/.auth/login

• 用户导航至身份提供商进行登录

• 服务器端接收身份验证令牌并启动会话

• 服务器端提供SPA

• SPA 可以 [GET] 到 /.auth/me 来接收用户 id_token 声明

• SPA 可以调用 /api/* 的 http 请求，这些请求由服务器端处理并通过客户端会话进行身份验证。

• 服务器端配置包含将 API 请求转发到何处的映射

• 服务器端在每个转发的请求中包含“身份验证承载 [ACCESS_TOKEN]”标头。

该软件的先决条件：

• ASP.NET 核心 (.NET 8)
• NPM + Angular

如果您安装了 .NET、NPM 和 Angular，请通过执行这些命令开始运行。

# Download and install the template pack first
dotnet new install OidcProxy.Net.Templates

# Scaffold the proxy
dotnet new OidcProxy.Net --backend "https://yoursite.whatever"
    --idp "https://yoursite.whatever"
    --clientId xyz
    --clientSecret abc

# Run it
dotnet run

# Open a browser and navigate to https://localhost:8444/.auth/login

在此处查看该项目：https://github.com/oidcproxydotnet/OidcProxy.Net

希望这有帮助！

干杯，