使用 Azure AD B2C 在您自己的 Web 應用程式中啟用驗證

這很重要

自 2025 年 5 月 1 日起，Azure AD B2C 將不再可供新客戶購買。 在我們的常見問題中深入瞭解。

本文說明如何將 Azure Active Directory B2C （Azure AD B2C） 驗證新增至您自己的 ASP.NET Web 應用程式。 瞭解如何使用 OpenID Connect 通訊協定的 ASP.NET Core 中間件建立 ASP.NET Core Web 應用程式。

使用本文搭配 在範例 Web 應用程式中設定驗證，以您自己的 Web 應用程式取代範例 Web 應用程式。

先決條件

若要檢閱必要條件和整合指示，請參閱 在範例 Web 應用程式中設定驗證。

步驟 1：建立 Web 應用程式專案

您可以使用現有的 ASP.NET model-view-controller （MVC） Web 應用程式專案，或建立新的專案。 若要建立新的專案，請開啟命令殼層，然後輸入下列命令：

dotnet new mvc -o mywebapp

上述命令會執行下列動作：

• 它會建立新的MVC Web 應用程式。
• 參數 -o mywebapp 會使用應用程式的來源檔案，建立名為 mywebapp 的目錄。

步驟 2：新增驗證連結庫

新增 Microsoft Identity Web 連結庫，這是一組 ASP.NET 核心連結庫，可簡化將 Azure AD B2C 驗證和授權支援新增至 Web 應用程式。 Microsoft身分識別 Web 連結庫會使用 Cookie 型驗證來設定驗證管線。 它會負責傳送和接收 HTTP 驗證訊息、令牌驗證、宣告擷取等等。

若要新增 Microsoft Identity Web 連結庫，請執行下列命令來安裝套件：

Visual Studio

dotnet add package Microsoft.Identity.Web
dotnet add package Microsoft.Identity.Web.UI

Visual Studio 代碼

Install-Package Microsoft.Identity.Web
Install-Package Microsoft.Identity.Web.UI 

步驟 3：起始驗證連結庫

Microsoft Identity Web 中間件會使用啟動類別，在裝載進程啟動時執行。 在此步驟中，您會新增必要的程式代碼來起始驗證連結庫。

開啟 Startup.cs ，然後在 類別的開頭新增下列 using 宣告：

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;

因為Microsoft身分識別 Web 會使用 Cookie 型驗證來保護 Web 應用程式，因此下列程式代碼會設定 SameSite Cookie 設定。 然後，它會讀取應用程式設定， AzureAdB2C 並使用其檢視起始中間件控制器。

ConfigureServices(IServiceCollection services)函式取代為下列代碼段：

public void ConfigureServices(IServiceCollection services)
{
    services.Configure<CookiePolicyOptions>(options =>
    {
        // This lambda determines whether user consent for non-essential cookies is needed for a given request.
        options.CheckConsentNeeded = context => true;
        options.MinimumSameSitePolicy = SameSiteMode.Unspecified;
        // Handling SameSite cookie according to https://learn.microsoft.com/aspnet/core/security/samesite?view=aspnetcore-3.1
        options.HandleSameSiteCookieCompatibility();
    });

    // Configuration to sign-in users with Azure AD B2C
    services.AddMicrosoftIdentityWebAppAuthentication(Configuration, "AzureAdB2C");

    services.AddControllersWithViews()
        .AddMicrosoftIdentityUI();

    services.AddRazorPages();

    //Configuring appsettings section AzureAdB2C, into IOptions
    services.AddOptions();
    services.Configure<OpenIdConnectOptions>(Configuration.GetSection("AzureAdB2C"));
}

下列程式代碼會新增 Cookie 原則，並使用驗證模型。 Configure函式取代為下列代碼段：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();

    // Add the Microsoft Identity Web cookie policy
    app.UseCookiePolicy();
    app.UseRouting();
    // Add the ASP.NET Core authentication service
    app.UseAuthentication();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
        
        // Add endpoints for Razor pages
        endpoints.MapRazorPages();
    });
};

步驟 4：新增 UI 元素

若要新增使用者介面元素，請使用包含檢查邏輯的部分檢視來查看使用者是否已登入。 如果使用者未登入，部分檢視會轉譯登入按鈕。 如果他們已登入，則會顯示使用者的顯示名稱和註銷按鈕。

使用下列代碼段，在 /Views/Shared 資料夾中建立新的檔案 _LoginPartial.cshtml：

