使用 Azure AD B2C 在自己的 Web 应用中启用身份验证

2025-05-08

重要

自 2025 年 5 月 1 日起，Azure AD B2C 将不再可供新客户购买。在我们的常见问题解答中了解详细信息。

本文介绍如何将 Azure Active Directory B2C （Azure AD B2C）身份验证添加到自己的 ASP.NET Web 应用程序。了解如何使用 ASP.NET Core 中间件创建使用 OpenID Connect 协议的 ASP.NET Core Web 应用程序。

将本文与示例 Web 应用中的“配置身份验证”结合使用，将示例 Web 应用替换为你自己的 Web 应用。

先决条件

若要查看先决条件和集成说明，请参阅在示例 Web 应用程序中配置身份验证。

步骤 1：创建 Web 应用项目

可以使用现有的 ASP.NET 模型视图控制器（MVC）Web 应用项目或创建新项目。若要创建新项目，请打开命令行界面，然后输入以下命令：

dotnet new mvc -o mywebapp

上述命令执行以下作：

它创建新的 MVC Web 应用。
该 -o mywebapp 参数使用应用的源文件创建名为 mywebapp 的目录。

步骤 2：添加身份验证库

添加Microsoft标识 Web 库，这是一组 ASP.NET 核心库，可简化向 Web 应用添加 Azure AD B2C 身份验证和授权支持。 Microsoft标识 Web 库使用基于 Cookie 的身份验证设置身份验证管道。它负责发送和接收 HTTP 身份验证消息、令牌验证、声明提取等。

若要添加Microsoft标识 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标识 Web 中间件使用在托管进程启动时运行的启动类。在此步骤中，添加必要的代码来启动身份验证库。

打开 Startup.cs，然后在类的开头添加以下声明：

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：添加声明视图

若要查看 ID 令牌声明，请在 /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 视图链接到主控制器的作。该 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）。
客户端 ID：替换为<web-app-application-id>步骤 2 中的应用程序 ID。
策略名称：替换为<your-sign-up-in-policy>在步骤 1 中创建的用户流。

步骤 7：运行应用程序

生成并运行该项目。
转到 https://localhost:5001 。
选择 “注册/登录”。
完成注册或登录过程。

成功进行身份验证后，将在导航栏中看到显示名称。若要查看 Azure AD B2C 令牌返回到应用的声明，请选择 “声明”。

后续步骤

了解如何自定义和增强 Web 应用的 Azure AD B2C 身份验证体验.

通过