使用 Azure Active Directory B2C 保護裝載的 ASP.NET Core Blazor WebAssembly 應用程式

本文說明如何建立使用 Azure Active Directory (AAD) B2C 進行驗證之裝載 Blazor WebAssembly 的方案

在閱讀本文之後,如需其他安全性案例涵蓋範圍,請參閱 ASP.NET Core Blazor WebAssembly 其他安全性案例

逐步解說

逐步解說的子區段說明如何:

  • 在 Azure 中建立租用戶
  • 在 Azure 中註冊伺服器 API 應用程式
  • 在 Azure 中註冊用戶端應用程式
  • 建立 Blazor 應用程式
  • 修改預設存取權杖範圍配置
  • 執行應用程式

在 Azure 中建立租用戶

遵循教學課程:建立 Azure Active Directory B2C 租用戶中的指導,以建立 AAD B2C 租用戶。

繼續進行本文的指導之前,請先確認您已為 AAD B2C 租用戶選取正確的目錄

在 Azure 中註冊伺服器 API 應用程式

註冊伺服器 API 應用程式的 AAD B2C 應用程式:

  1. 在 Azure 入口網站中瀏覽至 Azure AD B2C。 選取側邊欄中的 [應用程式註冊]。 選取 [新增註冊] 按鈕。
  2. 提供應用程式的名稱 (例如 Blazor Server AAD B2C)。
  3. 針對 [支援的帳戶類型],選取多租用戶選項:任何識別提供者或組織目錄中的帳戶 (用於透過使用者流程來驗證使用者)
  4. 在此案例中,伺服器 API 應用程式不需要重新導向 URI,因此請將 [選取平台] 下拉式清單保留為未選取狀態,且不要輸入重新導向 URI。
  5. 確認已選取 [授與]>[對 openid 與 offline_access 權限授與管理員同意]
  6. 選取註冊

