Blazor WASM 身份验证静态 Web 应用程序

Question

我有一个我还不太明白的问题（使用文档： https : //docs.microsoft.com/en-us/aspnet/core/blazor/security/? view = aspnetcore- 6.0 ），如果我尝试登录，它适用于静态 Web 应用程序 ( SWA ) 和本地。

但是当我尝试注销时，它在本地工作，而在SWA上却没有。

任何人都知道问题是什么？ 截图供参考：

门户应用注册：

appsettings.json

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/TENANT-ID",
    "ClientId": "CLIENT-ID",
    "ValidateAuthority": true
  }
}

静态webapp.config.json

{
  "networking": {
    "allowedIpRanges": [
      "IP/MASK"
    ]
  }
}

程序.cs

public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("#app");

            builder.Services.AddSingleton<IProductService<ProductA,InsuredPerson>, ProductAService>();
            builder.Services.AddSingleton<IProductService<ProductB,InsuredPerson>, ProductBService>();
            builder.Services.AddSingleton<IDownloadService,DownloadService>();
            builder.Services.AddSingleton<IUploadService, UploadService>();
            builder.Services.AddAutoMapper(new[] { typeof(ServiceMappingProfile)});
            builder.Services.AddHttpClient();
    
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            builder.Services.AddLocalization();


            builder.Services.AddMsalAuthentication(options =>
            {
                builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
                options.ProviderOptions.DefaultAccessTokenScopes
                    .Add("https://graph.microsoft.com/User.Read");
                options.ProviderOptions.LoginMode = "redirect";
            });
            

            var host = builder.Build();

            CultureInfo culture;

            var js = host.Services.GetRequiredService<IJSRuntime>();

            var result = await js.InvokeAsync<string>("blazorCulture.get");

            if (result != null)
            {
                culture = new CultureInfo(result);
            }
            else
            {
                culture = new CultureInfo("en-US");
                await js.InvokeVoidAsync("blazorCulture.set", "en-US");
            }
            CultureInfo.DefaultThreadCurrentCulture = culture;
            CultureInfo.DefaultThreadCurrentUICulture = culture;

            await host.RunAsync();
        }
    }

应用程序.razor

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    @if (context.User.Identity?.IsAuthenticated != true)
                    {
                        <RedirectToLogin />
                    }
                    else
                    {
                        <p role="alert">You are not authorized to access this resource.</p>
                    }
                </NotAuthorized>
            </AuthorizeRouteView>
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

Answer 1

配置时请检查以下几点：

• 安装 NuGet 包Microsoft.Authentication.WebAssembly.Msal以使用 NuGet 管理器对您的应用程序进行身份验证。

• 通过将 [Authorize] 属性注入Razor 页面（Counter.razor 和 FetchData.razor）来启用身份验证。同时添加参考 Microsoft.AspNetCore.Authorization

@attribute [Authorize]
@using Microsoft.AspNetCore.Authorization

在LoginDisplay.razor 中，检查下面的登录和注销代码

@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject NavigationManager Navigation
@inject SignOutSessionStateManager SignOutManager

<AuthorizeView>
    <Authorized>
        Hello, @context.User.Identity.Name!
        <button class="nav-link btn btn-link" @onclick="BeginLogout">
            Log out
        </button>
    </Authorized>
    <NotAuthorized>
        <a href="authentication/login">Log in</a>
    </NotAuthorized>
</AuthorizeView>

@code {
    private async Task BeginLogout(MouseEventArgs args)
    {
        await SignOutManager.SetSignOutState();
        Navigation.NavigateTo("authentication/logout");
    }
}

页面/Authentication.razor

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

<RemoteAuthenticatorView Action="@Action" />

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

参考： 使用 Azure Active Directory 保护 Blazor WebAssembly 独立应用程序 (code-maze.com)

您可以尝试的解决方法：

尝试1：清除所有缓存，尝试登录和注销。

尝试 2：如果所有这些都设置正确但仍然面临问题，请尝试将重定向类型设置为 Web 而不是 SPA。

例如：

尝试 3：包括“post_logout_redirect_uri”：“https://localhost:5001/authentication/logout-callback”，在提到重定向 uri 的应用程序的 json 文件中，并在应用程序注册屏幕的门户中的注销 url 中给出该 url ：

• 在菜单中选择身份验证。
• 在注销 URL 部分，将其设置为 https:// localhost:5001/authentication/logout-callback