Blazor Server集成Microsoft Graph API V5时扩展方法加载异常

核心问题分析 #

你遇到的两个异常根源是混用了Blazor WebAssembly和Blazor Server的认证/Graph集成方案：

1. 初始的IAccessTokenProvider找不到，是因为这个服务是Blazor WebAssembly专属的，Blazor Server环境下不存在；
2. 添加AddMsalAuthentication后预渲染报错，是因为该方法也是WebAssembly的认证配置，Blazor Server不需要它，且预渲染阶段没有JS环境支持MSAL操作。

正确配置步骤 #

1. 修正Program.cs中的认证与Graph客户端注册 #

Blazor Server集成Microsoft Graph需要使用Microsoft.Identity.Web提供的下游API调用扩展，替换掉错误的WebAssembly风格配置：

var builder = WebApplication.CreateBuilder(args);

// 基础Blazor服务配置
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

// 配置Entra ID认证 + 下游API（Graph）支持
builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureAd"))
    // 启用令牌获取以调用下游API
    .EnableTokenAcquisitionToCallDownstreamApi()
    // 注册Microsoft Graph客户端
    .AddMicrosoftGraph(builder.Configuration.GetSection("MicrosoftGraph"))
    // 使用内存缓存存储令牌（生产环境可替换为分布式缓存）
    .AddInMemoryTokenCaches();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();

// 必须启用认证和授权中间件
app.UseAuthentication();
app.UseAuthorization();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

2. 完善appsettings.json配置 #

在配置文件中添加Microsoft Graph的权限范围和基础地址：

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "your-tenant-domain",
    "TenantId": "your-tenant-id",
    "ClientId": "your-client-id",
    "CallbackPath": "/signin-oidc",
    // 如果是机密客户端（Blazor Server通常用这个），添加客户端密码
    "ClientSecret": "your-client-secret"
  },
  "MicrosoftGraph": {
    "BaseUrl": "https://graph.microsoft.com/v1.0",
    "Scopes": "user.read mail.read" // 根据需求添加所需权限
  }
}

3. 组件中正确调用Graph API #

在Razor组件中注入GraphServiceClient，同时处理预渲染阶段的认证状态问题（预渲染时无HttpContext，无法获取令牌）：

@inject GraphServiceClient GraphClient
@inject IHttpContextAccessor HttpContextAccessor

<h3>当前用户信息</h3>
@if (currentUser != null)
{
    <p>姓名: @currentUser.DisplayName</p>
    <p>邮箱: @currentUser.Mail</p>
}

@code {
    private User? currentUser;

    protected override async Task OnInitializedAsync()
    {
        // 预渲染阶段跳过Graph调用（HttpContext为null）
        if (HttpContextAccessor.HttpContext == null) return;

        try
        {
            currentUser = await GraphClient.Me.Request().GetAsync();
        }
        catch (Exception ex)
        {
            // 处理令牌获取失败或Graph调用异常
            Console.WriteLine(ex.Message);
        }
    }
}

4. 补充Entra ID应用配置 #

• 登录Azure门户，找到你的Entra ID应用注册；
• 在API权限中添加所需的Microsoft Graph委派权限（如User.Read），并点击授予管理员同意；
• 确保应用注册的身份验证中已添加正确的重定向URI（格式：https://your-app-url/signin-oidc）。

预渲染问题处理 #

如果不想修改组件逻辑，也可以将_Host.cshtml中的渲染模式改为Server（但会失去预渲染的性能优势）：

<component type="typeof(App)" render-mode="Server" />

更推荐的方式是在组件中通过HttpContextAccessor判断预渲染状态，跳过需要认证的操作。

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