Vue SPA搭配.NET 5 WebAPI应选用哪种正确的OIDC授权流程？

1. 能否在SPA + .NET 5 WebAPI组合中使用不带PKCE的授权码流程 #

技术上可以实现，但生产环境完全不推荐。
不带PKCE的授权码流程要求客户端安全存储客户端密钥，而SPA属于公开客户端，所有代码运行在用户浏览器侧，没有能力安全保存密钥，一旦授权码被网络拦截，攻击者可以直接用授权码兑换访问令牌。OAuth 2.1规范已经明确要求公开客户端使用授权码流程时必须搭配PKCE，这个安全要求和你使用的后端技术栈无关，.NET 5环境下也无法规避该风险。如果仅为本地测试可以临时使用，生产环境务必开启PKCE。

2. 带PKCE授权码流程下的WebAPI认证方案 #

JWT Token完全可以满足需求，.NET 5 WebAPI原生支持JWT Bearer认证方案，配置流程如下：

• 安装对应版本的NuGet包：Microsoft.AspNetCore.Authentication.JwtBearer，版本需和你的.NET 5框架版本匹配
• 在appsettings.json中添加JWT配置项，包括签发者、受众、签名密钥、有效期等参数
• 在启动类（Startup.cs或.NET 5支持的Program.cs）中注册认证服务，示例代码如下：

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.IdentityModel.Tokens;
using System.Text;

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers();
    // 注册JWT认证服务
    services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
        .AddJwtBearer(options =>
        {
            options.TokenValidationParameters = new TokenValidationParameters
            {
                ValidateIssuer = true,
                ValidIssuer = Configuration["Jwt:Issuer"],
                ValidateAudience = true,
                ValidAudience = Configuration["Jwt:Audience"],
                ValidateIssuerSigningKey = true,
                IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration["Jwt:SigningKey"])),
                ValidateLifetime = true,
                ClockSkew = TimeSpan.FromSeconds(30)
            };
        });
    services.AddAuthorization();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 其他中间件省略
    app.UseRouting();
    // 认证中间件必须放在授权中间件之前
    app.UseAuthentication();
    app.UseAuthorization();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

• 需要鉴权的接口添加[Authorize]特性即可正常校验JWT权限。

注意：PKCE的校验逻辑完全由OIDC授权服务器处理，WebAPI侧只需要校验JWT的合法性即可，不需要额外处理PKCE相关逻辑。

内容的提问来源于stack exchange，提问作者Gerrit