Настройка проверки подлинности в примере классического приложения WPF с помощью Azure AD B2C

Статья
01/11/2024

В этой статье на примере классического приложения Windows Presentation Foundation (WPF) показано, как добавить функцию проверки подлинности Azure Active Directory B2C (Azure AD B2C) в классическое приложение.

Обзор

OpenID Connect (OIDC) представляет собой протокол проверки подлинности, основанный на OAuth 2.0. OIDC можно использовать для безопасного входа пользователей в приложение. В этом примере классическое приложение использует библиотеку проверки подлинности Майкрософт (MSAL) с ключом проверки для обмена кодом (PKCE). MSAL — это предоставляемая корпорацией Майкрософт библиотека, которая упрощает добавление функции проверки подлинности и авторизации в классические приложения.

Процесс входа включает следующие шаги:

В приложении пользователи выбирают Вход.
Приложение открывает системный браузер компьютера и запускает запрос на проверку подлинности для Azure AD B2C.
Пользователи выполняют вход или регистрацию, сброс пароля или вход с помощью учетной записи социальной сети.
После входа пользователей Azure AD B2C возвращает приложению код авторизации.
Приложение выполняет следующие действия:
1. Обменивает код авторизации на маркер идентификатора, маркер доступа и маркер обновления.
2. Считывает утверждения маркера идентификатора.
3. Сохраняет маркеры в кэше, размещенном в памяти, для последующего использования.

Обзор регистрации приложений

Чтобы ваше приложение могло входить в систему с использованием Azure AD B2C и совершать вызовы к веб-API, зарегистрируйте два приложения в каталоге Azure AD B2C.

После регистрации классического приложения оно сможет входить в систему с использованием Azure AD B2C. При регистрации приложения укажите URI перенаправления. URI перенаправления — это конечная точка, в которую пользователей перенаправляет служба Azure AD B2C, после того как они прошли проверку с ее помощью. В процессе регистрации приложения создается идентификатор приложения, который также называется идентификатором клиента. Он однозначно идентифицирует классическое приложение (например, идентификатор приложения: 1).
После регистрации веб-API приложение сможет совершать вызовы к защищенному веб-API. После регистрации станут доступны разрешения (области) веб-API. В процессе регистрации приложения система создает идентификатор приложения, с помощью которого можно уникальным образом идентифицировать веб-API (например, идентификатор приложения: 2). Предоставьте своему классическому приложению (с идентификатором приложения 1) разрешения для областей веб-API (с идентификатором приложения 2).

Регистрация и архитектура приложения показаны на следующих схемах:

Diagram of the desktop app with web API, registrations, and tokens.

Вызов веб-API

После завершения проверки подлинности пользователи взаимодействуют с приложением, которое вызывает защищенный веб-API. Этот веб-API использует проверку подлинности посредством маркера носителя. Маркер носителя — это маркер доступа, полученный приложением от Azure AD B2C. Приложение передает маркер в заголовке авторизации HTTPS-запроса.

Authorization: Bearer <access token>

Если область действия токена доступа не соответствует областям веб-API, библиотека аутентификации получает новый токен доступа с правильными областями.

Поток выхода

Поток выхода включает следующие шаги:

В приложении пользователь выполняет выход.
Приложение очищает объекты сеанса, а библиотека проверки подлинности очищает свой кэш маркеров.
Приложение перенаправляет пользователя в конечную точку выхода Azure AD B2C, чтобы завершить сеанс Azure AD B2C.
Пользователи перенаправляются обратно в приложение.

Необходимые компоненты

Компьютер с Visual Studio 2019 и средой разработки .NET для компьютеров.

Шаг 1. Настройка потока пользователя

Если пользователи пытаются войти в приложение, оно инициирует запрос проверки подлинности к конечной точке авторизации через поток пользователя. Соответствующий поток пользователя определяет и контролирует взаимодействие с пользователем. Когда пользователи завершают поток пользователя, Azure AD B2C создает маркер и перенаправляет пользователя обратно в приложение.

