Краткое руководство: Вход пользователей в образец настольного приложения

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

Прежде чем начать, используйте селектор Выберите тип арендатора вверху страницы. Идентификатор Microsoft Entra предоставляет две конфигурации клиента: для сотрудников и для внешних пользователей. Конфигурация арендатора рабочих ресурсов для ваших сотрудников, внутренних приложений и других организационных ресурсов. Внешний клиент предназначен для ваших клиентских приложений.

Необходимые условия

Node.js Электрон

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

Windows Presentation Foundation (WPF)

• Visual Studio с установленной рабочей нагрузкой разработки универсальной платформы Windows

Регистрация веб-приложения

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

Node.js Электрон

1. Войдите в Центр администрирования Microsoft Entra в качестве администратора облачных приложенийне ниже.
2. Если у вас есть доступ к нескольким арендаторам, используйте значок настроек в верхнем меню, чтобы переключиться на арендатора, в котором вы хотите зарегистрировать приложение из меню Каталоги и подписки.
3. Перейдите к Identity>Приложениям>, регистрации приложений, и выберите Новая регистрация.
4. Введите название для вашего приложения, например msal-node-desktop. Пользователи приложения могут увидеть это имя, и вы можете изменить его позже.
5. Выберите Зарегистрировать, чтобы создать приложение.
6. В разделе Управлениевыберите Аутентификация.
7. Выберите Добавить платформу>мобильных и настольных приложений.
8. В разделе URI перенаправления введите http://localhost.
9. Выберите Настроить.

Windows Presentation Foundation (WPF)

1. Войдите в Центр администрирования Microsoft Entra.
2. Если у вас есть доступ к нескольким арендаторам, используйте значок Параметры в верхнем меню, чтобы переключиться на арендатора, в котором вы хотите зарегистрировать приложение, из меню Каталоги и подписки.
3. Перейдите к Идентификация>Приложения>регистрация приложений, выберите Новая регистрация.
4. Введите имя для своего приложения, например, Win-App-calling-MsGraph. Пользователи приложения могут увидеть это имя, и вы можете изменить его позже.
5. В разделе поддерживаемых типов учетных записей выберите учетные записи в любом организационном каталоге и личные учетные записи Microsoft (например, Skype, Xbox, Outlook.com).
6. Выберите Регистр, чтобы создать приложение.
7. В меню Управлениевыберите Аутентификация.
8. Выберите Добавить платформу>мобильных и настольных приложений.
9. В разделе Redirect URIs выберите https://login.microsoftonline.com/common/oauth2/nativeclient и в Custom redirect URIs добавьте ms-appx-web://microsoft.aad.brokerplugin/{client_id}, где {client_id} — идентификатор вашего приложения (клиента) (тот же GUID, который отображается в флажке msal{client_id}://auth).
10. Выберите Настроить.

Скачивание примера проекта

Node.js Электрон

Скачайте пример кода

Windows Presentation Foundation (WPF)

Скачать пример приложения WPF

Совет

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

Настройка проекта

Node.js Электрон

*Извлеките проект, откройте папку 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,
 };

Windows Presentation Foundation (WPF)

1. Извлеките ZIP-файл в локальную папку рядом с корнем диска, например C:\Azure-Samples.

2. Откройте проект в Visual Studio.

3. Измените App.Xaml.cs и замените значения полей ClientId и Tenant следующим кодом:

   private static string ClientId = "Enter_the_Application_Id_here";
   private static string Tenant = "Enter_the_Tenant_Info_Here";
   

Где:

• Enter_the_Application_Id_here — это идентификатор приложения (клиента) для зарегистрированного приложения.

  Чтобы найти значение идентификатора приложения (клиента) , перейдите на страницу обзора в Центре администрирования Microsoft Entra.

• Enter_the_Tenant_Info_Here — задано одно из следующих опций:

  • Если ваше приложение поддерживает учетные записи в организационном каталоге, замените это значение идентификатором арендатора или именем арендатора (например, contoso.microsoft.com).

  • Если ваше приложение поддерживает учетные записи в любом организационном каталоге, замените это значение на organizations

  • Если ваше приложение поддерживает учетные записи в любом каталоге организации или личные учетные записи Майкрософт, замените данное значение на common.

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

Запуск приложения

Node.js Электрон

1. Необходимо установить зависимости этого примера один раз:

   cd ms-identity-javascript-nodejs-desktop-main
   npm install
   

2. Затем запустите приложение с помощью командной строки или консоли:

   npm start
   

3. Выберите войти, чтобы запустить процесс входа.

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

Windows Presentation Foundation (WPF)

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

1. Выберите меню отладки >начать отладкуили нажмите клавишу F5. Отображается главное окно приложения.
2. Нажмите кнопку вызова API Microsoft Graph.
3. Войдите с помощью учетной записи Microsoft Entra (рабочей или учебной учетной записи) или учетных данных учетной записи Майкрософт (live.com, outlook.com).
4. Если приложение запущено в первый раз, вам будет предложено предоставить согласие на доступ к профилю пользователя и войти в систему. После предоставления согласия на запрошенные разрешения приложение отображает, что вы успешно вошли в систему.

Вы увидите некоторые основные сведения о токене и данные пользователя, полученные из вызова API Microsoft Graph.

