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

Статья
01/11/2024

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

Обзор

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

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

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

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

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

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

На следующей схеме представлена регистрация и архитектура приложения.

Diagram that describes a single-page application with web A P I, registrations, and tokens.

Вызов веб-API

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

Authorization: Bearer <access token>

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

Поток выхода

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

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

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

Перед выполнением процедур, описанных в этой статье, убедитесь, что на компьютере запущены такие компоненты:

Visual Studio Code или любой другой редактор кода.
Среда выполнения Node.js и npm.
Angular CLI.

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

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

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

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

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

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

На этом шаге вы создадите регистрацию для одностраничного приложения Angular и приложения веб-API. Вы также укажете области своего веб-API.

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

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

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

2.2. Настройка областей

Выберите созданное приложение 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 Регистрация приложения Angular

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

Войдите на портал Azure.
Если у вас есть доступ к нескольким клиентам, выберите значок Параметры в верхнем меню, чтобы переключиться на клиент Azure AD B2C из меню каталогов и подписок.
В портале Azure найдите и выберите Azure AD B2C.
Щелкните Регистрация приложений и выберите Новая регистрация.
Введите имя приложения (например, MyApp).
В области Поддерживаемые типы учетных записей выберите Учетные записи в любом поставщике удостоверений или в организационном каталоге (для аутентификации пользователей с помощью потока пользователей).
В разделе URI перенаправления выберите Одностраничное приложение (SPA), а затем введите http://localhost:4200 в поле URL-адреса.
В разделе Разрешения установите флажок Предоставьте согласие администратора для разрешений openid и offline_access.
Выберите Зарегистрировать.
Запишите значение параметра Идентификатор приложения (клиент): он понадобится вам на одном из следующих этапов при настройке веб-приложения.

2.5. Предоставление разрешений

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

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

Шаг 3. Получение примера кода приложения Angular

В этом примере показано, как использовать Azure AD B2C в одностраничном приложении Angular для регистрации и входа пользователя. Затем приложение получает маркер доступа и выполняет вызов к защищенному веб-API.

Скачайте ZIP-файл примера или скопируйте пример из репозитория GitHub с помощью следующей команды:

git clone https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial.git

3.1 Настройка примера приложения Angular

После скачивания примера одностраничного приложения обновите код, используя свои значения Azure AD B2C и веб-API. В папке примера в подпапке src/app откройте файл auth-config.ts. Измените ключи, указав соответствующие значения:

Раздел	Ключ	Значение
b2cPolicies	Имена	Поток пользователя или настраиваемая политика из шага 1.
b2cPolicies	authorities	Замените `your-tenant-name` именем своего клиента Azure AD B2C. Например, укажите `contoso.onmicrosoft.com`. Затем замените имя политики на пользовательский поток или пользовательскую политику, которые вы создали на шаге 1. Например: `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>`.
b2cPolicies	authorityDomain	Имя вашего клиента Azure AD B2C. Например: `contoso.onmicrosoft.com`.
Настройка	clientId	Идентификатор приложения Angular из шага 2.3.
protectedResources	конечная точка	URL-адрес веб-API — `http://localhost:5000/api/todolist`.
protectedResources	Области	Области веб-API, созданные вами на шаге 2.2. Например: `b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/tasks-api/tasks.read"]`.

Итоговый код в файле src/app/auth-config.ts должен выглядеть так, как в следующем примере:

export const b2cPolicies = {
     names: {
         signUpSignIn: "b2c_1_susi_reset_v2",
         editProfile: "b2c_1_edit_profile_v2"
     },
     authorities: {
         signUpSignIn: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi_reset_v2",
         },
         editProfile: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile_v2"
         }
     },
     authorityDomain: "your-tenant-name.b2clogin.com"
 };
 
 
export const msalConfig: Configuration = {
     auth: {
         clientId: '<your-MyApp-application-ID>',
         authority: b2cPolicies.authorities.signUpSignIn.authority,
         knownAuthorities: [b2cPolicies.authorityDomain],
         redirectUri: '/', 
     },
    // More configuration here
 }

export const protectedResources = {
  todoListApi: {
    endpoint: "http://localhost:5000/api/todolist",
    scopes: ["https://your-tenant-namee.onmicrosoft.com/api/tasks.read"],
  },
}

Шаг 4. Получение примера кода веб-API

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

Скачайте ZIP-архив или клонируйте пример проекта веб-API с GitHub. Вы также можете перейти непосредственно к проекту Azure-Samples/active-directory-b2c-javascript-nodejs-webapi на сайте GitHub с помощью следующей команды:

git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git

4.1 Настройка веб-API

