Azure Web应用：移除客户端密钥，改用托管身份的实现咨询

1. 前置配置 #

• 确认Azure App Service已启用用户分配的托管身份，并在Azure AD中将该MI添加为后端API的授权主体，授予api://{Guid API}/Users.ReadWrite.All权限（需完成管理员同意）。
• 确保后端API的Azure AD配置中，受众（Audience）设置为api://{Guid API}，允许来自托管身份的令牌请求。

2. 修改.NET Core MVC应用配置 #

替换令牌获取逻辑 #

移除原基于用户身份的令牌获取代码，改用托管身份获取API访问令牌：

// Program.cs
builder.Services.AddAzureClients(clientBuilder =>
{
    // 指定用户分配MI的Client ID
    clientBuilder.AddTokenCredential(new DefaultAzureCredential(new DefaultAzureCredentialOptions
    {
        ManagedIdentityClientId = "{用户分配MI的Client ID}"
    }));
});

在Home控制器中获取并传递令牌 #

注入TokenCredential服务，在页面渲染时获取令牌并传递给React应用：

public class HomeController : Controller
{
    private readonly TokenCredential _tokenCredential;
    private readonly string _apiScope = "api://{Guid API}/Users.ReadWrite.All";

    public HomeController(TokenCredential tokenCredential)
    {
        _tokenCredential = tokenCredential;
    }

    public async Task<IActionResult> Index()
    {
        var tokenContext = new TokenRequestContext(new[] { _apiScope });
        var tokenResult = await _tokenCredential.GetTokenAsync(tokenContext, CancellationToken.None);
        
        // 将令牌传递给React应用（可通过ViewData或嵌入页面脚本）
        ViewData["ApiAccessToken"] = tokenResult.Token;
        return View();
    }
}

3. 后端API验证调整 #

确保API的认证逻辑能正确解析托管身份颁发的令牌，使用Microsoft.Identity.Web的默认配置即可：

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApi(builder.Configuration.GetSection("AzureAd"));

若托管身份不可用（如本地开发、特殊环境限制），可让React应用直接通过PKCE流程获取令牌，跳过MVC中间层的令牌转发。

1. Azure AD应用配置 #

• 注册一个单页应用（SPA），启用PKCE流程，添加React应用的重定向URI（如https://your-react-app.com/login-callback）。
• 为该SPA应用添加后端API的api://{Guid API}/Users.ReadWrite.All权限，完成管理员同意。

2. React应用集成MSAL.js #

使用MSAL.js v3实现PKCE登录与令牌获取：

import { PublicClientApplication } from '@azure/msal-browser';

// 初始化MSAL实例
const msalConfig = {
    auth: {
        clientId: "{SPA应用Client ID}",
        authority: "https://login.microsoftonline.com/{TenantId}",
        redirectUri: "https://your-react-app.com/login-callback"
    }
};
const pca = new PublicClientApplication(msalConfig);

// 登录逻辑
async function handleLogin() {
    await pca.loginRedirect({
        scopes: ["api://{Guid API}/Users.ReadWrite.All"]
    });
}

// 静默获取令牌
async function getApiToken() {
    const account = pca.getAllAccounts()[0];
    const response = await pca.acquireTokenSilent({
        account,
        scopes: ["api://{Guid API}/Users.ReadWrite.All"]
    });
    return response.accessToken;
}

3. API调用调整 #

React应用直接使用获取到的令牌调用后端API，API端无需额外修改（保持原JWT验证逻辑即可）。

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