記錄下列資訊:

  • 伺服器 API 應用程式應用程式 (用戶端) 識別碼 (例如 41451fa7-82d9-4673-8fa5-69eff5a761fd)
  • AAD B2C 執行個體 (例如,https://contoso.b2clogin.com/ 包含後置斜線)。 執行個體是 Azure B2C 應用程式註冊的配置和主機,您可以從 Azure 入口網站中的 [應用程式註冊] 頁面開啟 [端點] 視窗來找到。
  • 主要/發行者/租用戶網域 (例如 contoso.onmicrosoft.com):網域可在 Azure 入口網站中已註冊應用程式的 [商標] 刀鋒視窗中作為發行者網域

從側邊欄中選取 [公開 API],然後遵循下列步驟:

  1. 選取新增範圍
  2. 選取 [儲存並繼續] 。
  3. 提供範圍名稱 (例如 API.Access)。
  4. 提供管理員同意顯示名稱 (例如 Access API)。
  5. 提供管理員同意描述 (例如 Allows the app to access server app API endpoints.)。
  6. 確認 [狀態] 設定為 [已啟用]
  7. 選取新增範圍

記錄下列資訊:

  • 應用程式識別碼 URI GUID (例如來自 https://contoso.onmicrosoft.com/41451fa7-82d9-4673-8fa5-69eff5a761fd 的記錄 41451fa7-82d9-4673-8fa5-69eff5a761fd)
  • 範圍名稱 (例如 API.Access)

在 Azure 中註冊用戶端應用程式

註冊用戶端應用程式的 AAD B2C 應用程式:

  1. 在 Azure 入口網站中瀏覽至 Azure AD B2C。 選取側邊欄中的 [應用程式註冊]。 選取 [新增註冊] 按鈕。
  2. 提供應用程式的名稱 (例如 Blazor 用戶端 AAD B2C)。
  3. 針對 [支援的帳戶類型],選取多租用戶選項:任何識別提供者或組織目錄中的帳戶 (用於透過使用者流程來驗證使用者)
  4. 將 [重新導向 URI] 下拉式清單設定為 [單頁應用程式 (SPA)],並提供 https://localhost/authentication/login-callback 的重新導向 URI 值。 如果您知道 Azure 預設主機 (例如 azurewebsites.net) 或自訂網域主機 (例如 contoso.com) 的生產重新導向 URI,您也可以在提供 localhost 重新導向 URI 的同時新增生產重新導向 URI。 請務必在您所新增的任何生產重新導向 URI 中包含非 :443 連接埠的連接埠號碼。
  5. 確認已選取 [授與]>[對 openid 與 offline_access 權限授與管理員同意]
  6. 選取註冊

注意

不需要提供 localhost AAD B2C 重新導向 URI 的連接埠號碼。 如需詳細資訊,請參閱重新導向 URI(回復 URL)限制和限制:Localhost 例外狀況(Entra 檔)。

記錄用戶端應用程式應用程式 (用戶端) 識別碼 (例如 4369008b-21fa-427c-abaa-9b53bf58e538)。

在 [驗證]>[平台設定]>[單頁應用程式] 中:

  1. 確認 https://localhost/authentication/login-callback 的重新導向 URI 存在。
  2. 在 [隱含授與] 區段中,確定未選取 [存取權杖] 和 [識別碼權杖] 核取方塊。 不建議針對使用 MSAL v2.0 或更新版本的 Blazor 應用程式使用隱含授與。 如需詳細資訊,請參閱 保護 ASP.NET Core 的安全Blazor WebAssembly
  3. 此體驗可接受應用程式的其餘預設值。
  4. 如果您做了變更,請選取 [儲存] 按鈕。

在側邊欄的 [API 權限] 中:

  1. 選取 [新增權限],然後是 [我的 API]
  2. 從 [名稱] 資料行選取 [伺服器 API 應用程式] (例如 Blazor ServerAAD B2C)。
  3. 如果尚未開啟,請開啟 API 清單。
  4. 使用核取方塊啟用對 API 的存取權 (例如 API.Access)。
  5. 選取新增權限
  6. 選取 [授與 {TENANT NAME} 的管理員同意] 按鈕。 選取 確認。

重要

如果您沒有在 [API 權限] 設定的最後一個步驟中授與系統管理員同意租用戶的權限,由於同意使用應用程式會委派給使用者,因此必須採取下列額外步驟:

  • 應用程式必須使用受信任的發行者網域
  • 在 Azure 入口網站的 Server 應用程式設定中,選取 [公開 API]。 在 [授權的用戶端應用程式] 底下,選取 [新增用戶端應用程式] 按鈕。 新增 Client 應用程式的應用程式 (用戶端) 識別碼 (例如 4369008b-21fa-427c-abaa-9b53bf58e538)。

返回 Azure 入口網站中的 Azure AD B2C。 選取 [使用者流程],並使用下列指導:建立註冊和登入使用者流程。 至少,針對註冊/登入使用者流程選取 [應用程式宣告],然後選取 [顯示名稱] 使用者屬性核取方塊,以將 context.User.Identity?.Name/context.User.Identity.Name 填入 LoginDisplay 元件 (Shared/LoginDisplay.razor) 中。

記錄為應用程式建立的註冊和登入使用者流程名稱 (例如 B2C_1_signupsignin1)。

建立 Blazor 應用程式

將下列命令中的預留位置取代為稍早記錄的資訊,並在命令殼層中執行命令:

dotnet new blazorwasm -au IndividualB2C --aad-b2c-instance "{AAD B2C INSTANCE}" --api-client-id "{SERVER API APP CLIENT ID}" --app-id-uri "{SERVER API APP ID URI GUID}" --client-id "{CLIENT APP CLIENT ID}" --default-scope "{DEFAULT SCOPE}" --domain "{TENANT DOMAIN}" -ho -o {PROJECT NAME} -ssp "{SIGN UP OR SIGN IN POLICY}"

警告

避免在應用程式名稱 {PROJECT NAME} 中使用破折號 (-),這會破壞 OIDC 應用程式識別碼的形成。 Blazor WebAssembly 專案範本中的邏輯會使用方案設定中 OIDC 應用程式識別碼的專案名稱。 開頭大寫 (BlazorSample) 或底線 (Blazor_Sample) 是可接受的替代方案。 如需詳細資訊,請參閱裝載 Blazor WebAssembly 專案名稱中的破折號會破壞 OIDC 安全性 (dotnet/aspnetcore #35337)

預留位置 Azure 入口網站名稱 範例
{AAD B2C INSTANCE} 執行個體 https://contoso.b2clogin.com/ (包括後置斜線)
{PROJECT NAME} BlazorSample
{CLIENT APP CLIENT ID} Client 應用程式的應用程式 (用戶端) 識別碼 4369008b-21fa-427c-abaa-9b53bf58e538
{DEFAULT SCOPE} 範圍名稱 API.Access
{SERVER API APP CLIENT ID} Server 應用程式的應用程式 (用戶端) 識別碼 41451fa7-82d9-4673-8fa5-69eff5a761fd
{SERVER API APP ID URI GUID} 應用程式識別碼 URI GUID 41451fa7-82d9-4673-8fa5-69eff5a761fd (僅限 GUID,預設符合 {SERVER API APP CLIENT ID})
{SIGN UP OR SIGN IN POLICY} 註冊/登入使用者流程 B2C_1_signupsignin1
{TENANT DOMAIN} 主要/發行者/租用戶網域 contoso.onmicrosoft.com

使用 -o|--output 選項指定的輸出位置會在專案資料夾不存在時建立專案資料夾,並且成為專案名稱的一部分。 避免在應用程式名稱中使用破折號 (-),這會破壞 OIDC 應用程式識別碼的形成 (請參閱先前的「警告」)。

執行應用程式

Server 專案執行應用程式。 使用 Visual Studio 時,請執行下列其中一項:

  • 選取 [執行] 按鈕旁的下拉式箭號。 從下拉式清單中開啟 [設定啟始專案]。 選取 [單一啟始專案] 選項。 確認或變更啟始專案的專案為 Server 專案。

  • 在使用下列任一方法啟動應用程式之前,請確認 Server 專案已在 [方案總管] 中醒目顯示:

    • 選取 [執行] 按鈕。
    • 從功能表使用 [偵錯]>[開始偵錯]
    • 請按 F5
  • 在命令殼層中,瀏覽至方案的 Server 專案資料夾。 執行 dotnet run 命令。

自訂原則

Microsoft 驗證程式庫 (Microsoft.Authentication.WebAssembly.MsalNuGet 套件) 預設不支援 AAD B2C 自訂原則

設定 User.Identity.Name

本節中的指導涵蓋選擇性地使用 name 宣告中的值填入 User.Identity.Name

根據預設,Server 應用程式 API 會使用 http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name 宣告類型中的值填入 User.Identity.Name (例如 2d64b3da-d9d5-42c6-9352-53d8df33d770@contoso.onmicrosoft.com)。

若要將應用程式設定為從 name 宣告類型接收值:

方案的組件

本節描述從 Blazor WebAssembly 專案範本產生的方案組件,並描述如何設定方案的 ClientServer 專案以供參考。 如果您使用逐步解說一節中的指導來建立應用程式,則本節中沒有針對基本工作應用程式可遵循的任何特定指導。 本節中的指導有助於更新應用程式以驗證和授權使用者。 不過,更新應用程式的替代方法是從逐步解說一節中的指導建立新的應用程式,並將應用程式的元件、類別和資源移至新的應用程式。

appsettings.json 設定

本節與方案的 Server 應用程式有關。

檔案 appsettings.json 包含用來驗證存取權杖的 JWT 持有人處理常式選項:

{
  "AzureAdB2C": {
    "Instance": "https://{TENANT}.b2clogin.com/",
    "ClientId": "{SERVER API APP CLIENT ID}",
    "Domain": "{TENANT DOMAIN}",
    "Scopes": "{DEFAULT SCOPE}",
    "SignUpSignInPolicyId": "{SIGN UP OR SIGN IN POLICY}"
  }
}

範例:

{
  "AzureAdB2C": {
    "Instance": "https://contoso.b2clogin.com/",
    "ClientId": "41451fa7-82d9-4673-8fa5-69eff5a761fd",
    "Domain": "contoso.onmicrosoft.com",
    "Scopes": "API.Access",
    "SignUpSignInPolicyId": "B2C_1_signupsignin1",
  }
}

驗證套件

本節與方案的 Server 應用程式有關。

支援使用 Microsoft.Identity.Web 套件提供的 Microsoft Identity Platform 驗證和授權對 ASP.NET Core Web API 的呼叫。

注意

如需將套件新增至 .NET 應用程式的指引,請參閱在套件取用工作流程 (NuGet 文件)安裝及管理套件底下的文章。 在 NuGet.org 確認正確的套件版本。

從 Blazor WebAssembly 範本所建立裝載 Blazor 方案的 Server 應用程式預設會包含 Microsoft.Identity.Web.UI 套件。 套件會在 Web 應用程式中新增使用者驗證的 UI,且不會由 Blazor 架構使用。 如果 Server 應用程式不會用來直接驗證使用者,則可以安全地從 Server 應用程式的專案檔中移除套件參考。

驗證服務支援

本節與方案的 Server 應用程式有關。

AddAuthentication 方法會在應用程式內設定驗證服務,並將 JWT 持有人處理常式設定為預設驗證方法。 AddMicrosoftIdentityWebApi 方法會設定服務,以使用 Microsoft Identity Platform v2.0 來保護 Web API。 此方法預期應用程式設定中有一個 AzureAdB2C 區段,其中包含初始化驗證選項的必要設定。

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApi(Configuration.GetSection("AzureAdB2C"));

注意

註冊單一驗證配置時,驗證配置會自動用作應用程式的預設配置,而且不需要向 AddAuthentication 或透過 AuthenticationOptions 陳述該配置。 如需詳細資訊,請參閱 ASP.NET Core 驗證概觀ASP.NET Core 公告 (aspnet/Announcements #490)

UseAuthenticationUseAuthorization 可確保:

  • 應用程式會嘗試剖析和驗證傳入要求上的權杖。
  • 任何嘗試存取受保護資源而沒有適當認證的要求都會失敗。
app.UseAuthorization();

WeatherForecast 控制器

本節與方案的 Server 應用程式有關。

WeatherForecast 控制器 (Controllers/WeatherForecastController.cs) 會公開受保護的 API, 並將 [Authorize] 屬性套用至控制器。 請務必了解:

  • 此 API 控制器中的 [Authorize] 屬性是保護此 API 免於未經授權存取的唯一屬性。
  • Blazor WebAssembly 應用程式中使用的 [Authorize] 屬性只會用作應用程式提示,指出使用者應獲得授權才能讓應用程式正常運作。
[Authorize]
[ApiController]
[Route("[controller]")]
[RequiredScope(RequiredScopesConfigurationKey = "AzureAdB2C:Scopes")]
public class WeatherForecastController : ControllerBase
{
    [HttpGet]
    public IEnumerable<WeatherForecast> Get()
    {
        ...
    }
}

wwwroot/appsettings.json 設定

本節與方案的 Client 應用程式有關。

wwwroot/appsettings.json 檔案會提供設定:

{
  "AzureAdB2C": {
    "Authority": "{AAD B2C INSTANCE}{TENANT DOMAIN}/{SIGN UP OR SIGN IN POLICY}",
    "ClientId": "{CLIENT APP CLIENT ID}",
    "ValidateAuthority": false
  }
}

在上述設定中,{AAD B2C INSTANCE} 包含後置斜線。

範例:

{
  "AzureAdB2C": {
    "Authority": "https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_signupsignin1",
    "ClientId": "4369008b-21fa-427c-abaa-9b53bf58e538",
    "ValidateAuthority": false
  }
}

驗證套件

本節與方案的 Client 應用程式有關。

建立應用程式以使用個別 B2C 帳戶 (IndividualB2C) 時,應用程式會自動收到 Microsoft 驗證程式庫 (Microsoft.Authentication.WebAssembly.Msal) 的套件參考。 套件提供一組基本類型,可協助應用程式驗證使用者,並取得權杖來呼叫受保護的 API。

如果將驗證新增至應用程式,請手動將 Microsoft.Authentication.WebAssembly.Msal 套件新增至應用程式。

注意

如需將套件新增至 .NET 應用程式的指引,請參閱在套件取用工作流程 (NuGet 文件)安裝及管理套件底下的文章。 在 NuGet.org 確認正確的套件版本。

Microsoft.Authentication.WebAssembly.Msal 套件可轉移性地將 Microsoft.AspNetCore.Components.WebAssembly.Authentication 套件新增至應用程式。

驗證服務支援

本節與方案的 Client 應用程式有關。

新增了 HttpClient 執行個體的支援,包括對伺服器專案提出要求時的存取權杖。

Program 檔案中:

builder.Services.AddHttpClient("{PROJECT NAME}.ServerAPI", client => 
    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
    .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();

builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>()
    .CreateClient("{PROJECT NAME}.ServerAPI"));

預留位置 {PROJECT NAME} 是方案建立時的專案名稱。 例如,提供 BlazorSample 的專案名稱會產生名為 HttpClientBlazorSample.ServerAPI

支援使用 Microsoft.Authentication.WebAssembly.Msal 套件所提供的 AddMsalAuthentication 擴充方法,驗證在服務容器中註冊的使用者。 這個方法會設定應用程式與 Identity 提供者 (IP) 互動所需的服務。

Program 檔案中:

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAdB2C", options.ProviderOptions.Authentication);
    options.ProviderOptions.DefaultAccessTokenScopes.Add("{SCOPE URI}");
});

{SCOPE URI} 是預設存取權杖範圍 (例如 https://contoso.onmicrosoft.com/41451fa7-82d9-4673-8fa5-69eff5a761fd/API.Access 或您在 Azure 入口網站中設定的自訂 URI)。

AddMsalAuthentication 方法接受回呼,以設定驗證應用程式所需的參數。 當您註冊應用程式時,可以從 Azure 入口網站 AAD 設定取得設定所需的值。

存取權杖範圍

本節與方案的 Client 應用程式有關。

預設存取權杖範圍代表下列存取權杖範圍的清單:

  • 登入要求中預設會包含。
  • 用來在驗證之後立即佈建存取權杖。

所有範圍都必須屬於每個 Microsoft Entra ID 規則的相同應用程式。 您可以視需要為其他 API 應用程式新增其他範圍:

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.DefaultAccessTokenScopes.Add("{SCOPE URI}");
});

使用 AdditionalScopesToConsent 指定其他範圍:

options.ProviderOptions.AdditionalScopesToConsent.Add("{ADDITIONAL SCOPE URI}");

範例預設存取權杖範圍:

options.ProviderOptions.DefaultAccessTokenScopes.Add(
    "https://contoso.onmicrosoft.com/41451fa7-82d9-4673-8fa5-69eff5a761fd/API.Access");

如需詳細資訊,請參閱其他案例文章的下列各節:

登入模式

本節與方案的 Client 應用程式有關。

如果無法開啟快顯項目,架構預設為快顯登入模式,並回復為重新導向登入模式。 將 MsalProviderOptionsLoginMode 屬性設定為 redirect,設定 MSAL 以使用重新導向登入模式:

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.LoginMode = "redirect";
});

