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

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

  • Статья

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

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

  • Зарегистрируйте веб-приложение в Центре администрирования Microsoft Entra.

  • Создайте поток пользователя входа и выхода в Центр администрирования Microsoft Entra.

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

  • Обновите пример веб-приложения Node.js с помощью собственных сведений о внешнем клиенте.

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

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

  • Visual Studio Code или любой другой редактор кода.
  • Node.js.
  • .NET 7.0 или более поздней версии.
  • Внешний клиент. Чтобы создать его, выберите один из следующих методов:

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

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

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

  1. Войдите в Центр администрирования Microsoft Entra как минимум разработчик приложений.

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

  3. Перейдите к приложениям> удостоверений>Регистрация приложений.

  4. Выберите + Создать регистрацию.

  5. На отображаемой странице регистрации приложения;

    1. Введите понятное имя приложения, отображаемое пользователям приложения, например ciam-client-app.
    2. В разделе Поддерживаемые типы учетных записей выберите Учетные записи только в этом каталоге организации.

  6. Выберите Зарегистрировать.

  7. Панель обзора приложения отображается при успешной регистрации. Запишите идентификатор приложения (клиента), который будет использоваться в исходном коде приложения.

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

  1. В разделе Управление выберите Проверка подлинности.
  2. На странице конфигураций платформы выберите "Добавить платформу" и выберите "Веб-параметр".
  3. Введите http://localhost:3000/auth/redirectURI перенаправления.
  4. Нажмите кнопку "Настроить", чтобы сохранить изменения.

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

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

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

После регистрации приложения он получает разрешение User.Read . Однако, поскольку клиент является внешним клиентом, сами пользователи клиента не могут согласиться с этим разрешением. Вы, как администратор, должны предоставить это разрешение от имени всех пользователей в клиенте:

  1. На странице Регистрация приложений выберите созданное приложение (например, ciam-client-app), чтобы открыть страницу обзора.

  2. В разделе Управление выберите Разрешения API.

    1. Выберите "Предоставить согласие администратора" для <имени> клиента, а затем нажмите кнопку "Да".
    2. Выберите "Обновить", а затем убедитесь, что <имя> клиента предоставлено в разделе "Состояние" для разрешения.

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

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

  1. Войдите в Центр администрирования Microsoft Entra как минимум администратор потока внешних идентификаторов.

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

  3. Перейдите к потокам пользователей внешних>удостоверений удостоверений>.

  4. Выберите +Создать поток пользователя.

  5. На странице создания:

    1. Введите имя потока пользователя, например SignInSignUpSample.

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

      Примечание.

      Дополнительные поставщики удостоверений будут перечислены здесь только после настройки федерации с ними. Например, если вы настроили федерацию с Google или Facebook, вы сможете выбрать этих дополнительных поставщиков удостоверений здесь.

    3. В разделе "Учетные записи электронной почты" можно выбрать один из двух вариантов. В этом руководстве выберите "Электронная почта с паролем".

      • Электронная почта с паролем: позволяет новым пользователям регистрироваться и входить в систему с помощью адреса электронной почты в качестве имени входа и пароля в качестве их первых учетных данных фактора.
      • Одноразовый секретный код электронной почты: позволяет новым пользователям регистрироваться и выполнять вход с помощью адреса электронной почты в качестве имени входа и однократного секретного кода электронной почты в качестве учетных данных первого фактора. Одноразовый секретный код электронной почты должен быть включен на уровне клиента (единый секретный код всех поставщиков>удостоверений), чтобы этот параметр был доступен на уровне потока пользователя.

    4. В разделе "Атрибуты пользователя" выберите атрибуты, которые необходимо собрать от пользователя при регистрации. Выбрав "Показать больше", можно выбрать атрибуты и утверждения для страны или региона, отображаемого имени и почтового индекса. Нажмите ОК. (Пользователи запрашивают атрибуты только при первом регистрации.)

  6. Нажмите кнопку создания. Новый поток пользователя появится в списке Потоки пользователей. Если потребуется, обновите страницу.

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

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

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

  1. В меню боковой панели выберите "Удостоверение".

  2. Выберите внешние удостоверения, а затем потоки пользователей.

  3. На странице "Потоки пользователей" выберите имя потока пользователя, созданное ранее, например SignInSignUpSample.

  4. В разделе "Использование" выберите "Приложения".

  5. Выберите Добавить приложение.

  6. Выберите приложение из списка, например ciam-client-app или используйте поле поиска для поиска приложения, а затем выберите его.

  7. Выберите Выбрать.

Связав приложение с потоком пользователей, вы можете протестировать поток пользователя, имитируя процесс регистрации или входа пользователя с приложением из Центра администрирования Microsoft Entra. Для этого выполните действия, описанные в разделе "Тестирование регистрации и входа в поток пользователя".

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

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

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

  1. Откройте окно консоли и перейдите в каталог, содержащий пример приложения Node.js:

    cd 1-Authentication\5-sign-in-express\App

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

    npm install

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

  1. В редакторе кода откройте файл App\authConfig.js .

  2. Найдите заполнитель:

    • Enter_the_Application_Id_Here и замените его идентификатором приложения (клиента) зарегистрированного ранее приложения.
    • Enter_the_Tenant_Subdomain_Here и замените его поддоменом каталога (клиента). Например, если основной домен клиента — это contoso.onmicrosoft.com, используйте contoso. Если у вас нет имени клиента, узнайте, как прочитать сведения о клиенте.
    • Enter_the_Client_Secret_Here и замените его значением секрета приложения, скопированным ранее.

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

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

  1. В терминале выполните приведенную ниже команду.

    npm start

  2. Откройте браузер, а затем перейдите в http://localhost:3000раздел . Вы увидите страницу, аналогичную следующему снимку экрана:

    Снимок экрана: вход в веб-приложение узла.

  3. После завершения загрузки страницы выберите ссылку для входа . Вам будет предложено выполнить вход.

  4. На странице входа введите адрес электронной почты, нажмите кнопку "Далее", введите пароль, а затем нажмите кнопку "Войти". Если у вас нет учетной записи, выберите "Нет учетной записи"? Создайте одну ссылку, которая запускает поток регистрации.

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

    Снимок экрана: утверждения маркера идентификатора представления.

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

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

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

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

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

Связанный контент