Azure部署的Angular与.NET Web API的Google认证Token后端验证问题

我来帮你解决这个问题——其实Azure App Service的Google认证和.NET Web API的Token验证有两种主流实现方式，我都给你梳理清楚，一步步来：

首先你需要确保前端把Google登录获取到的id_token正确传递给后端API。这里分两种场景：

• 如果你用的是MSAL Angular库（和Azure App Service认证集成的官方库）：
  直接配置MsalInterceptor，它会自动在请求API时带上认证Token，不用手动处理Header。只需要在app.module.ts里添加拦截器，并指定API的范围：

  import { MsalInterceptor, MsalModule } from '@azure/msal-angular';
  import { HTTP_INTERCEPTORS } from '@angular/common/http';
  
  @NgModule({
    imports: [
      MsalModule.forRoot({
        auth: {
          clientId: '你的Azure App里的Google Client ID',
          authority: 'https://login.microsoftonline.com/common',
          redirectUri: window.location.origin
        }
      })
    ],
    providers: [
      {
        provide: HTTP_INTERCEPTORS,
        useClass: MsalInterceptor,
        multi: true
      }
    ]
  })
  export class AppModule { }
  

• 如果你是直接用Google的登录SDK获取Token：
  拿到id_token后，手动在HTTP请求的Authorization头里带上Bearer {token}：

  import { HttpClient, HttpHeaders } from '@angular/common/http';
  
  // 假设你已经从Google SDK拿到了googleIdToken
  const apiHeaders = new HttpHeaders()
    .set('Authorization', `Bearer ${googleIdToken}`);
  
  this.http.get('https://your-api-app.azurewebsites.net/api/your-endpoint', { headers: apiHeaders })
    .subscribe(response => {
      // 处理响应
    });
  

方案1：用Azure App Service托管认证（推荐，最省心） #

既然你已经在Azure配置了Google认证，直接用Azure的「托管认证（Easy Auth）」就可以让Azure帮你自动验证Token，不用写额外的验证代码：

1. 配置API的Azure App Service：

   • 打开Azure Portal，找到你的API App Service，进入「Authentication」面板
   • 确保已经启用了Google认证（和前端配置的Client ID、密钥一致）
   • 在「Authentication settings」里，把「Action to take when request is not authenticated」设为「Return HTTP 401 Unauthorized」，这样未认证的请求会被直接拦截

2. 在.NET代码里启用授权：
   只需要在控制器或接口方法上加上[Authorize]属性，就可以保护API端点了。如果需要获取用户信息，直接从HttpContext读取：

   using Microsoft.AspNetCore.Authorization;
   using Microsoft.AspNetCore.Mvc;
   using System.Security.Claims;
   
   [Authorize]
   [ApiController]
   [Route("api/[controller]")]
   public class UserController : ControllerBase
   {
       [HttpGet("profile")]
       public IActionResult GetUserProfile()
       {
           // 获取用户ID和名称
           var userId = HttpContext.User.FindFirst(ClaimTypes.NameIdentifier)?.Value;
           var userName = HttpContext.User.FindFirst(ClaimTypes.Name)?.Value;
           return Ok(new { UserId = userId, UserName = userName });
       }
   }
   

   这种方式的好处是完全不用自己处理Token解析、签名验证这些细节，Azure全部帮你搞定，和前端的认证流程无缝集成。

方案2：手动验证Google JWT Token（自定义场景） #

如果需要更灵活的验证逻辑（比如自定义权限判断），可以手动在.NET代码里验证Google的id_token：

1. 安装依赖包：
   在NuGet里安装System.IdentityModel.Tokens.Jwt包，用来解析和验证JWT。

2. 配置JWT认证服务：
   在Program.cs里添加JWT验证的配置：

   using Microsoft.AspNetCore.Authentication.JwtBearer;
   using Microsoft.IdentityModel.Tokens;
   
   var builder = WebApplication.CreateBuilder(args);
   
   // 添加JWT认证
   builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
       .AddJwtBearer(options =>
       {
           options.Authority = "https://accounts.google.com";
           options.Audience = builder.Configuration["Google:ClientId"]; // 你的Google Client ID
           options.TokenValidationParameters = new TokenValidationParameters
           {
               ValidateIssuer = true,
               ValidIssuer = "https://accounts.google.com",
               ValidateAudience = true,
               ValidAudience = builder.Configuration["Google:ClientId"],
               ValidateLifetime = true,
               ClockSkew = TimeSpan.Zero // 减少时间偏差容忍
           };
       });
   
   builder.Services.AddAuthorization();
   builder.Services.AddControllers();
   
   var app = builder.Build();
   
   app.UseAuthentication();
   app.UseAuthorization();
   
   app.MapControllers();
   
   app.Run();
   

3. 配置Client ID：
   在appsettings.json里添加Google Client ID：

   {
     "Google": {
       "ClientId": "你的Google Client ID"
     }
   }
   

4. 保护API端点：
   同样在控制器上加上[Authorize]属性，就会自动验证前端传来的Bearer Token了。

因为你的前端和后端是两个独立的Azure App Service，肯定会遇到CORS问题，必须配置允许前端域名访问API：

方式1：代码里配置CORS #

在Program.cs里添加CORS策略：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowFrontend", policy =>
    {
        policy.WithOrigins("https://your-frontend-app.azurewebsites.net") // 你的前端App域名
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials(); // 允许带认证Cookie/Token
    });
});

// 在UseRouting之后、UseAuthorization之前启用CORS
app.UseCors("AllowFrontend");

方式2：Azure Portal里配置 #

直接在API App Service的「CORS」面板里，添加前端的域名，勾选「允许所有方法」和「允许所有头」，更快捷。

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