預設設定為 popup,且字串值不區分大小寫。

匯入檔案

本節與方案的 Client 應用程式有關。

Microsoft.AspNetCore.Components.Authorization 命名空間可透過 _Imports.razor 檔案在整個應用程式中使用:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using {APPLICATION ASSEMBLY}
@using {APPLICATION ASSEMBLY}.Shared

索引頁面

本節與方案的 Client 應用程式有關。

[索引] 頁面 (wwwroot/index.html) 頁面包含一個指令碼,定義 JavaScript 中的 AuthenticationServiceAuthenticationService 會處理 OIDC 通訊協定的低階詳細資料。 應用程式會在內部呼叫指令碼中定義的方法,來執行驗證作業。

<script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>

應用程式元件

本節與方案的 Client 應用程式有關。

App 元件 (App.razor) 類似於在 Blazor Server 應用程式中找到的 App 元件:

由於 ASP.NET Core 版本之間的架構變更,所以本節不會顯示 App 元件的 Razor 標記 (App.razor)。 若要檢查指定版本的元件標記,請使用下列任一方法:

  • 針對您想要使用的 ASP.NET Core 版本,從預設 Blazor WebAssembly 專案範本建立要佈建以進行驗證的應用程式。 在產生的應用程式中檢查 App 元件 (App.razor)。

  • 參考來源中檢查 App 元件 (App.razor)。 從分支選取器中選取版本,然後搜尋存放庫資料夾中的元件 ProjectTemplates ,因為它多年來已移動。

    注意

    .NET 參考來源的文件連結通常會載入存放庫的預設分支,這表示下一版 .NET 的目前開發。 若要選取特定版本的標籤,請使用 [切換分支或標籤] 下拉式清單。 如需詳細資訊,請參閱如何選取 ASP.NET Core 原始程式碼 (dotnet/AspNetCore.Docs #26205) 的版本標籤

RedirectToLogin 元件

本節與方案的 Client 應用程式有關。

RedirectToLogin 元件 (RedirectToLogin.razor):

參考來源中檢查 RedirectToLogin 元件。 元件的位置會隨著時間而變更,因此請使用 GitHub 搜尋工具來找出元件。

注意

.NET 參考來源的文件連結通常會載入存放庫的預設分支,這表示下一版 .NET 的目前開發。 若要選取特定版本的標籤,請使用 [切換分支或標籤] 下拉式清單。 如需詳細資訊,請參閱如何選取 ASP.NET Core 原始程式碼 (dotnet/AspNetCore.Docs #26205) 的版本標籤

LoginDisplay 元件

本節與方案的 Client 應用程式有關。

LoginDisplay 元件 (LoginDisplay.razor) 是在 MainLayout 元件 (MainLayout.razor) 中進行轉譯,並且管理下列行為:

  • 針對已驗證的使用者:
    • 顯示目前的使用者名稱。
    • 提供 ASP.NET Core Identity 中使用者設定檔頁面的連結。
    • 提供登出應用程式的按鈕。
  • 針對匿名使用者:
    • 提供註冊的選項。
    • 提供登入的選項。

由於 ASP.NET Core 版本之間的架構變更,所以本節不會顯示 LoginDisplay 元件的 Razor 標記。 若要檢查指定版本的元件標記,請使用下列任一方法:

  • 針對您想要使用的 ASP.NET Core 版本,從預設 Blazor WebAssembly 專案範本建立要佈建以進行驗證的應用程式。 在產生的應用程式中檢查 LoginDisplay 元件。

  • 參考來源中檢查 LoginDisplay 元件。 元件的位置會隨著時間而變更,因此請使用 GitHub 搜尋工具來找出元件。 使用等於 trueHosted 範本化內容。

    注意

    .NET 參考來源的文件連結通常會載入存放庫的預設分支,這表示下一版 .NET 的目前開發。 若要選取特定版本的標籤,請使用 [切換分支或標籤] 下拉式清單。 如需詳細資訊,請參閱如何選取 ASP.NET Core 原始程式碼 (dotnet/AspNetCore.Docs #26205) 的版本標籤

驗證元件

本節與方案的 Client 應用程式有關。

Authentication 元件 (Pages/Authentication.razor) 所產生的頁面會定義處理不同驗證階段所需的路由。

RemoteAuthenticatorView 元件:

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

<RemoteAuthenticatorView Action="Action" />

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

注意

.NET 6 或更新版本中的 ASP.NET Core 支援可為 Null 的參考型別 (NRT) 和 .NET 編譯程式 Null 狀態靜態分析 。 在 .NET 6 中發行 ASP.NET Core 之前,類型 string 會出現,但沒有 Null 類型指定 (?)。

FetchData 元件

本節與方案的 Client 應用程式有關。

FetchData 元件會示範如何:

  • 佈建存取權杖。
  • 使用該存取權杖來呼叫 Server 應用程式中的受保護資源 API。

@attribute [Authorize] 指示詞會向 Blazor WebAssembly 授權系統指示使用者必須獲得授權才能存取此元件。 Client 應用程式中該屬性的存在不會阻止在沒有適當認證的情況下呼叫伺服器上的 API。 Server 應用程式也必須在適當的端點上使用 [Authorize] 才能正確地提供保護。

IAccessTokenProvider.RequestAccessToken 負責要求索取可新增至要求以呼叫 API 的存取權杖。 如果權杖已快取或服務能夠在無需使用者互動的情況下提供新的存取權杖,則要求索取權杖會成功。 否則,要求索取權杖會失敗並出現 AccessTokenNotAvailableException (它會在 try-catch 陳述式中攔截)。

為了取得要包含在要求中的實際權杖,應用程式必須透過呼叫 tokenResult.TryGetToken(out var token) 來檢查要求索取是否成功。

如果要求索取成功,則會使用存取權杖來填入 token 變數。 權杖的 AccessToken.Value 屬性會公開要包含在 Authorization 要求標頭中的常值字串。

如果要求索取因在沒有使用者互動的情況下無法提供權杖而失敗,則:

  • ASP.NET .NET 7 或更新版本中的 Core:應用程式會流覽至 AccessTokenResult.InteractiveRequestUrl 使用指定的 AccessTokenResult.InteractionOptions ,以允許重新整理存取令牌。
  • ASP.NET .NET 6 或更早版本中的 Core:令牌結果包含重新導向 URL。 瀏覽至此 URL 會將使用者帶到登入頁面,並在驗證成功之後回到目前的頁面。
@page "/fetchdata"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using {APP NAMESPACE}.Shared
@attribute [Authorize]
@inject HttpClient Http

...

@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
        }
        catch (AccessTokenNotAvailableException exception)
        {
            exception.Redirect();
        }
    }
}