@using System.Security.Principal
@if (User.Identity.IsAuthenticated)
{
    <ul class="nav navbar-nav navbar-right">
        <li class="navbar-text">Hello @User.Identity.Name</li>
        <!-- The Account controller is not defined in this project. Instead, it is part of Microsoft.Identity.Web.UI nuget package and
            it defines some well known actions such as SignUp/In, SignOut and EditProfile-->
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="EditProfile">
                <button type="submit" class="btn btn-primary" style="margin-right:5px">Edit Profile</button>
            </form>
        </li>
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">
                <button type="submit" class="btn btn-primary">Sign Out</button>
            </form>
        </li>
    </ul>
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignIn">
                <button type="submit" class="btn btn-primary">Sign Up/In</button>
            </form>
        </li>
    </ul>
}

修改 /Views/Shared_Layout.cshtml 檔案，以包含您新增 的 _LoginPartial.cshtml 檔案。 _Layout.cshtml 檔案是常見的版面配置，可讓使用者在從頁面到頁面時獲得一致的體驗。 配置包含常見的使用者介面元素，例如應用程式頁首和頁尾。

備註

根據您執行的 .NET Core 版本，以及您是否將登入新增至現有應用程式，UI 元素看起來可能不同。 如果是，請務必將 _LoginPartial 包含在版面配置的適當位置。

開啟 /Views/Shared/_Layout.cshtml 檔案，然後新增下列 div 元素。

<div class="navbar-collapse collapse">
...
</div>

將這個專案取代為下列 Razor 程式代碼：

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
    <li><a asp-area="" asp-controller="Home" asp-action="Claims">Claims</a></li>
  </ul>
  <partial name="_LoginPartial" />
</div>

上述 Razor 程式代碼包含您將在下一個步驟中建立之動作的連結 Claims 。

步驟 5：新增宣告檢視

若要檢視標識碼令牌宣告，請在 /Views/Home 資料夾底下新增 Claims.cshtml 檢視。

@using System.Security.Claims

@{
  ViewData["Title"] = "Claims";
}
<h2>@ViewData["Title"].</h2>

<table class="table-hover table-condensed table-striped">
  <tr>
    <th>Claim Type</th>
    <th>Claim Value</th>
  </tr>

  @foreach (Claim claim in User.Claims)
  {
    <tr>
      <td>@claim.Type</td>
      <td>@claim.Value</td>
    </tr>
  }
</table>

在此步驟中，您會新增 Claims 將 Claims.cshtml 檢視連結至 Home 控制器的動作。 動作 Claims 會 Authorize 使用 屬性，以限制對已驗證用戶的動作存取。

在 /Controllers/HomeController.cs 控制器中，新增下列動作：

[Authorize]
public IActionResult Claims()
{
    return View();
}

在 類別的開頭，新增下列 using 宣告：

using Microsoft.AspNetCore.Authorization;

步驟 6：新增應用程式設定

Azure AD B2C 識別提供者設定會儲存在 appsettings.json 檔案中。 開啟 appsettings.json，然後新增下列設定：

"AzureAdB2C": {
  "Instance": "https://<your-tenant-name>.b2clogin.com",
  "ClientId": "<web-app-application-id>",
  "Domain": "<your-b2c-domain>",
  "SignedOutCallbackPath": "/signout-oidc",
  "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
}

必要資訊會在 範例 Web 應用程式設定驗證 一文中說明。 使用下列設定：

• 實例：以 Azure AD B2C <your-tenant-name>的第一個部分取代 （例如 ， https://contoso.b2clogin.com。
• 網域：以您的 Azure AD B2C 完整<your-b2c-domain>取代 （例如 ， contoso.onmicrosoft.com）。
• 用戶端識別碼：將 取代 <web-app-application-id> 為 步驟 2 中的應用程式識別碼。
• 原則名稱：將 取代 <your-sign-up-in-policy> 為您在 步驟 1 中建立的使用者流程。

步驟 7：執行您的應用程式

1. 建置並執行專案。
2. 移至 https://localhost:5001。
3. 選取 [註冊/登入]。
4. 完成註冊或登入程式。

成功驗證之後，您會在導覽列中看到您的顯示名稱。 若要檢視 Azure AD B2C 令牌傳回至應用程式的宣告，請選取 [ 宣告]。

後續步驟

• 了解如何為您的 Web 應用程式自訂和強化 Azure AD B2C 驗證體驗。