Краткое руководство: Вход пользователей в образец настольного приложения
В этом кратком руководстве вы узнаете, как добавить проверку подлинности в настольное приложение, используя пример приложения. Пример приложения позволяет пользователям выполнять вход и выход и использовать библиотеку проверки подлинности Майкрософт (MSAL) для обработки проверки подлинности.
Прежде чем начать, используйте селектор Выберите тип арендатора вверху страницы. Идентификатор Microsoft Entra предоставляет две конфигурации клиента: для сотрудников и для внешних пользователей. Конфигурация арендатора рабочих ресурсов для ваших сотрудников, внутренних приложений и других организационных ресурсов. Внешний клиент предназначен для ваших клиентских приложений.
Необходимые условия
- Node.js
- Visual Studio Code или другой редактор кода
Регистрация веб-приложения
Чтобы зарегистрировать приложение и добавить сведения о регистрации приложения в решение вручную, выполните следующие действия.
- Войдите в Центр администрирования Microsoft Entra в качестве администратора облачных приложенийне ниже.
- Если у вас есть доступ к нескольким арендаторам, используйте значок настроек
в верхнем меню, чтобы переключиться на арендатора, в котором вы хотите зарегистрировать приложение из меню Каталоги и подписки.
- Перейдите к Identity>Приложениям>, регистрации приложений, и выберите Новая регистрация.
- Введите название для вашего приложения, например
msal-node-desktop
. Пользователи приложения могут увидеть это имя, и вы можете изменить его позже. - Выберите Зарегистрировать, чтобы создать приложение.
- В разделе Управлениевыберите Аутентификация.
- Выберите Добавить платформу>мобильных и настольных приложений.
- В разделе URI перенаправления введите
http://localhost
. - Выберите Настроить.
Скачивание примера проекта
Настройка проекта
*Извлеките проект, откройте папку ms-identity-JavaScript-nodejs-desktop-main, а затем откройте файл .authConfig.js. Замените значение следующим образом:
Переменная | Описание | Примеры |
---|---|---|
Enter_the_Cloud_Instance_Id_Here |
Облачный экземпляр Azure, в котором зарегистрировано приложение |
https://login.microsoftonline.com/ (включите конечную косую черту) |
Enter_the_Tenant_Id_Here |
Идентификатор клиента или основной домен |
contoso.microsoft.com или aaaabbbb-0000-cccc-1111-dddd2222eeee |
Enter_the_Application_Id_Here |
Идентификатор клиента зарегистрированного приложения | 00001111-aaaa-2222-bbbb-3333cccc4444 |
Enter_the_Redirect_Uri_Here |
URI перенаправления для зарегистрированного приложения | msal00001111-aaaa-2222-bbbb-3333cccc4444://auth |
Enter_the_Graph_Endpoint_Here |
Облачный экземпляр API Microsoft Graph, который будет вызывать приложение |
https://graph.microsoft.com/ (включите конечную косую черту) |
Файл должен выглядеть следующим образом:
const AAD_ENDPOINT_HOST = "https://login.microsoftonline.com/"; // include the trailing slash
const msalConfig = {
auth: {
clientId: "00001111-aaaa-2222-bbbb-3333cccc4444",
authority: `${AAD_ENDPOINT_HOST}/aaaabbbb-0000-cccc-1111-dddd2222eeee`,
},
system: {
loggerOptions: {
loggerCallback(loglevel, message, containsPii) {
console.log(message);
},
piiLoggingEnabled: false,
logLevel: LogLevel.Verbose,
}
}
}
const GRAPH_ENDPOINT_HOST = "https://graph.microsoft.com/"; // include the trailing slash
const protectedResources = {
graphMe: {
endpoint: `${GRAPH_ENDPOINT_HOST}v1.0/me`,
scopes: ["User.Read"],
}
};
module.exports = {
msalConfig: msalConfig,
protectedResources: protectedResources,
};
Запуск приложения
Необходимо установить зависимости этого примера один раз:
cd ms-identity-javascript-nodejs-desktop-main npm install
Затем запустите приложение с помощью командной строки или консоли:
npm start
Выберите войти, чтобы запустить процесс входа.
При первом входе вам будет предложено предоставить согласие, чтобы разрешить приложению осуществить вход и дать доступ к вашему профилю. После успешного входа вы будете перенаправлены обратно в приложение.
Дальнейшие действия
Дополнительные сведения о разработке настольных приложений Electron с помощью MSAL Node см. в руководстве.
Необходимые условия
- Node.js
- Visual Studio Code или другой редактор кода
- Внешний арендатор. Чтобы создать его, выберите один из следующих методов:
- (Рекомендуется) использовать расширение внешнего идентификатора Microsoft Entra для настройки внешнего клиента непосредственно в Visual Studio Code
- Создание нового внешнего клиента в Центре администрирования Microsoft Entra
Зарегистрировать настольное приложение
Чтобы разрешить приложению вход пользователей с помощью Microsoft Entra, необходимо, чтобы внешний идентификатор Microsoft Entra был осведомлен о создаваемом вами приложении. Регистрация приложения устанавливает отношение доверия между приложением и Microsoft Entra. При регистрации приложения внешний идентификатор создает уникальный идентификатор, известный как идентификатор приложения (клиента), значение, используемое для идентификации вашего приложения при создании запросов аутентификации.
Ниже показано, как зарегистрировать приложение в Центре администрирования Microsoft Entra:
Войдите в центр администрирования Microsoft Entra в роли как минимум разработчика приложений.
Если у вас есть доступ к нескольким арендаторам, используйте значок настроек
в верхнем меню, чтобы переключиться на вашего внешнего арендатора из меню Каталоги + подписки.
Перейдите к Идентификатор>Приложения>Регистрация приложений.
Выберите + Новая регистрация.
На странице регистрации приложения , которая появляется,
- Введите значимое имя приложения, отображаемое пользователям, например, ciam-client-app.
- В разделе Поддерживаемые типы учетных записейвыберите только учетные записи в этом каталоге организации.
Выберите Зарегистрировать.
Панель Обзор приложения отображается при успешной регистрации. Запишите идентификатор приложения (клиента), который использовать в исходном коде приложения.
Указание платформы приложений
Чтобы указать тип приложения для регистрации приложения, выполните следующие действия.
- В разделе Управлениевыберите аутентификация.
- На странице конфигураций платформы выберите Добавить платформу, а затем выберите мобильные и настольные приложения.
- Для пользовательских URI перенаправления введите
http://localhost
, а затем выберите Настроить. - Выберите Настроить, чтобы сохранить изменения.
Предоставление согласия администратора
Как только вы зарегистрируете ваше приложение, оно получает разрешение User.Read. Однако, поскольку клиент является внешним клиентом, сами пользователи клиента не могут согласиться с этим разрешением. Вы, как администратор клиента, должны предоставить это разрешение от имени всех пользователей в клиенте:
На странице регистрации приложений выберите созданное вами приложение (например, ciam-client-app), чтобы открыть его страницу Обзор.
В разделе Управлениевыберите разрешения API.
- Выберите предоставить согласие администратора для <имени вашего клиента>, а затем выберите Да.
- Выберите обновить, а затем убедитесь, что предоставлено для <имя клиента> отображается в разделе Состояние разрешения.
Создание потока пользователя
Выполните следующие действия, чтобы создать поток пользователя, который клиент может использовать для входа или регистрации в приложение.
Войдите в центр администрирования Microsoft Entra как минимум администратора внешнего потока идентификаторов.
Если у вас есть доступ к нескольким арендаторам, используйте значок настроек
в верхнем меню, чтобы переключиться на внешний арендатор из меню Каталоги и подписки.
Перейдите к Identitet>Внешние удостоверения>Потоки пользователей.
Выберите + Новый поток действий пользователя.
На странице Создать:
Введите имя для пользовательского потока, например SignInSignUpSample.
В списке поставщиков удостоверений выберите учетные записи электронной почты. Этот поставщик удостоверений позволяет пользователям входить или регистрироваться с помощью своего адреса электронной почты.
Заметка
Дополнительные поставщики удостоверений появятся здесь только после настройки федерации с ними. Например, если вы настроили федерацию с Google, Facebook, Apple или поставщиком удостоверений OIDC , вы сможете выбрать этих дополнительных поставщиков удостоверений здесь.
В разделе "Учетные записи электронной почты"вы можете выбрать один из двух вариантов. В этом руководстве выберите Email с паролем.
- Электронная почта с паролем: позволяет новым пользователям регистрироваться и входить в систему, используя адрес электронной почты в качестве имени входа и пароль в качестве их первого фактора аутентификации.
- одноразовый секретный код электронной почты: позволяет новым пользователям регистрироваться и выполнять вход с помощью адреса электронной почты в качестве имени входа и однократного секретного кода электронной почты в качестве их первого фактора учетных данных. Одноразовый код доступа по электронной почте должен быть включен на уровне клиента (Все поставщики удостоверений>Одноразовый код доступа по электронной почте), чтобы этот параметр был доступен на уровне потока пользователя.
В разделе атрибуты пользователявыберите атрибуты, которые необходимо собрать от пользователя при регистрации. Выбрав Показать больше, вы можете выбрать атрибуты и утверждения для страны/региона, отображаемого имении почтового индекса. Нажмите кнопку ОК. (Пользователи запрашиваются о предоставлении атрибутов только при первой регистрации.)
Выберите Создать. Новый поток пользователя отображается в списке потоков пользователей. При необходимости обновите страницу.
Чтобы включить самостоятельный сброс пароля, выполните действия, описанные в статье Включение самостоятельного сброса пароля.
Ассоциировать настольное приложение с потоком пользователя
Чтобы пользователи клиента видели возможность регистрации или входа при использовании приложения, необходимо связать приложение с потоком пользователя. Хотя многие приложения могут быть связаны с потоком пользователя, одно приложение может быть связано только с одним потоком пользователя.
В меню боковой панели выберите Удостоверение.
Выберите внешние удостоверения, затем потоки пользователей.
На странице пользовательского потока выберите имя потока пользователя, созданное ранее, например, SignInSignUpSample.
В разделе Использованиевыберите Приложения.
Выберите Добавить приложение.
Выберите приложение из списка, например ciam-client-app или используйте поле поиска для поиска приложения, а затем выберите его.
Выберите Выбрать.
Связав приложение с потоком пользователей, вы можете протестировать поток пользователя, имитируя процесс регистрации или входа пользователя с приложением из Центра администрирования Microsoft Entra. Для этого выполните действия, описанные в Протестируйте процесс регистрации и входа в поток пользователя.
Скачивание примера проекта
Чтобы получить пример кода настольного приложения, скачайте файл .zip или клонируйте пример веб-приложения из GitHub, выполнив следующую команду:
git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git
Если вы решили скачать файл .zip
, извлеките пример файла приложения в папку, в которой общая длина пути составляет 260 или меньше символов.
Установка зависимостей проекта
Откройте окно консоли и перейдите в каталог, содержащий пример приложения Electron:
cd 1-Authentication\3-sign-in-electron\App
Выполните следующие команды, чтобы установить зависимости приложений:
npm install && npm update
Настройка примера веб-приложения
В редакторе кода откройте файл
App\authConfig.js
.Найдите заполнитель:
Enter_the_Application_Id_Here
и замените его идентификатором приложения (клиента), зарегистрированного ранее.Enter_the_Tenant_Subdomain_Here
и замените его поддоменом каталога (клиента). Например, если основной домен клиентаcontoso.onmicrosoft.com
, используйтеcontoso
. Если у вас нет имени арендатора, узнайте, как читать сведения об арендаторе.
Запуск и проверка примера веб-приложения
Теперь можно протестировать образец настольного приложения Electron. После запуска приложения окно настольного приложения появится автоматически.
В терминале выполните следующую команду:
npm start
В появившемся окне рабочего стола нажмите кнопку войти или зарегистрироваться. Откроется окно браузера, и вам будет предложено войти.
На странице входа в браузер введите адрес электронной почты, выберите Далее, введите пароль, а затем выберите войти. Если у вас нет учетной записи, выберите Нет учетной записи? Создайте одну ссылку, которая запускает поток регистрации.
Если вы выберете вариант регистрации, после указания адреса электронной почты, одноразового секретного кода, нового пароля и дополнительных сведений об учетной записи, вы завершите весь процесс регистрации. Вы увидите страницу, аналогичную следующему снимку экрана. Вы увидите аналогичную страницу при выборе параметра входа. На странице отображаются запросы токенов.