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