如何在Blazor WASM中复现InteractiveBrowserCredential认证流程？

问题根源 #

Blazor WASM运行在单线程JavaScript环境中，不支持同步阻塞式的监视器等待，原代码里的同步.ToArray()调用触发了Cannot wait on monitors on this runtime异常。同时，独立WASM应用需要适配浏览器环境的认证流程，不能直接复用控制台的同步逻辑。

最佳实现步骤 #

1. 改用异步API并配置认证选项 #

替换同步调用为异步方法，同时配置适配WASM的认证参数：

var credentialOptions = new InteractiveBrowserCredentialOptions
{
    // 设置应用的认证回调URI，需与实际页面路径一致
    RedirectUri = new Uri($"{NavigationManager.BaseUri}authentication/login-callback"),
    // 启用持久化缓存，保存用户登录状态
    EnablePersistentCache = true,
    // 使用Azure SDK默认公共客户端ID，无需提前注册应用，适配通用工具场景
    ClientId = "04b07795-8ddb-461a-bbee-02f9e1bf7b46"
};

var armClient = new ArmClient(new InteractiveBrowserCredential(credentialOptions));
// 异步获取订阅列表
var subs = await armClient.GetSubscriptions().GetAllAsync().ToArrayAsync();

2. 添加认证回调页面 #

创建Pages/Authentication/LoginCallback.razor页面，处理Azure AD的重定向响应：

@page "/authentication/login-callback"
@inject NavigationManager NavigationManager

@code {
    protected override async Task OnInitializedAsync()
    {
        // 完成交互式认证流程的收尾
        var credential = new InteractiveBrowserCredential();
        await credential.GetTokenAsync(new TokenRequestContext(new[] { "https://management.azure.com/.default" }));
        
        // 认证成功后跳转至主页面
        NavigationManager.NavigateTo("/");
    }
}

3. 适配浏览器环境的认证逻辑 #

• InteractiveBrowserCredential会通过JavaScript打开新窗口发起Azure AD登录，完成后自动重定向到回调页面，需确保回调URI配置正确。
• 使用默认公共客户端ID时，无需提前在Azure AD注册应用，该ID已预先允许常见的本地开发和公共应用重定向，符合通用工具的需求。

4. 严格避免同步阻塞操作 #

Blazor WASM中所有涉及外部调用的操作必须使用async/await，禁止使用.Result、.Wait()或同步LINQ方法（如.ToArray()），这类操作会导致运行时阻塞并抛出异常。

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