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

Область применения: клиенты рабочей силы внешние клиенты (дополнительные сведения)

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

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

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

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

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

• Обновите пример классического приложения Electron с помощью собственных сведений о внешнем клиенте.

• Запустите и протестируйте пример классического приложения.

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

• Node.js.

• Visual Studio Code или любой другой редактор кода.

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

  • (Рекомендуется) Используйте расширение Внешняя идентификация Microsoft Entra для настройки внешнего клиента непосредственно в Visual Studio Code.
  • Создайте внешний клиент в Центре администрирования 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. Введите URI пользовательского перенаправления, а затем нажмите кнопку "Настроить".http://localhost
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. Для этого выполните действия, описанные в разделе "Тестирование регистрации и входа в поток пользователя".

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

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

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

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

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

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

   cd 1-Authentication\3-sign-in-electron\App
   

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

   npm install && npm update
   

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

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

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

   1. Enter_the_Application_Id_Here и замените его идентификатором приложения (клиента) зарегистрированного ранее приложения.

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

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

Теперь можно протестировать пример классического приложения Electron. После запуска приложения окно классического приложения появится автоматически:

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

   npm start
   

   

2. В появившемся окне рабочего стола нажмите кнопку входа или регистрации . Откроется окно браузера, и вам будет предложено войти.

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

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

   

См. также

• Включите сброс пароля.
• Настройка фирменной символики по умолчанию.
• Настройка входа в Google.
• Изучите пример кода классического приложения Electron.