Быстрый старт — изменение профиля в образце веб-приложения Node.js

2025-03-26

применяется к: белый круг с серым символом X. арендаторы рабочей силы зеленый круг с символом белой галочки. внешние клиенты (подробнее)

В этом кратком руководстве вы используете пример веб-приложения Node.js, чтобы узнать, как добавить вход и редактировать профиль в веб-приложении. Пример веб-приложения использует библиотеку проверки подлинности Майкрософт для узла (MSAL Node) и API Microsoft Graph для выполнения операции входа и изменения профиля. Операция редактирования профиля требует, чтобы пользователь выполнил многофакторную проверку подлинности (MFA).

Необходимые условия

Выполните шаги и предварительные требования в статье "Быстрое руководство: Вход пользователей в пример веб-приложения". В этом кратком руководстве показано, как выполнить вход пользователей с помощью примера веб-приложения Node.js.
Зарегистрируйте новое приложение для веб-API в Центре администрирования Microsoft Entra с именем edit-profile-service, настроенным только для учетных записей в этом каталоге организации. Дополнительные сведения см. в статье "Регистрация приложения ". Запишите следующие значения на странице обзора приложения для последующего использования:
- Идентификатор приложения (клиента)
- Идентификатор каталога (арендатора)
Добавьте секрет клиента в регистрацию приложения. Не используйте секреты клиента в рабочих приложениях. Вместо этого используйте сертификаты или федеративные учетные данные. Дополнительные сведения см. в статье о добавлении учетных данных в приложение.

Настройка областей и ролей API

Регистрируя веб-API, необходимо настроить области API, чтобы определить разрешения, которые клиентское приложение может запрашивать для доступа к веб-API. Кроме того, необходимо настроить роли приложения, чтобы указать роли, доступные для пользователей или приложений, и предоставить необходимые разрешения API веб-приложению, чтобы позволить ему вызывать веб-API.

Настройка областей API приложения EditProfileService

Приложению EditProfileService необходимо предоставить разрешения, которые клиентское приложение получает для вызова веб-API.

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

На странице регистрации приложений выберите созданное приложение API (например, edit-profile-service), чтобы открыть страницу Общие сведения.
В разделе Управлениевыберите Открыть доступ кAPI.
В верхней части страницы рядом с URI идентификатора приложениявыберите ссылку Добавить, чтобы создать уникальный URI для этого приложения.
Примите предлагаемый URI идентификатора приложения, например api://{clientId}, и выберите Сохранить. Когда веб-приложение запрашивает маркер доступа для веб-API, он добавляет URI в качестве префикса для каждой области, определяемой для API.
В разделе Области, определенные этим API, выберите Добавить область.

Введите следующие значения, определяющие доступ для чтения к API, а затем выберите Добавить область, чтобы сохранить изменения:

Свойство	Ценность
Имя области	EditProfileService.ReadWrite
Кто может согласиться	только администраторы
Отображаемое имя для согласия администратора	клиент редактирует профиль через службу редактирования профиля
Описание согласия администратора	Область, позволяющая клиентскому веб-приложению изменять профиль с помощью вызова службы редактирования.
Государство	включено

Предоставьте разрешение User.ReadWrite приложению EditProfileService

User.ReadWrite — это разрешение API Microsoft Graph, позволяющее пользователю обновлять свой профиль. Чтобы предоставить User.ReadWrite разрешение на приложение EditProfileService, выполните следующие действия.

На странице регистраций приложений выберите созданное приложение (например, сервис редактирования профиля), чтобы открыть страницу Общая информация.
В разделе Управлениевыберите разрешения API.
Перейдите на вкладку API Майкрософт, а затем в разделе Часто используемые API Майкрософтвыберите Microsoft Graph.
Выберите делегированные разрешения, а затем найдите и выберите User.ReadWrite из списка разрешений.
Нажмите кнопку Добавить разрешения.
Вы правильно назначили разрешения User.ReadWrite для вашего приложения EditProfileService. Однако, поскольку клиент является внешним клиентом, сами пользователи клиента не могут согласиться с этими разрешениями. Администратор клиента должен предоставить это разрешение от имени всех пользователей в клиенте:
1. Выберите предоставить администраторское согласие для <вашего клиента>, затем выберите Да.
2. Выберите Обновить, а затем убедитесь, что Предоставлено для <имя арендатора> отображается в разделе Состояние для обеих областей.

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

В этом разделе вы предоставляете разрешения API для веб-приложения клиента, зарегистрированного ранее (в предварительных условиях).

Предоставьте клиентскому веб-приложению разрешение EditProfileService.ReadWrite. Это разрешение предоставляется приложением EditProfileService и защищает операцию обновления профиля многофакторной аутентификацией. Чтобы предоставить EditProfileService.ReadWrite разрешение клиентскому веб-приложению, выполните следующие действия.