Дальнейшие действия

Node.js Электрон

Дополнительные сведения о разработке настольных приложений Electron с помощью MSAL Node см. в руководстве.

руководство по . Вход пользователей и вызов API Microsoft Graph в классическом приложении Electron

Windows Presentation Foundation (WPF)

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

Руководство по API вызовов Graph

Необходимые условия

Node.js Электрон

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

.NET (MAUI)

• SDK для .NET 7.0
• Visual Studio 2022 с установленной рабочей нагрузкой MAUI:
  • инструкции для Windows
  • Инструкции для macOS
• Внешний арендатор. Если у вас еще нет пробной версии, зарегистрироваться для получения бесплатной пробной версии

.NET (MAUI) WPF

• Visual Studio Code или другой редактор кода
• .NET 7.0 или новее

• Внешний арендатор. Чтобы создать его, выберите один из следующих методов:
  • (Рекомендуется) используйте расширение Microsoft Entra External ID для настройки внешнего арендатора в 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. Панель Обзор приложения отображается при успешной регистрации. Запишите идентификатор приложения (клиента), который использовать в исходном коде приложения.

Указание платформы приложений

Node.js Электрон

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

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

.NET (MAUI)

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

1. В Управлениевыберите Аутентификация.
2. На странице конфигураций платформы выберите Добавить платформу, а затем выберите мобильные и настольные приложения.
3. Для URI перенаправления введите msalEnter_the_Application_Id_Here://auth, замените Enter_the_Application_Id_Here идентификатором приложения (клиента), скопированным ранее, а затем выберите Настроить.
4. Выберите Сохранить, чтобы сохранить изменения.

.NET (MAUI) WPF

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

1. В разделе Управлениевыберите Аутентификация.
2. На странице конфигураций платформы выберите Добавить платформу, а затем выберите мобильные и классические приложения.
3. В поле ввода в разделе URI пользовательского перенаправлениявручную введите https://login.microsoftonline.com/common/oauth2/nativeclient, а затем выберите Настроить. При выборе этого URI в поле выбора может возникнуть ошибка URI перенаправления.

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

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

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

2. В разделе Управлениевыберите разрешения API.

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

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

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

1. Войдите в центр администрирования Microsoft Entra как минимум администратора внешнего потока идентификаторов.

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

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

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

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

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

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

      Заметка

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

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

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

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

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

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

Ассоциировать настольное приложение с потоком пользователя

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

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

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

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

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

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

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

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

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

Скачивание примера проекта

Node.js Электрон

Чтобы получить пример кода настольного приложения, скачайте файл .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
   

.NET (MAUI)

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

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

.NET (MAUI) WPF

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

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

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

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

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

Node.js Электронный

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

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

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

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

.NET (MAUI)

1. В Visual Studio откройте файл ms-identity-ciam-dotnet-tutorial-main/1-Authentication/2-sign-in-maui/appsettings.json.
2. Найдите заполнитель:
   1. Enter_the_Tenant_Subdomain_Here и замените его поддоменом каталога (клиента). Например, если основной домен клиента contoso.onmicrosoft.com, используйте contoso. Если у вас нет имени арендатора, узнайте, как узнать сведения об арендаторе.
   2. Enter_the_Application_Id_Here и замените его идентификатором приложения (клиента), зарегистрированного ранее.

.NET (MAUI) WPF

1. Откройте проект в интегрированной среде разработки (например, Visual Studio или Visual Studio Code), чтобы настроить код.

2. В редакторе кода откройте файл appsettings.json в папке ms-identity-ciam-dotnet-tutorial>1-Authentication>5-sign-in-dotnet-wpf.

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

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

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

Node.js Электрон

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

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

   npm start
   

   

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

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

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

   

.NET (MAUI)

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

Установите в панели инструментов Visual Studio целевой объект отладки на устройство, с которым вы хотите отладить и тестировать. Ниже показано, как установить Debug Target в Windows.

1. Выберите целевой объект отладки раскрывающегося списка.
2. Выберите Framework
3. Выберите net7.0-windows...

Запустите приложение, нажав F5 или нажав кнопку воспроизведения в верхней части Visual Studio.

1. Теперь можно протестировать пример десктопного приложения .NET MAUI. После запуска приложения окно настольного приложения появится автоматически.

   

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

   

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

   

.NET (MAUI) WPF

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

   cd 1-Authentication\5-sign-in-dotnet-wpf
   

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

   dotnet run
   

3. После запуска примера вы должны увидеть окно с кнопкой Вход. Нажмите кнопку Войти.

   

4. На странице входа введите адрес электронной почты учетной записи. Если у вас нет учетной записи, выберите Нет учетной записи? Создайте одну, которая запускает поток регистрации. Следуйте этой последовательности действий, чтобы создать новую учетную запись и войти.

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

Связанное содержимое

Node.js Электрон

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

.NET (MAUI)

• Руководство: Создание приложения .NET MAUI.
• Включить сброс пароля.
• Настройка фирменной символики по умолчанию.

.NET (MAUI) WPF

• Руководство по . Проверка подлинности пользователей в классическом приложении WPF
• Включить сброс пароля.
• настройкафирменного стиля по умолчанию.