Включение проверки подлинности в собственном веб-API с помощью Azure AD B2C

Статья
01/11/2024

В этой статье показано, как добавить проверку подлинности Azure Active Directory B2C (Azure AD B2C) в собственное веб-приложение ASP.NET. Сведения о создании веб-приложения ASP.NET Core с помощью ПО промежуточного слоя ASP.NET Core, использующего протокол OpenID Connect.

Используйте эту статью вместе с настройкой проверки подлинности в примере веб-приложения, заменив веб-приложение из примера собственным веб-приложением.

Предварительные требования

Ознакомьтесь с предварительными требованиями и инструкциями по интеграции в статье Настройка проверки подлинности в примере веб-приложения.

Шаг 1. Создание проекта веб-приложения

Вы можете использовать существующий проект веб-приложения ASP.NET MVC или создать новый. Чтобы создать новый проект, откройте командную оболочку и введите следующую команду:

dotnet new mvc -o mywebapp

Предыдущая команда выполняет указанные ниже действия.

Создает новое веб-приложение MVC.
Параметр -o mywebapp используется для создания каталога mywebapp с исходными файлами приложения.

Шаг 2. Добавление библиотек проверки подлинности

Добавьте библиотеку Microsoft Identity Web. Это набор библиотек ASP.NET Core, которые упрощают процесс добавления проверки подлинности Azure AD B2C и авторизации в веб-приложение. Библиотека 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, выполняемый при запуске процесса размещения. На этом шаге потребуется добавить необходимый код для запуска библиотек проверки подлинности.

Откройте 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 для защиты веб-приложения, следующий код задает параметры cookie SameSite. Затем происходит считывание параметров приложения 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://video2.skills-academy.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. Добавление элементов пользовательского интерфейса

Чтобы добавить элементы пользовательского интерфейса, используйте частичное представление, которое содержит логику для проверки того, был ли выполнен вход пользователями. Если пользователи не выполнили вход, в частичном представлении отображается кнопка входа. В противном случае отображаются имя пользователя и кнопка выхода.

Создайте файл _LoginPartial.cshtml в папке/Views/Shared с таким фрагментом кода:

@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 и того, был ли добавлен вход в существующее приложение, элементы пользовательского интерфейса могут выглядеть иначе. В этом случае обязательно включите файл _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>"
}

Необходимые сведения описаны в статье Настройка проверки подлинности в примере веб-приложения. Используйте следующие параметры:

Экземпляр — замените <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 в приложение, выберите Утверждения.

Дальнейшие действия

Узнайте, как настроить и усовершенствовать процедуру проверки подлинности Azure AD B2C для веб-приложения.

Поделиться через