Angular + .NET Core 6 Web API对接外部IDP时，AddOpenIdConnect的令牌传递及API安全防护问题

嘿，你的场景其实挺典型的——独立Angular SPA搭配纯.NET 6 Web API对接外部IDP，虽然大部分示例都是基于MVC的，但纯Web API完全能搞定，不用纠结换项目类型。咱们逐个解决你的问题：

问题1：把Access Token传递给Angular SPA，用于路由守卫和API认证 #

你之前遇到的接口调用时User.IsAuthenticated为false的问题，核心是跨域请求没有携带认证Cookie，后端识别不到已认证的用户。这里有两种可行的方案：

方案一：通过后端接口+Cookie传递（推荐，相对安全） #

1. 配置CORS允许携带凭证
   在Web API的Program.cs里配置CORS，允许你的Angular域名（http://localhost:4200）并开启凭证支持：

   builder.Services.AddCors(options =>
   {
       options.AddPolicy("AllowAngular", policy =>
       {
           policy.WithOrigins("http://localhost:4200")
                 .AllowAnyHeader()
                 .AllowAnyMethod()
                 .AllowCredentials(); // 关键：允许跨域携带Cookie
       });
   });
   
   // 确保在UseRouting之后、UseAuthorization之前启用CORS
   app.UseCors("AllowAngular");
   

2. 从后端接口获取Token和Claims
   新建一个AuthController，提供接口读取当前已认证用户的Access Token和Claims。这里可以直接从AuthenticationProperties中获取IDP返回的Token，不需要额外存储：

   [ApiController]
   [Route("api/auth")]
   public class AuthController : ControllerBase
   {
       [HttpGet("user-info")]
       public async Task<IActionResult> GetUserInfo()
       {
           if (!User.Identity.IsAuthenticated)
           {
               return Unauthorized();
           }
   
           // 从认证属性中获取Access Token
           var authResult = await HttpContext.AuthenticateAsync("oidc");
           var accessToken = authResult.Properties.GetTokenValue("access_token");
           var refreshToken = authResult.Properties.GetTokenValue("refresh_token");
   
           // 整理Claims返回
           var claims = User.Claims.Select(c => new { c.Type, c.Value });
   
           return Ok(new 
           { 
               AccessToken = accessToken,
               RefreshToken = refreshToken,
               Claims = claims
           });
       }
   }
   

3. Angular端调用接口并保存Token
   在Angular的登录回调页面（比如/admin）初始化时，调用上述接口，注意要开启withCredentials以携带Cookie：

   import { HttpClient } from '@angular/common/http';
   import { Injectable } from '@angular/core';
   
   @Injectable({ providedIn: 'root' })
   export class AuthService {
       constructor(private http: HttpClient) {}
   
       getUserInfo() {
           return this.http.get('/api/auth/user-info', { withCredentials: true });
       }
   }
   

   调用成功后，把Access Token存入sessionStorage（或内存，避免XSS风险），供路由守卫和API请求使用。

方案二：前端直接用PKCE流程对接IDP（更简洁，推荐长期采用） #

如果不想依赖后端的MVC控制器处理登录跳转，推荐用Angular的专用OAuth2/OpenID库（比如angular-oauth2-oidc）直接对接IDP，采用Authorization Code Flow with PKCE流程：

• 前端直接向IDP发起认证请求，获取Access Token、ID Token等
• 后端只需要配置JWT认证验证Token即可，不需要处理登录跳转逻辑
  这种方式更符合SPA的最佳实践，避免了跨域Cookie的问题。

问题2：用Access Token保护Web API端点 #

这部分其实很清晰，核心是配置后端的JWT认证，验证前端传递的Token：

1. 添加JWT认证服务
   在Program.cs中配置JWT Bearer认证，指向你的外部IDP：

   builder.Services.AddAuthentication(options =>
   {
       options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
       options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
   })
   .AddOpenIdConnect("oidc", options =>
   {
       // 你的现有OpenIdConnect配置（用于后端登录跳转）
   })
   .AddJwtBearer("jwt", options =>
   {
       options.Authority = "https://your-external-idp.com"; // 替换为你的IDP地址
       options.Audience = "your-api-audience"; // 替换为IDP中配置的API资源名称
       options.TokenValidationParameters = new TokenValidationParameters
       {
           ValidateIssuer = true,
           ValidateAudience = true,
           ValidateLifetime = true,
           ValidateIssuerSigningKey = true
       };
   });
   

2. 保护API端点
   在需要保护的控制器或Action上添加[Authorize]特性：

   [ApiController]
   [Route("api/admin")]
   [Authorize]
   public class AdminController : ControllerBase
   {
       // 你的API逻辑
   }
   

3. Angular自动携带Token
   用Angular的HttpInterceptor给所有API请求自动添加Authorization头：

   import { Injectable } from '@angular/core';
   import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
   
   @Injectable()
   export class AuthInterceptor implements HttpInterceptor {
       intercept(req: HttpRequest<any>, next: HttpHandler) {
           const token = sessionStorage.getItem('access_token');
           if (token) {
               const clonedReq = req.clone({
                   headers: req.headers.set('Authorization', `Bearer ${token}`)
               });
               return next.handle(clonedReq);
           }
           return next.handle(req);
       }
   }
   

   在AppModule中注册这个拦截器：

   import { HTTP_INTERCEPTORS } from '@angular/common/http';
   import { AuthInterceptor } from './auth.interceptor';
   
   @NgModule({
       providers: [
           { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
       ]
   })
   export class AppModule {}
   

疑问：是否不该选择Web API项目作为后端？ #

完全不需要换！Web API项目天生适合做SPA的后端服务，只是早期的IDP示例更多针对服务器端渲染的MVC应用。你现在的问题只是因为引入了MVC控制器处理登录流程，纯Web API完全可以通过上述方案（尤其是前端直接PKCE的方式）实现完整的认证授权流程。

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