Создайте поток пользователя или пользовательскую политику, если вы еще не сделали этого. Повторите эти шаги, чтобы создать три отдельных пользовательских потока:

Объединенный пользовательский поток входа и регистрации, например susi. Этот пользовательский поток также поддерживает функцию Забыли пароль?.
Пользовательский поток редактирования профиля, например edit_profile.
Пользовательский поток сброса пароля, например reset_password.

Azure AD B2C добавляет B2C_1_ в начало имени пользовательского потока. Например, susi преобразуется в B2C_1_susi.

Шаг 2. Регистрация приложения

Создайте классическое приложение и регистрацию приложения веб-API, а также укажете области для своего веб-API.

Шаг 2.1. Регистрация приложения веб-API

Чтобы создать регистрацию приложения веб-API (идентификатор приложения: 2), выполните следующие действия.

Войдите на портал Azure.
Убедитесь, что вы используете каталог, содержащий клиент Azure AD B2C. На панели инструментов портала выберите значок Каталоги и подписки.
В настройках портала на странице Каталоги и подписки найдите свой каталог Azure AD B2C в списке Имя каталога и выберите Переключить.
В портале Azure найдите и выберите Azure AD B2C.
Щелкните Регистрация приложений и выберите Новая регистрация.
В поле Имя введите имя приложения (например, my-api1). Оставьте значения по умолчанию для URI перенаправления и поддерживаемых типов учетных записей.
Выберите Зарегистрировать.
Когда регистрация приложения завершится, выберите Обзор.
Запишите значение идентификатора приложения (клиента) для дальнейшего использования при настройке веб-приложения.

Шаг 2.2. Настройка областей приложения веб-API

Выберите созданное приложение my-api1 (идентификатор приложения: 2), чтобы открыть страницу Обзор.
В разделе Управление выберите Предоставление API.
Рядом с полем URI идентификатора приложения щелкните ссылку Задать. Замените значение по умолчанию (уникальный идентификатор) уникальным именем (например, tasks-api), а затем нажмите Сохранить.

Когда веб-приложение запрашивает маркер доступа для веб-API, оно должно добавить этот URI в качестве префикса для каждой области, определяемой для API.
В разделе Области, определенные этим API выберите Добавление области.
Чтобы создать область, определяющую доступ для чтения к API, сделайте следующее.
1. В поле Имя области введите tasks.read.
2. В качестве отображаемого имени согласия администратора укажите Доступ на чтение к API задач.
3. В качестве описания согласия администратора введите Предоставляет доступ на чтение к API задач.
Выберите Добавить область.
Выберите Добавить область и добавьте область, определяющую доступ для записи к API:
1. В поле Имя области введите tasks.write.
2. В качестве отображаемого имени согласия администратора укажите Доступ на запись к API задач.
3. В качестве описания согласия администратора введите Предоставляет доступ на запись к API задач.
Выберите Добавить область.

Шаг 2.3. Регистрация классического приложения

Чтобы создать регистрацию веб-приложения, сделайте следующее:

Войдите на портал Azure.
Щелкните Регистрация приложений и выберите Новая регистрация.
В поле Имя введите имя приложения (например, desktop-app1).
В области Поддерживаемые типы учетных записей выберите Учетные записи в любом поставщике удостоверений или в организационном каталоге (для аутентификации пользователей с помощью потока пользователей).
В разделе URL-адрес перенаправления щелкните Общедоступный клиент / собственный (классический и классический), а затем введите https://your-tenant-name.b2clogin.com/oauth2/nativeclient. Замените your-tenant-name именем своего клиента. Сведения о дополнительных возможностях см. в разделе Настройка URI перенаправления.
Выберите Зарегистрировать.
Когда регистрация приложения завершится, выберите Обзор.
Запишите значение параметра Идентификатор приложения (клиента) для использования на более позднем этапе при настройке классического приложения.

Шаг 2.4. Предоставление классическому приложению разрешений на доступ к веб-API

Чтобы предоставить своему приложению (идентификатор приложения: 1) разрешения, выполните следующие действия.

