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

В этом руководстве используется пример одностраничного приложения JavaScript (JS) для демонстрации добавления проверки подлинности в 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. Нажмите кнопку "Настроить", чтобы сохранить изменения.

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

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

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

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

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

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

1. Войдите в Центр администрирования Microsoft Entra как минимум внешний поток пользователя id Администратор istrator.

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

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

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

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

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

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

      Примечание.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   cd 1-Authentication\0-sign-in-vanillajs\App
   

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

   npm install
   

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

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

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

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

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

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

   npm start
   

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

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

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

5. Теперь spa отобразит кнопку с сообщением "Сведения о профиле запроса". Выберите его для отображения данных профиля.

   

Выход из приложения

1. Чтобы выйти из приложения, выберите " Выйти" на панели навигации.
2. Появится окно с запросом учетной записи для выхода из нее.
3. После успешного выхода появится окончательное окно, консультирование по закрытию всех окон браузера.

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

• Используйте серию учебников с несколькими компонентами, чтобы создать этот vanilla JS SPA с нуля.
• Включите сброс пароля.
• Настройка фирменной символики по умолчанию.
• Настройка входа в Google.