На странице регистрации приложений выберите созданное вами приложение API (например, ciam-client-app), чтобы открыть страницу Обзор.
В разделе Управлениевыберите разрешения API.
На вкладке Настроенные разрешениявыберите Добавить разрешение.
Выберите вкладку с API, которые использует моя организация.
В списке API выберите API, например edit-profile-service.
Выберите Делегированные разрешения.
В списке разрешений выберите EditProfileService.ReadWrite.
Нажмите кнопку Добавить разрешения.
В списке настроенных разрешений выберите разрешение EditProfileService.ReadWrite, а затем скопируйте полный URI разрешения для последующего использования. Полный URI разрешений выглядит примерно так, как api://{clientId}/{EditProfileService.ReadWrite}.
Вы правильно назначили разрешения *EditProfileService.ReadWrite для клиентского веб-приложения. Однако, поскольку клиент является внешним клиентом, сами пользователи клиента не могут согласиться с этими разрешениями. Администратор клиента должен предоставить это разрешение от имени всех пользователей в клиенте:
1. Выберите предоставить администраторское согласие для <вашего клиента>, затем выберите Да.
2. Выберите Обновить, а затем убедитесь, что Предоставлено для <имя арендатора> отображается в разделе Состояние для обеих областей.

Создайте политику MFA условного доступа

Приложение EditProfileService, зарегистрированное ранее, является ресурсом, который вы защищаете с помощью MFA.

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

Для названия используйте политику MFA.
Для целевых ресурсов выберите приложение EditProfileService, зарегистрированное ранее, например edit-profile-service.

Клонирование или скачивание примера веб-приложения

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

Скачайте файл .zip или клонируйте пример веб-приложения из GitHub, выполнив следующую команду:

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

Настройка примера веб-приложения

Этот пример кода содержит два приложения, клиентское веб-приложение и приложение API (приложение EditProfileService). Эти приложения необходимо обновить, чтобы использовать параметры внешнего клиента. Для этого выполните следующие действия.

В редакторе кода откройте файл 1-Authentication\7-edit-profile-with-mfa-express\App\authConfig.js, а затем найдите заполнитель:
- Enter_the_Application_Id_Here и замените его идентификатором приложения (клиента) клиентского веб-приложения, зарегистрированного ранее.
- Enter_the_Tenant_Subdomain_Here и замените его на поддомен каталога (домен клиента). Например, если основной домен клиента contoso.onmicrosoft.com, используйте contoso. Если у вас нет имени арендатора, узнайте, как просматривать сведения о арендаторе.
- Enter_the_Client_Secret_Here и замените его значением секрета приложения клиентского веб-приложения, скопированного ранее.
- graph_end_point и замените его конечной точкой API Microsoft Graph, https://graph.microsoft.com/.
- Замените Add_your_protected_scope_here областью действия приложения API (приложением EditProfileService). Значение выглядит примерно так, как api://{clientId}/EditProfileService.ReadWrite. {clientId} — это значение идентификатора приложения (клиента), зарегистрированного ранее в EditProfileService .
В редакторе кода откройте файл 1-Authentication\7-edit-profile-with-mfa-express\Api\authConfig.js, а затем найдите заполнитель:
- Enter_the_Tenant_Subdomain_Here и замените его поддоменом каталога (клиента). Например, если основной домен клиента contoso.onmicrosoft.com, используйте contoso. Если у вас нет имени арендатора, узнайте, как просматривать сведения о арендаторе.
- Enter_the_Tenant_ID_Here и замените его идентификатором арендатора. Если у вас нет идентификатора арендатора, узнайте, как прочитать сведения об арендаторе.
- Enter_the_Edit_Profile_Service_Application_Id_Here и замените его значением идентификатора приложения (клиента) приложения EditProfileService .
- Enter_the_Client_Secret_Here и замените его на значение секрета клиента, созданного в процессе выполнения предварительных требований.
- graph_end_point и замените его конечной точкой API Microsoft Graph, https://graph.microsoft.com/.

Установка зависимостей проекта и запуск приложения

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

Чтобы запустить клиентское приложение, откройте окно терминала и выполните следующие команды:
```
cd 1-Authentication\7-edit-profile-with-mfa-express\App
npm install
npm start
```
Чтобы запустить приложение редактирования службы/API, перейдите в каталог с приложением редактирования API 1-Authentication\7-edit-profile-with-mfa-express\Api, а затем выполните следующие команды:
```
npm install
npm start
```
Откройте браузер, а затем перейдите к http://localhost:3000. Если возникают ошибки SSL-сертификата, создайте файл .env, добавьте следующую конфигурацию:
```
# Use this variable only in the development environment. 
# Remove the variable when you move the app to the production environment.
NODE_TLS_REJECT_UNAUTHORIZED='0'
```
Нажмите кнопку Войти, чтобы войти.
На странице входа введите адрес электронной почты, выберите Далее, введите пароль, а затем выберите Войти. Если у вас нет учетной записи, выберите Нет учетной записи? Создайте одну ссылку, которая запускает поток регистрации.
Чтобы обновить профиль, выберите ссылку редактирования профиля. Вы увидите страницу, аналогичную следующему снимку экрана:
Чтобы изменить профиль, нажмите кнопку Изменить профиль. Если вы еще этого не сделали, приложение предложит выполнить задачу MFA.
Внесите изменения в любые сведения о профиле, а затем нажмите кнопку "Сохранить".

Узнайте, как добавить редактирование профиля в собственное Node.js веб-приложение.