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

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

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

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

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. Выберите Настроить.

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

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

*Извлеките проект, откройте папку ms-identity-JavaScript-nodejs-desktop-main, а затем откройте файл .authConfig.js. Замените значение следующим образом:

Файл должен выглядеть следующим образом:

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,
 };

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.

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

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

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

   npm start
   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 и замените его идентификатором приложения (клиента), зарегистрированного ранее.

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. Если у вас нет основного домена, узнайте, как считывать сведения о клиенте.

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

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

   npm start
   

   

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

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

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

   

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

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

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

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

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

   

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

   

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

   

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

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

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

   dotnet run
   

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

   

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

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

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

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

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