如何用.NET Core API保护React.js SPA？JWT签名安全实现咨询

首先得澄清一个关键误解：你完全不需要让SPA参与JWT签名的过程，微软MVC示例里的“签名密码”其实是用来验证JWT合法性的密钥，而且在Azure AD场景下，连这个密钥都不需要你手动配置给WebAPI——因为Azure AD会通过公开的OpenID Discovery端点提供公钥，WebAPI可以自动获取并验证Azure AD颁发的JWT签名。

核心逻辑梳理 #

你的SPA通过react-adal从Azure AD拿到的JWT，本身就是Azure AD用自己的私钥签好名的合法令牌。WebAPI的工作不是让前端签名，而是验证这个令牌的签名、有效期、受众（Audience）等信息，确认它是由可信的Azure AD颁发的，且是给你的WebAPI用的。

具体实现步骤 #

1. 配置.NET Core WebAPI的Azure AD认证

直接使用微软官方的Microsoft.Identity.Web包，它会自动处理Azure AD的公钥获取和JWT验证，完全不需要你手动存储私钥或密码：

// Program.cs
var builder = WebApplication.CreateBuilder(args);

// 添加Azure AD认证服务
builder.Services.AddMicrosoftIdentityWebApiAuthentication(builder.Configuration);

// 其他服务配置...

var app = builder.Build();

// 启用认证中间件
app.UseAuthentication();
app.UseAuthorization();

// 路由和端点配置...

然后在appsettings.json里配置Azure AD的基本信息（这些都是公开的配置，不存在泄露风险）：

"AzureAd": {
  "Instance": "https://login.microsoftonline.com/",
  "Domain": "your-tenant-domain.onmicrosoft.com",
  "TenantId": "your-tenant-id",
  "ClientId": "your-webapi-client-id"
}

2. React SPA请求WebAPI时携带JWT

在react-adal获取到token后，只需要在每个请求WebAPI的HTTP头里带上Authorization: Bearer {token}即可：

// React中请求WebAPI的示例（用axios）
import axios from 'axios';
import { authContext } from './adalConfig';

// 获取缓存的Azure AD令牌
const getToken = () => authContext.getCachedToken(authContext.config.clientId);

const fetchDataFromApi = async () => {
  const token = getToken();
  const response = await axios.get('https://your-webapi-endpoint/api/data', {
    headers: {
      'Authorization': `Bearer ${token}`
    }
  });
  return response.data;
};

为什么这样安全？ #

• Azure AD的私钥只有微软持有，用来签名JWT，你的SPA和WebAPI都不会接触到它。
• WebAPI验证签名时用的是Azure AD公开的公钥，公钥本身就是可以公开获取的，不存在泄露风险。
• 你不需要把任何敏感的签名密码推送到SPA，完全避免了控制台泄露的问题。

纠正你之前的思路误区 #

你之前想让SPA发起登录后重定向到WebAPI并完成签名，这是多余的操作——因为Azure AD已经帮你完成了令牌的签名，WebAPI只需要验证这个现成的令牌即可，不需要再重新签名。

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