如何在Blazor Server中使用Microsoft Graph Toolkit及问题排查

1. 组件无法正常工作的原因 #

• 认证上下文不共享：MGT默认使用自身独立的认证机制，和Blazor Server的AzureAD认证体系完全分离，导致MGT组件拿不到有效的Graph访问令牌，API调用失败后自然无法渲染mgt-person内容，mgt-people-picker也搜不到结果。
• 权限配置缺失：即使拿到令牌，如果AzureAD应用没配置并获得必要的Graph权限（比如User.Read、User.ReadBasic.All、People.Read），或者未完成管理员同意，MGT调用Graph API会被直接拒绝。
• 单租户配置错误：虽然设置了authority参数，但格式可能不正确（正确格式为https://login.microsoftonline.com/{你的租户ID}），或者MGT身份提供者初始化时未正确绑定该参数，导致认证流程异常。
• 令牌范围不匹配：Blazor获取的访问令牌可能没包含MGT组件需要的权限范围，比如people-picker依赖People.Read权限，如果令牌里没有这个范围，搜索请求会失败。

2. 这种集成方式是否可行 #

完全可行。MGT的核心价值就是提供开箱即用的Graph UI组件，能大幅减少自定义UI的开发工作量，只要解决好认证上下文共享的问题，就能在Blazor Server中正常使用这些组件，同时保留Blazor自身的认证流程。

3. 能否复用Blazor已有的认证状态，无需重复登录 #

可以，核心是通过自定义MGT身份提供者对接Blazor的认证令牌，具体实现步骤如下：

步骤1：在_Host.cshtml中配置MGT和自定义认证提供者 #

<script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
<script>
    class BlazorAuthProvider extends MicrosoftGraphToolkit.IAuthenticationProvider {
        async getAccessToken(scopes) {
            // 通过JS互操作从Blazor获取当前用户的访问令牌
            return await window.getBlazorAccessToken();
        }
    }

    // 替换MGT默认认证提供者
    MicrosoftGraphToolkitProviders.globalProvider = new BlazorAuthProvider();
    // 配置单租户authority
    MicrosoftGraphToolkitProviders.globalProvider.options = {
        authority: 'https://login.microsoftonline.com/你的租户ID'
    };

    // 注册供Blazor调用的令牌获取方法
    window.registerBlazorAccessTokenProvider = (getTokenFunc) => {
        window.getBlazorAccessToken = getTokenFunc;
    };
</script>

步骤2：在Blazor组件中实现令牌获取的JS互操作 #

@inject IHttpContextAccessor HttpContextAccessor
@inject IJSRuntime JSRuntime

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 向JS注册令牌获取逻辑
            await JSRuntime.InvokeVoidAsync("registerBlazorAccessTokenProvider", async () =>
            {
                // 从Blazor的HttpContext中获取当前访问令牌
                var token = await HttpContextAccessor.HttpContext.GetTokenAsync("access_token");
                return token;
            });
        }
    }
}

步骤3：补充必要配置 #

• 在Program.cs中注册HttpContextAccessor：

  builder.Services.AddHttpContextAccessor();
  

• 确保AzureAD应用已配置并获得MGT所需的Graph权限（如User.Read、People.Read），且完成管理员同意。
• 处理令牌过期逻辑：如果令牌过期，需要在Blazor中实现刷新逻辑，确保getBlazorAccessToken能返回有效的新令牌。

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