Вход пользователей в примере веб-приложения Node.js

Статья
06/24/2023

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

Ниже перечислены действия, которые вы выполните в этой статье.

Зарегистрируйте веб-приложение в Центре администрирования Microsoft Entra.
Создайте поток пользователя для входа и выхода в центре администрирования Microsoft Entra.
Свяжите веб-приложение с потоком пользователя.
Обновите пример веб-приложения Node.js, используя собственный идентификатор Microsoft Entra для сведений о клиенте клиентов.
Запустите и протестируйте пример веб-приложения.

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

Node.js.
Visual Studio Code или любой другой редактор кода.
Microsoft Entra идентификатор клиента клиентов. Если у вас ее еще нет, зарегистрируйтесь для получения бесплатной пробной версии.

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

Чтобы разрешить приложению выполнять вход пользователей с помощью Microsoft Entra, Microsoft Entra идентификатор для клиентов должен быть осведомлен о создаваемом приложении. Регистрация приложения устанавливает отношение доверия между приложением и Microsoft Entra. При регистрации приложения внешний идентификатор создает уникальный идентификатор, известный как идентификатор приложения (клиента), значение, используемое для идентификации приложения при создании запросов на проверку подлинности.

Ниже показано, как зарегистрировать приложение в Центре администрирования Microsoft Entra.

Войдите в Центр администрирования Microsoft Entra как минимум от имени разработчика приложений.
Если у вас есть доступ к нескольким клиентам, используйте фильтр Каталоги и подписки в верхнем меню, чтобы переключиться на клиент клиента.
ВыберитеПриложения>удостоверений>Регистрация приложений.
Выберите + Создать регистрацию.
На странице Регистрация приложения , которая отображается;
1. Введите понятное имя приложения, которое отображается для пользователей приложения, например ciam-client-app.
2. В разделе Поддерживаемые типы учетных записей выберите Учетные записи только в этом каталоге организации.
Выберите Зарегистрировать.
Панель обзор приложения отображается после успешной регистрации. Запишите идентификатор приложения (клиента), который будет использоваться в исходном коде приложения.

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

В разделе Управление выберите Проверка подлинности.
На странице Конфигурации платформы выберите Добавить платформу, а затем выберите Веб-параметр .
В поле URI перенаправления введите http://localhost:3000/auth/redirect
Выберите Настроить , чтобы сохранить изменения.
На странице Конфигурации платформы в разделе Интернет выберите Добавить URI, а затем введите http://localhost:3000/
Выберите Сохранить , чтобы сохранить изменения, и убедитесь, что в списке указаны оба URI.

Добавление секрета клиента приложения

Создайте секрет клиента для зарегистрированного приложения. Приложение использует секрет клиента, чтобы подтвердить свое удостоверение при запросе маркеров.

На странице Регистрация приложений выберите созданное приложение (например, ciam-client-app), чтобы открыть его страницу Обзор.
В разделе Управление выберите Сертификаты и секреты.
Выберите Создать секрет клиента.
В поле Описание введите описание секрета клиента (например, секрет клиента приложения ciam).
В разделе Срок действия выберите срок действия секрета (в соответствии с правилами безопасности организации), а затем нажмите кнопку Добавить.
Запишите значение секрета в поле Значение. Это значение будет использовано позже для конфигурации.

Примечание

Значение секрета больше не будет отображаться и не будет извлечено каким-либо образом после перехода со страницы Сертификаты и секреты , поэтому убедитесь, что вы запишите его.
Для повышения безопасности рекомендуется использовать сертификаты вместо секретов клиента.

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

Так как пользователи этого приложения для входа в приложение, добавьте делегированные разрешения:

На странице Регистрация приложений выберите созданное приложение (например, ciam-client-app), чтобы открыть его страницу Обзор.
В разделе Управление выберите Разрешения API.
В разделе Настроенные разрешения выберите Добавить разрешение.
Выберите вкладку API Майкрософт .
В разделе Часто используемые API Майкрософт выберите Microsoft Graph.
Выберите Параметр Делегированные разрешения .
В разделе Выбор разрешений найдите и выберите разрешения openid и offline_access .
Нажмите кнопку Add permissions (Добавить разрешения).
На этом этапе разрешения назначены правильно. Однако, так как клиент является клиентом клиента, пользователи-потребители сами не могут согласиться на эти разрешения. Администратор должен предоставить согласие на эти разрешения от имени всех пользователей в клиенте:
1. Выберите Предоставить согласие администратора для <имени> клиента, а затем выберите Да.
2. Выберите Обновить, а затем убедитесь, что в разделе Состояние для обеих областей отображается значение Предоставлено для <имени> клиента.

Создание потока пользователей

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

Войдите в Центр администрирования Microsoft Entra как минимум администратор потока пользователей с внешним идентификатором.
Если у вас есть доступ к нескольким клиентам, используйте фильтр Каталоги и подписки в верхнем меню, чтобы переключиться на клиент клиента.
Перейдите к удостоверению>Внешние удостоверения Потоки>пользователей.
Выберите + Новый поток пользователя.
На странице Создание :
1. Введите имя потока пользователя, например SignInSignUpSample.
2. В списке Поставщики удостоверений выберите Email Учетные записи. Этот поставщик удостоверений позволяет пользователям выполнять вход или регистрацию с помощью адреса электронной почты.
  
  Примечание
  
  Дополнительные поставщики удостоверений будут перечислены здесь только после настройки федерации с ними. Например, если вы настроили федерацию с Google или Facebook, вы сможете выбрать этих дополнительных поставщиков удостоверений здесь.