疑難排解

記錄

若要啟用偵錯或追蹤記錄以進行Blazor WebAssembly驗證,請參閱 ASP.NET Core Blazor 記錄的用戶端驗證記錄一節,並將發行項版本選取器設定為 ASP.NET Core 7.0 或更新版本。

常見錯誤

  • 應用程式或 Identity 提供者 (IP) 的設定錯誤

    最常見的錯誤是由不正確的設定所造成。 以下是一些範例:

    • 視案例的需求而定,遺漏或不正確的授權單位、執行個體、租用戶識別碼、租用戶網域、用戶端識別碼或重新導向 URI 會防止應用程式驗證用戶端。
    • 不正確的要求範圍可防止用戶端存取伺服器 Web API 端點。
    • 不正確或遺漏伺服器 API 權限會防止用戶端存取伺服器 Web API 端點。
    • 在與IP應用程式註冊的重新導向URI中設定不同的埠執行應用程式。 請注意,Microsoft Entra ID 和在開發測試位址執行 localhost 的應用程式不需要埠,但應用程式的埠組態和執行應用程式的埠必須符合非localhost 位址。

    本文指導的設定區段顯示正確設定的範例。 仔細查看文章中有關尋找應用程式和 IP 設定錯誤的每個區段。

    如果設定顯示正確:

    • 分析應用程式記錄檔。

    • 使用瀏覽器的開發人員工具,檢查用戶端應用程式與 IP 或伺服器應用程式之間的網路流量。 通常,在提出要求之後,IP 或伺服器應用程式會傳回錯誤訊息或有導致問題的線索訊息給用戶端。 下列文章中可找到開發人員工具指導:

    • 針對使用 ON Web 令牌 (JWT) 的JS發行Blazor,根據問題發生的位置,譯碼用來驗證用戶端或存取伺服器 Web API 的令牌內容。 如需詳細資訊,請參閱檢查 JSON Web 權杖 (JWT) 的內容

    文件小組會回應文章中的文件意見反應和 BUG (從此頁面意見反應區段開啟問題),但是無法提供產品支援。 有數個公用支援論壇可用來協助針對應用程式進行疑難排解。 我們建議下列事項:

    上述論壇並非由 Microsoft 擁有或控制。

    針對非安全性、非敏感性和非機密可重現架構 BUG 報告,向 ASP.NET Core 產品單位提出問題。 在您徹底調查問題的原因而且無法自行解決,並取得公用支援論壇上社群的協助之前,請勿向產品單位提出問題。 產品單位無法針對因簡單設定錯誤或涉及第三方服務的使用案例而中斷的個別應用程式進行疑難排解。 如果報表本質上是敏感性或機密,或描述攻擊者可能惡意探索的產品中的潛在安全性缺陷,請參閱報告安全性問題和 Bug (dotnet/aspnetcoreGitHub 存放庫)。

  • ME-ID 未經授權的用戶端

    info: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2] Authorization failed. 不符合以下需求: DenyAnonymousAuthorizationRequirement:需要已驗證的使用者。

    ME-ID 的登入回呼錯誤:

    • 錯誤: unauthorized_client
    • 描述:AADB2C90058: The provided application is not configured to allow public clients.

    若要解決此錯誤:

    1. 在 Azure 入口網站中,存取應用程式的資訊清單
    2. allowPublicClient 屬性設定為 nulltrue

