.NET 6 WASM集成Entra ID的MSAL认证报错：Failed to construct URL

错误详情 #

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Failed to construct 'URL': Invalid URL
TypeError: Failed to construct 'URL': Invalid URL
at new u (https://localhost:7151/_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js:2:191011)
at l.init (https://localhost:7151/_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js:2:196273)

项目配置说明 #

基于.NET 6的WASM基础项目，Entra ID应用注册已配置重定向URI为https://localhost:7151/Authentication/login-callback，已反复校验appsettings.json无拼写错误。

相关文件代码 #

appsettings.json #

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "ClientId": "你的客户端ID",
    "TenantId": "你的租户ID",
    "RedirectUri": "https://localhost:7151/authentication/login-callback"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  }
}

Index.html #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>AuthWebApp</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="AuthWebApp.styles.css" rel="stylesheet" />
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>
</body>

</html>

Program.cs #

using AuthWebApp;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
    options.ProviderOptions.LoginMode = "redirect";
});


await builder.Build().RunAsync();

Index.razor #

@page "/"

<PageTitle>Index</PageTitle>

@attribute [Authorize]

<h1>User needs to be in AD for this page to work</h1>

Authentication.razor #

@page "/Authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication

<RemoteAuthenticatorView Action="@action"></RemoteAuthenticatorView>

@code {
    [Parameter] public string? action { get; set; }
}

解决方案 #

该错误本质是MSAL无法构造合法的认证请求URL，核心排查方向如下：

1. 校验AzureAd配置完整性

   • 确保Instance、ClientId、TenantId均为有效值，Instance末尾需保留斜杠（如https://login.microsoftonline.com/）
   • 确认RedirectUri与Entra ID应用注册中的重定向URI完全一致（注意大小写匹配，避免因路由大小写不统一导致的异常）

2. 检查配置绑定逻辑

   • MSAL支持两种配置结构：
     • 方式一：通过Instance+TenantId自动拼接Authority
     • 方式二：直接配置完整的Authority字段（如https://login.microsoftonline.com/你的租户ID）
       确保配置结构与绑定逻辑匹配，避免因字段缺失导致URL拼接失败

3. 清理缓存并重启项目

   • 清除浏览器缓存，避免旧配置残留影响；同时重启项目，确保最新配置被正确加载

4. 确认HTTPS运行环境

   • 确保项目以HTTPS协议启动，即使localhost允许HTTP，也建议保持与Entra ID要求的HTTPS标准一致，避免协议不匹配引发的URL构造错误

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