Blazor WASM实现MS Graph应用权限遇平台不支持异常排查

问题根源 #

• Blazor WASM是浏览器端运行的应用，代码完全暴露给用户，你用的ClientSecretCredential需要用到客户端密钥（ClientSecret），把密钥放在前端代码里会直接泄露，完全不安全。
• 更关键的是，ClientSecretCredential这个身份验证类本身不支持浏览器平台，它是为服务器端、桌面这类有安全环境的应用设计的，所以在WASM里实例化必然会抛出「平台不支持」的异常。

正确的实现方案 #

应用权限（比如Calendars.ReadWrite）必须通过后端服务中转，不能直接在Blazor WASM客户端调用。具体步骤：

1. 搭建后端API（比如ASP.NET Core Web API）
   在后端安全环境里实现MS Graph的调用逻辑，这里可以安全使用ClientSecretCredential：

// 后端API中的Graph客户端实现
public GraphServiceClient GetGraphClient()
{
    string[] scopes = new[] { "https://graph.microsoft.com/.default" };
    var tenantId = _configuration["AzureAd:TenantId"];
    var clientId = _configuration["AzureAd:ClientId"];
    var clientSecret = _configuration["AzureAd:ClientSecret"];

    var options = new ClientSecretCredentialOptions
    {
        AuthorityHost = AzureAuthorityHosts.AzurePublicCloud
    };

    var clientSecretCredential = new ClientSecretCredential(
        tenantId, clientId, clientSecret, options);

    return new GraphServiceClient(clientSecretCredential, scopes);
}

注意：应用权限只需要用https://graph.microsoft.com/.default作为scope，因为应用权限是预先在应用注册里配置好的，.default会自动包含所有已授权的应用权限。

2. 在后端API中封装日历操作接口
   写一个接口让Blazor客户端调用，由后端去执行MS Graph的操作：

[ApiController]
[Route("api/[controller]")]
public class CalendarController : ControllerBase
{
    private readonly GraphServiceClient _graphClient;

    public CalendarController(GraphServiceClient graphClient)
    {
        _graphClient = graphClient;
    }

    [HttpPost("{userId}/events")]
    public async Task<IActionResult> CreateCalendarEvent(string userId, Event newEvent)
    {
        var createdEvent = await _graphClient.Users[userId].Events
            .Request()
            .AddAsync(newEvent);
        return Ok(createdEvent);
    }
}

3. Blazor WASM客户端调用后端API
   客户端不再直接调用MS Graph，而是通过HttpClient调用自己的后端接口：

// Blazor组件中的调用示例
private async Task CreateEventForUser(string userId)
{
    var newEvent = new Event
    {
        Subject = "测试会议",
        Start = new DateTimeTimeZone { DateTime = "2024-06-01T10:00:00", TimeZone = "China Standard Time" },
        End = new DateTimeTimeZone { DateTime = "2024-06-01T11:00:00", TimeZone = "China Standard Time" }
    };

    await _httpClient.PostAsJsonAsync($"api/calendar/{userId}/events", newEvent);
    // 处理返回结果
}

4. 应用注册配置检查

• 确保在Azure AD应用注册中，已经添加了Calendars.ReadWrite的应用权限（不是委托权限）。
• 必须由租户管理员同意这个应用权限（在应用注册的「API权限」页面点击「授予管理员同意」）。

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