Cookie 和網站資料

Cookie 和網站資料可以在應用程式更新之間保存,並且干擾測試和疑難排解。 進行應用程式程式碼變更、使用提供者的使用者帳戶變更,或提供者應用程式設定變更時,請清除下列內容:

  • 使用者登入 cookie
  • 應用程式 cookie
  • 快取和儲存的網站資料

防止殘留 cookie 和網站資料干擾測試和疑難排解的其中一種方法是:

  • 設定瀏覽器
    • 使用瀏覽器進行測試,您可以設定在每次關閉瀏覽器時刪除所有 cookie 和網站資料。
    • 請確定瀏覽器已手動關閉或由 IDE 關閉,以便對應用程式、測試使用者或提供者設定進行任何變更。
  • 使用自訂命令在 Visual Studio 的 InPrivate 或 Incognito 模式中開啟瀏覽器:
    • 從 Visual Studio 的 [執行] 按鈕開啟 [瀏覽方式] 對話方塊。
    • 選取新增按鈕。
    • 在 [程式] 欄位中提供瀏覽器的路徑。 下列可執行檔路徑是 Windows 10 的一般安裝位置。 如果您的瀏覽器安裝在不同的位置,或您不是使用 Windows 10,請提供瀏覽器可執行檔的路徑。
      • Microsoft Edge:C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe
      • Google Chrome:C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
      • Mozilla Firefox:C:\Program Files\Mozilla Firefox\firefox.exe
    • 在 [ 自變數] 字段中,提供瀏覽器用來在 InPrivate 或 Incognito 模式中開啟的命令行選項。 某些瀏覽器需要應用程式的 URL。
      • Microsoft Edge:使用 -inprivate
      • Google Chrome:使用 --incognito --new-window {URL},其中預留位置 {URL} 是要開啟的 URL (例如 https://localhost:5001)。
      • Mozilla Firefox:使用 -private -url {URL},其中預留位置 {URL} 是要開啟的 URL (例如 https://localhost:5001)。
    • 在 [自訂名稱] 欄位中提供名稱。 例如: Firefox Auth Testing
    • 選取確定按鈕。
    • 若要避免針對使用應用程式測試的每個反覆項目選取瀏覽器設定檔,請使用 [設為預設值] 按鈕,將設定檔設定為預設值。
    • 請確定瀏覽器已由 IDE 關閉,以便對應用程式、測試使用者或提供者設定進行任何變更。

應用程式升級

在升級開發電腦上的 .NET Core SDK 或變更應用程式內的套件版本之後,正常運作的應用程式便立即發生失敗。 在某些情況下,執行主要升級時,不一致的套件可能會中斷應用程式。 大多數這些問題都可依照下列指示來進行修正:

  1. 從命令殼層執行 dotnet nuget locals all --clear,以清除本機系統的 NuGet 套件快取。
  2. 刪除專案的 binobj 資料夾。
  3. 還原並重建專案。
  4. 在重新部署應用程式之前,請先刪除伺服器上部署資料夾中的所有檔案。

注意

不支援使用與應用程式目標框架不相容的套件版本。 如需套件的詳細資訊,請使用 NuGet 資源庫FuGet 套件總管

執行 Server 應用程式

測試裝載 Blazor WebAssembly方案並且進行疑難排解時,請確定您是從 Server 專案執行應用程式。

檢查使用者

下列 User 元件可以直接在應用程式中使用,或做為進一步自定義的基礎。

User.razor

@page "/user"
@attribute [Authorize]
@using System.Text.Json
@using System.Security.Claims
@inject IAccessTokenProvider AuthorizationService

<h1>@AuthenticatedUser?.Identity?.Name</h1>

<h2>Claims</h2>

@foreach (var claim in AuthenticatedUser?.Claims ?? Array.Empty<Claim>())
{
    <p class="claim">@(claim.Type): @claim.Value</p>
}

<h2>Access token</h2>

<p id="access-token">@AccessToken?.Value</p>

<h2>Access token claims</h2>

@foreach (var claim in GetAccessTokenClaims())
{
    <p>@(claim.Key): @claim.Value.ToString()</p>
}

@if (AccessToken != null)
{
    <h2>Access token expires</h2>

    <p>Current time: <span id="current-time">@DateTimeOffset.Now</span></p>
    <p id="access-token-expires">@AccessToken.Expires</p>

    <h2>Access token granted scopes (as reported by the API)</h2>

    @foreach (var scope in AccessToken.GrantedScopes)
    {
        <p>Scope: @scope</p>
    }
}

@code {
    [CascadingParameter]
    private Task<AuthenticationState> AuthenticationState { get; set; }

    public ClaimsPrincipal AuthenticatedUser { get; set; }
    public AccessToken AccessToken { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        var state = await AuthenticationState;
        var accessTokenResult = await AuthorizationService.RequestAccessToken();

        if (!accessTokenResult.TryGetToken(out var token))
        {
            throw new InvalidOperationException(
                "Failed to provision the access token.");
        }

        AccessToken = token;

        AuthenticatedUser = state.User;
    }

    protected IDictionary<string, object> GetAccessTokenClaims()
    {
        if (AccessToken == null)
        {
            return new Dictionary<string, object>();
        }

        // header.payload.signature
        var payload = AccessToken.Value.Split(".")[1];
        var base64Payload = payload.Replace('-', '+').Replace('_', '/')
            .PadRight(payload.Length + (4 - payload.Length % 4) % 4, '=');

        return JsonSerializer.Deserialize<IDictionary<string, object>>(
            Convert.FromBase64String(base64Payload));
    }
}

檢查 JSON Web 權杖 (JWT) 的內容

若要解碼 JSON Web 權杖 (JWT),請使用 Microsoft 的 jwt.ms 工具。 UI 中的值永遠不會離開瀏覽器。

範例編碼 JWT (已縮短顯示):

eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1j ... bQdHBHGcQQRbW7Wmo6SWYG4V_bU55Ug_PW4pLPr20tTS8Ct7_uwy9DWrzCMzpD-EiwT5IjXwlGX3IXVjHIlX50IVIydBoPQtadvT7saKo1G5Jmutgq41o-dmz6-yBMKV2_nXA25Q

針對 Azure AAD B2C 進行驗證之應用程式的工具所解碼的範例 JWT:

{
  "typ": "JWT",
  "alg": "RS256",
  "kid": "X5eXk4xyojNFum1kl2Ytv8dlNP4-c57dO6QGTVBwaNk"
}.{
  "exp": 1610059429,
  "nbf": 1610055829,
  "ver": "1.0",
  "iss": "https://mysiteb2c.b2clogin.com/5cc15ea8-a296-4aa3-97e4-226dcc9ad298/v2.0/",
  "sub": "5ee963fb-24d6-4d72-a1b6-889c6e2c7438",
  "aud": "70bde375-fce3-4b82-984a-b247d823a03f",
  "nonce": "b2641f54-8dc4-42ca-97ea-7f12ff4af871",
  "iat": 1610055829,
  "auth_time": 1610055822,
  "idp": "idp.com",
  "tfp": "B2C_1_signupsignin"
}.[Signature]

其他資源