Руководство. Подготовка внешнего клиента к проверке подлинности пользователей в SPA React

В этом руководстве показано, как создать одностраничные приложения React (SPA) и подготовить его к проверке подлинности с помощью Центра администрирования Microsoft Entra. Вы будете использовать библиотеку проверки подлинности Майкрософт для JavaScript для проверки подлинности приложения с внешним клиентом. Наконец, вы запустите приложение и протестируете возможности входа и выхода.

В этом руководстве;

• Регистрация SPA в Центре администрирования Microsoft Entra и запись его идентификаторов
• Определение платформы и URL-адресов
• Предоставление разрешений spa для доступа к API Microsoft Graph
• Создание потока пользователя входа и выхода в Центре администрирования Microsoft Entra
• Связывание SPA с потоком пользователя

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

• Внешний клиент. Чтобы создать его, выберите один из следующих методов:
  • (Рекомендуется) Используйте расширение Внешняя идентификация Microsoft Entra для настройки внешнего клиента непосредственно в Visual Studio Code.
  • Создайте внешний клиент в Центре администрирования Microsoft Entra.
• Эта учетная запись Azure должна иметь разрешения на управление приложениями. Любые из следующих ролей Microsoft Entra включают необходимые разрешения:
  • Администратор приложений
  • Разработчик приложения
  • Администратор облачных приложений

Регистрация идентификаторов SPA и записей

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

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

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

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

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

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

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

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

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

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

Добавление URL-адреса перенаправления платформы

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

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

Предоставление согласия администратора

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

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

   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. Для этого выполните действия, описанные в разделе "Тестирование регистрации и входа в поток пользователя".

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

Часть 2. Создание проекта React SPA для проверки подлинности во внешнем клиенте