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

Вход пользователей в пример одностраничного приложения React (SPA)

  • Статья

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

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

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

Регистрация SPA в Центре администрирования Microsoft Entra

Чтобы приложение входить в систему с помощью 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:3000URI перенаправления.
  4. Нажмите кнопку "Настроить", чтобы сохранить изменения.

После регистрации приложения он получает разрешение 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. Нажмите кнопку создания. Новый поток пользователя появится в списке Потоки пользователей. Если потребуется, обновите страницу.

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

Связывание SPA с потоком пользователя

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

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

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

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

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

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

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

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

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

Клонирование или скачивание примера SPA

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

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

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

  • Скачайте пример. Извлеките его в путь к файлу, где длина имени меньше 260 символов.

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

  1. Откройте окно терминала в корневом каталоге примера проекта и введите следующий фрагмент кода, чтобы перейти к папке проекта:

    cd 1-Authentication\1-sign-in-react\SPA

  2. Установите зависимости проекта:

    npm install

Настройка примера SPA

  1. Откройте SPA\src\authConfig.js и замените следующие значения значениями, полученными из Центра администрирования Microsoft Entra:

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

  2. Сохраните файл.

Запуск проекта и вход

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

  1. Откройте новый терминал, выбрав терминал>"Новый терминал".

  2. Выполните следующую команду, чтобы запустить веб-сервер.

    cd 1-Authentication\1-sign-in-react\SPA
npm start

  3. Откройте браузер и перейдите по ссылке http://localhost:3000/.

  4. Войдите с учетной записью, зарегистрированной во внешнем клиенте.

  5. После входа в отображаемое имя отображается рядом с кнопкой выхода .

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