3. В разделе Email учетные записи можно выбрать один из двух вариантов. В этом руководстве выберите Email с паролем.
  - Email с паролем. Позволяет новым пользователям зарегистрироваться и входить в систему, используя адрес электронной почты в качестве имени для входа и пароль в качестве учетных данных первого фактора.
  - Email одноразовый секретный код. Позволяет новым пользователям зарегистрироваться и войти в систему, используя адрес электронной почты в качестве имени для входа и одноразовый секретный код электронной почты в качестве учетных данных первого фактора.
    
    Примечание
    
    Email на уровне клиента должен быть включен одноразовый секретный код (Все поставщики> удостоверений Email Одноразовый секретный код), чтобы этот параметр был доступен на уровне потока пользователя.
4. В разделе Атрибуты пользователя выберите атрибуты, которые вы хотите получить у пользователя при регистрации. Выбрав Показать больше, можно выбрать атрибуты и утверждения для страны или региона, отображаемого имени и почтового индекса. Щелкните ОК. (Пользователям предлагается ввести атрибуты только при первой регистрации.)
Нажмите кнопку создания. Новый поток пользователя появится в списке Потоки пользователей. Если потребуется, обновите страницу.

Чтобы включить самостоятельный сброс пароля, выполните действия, описанные в статье Включение самостоятельного сброса пароля .

Связывание веб-приложения с потоком пользователя

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

В меню боковой панели выберите Удостоверение.
Выберите Внешние удостоверения, а затем — Потоки пользователей.
На странице Потоки пользователей выберите созданное ранее имя потока пользователя , например SignInSignUpSample.
В разделе Использовать выберите Приложения.
Щелкните Добавить приложение.
Выберите приложение из списка, например ciam-client-app , или используйте поле поиска, чтобы найти приложение, а затем выберите его.
Щелкните Выбрать.

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

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

Скачайте файл .zip или клонируйте пример веб-приложения из GitHub, выполнив следующую команду:
```
    git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git
```

Если вы решили скачать файл.zip , извлеките пример файла приложения в папку, в которой общая длина пути составляет 260 символов или меньше.

Установка зависимостей проекта

Откройте окно консоли и перейдите в каталог, содержащий Node.js пример приложения:
```
    cd 1-Authentication\5-sign-in-express\App
```
Для установки зависимостей приложения выполните следующие команды:
```
    npm install && npm update
```

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

В редакторе кода откройте App\authConfig.js файл.
Найдите заполнитель:
1. Enter_the_Application_Id_Here и замените его идентификатором приложения (клиента), зарегистрированного ранее.
2. Enter_the_Tenant_Subdomain_Here и замените его поддоменом каталога (клиента). Например, если основным доменом клиента является , используйте contoso.onmicrosoft.comcontoso. Если у вас нет имени клиента, узнайте, как считывать сведения о клиенте.
3. Enter_the_Client_Secret_Here и замените его значением секрета приложения, скопированным ранее.

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

Теперь вы можете протестировать пример веб-приложения Node.js. Необходимо запустить сервер Node.js и получить к нему доступ через браузер по адресу http://localhost:3000.

В терминале выполните приведенную ниже команду.
```
    npm start 
```
Откройте браузер, а затем перейдите в раздел http://localhost:3000. Вы увидите страницу, аналогичную следующему снимку экрана:
После завершения загрузки страницы щелкните Ссылку для входа . Вам будет предложено выполнить вход.
На странице входа введите адрес Email, нажмите кнопку Далее, введите пароль, а затем выберите Войти. Если у вас нет учетной записи, выберите Нет учетной записи? Создайте одну ссылку, которая запускает поток регистрации.
Если вы выбрали вариант регистрации, после заполнения электронной почты, одноразовых секретных кодов, нового пароля и дополнительных сведений учетной записи вы завершите весь поток регистрации. Вы увидите страницу, похожую на следующий снимок экрана. Аналогичная страница отображается при выборе параметра входа.
Выберите Выйти, чтобы выйти из веб-приложения, или просмотр утверждений маркера идентификатора, чтобы просмотреть утверждения маркера идентификатора, возвращенные Microsoft Entra.

Принцип работы

Когда пользователи выбирают ссылку Вход, приложение инициирует запрос проверки подлинности и перенаправляет пользователей на Microsoft Entra идентификатор для клиентов. На странице входа или регистрации, которая отображается после успешного входа пользователя или создания учетной записи, Microsoft Entra идентификатор для клиентов возвращает маркер идентификатора приложению. Приложение проверяет маркер идентификатора, считывает утверждения и возвращает пользователям безопасную страницу.

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

Если вы хотите создать приложение, аналогичное примеру, выполните действия, описанные в статье Вход пользователей в веб-приложение Node.js .

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

Возможно, вам потребуется: