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

發行項
01/11/2024

此文章說明如何將 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 身分識別 Web 程式庫，這是一組 ASP.NET Core 程式庫，可簡化將 Azure AD B2C 驗證和授權支援新增至 Web 應用程式的過程。 Microsoft Identity Web 程式庫會使用 Cookie 型驗證來設定驗證管線。它會負責傳送和接收 HTTP 驗證訊息、權杖驗證、宣告擷取等等。

若要新增 Microsoft Identity Web 程式庫，請執行下列命令以安裝套件：

Visual Studio
Visual Studio Code

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

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 Identity 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.cshtml 檢視連結至主要控制器的 Claims 動作。 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 應用程式中設定驗證一文。套用下列設定：

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

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

建置並執行專案。
移至 https://localhost:5001。
選取 [註冊/登入]。
完成註冊或登入流程。

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

後續步驟

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

共用方式為