为 VueJS SPA 和 asp.net core 3.1 实现 OAuth2/OIDC

Question

• SPA 和 asp.net core 3.1 的 Vue 前端作为 API 的后端
• 使用Microsoft.AspNetCore.SpaServices.Extensions nuget 包，因此当用户访问 .net 核心时，SPA 文件将从文件夹 (wwwroot/dist) 提供服务
• 后端 API 控制器用[Authorize] 属性修饰
• SPA 路由器具有 authguard，因此受保护的路由仅对经过身份验证的用户可用
• SPA 将使用 Axios 并将不记名令牌传递给后端 API

我想使用托管在另一个系统上的 identityserver4 使用 pkce 实现 OAuth2/Oidc 授权代码。

对登陆页面的请求应将用户转发到 identityserver4 以获取登录/密码提示，并在使用令牌完成所有步骤后重定向回来。

理想情况下，我希望 .net 核心处理所有 oauth/oidc 步骤，并且不想在 SPA 中使用 oidc-client javascript 客户端来处理它。关于我如何做到这一点的任何建议？谢谢

Answer 1

这里有两种标准模型，您需要选择其中一种，具体取决于您最关心的因素：

选项 1：SPA 场景

• SPA 是 OAuth 客户端，通过 Javascript 技术进行身份验证
• API 是 OAuth 资源服务器

资源服务器处理客户端的身份验证流程不是标准的 - 相反，客户端应该进行身份验证，然后调用资源服务器。

选项 2：WEB 后端场景

当人们希望将令牌保留在浏览器的 Javascript 代码之外时，他们最常选择此选项：

• C# 中的 Web 后端是 OAuth 客户端
• Web 后端需要与浏览器进行安全通信，并且必须为此使用 auth cookie
• 要调用 API，浏览器需要将 cookie 发送到 Web 后端以获取令牌，或者通过 Web 后端双跳所有 API 调用

关于 OIDC 客户

我个人更喜欢选项 1，我认为它更接近整体 SPA Goals，例如跨域托管和使用内容交付网络。 OIDC 客户端实际上可以导致一个相当简单的 SPA 安全实现，如下所示 Client Side Implementation of mine.