Выберите Регистрация приложений, а затем выберите созданное вами приложение (идентификатор приложения: 1).
В разделе Управление выберите Разрешения API.
В разделе Настроенные разрешения выберите Добавить разрешение.
Выберите вкладку Мои API.
Выберите API (идентификатор приложения: 2), к которому веб-приложению должен быть предоставлен доступ. Например, введите my-api1.
В разделе Разрешение разверните узел tasks, а затем выберите определенные ранее области (например, tasks.read и tasks.write).
Выберите Добавить разрешения.
Выберите Предоставить согласие администратора для <имя арендатора>.
Выберите Да.
Выберите Обновить, а затем убедитесь, что Разрешено для... отображается в разделе Состояние для обеих областей.
В списке настроенных разрешений выберите свою область, а затем скопируйте полное имя области.

Шаг 3. Настройка примера веб-API

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

Используйте существующий веб-API или создайте его. Дополнительные сведения см. в статье Включение проверки подлинности в собственном веб-API с использованием Azure AD B2C.
После настройки веб-API скопируйте URI конечной точки веб-API. Вы будете использовать конечную точку веб-API на следующих этапах.

Совет

Если у вас нет веб-API, вы все равно можете использовать этот пример. В этом случае приложение будет возвращать маркер доступа, но не сможет совершить вызов к веб-API.

Шаг 4. Пример получения классического приложения WPF

Скачайте ZIP-файл или клонируйте пример веб-приложения из репозитория GitHub.
```
git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-desktop.git
```
Откройте решение active-directory-b2c-wpf (файл active-directory-b2c-wpf. sln ) в Visual Studio.

Шаг 5. Настройка примера классического приложения

В проекте active-directory-b2c-wpf откройте файл App.xaml.cs. Элементы класса App.xaml.cs содержат сведения об используемом вами поставщике удостоверений Azure AD B2C. Классическое приложение использует эти сведения для установления отношений доверия с Azure AD B2C, выполнения входа и выхода пользователя, получения маркеров и их проверки.

Обновите следующие элементы класса:

Ключ	Значение
`TenantName`	Первая часть имени клиента Azure AD B2C (например, `contoso.b2clogin.com`).
`ClientId`	Идентификатор классического приложения из шага 2.3.
`PolicySignUpSignIn`	Поток регистрации пользователя или его входа в систему либо пользовательская политика, созданная на шаге 1.
`PolicyEditProfile`	Поток изменения профиля пользователя или пользовательская политика, созданная на шаге 1.
`ApiEndpoint`	(Необязательно) Конечная точка веб-API, созданная на шаге 3 (например, `https://contoso.azurewebsites.net/hello`).
`ApiScopes`	Области веб-API, созданные на шаге 2.4.

В окончательной версии файла App.xaml.cs должен быть приведенный ниже код на языке C#.

public partial class App : Application
{

private static readonly string TenantName = "contoso";
private static readonly string Tenant = $"{TenantName}.onmicrosoft.com";
private static readonly string AzureAdB2CHostname = $"{TenantName}.b2clogin.com";
private static readonly string ClientId = "<web-api-app-application-id>";
private static readonly string RedirectUri = $"https://{TenantName}.b2clogin.com/oauth2/nativeclient";

public static string PolicySignUpSignIn = "b2c_1_susi";
public static string PolicyEditProfile = "b2c_1_edit_profile";
public static string PolicyResetPassword = "b2c_1_reset";

public static string[] ApiScopes = { $"https://{Tenant}//api/tasks.read" };
public static string ApiEndpoint = "https://contoso.azurewebsites.net/hello";

Шаг 6. Запуск и тестирование классического приложения

Восстановите пакеты NuGet.
Нажмите F5, чтобы выполнить сборку и запустить пример.
Выберите Войти, затем зарегистрируйтесь или войдите в систему с помощью локальной учетной записи Azure AD B2C или учетной записи социальной сети.
После регистрации или входа в систему сведения о маркере отображаются в нижней части приложения WPF.
Выберите Вызвать API для соответствующего действия с веб-API.

Следующие шаги

Узнайте, как настроить способы проверки подлинности в классическом приложении WPF с помощью Azure AD B2C.