如何在嵌入客户端WebAPP页面的JS中调用ASP.NET Core WebAPI？

方案1：创建TokenController返回访问令牌——可行，但需注意安全与缓存 #

这个方案完全可行，核心是借助ASP.NET Core中已有的ITokenAcquisition服务，为当前已认证用户获取目标WebAPI的访问令牌，再返回给前端JS直接调用。需要重点关注以下细节：

• 权限控制：必须为TokenController添加[Authorize]属性，确保只有通过Azure B2C认证的用户才能调用该接口，防止未授权请求窃取令牌。
• 令牌缓存优化：ITokenAcquisition.GetAccessTokenForUserAsync()方法会自动利用ASP.NET Core的缓存机制（内存/分布式缓存）缓存令牌，无需每次都向Azure B2C发起请求。前端JS可在令牌过期后再重新获取，不用每次调用API前都请求令牌。
• 安全防护：
  • 全站强制使用HTTPS，避免令牌在传输过程中被拦截。
  • 配置严格的CORS策略，仅允许自身前端域名访问TokenController，杜绝跨域滥用。
• 代码示例：

[Authorize]
[ApiController]
[Route("api/[controller]")]
public class TokenController : ControllerBase
{
    private readonly ITokenAcquisition _tokenAcquisition;

    public TokenController(ITokenAcquisition tokenAcquisition)
    {
        _tokenAcquisition = tokenAcquisition;
    }

    [HttpGet("get-api-token")]
    public async Task<IActionResult> GetApiToken()
    {
        // 替换为你的WebAPI对应的scope
        var targetScope = "https://your-b2c-tenant.onmicrosoft.com/your-api/api.access";
        var accessToken = await _tokenAcquisition.GetAccessTokenForUserAsync(new[] { targetScope });
        return Ok(new { AccessToken = accessToken });
    }
}

方案2：MSAL.js复用现有登录状态——可以实现，无需重新认证 #

通过MSAL.js复用ASP.NET Core的Azure B2C登录状态是可行的，核心是利用浏览器中已存在的B2C会话Cookie，实现静默令牌获取，无需用户再次输入账号密码。具体实现步骤：

1. 保持配置一致性：MSAL.js的配置必须和ASP.NET Core的Azure B2C配置完全匹配，包括：
   • 租户ID（tenantId）
   • 客户端ID（可复用ASP.NET Core的客户端ID，或单独注册前端专用客户端，后者更符合安全最佳实践）
   • 用户流/策略名称（authority，格式为https://your-b2c-tenant.b2clogin.com/your-b2c-tenant.onmicrosoft.com/your-signup-signin-policy）
   • 重定向URI（redirectUri，设为当前前端页面URL即可，静默登录无需跳转）
2. 初始化MSAL实例并静默获取令牌：

// 初始化MSAL实例
const msalConfig = {
    auth: {
        clientId: "your-client-id",
        authority: "https://your-b2c-tenant.b2clogin.com/your-b2c-tenant.onmicrosoft.com/B2C_1_SignUpSignIn",
        redirectUri: window.location.origin
    },
    cache: {
        cacheLocation: "sessionStorage", // 或localStorage，按需选择
        storeAuthStateInCookie: false // 无需额外存储认证状态到Cookie，已有B2C会话Cookie
    }
};

const msalInstance = new msal.PublicClientApplication(msalConfig);

// 静默获取访问令牌
async function getApiTokenSilently() {
    const request = {
        scopes: ["https://your-b2c-tenant.onmicrosoft.com/your-api/api.access"]
    };

    try {
        // 借助现有B2C会话静默获取令牌
        const response = await msalInstance.acquireTokenSilent(request);
        return response.accessToken;
    } catch (error) {
        // 静默获取失败（如会话过期），触发重定向登录
        if (error instanceof msal.InteractionRequiredAuthError) {
            await msalInstance.acquireTokenRedirect(request);
        } else {
            console.error("令牌获取失败:", error);
            throw error;
        }
    }
}

// 给Axios请求统一添加令牌
axios.interceptors.request.use(async (config) => {
    const token = await getApiTokenSilently();
    config.headers.Authorization = `Bearer ${token}`;
    return config;
});

3. 关键注意事项：
   • ASP.NET Core和前端JS必须运行在同一个根域名下，否则B2C的会话Cookie无法被MSAL.js读取。
   • 若使用单独的前端客户端ID，需在Azure B2C门户中配置该客户端的重定向URI，并确保其拥有访问目标WebAPI的权限。
   • 处理静默获取失败的边界情况，比如用户会话过期时自动触发重定向登录流程。

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