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

• Добавьте следующие URI перенаправления с помощью конфигурации платформы мобильных и десктопных приложений. Дополнительные сведения см. в статье о добавлении URI перенаправления в приложение .
  • Переадресация URI: http://localhost
• Node.js
• Visual Studio Code или другой редактор кода

• Добавьте следующие URI перенаправления, используя конфигурацию платформы мобильных и настольных приложений. Дополнительные сведения см. в статье о добавлении URI перенаправления в приложение .
  • Переадресация URI: https://login.microsoftonline.com/common/oauth2/nativeclient
  • Пользовательские URI перенаправления: ms-appx-web://microsoft.aad.brokerplugin/{client_id} где {client_id} — это идентификатор приложения (клиента) приложения.
• Visual Studio с установленной рабочей нагрузкой разработки универсальной платформы Windows

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

  git clone https://github.com/Azure-Samples/ms-identity-javascript-nodejs-desktop.git
  

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

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

  git clone https://github.com/Azure-Samples/active-directory-dotnet-desktop-msgraph-v2.git
  

• Скачайте файл .zip

В редакторе кода откройте файл ms-identity-javascript-nodejs-desktop-main/App/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. Измените active-directory-wpf-msgraph-v2/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, чтобы получить полное пошаговое руководство по созданию приложений и новых функций, включая полное описание этого быстрого начала.

• Добавьте следующие URI перенаправления с помощью конфигурации платформы мобильных и настольных приложений. Дополнительные сведения см. в статье о добавлении URI перенаправления в приложение .
  • Переадресация URI: http://localhost
• Node.js
• Visual Studio Code или другой текстовый редактор*

• Добавьте следующие URI перенаправления с помощью конфигурации платформы мобильных и настольных приложений. Дополнительные сведения см. в статье о добавлении URI перенаправления в приложение .
  • URI перенаправления: msal{client_id}://auth где {client_id} — это идентификатор приложения (клиента) приложения.
• SDK .NET 7.0 или новая версия.
• Visual Studio 2022 с установленной рабочей нагрузкой MAUI:
  • инструкции для Windows
  • Инструкции для macOS
• Добавление приложения в поток пользователя

• Добавьте следующие URI перенаправлений в конфигурации платформы мобильных и настольных приложений. Дополнительные сведения см. в статье о добавлении URI перенаправления в приложение .
  • URI пользовательского перенаправления: https://login.microsoftonline.com/common/oauth2/nativeclient. Это необходимо ввести вручную.
• Visual Studio Code или другой редактор кода
• .NET 7.0 или новее
• Добавление приложения в поток пользователя

Чтобы получить пример кода настольного приложения, скачайте файл .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. После входа вы увидите экран, отображающий успешный вход и основные сведения об учетной записи пользователя, содержащиеся в полученном маркере. Основная информация отображается в разделе Token Info на экране входа.

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

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

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