Откройте файл config.json из папки с примером. Он содержит сведения о поставщике удостоверений Azure AD B2C. Приложение веб-API использует эти сведения для проверки маркера доступа, который передает веб-приложение в качестве маркера носителя. Обновите следующие свойства параметров приложения:

Раздел	Ключ	Значение
учетные данные	tenantName	Первая часть имени клиента Azure AD B2C. Например: `contoso`.
учетные данные	clientID	Идентификатор приложения веб-API из шага 2.1. На предыдущей схеме это приложение с идентификатором 2.
учетные данные	Издатель	(Необязательно) Значение утверждения `iss` издателя маркера. По умолчанию Azure AD B2C возвращает маркер в следующем формате: `https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/`. Замените `<your-tenant-name>` первой частью имени клиента Azure AD B2C. Замените `<your-tenant-ID>`идентификатором своего клиента Azure AD B2C.
политики	policyName	Поток пользователя или настраиваемая политика из шага 1. Если приложение использует несколько пользовательских потоков или пользовательских политик, укажите только один поток или одну политику. Например, используйте поток пользователя для регистрации или входа в систему.
resource	область	Области регистрации приложения веб-API с шага 2.5.

Итоговый файл конфигурации должен выглядеть как следующий файл JSON:

{
    "credentials": {
        "tenantName": "<your-tenant-namee>",
        "clientID": "<your-webapi-application-ID>",
        "issuer": "https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/"
    },
    "policies": {
        "policyName": "b2c_1_susi"
    },
    "resource": {
        "scope": ["tasks.read"] 
    },
    // More settings here
}

Шаг 5. Запуск одностраничного приложения Angular и веб-API

Теперь вы готовы протестировать доступ приложения Angular к API с ограниченный областью действия. На этом шаге запустите веб-API и пример приложения Angular на локальном компьютере. Затем войдите в приложение Angular и нажмите кнопку Список задач, чтобы запустить запрос к защищенному API.

Запуск веб-API

Откройте окно консоли и перейдите в каталог, содержащий пример веб-API. Например:
```
cd active-directory-b2c-javascript-nodejs-webapi
```
Выполните следующие команды:
```
npm install && npm update
node index.js
```
В окне консоли отобразится номер порта, на котором размещено приложение.
```
Listening on port 5000...
```

Запуск приложения Angular

Откройте еще одно окно консоли и перейдите в каталог, содержащий пример Angular. Например:
```
cd ms-identity-javascript-angular-tutorial-main/3-Authorization-II/2-call-api-b2c/SPA
```
Выполните следующие команды:
```
npm install && npm update
npm start
```
В окне консоли отобразится номер порта, связанный с размещаемым приложением.
```
Listening on port 4200...
```
Перейдите к http://localhost:4200 в браузере для просмотра приложения.
Выберите Войти.
Завершите процесс регистрации или входа в систему.
После успешного входа вы увидите свой профиль. Выберите пункт Список задач в меню.
Выберите Добавить, чтобы добавить новые элементы в список, или используйте значки для удаления и правки элементов.

Развертывание приложения

В рабочем приложении URI перенаправления регистрации приложения — это обычно общедоступная конечная точка, где выполняется приложение, например https://contoso.com.

URI перенаправления в зарегистрированных приложениях можно добавлять и изменять в любое время. На URI перенаправления налагаются следующие ограничения.

URL-адрес ответа должен начинаться со схемы https.
В URL-адресе ответа учитывается регистр. Его регистр должен соответствовать регистру URL-пути выполняющегося приложения.

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

Обзор

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

Вызов веб-API

Поток выхода

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

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

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

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

2.2. Настройка областей

2.3 Регистрация приложения Angular

2.5. Предоставление разрешений

Шаг 3. Получение примера кода приложения Angular

3.1 Настройка примера приложения Angular

Шаг 4. Получение примера кода веб-API

4.1 Настройка веб-API

Шаг 5. Запуск одностраничного приложения Angular и веб-API

Запуск веб-API

Запуск приложения Angular

Развертывание приложения

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

Дополнительные ресурсы

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

Обзор

Поток входа в систему

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

Вызов веб-API

Поток выхода

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

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

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

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

2.2. Настройка областей

2.3 Регистрация приложения Angular

2.5. Предоставление разрешений

Шаг 3. Получение примера кода приложения Angular

3.1 Настройка примера приложения Angular

Шаг 4. Получение примера кода веб-API

4.1 Настройка веб-API

Шаг 5. Запуск одностраничного приложения Angular и веб-API

Запуск веб-API

Запуск приложения Angular

Развертывание приложения

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

Дополнительные ресурсы