Руководство. Создание приложения .NET MAUI с помощью пакета SDK Microsoft Graph

Статья
07/13/2023

Получите практические навыки с помощью .NET MAUI, создав кроссплатформенное приложение в Windows, которое использует пакет SDK Microsoft Graph для отображения пользовательских данных.

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

Настройка среды для разработки .NET MAUI и создание проекта .NET MAUI
Регистрация клиентского приложения в Azure
Интеграция с удостоверением Azure и пакетом SDK Microsoft Graph
Обновление пользовательского интерфейса для отображения сведений о пользователе из Microsoft Graph

Предварительные требования

Учетная запись Azure с активной подпиской. Создайте учетную запись бесплатно.
Требования к установке .NET MAUI.
Если вы еще не знакомы с .NET MAUI в Windows, вам следует начать с учебника Создание первого приложения .NET MAUI для Windows .

Настройка среды

Если вы еще не настроили среду для разработки .NET MAUI, выполните действия, описанные в статье Начало работы с .NET MAUI в Windows.

Создание проекта .NET MAUI

Примечание

Если вы уже знакомы с настройкой проекта .NET MAUI, перейдите к разделу Регистрация клиента в Azure .

Запустите Visual Studio и в окне запуска щелкните Создать новый проект , чтобы создать новый проект:

Создайте новый проект.

В окне Создание проекта выберите MAUI в раскрывающемся списке Все типы проектов, выберите шаблон приложение .NET MAUI и нажмите кнопку Далее :

Шаблон приложения .NET MAUI.

В окне Настройка нового проекта присвойте проекту имя, выберите для него расположение и нажмите кнопку Далее :

Назовите новый проект.

В окне Дополнительные сведения нажмите кнопку Создать :

Создайте новый проект.

Дождитесь создания проекта и восстановления его зависимостей:

Проект создан.

На панели инструментов Visual Studio нажмите кнопку Компьютер Windows , чтобы выполнить сборку и запуск приложения. Нажмите кнопку Click me (Щелкните меня ) и убедитесь, что содержимое кнопки обновляется с количеством щелчков.

Теперь, когда вы убедились, что приложение .NET MAUI в Windows работает должным образом, мы можем интегрировать пакет SDK Graph. В следующем разделе вы добавите пакеты, необходимые для проверки подлинности и выполнения вызовов Microsoft Graph.

Регистрация клиента в Azure

Для чтения пользовательских данных из Microsoft Graph требуется регистрация приложения в Azure с помощью область User.Read, предоставленного приложению. Чтобы зарегистрировать приложение, сделайте следующее:

Войдите на портал Azure.

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

Найдите и выберите Azure Active Directory.

В разделе Управление выберите Регистрация приложений > Новая регистрация.

Введите имя приложения, например Win-App-calling-MsGraph. Пользователи приложения могут видеть это имя. Вы можете изменить его позже.

В разделе Поддерживаемые типы учетных записей выберите Accounts in any organizational directory and personal Microsoft accounts (for example, Skype, Xbox, Outlook.com) (Учетные записи в любом каталоге организации и личные учетные записи Майкрософт (например, Skype, Xbox, Outlook.com)).

Выберите Зарегистрировать, чтобы создать приложение.

Скопируйте и сохраните значения идентификатора приложения (клиента) и идентификатора каталога (клиента) для последующего использования. Мы будем хранить эти значения в классе GraphService в следующем разделе.

В разделе Управление выберите Проверка подлинности.

Выберите Добавить платформу > Мобильные и классические приложения.

В разделе URI перенаправления выберите https://login.microsoftonline.com/common/oauth2/nativeclient и в разделе Настраиваемые URI перенаправления добавьте https://localhost.

Нажмите кнопку Настроить.

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

Если разрешение User.Read в Microsoft Graph отсутствует в разделе Настроенные разрешения, выберите Добавить разрешение. На экране Запрос разрешений API выберите Разрешения приложения Microsoft Graph > и выполните поиск по запросу User.Read. Разверните узел Пользователь, выберите User.Read и щелкните Добавить разрешения.

Интеграция пакета SDK Graph и удостоверений Azure

Теперь, когда приложение .NET MAUI запущено в Windows и настроили регистрацию приложения в Azure, давайте добавим в проект несколько пакетов NuGet для интеграции с Azure Identity и Microsoft Graph.

Щелкните правой кнопкой мыши проект в Обозреватель решений и выберите Управление пакетами NuGet... в контекстном меню.

В окне Диспетчер пакетов NuGet перейдите на вкладку Обзор и выполните поиск по запросу Azure.Identity:

Пакет Azure.Identity.

Добавьте последнюю стабильную версию пакета Azure.Identity в проект, нажав кнопку Установить.

Затем выполните поиск по запросу Microsoft.Graph:

Пакет Microsoft.Graph.

Добавьте последнюю стабильную версию пакета Microsoft.Graph в проект, нажав кнопку Установить.

Закройте окно диспетчера пакетов NuGet после завершения установки нового пакета.

Снова щелкните проект правой кнопкой мыши и выберите Добавить | Класс из контекстного меню.

В появившемся окне Добавление нового элемента назовите класс GraphService и нажмите кнопку Добавить:

Добавьте класс GraphService.

Добавьте в класс четыре закрытых GraphService члена, заменив собственные значения идентификатора клиента и идентификатора клиента текстом заполнителя:

private readonly string[] _scopes = new[] { "User.Read" };
private const string TenantId = "<add your tenant id here>";
private const string ClientId = "<add your client id here>";
private GraphServiceClient _client;

Initialize() Добавьте метод в GraphService, который будет вызываться из конструктора. Код инициализации будет проходить проверку подлинности InteractiveBrowserCredential с помощью класса . После успешной проверки подлинности маркер проверки подлинности будет предоставлен GraphServiceClient классу учетных данных вместе с запрошенными областями (User.Read).

public GraphService()
{
    Initialize();
}

private void Initialize()
{
    // assume Windows for this sample
    if (OperatingSystem.IsWindows())
    {
        var options = new InteractiveBrowserCredentialOptions
        {
            TenantId = TenantId,
            ClientId = ClientId,
            AuthorityHost = AzureAuthorityHosts.AzurePublicCloud,
            RedirectUri = new Uri("https://localhost"),
        };

        InteractiveBrowserCredential interactiveCredential = new(options);
        _client = new GraphServiceClient(interactiveCredential, _scopes);
    }
    else 
    {
        // TODO: Add iOS/Android support
    }
}

Примечание

Метод Initialize()в настоящее время поддерживает только Windows. Для проверки подлинности в iOS и Android требуется другой пакет NuGet (Microsoft.Identity.Client) и некоторые дополнительные действия. Дополнительные сведения о проверке подлинности на мобильных устройствах см. в статье Настройка собственного клиентского приложения.

Добавьте открытый асинхронный метод с именем GetMyDetailsAsync() , чтобы вернуть User объект для пользователя, прошедшего проверку подлинности:

public async Task<User> GetMyDetailsAsync()
{
    try
    {
        return await _client.Me.GetAsync();
    }
    catch (Exception ex)
    {
        Console.WriteLine($"Error loading user details: {ex}");
        return null;
    }
}

Для компиляции нового кода, добавленного в , потребуется две using инструкции GraphService.

using Azure.Identity;
using Microsoft.Graph;
using Microsoft.Graph.Models;

В Файле MainPage.xaml добавьте в x:Name метку Hello, World! :

<Label
    x:Name="HelloLabel"
    Text="Hello, World!"
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" />

Добавьте новую кнопку на страницу после существующей CounterBtn , чтобы получить сведения о пользователе из Graph:

<Button
    x:Name="GetUserInfoBtn"
    Text="Load User Info"
    SemanticProperties.Hint="Loads user information from Microsoft Graph"
    Clicked="GetUserInfoBtn_Clicked"
    HorizontalOptions="Center" />

В Файле MainPage.xaml.cs добавьте частные переменные в для GraphService и User:

private GraphService graphService;
private User user;

Добавьте обработчик событий для Clicked события, добавленного в GetUserInfoButton в файле MainPage.xaml. Обработчик событий создаст экземпляр GraphService , если он имеет значение NULL, и выполнит вызов для получения пользовательских данных. Текст HelloLabelбудет обновлен, чтобы поздороваться с пользователем, отображая DisplayName свойство из Microsoft Graph:

private async void GetUserInfoBtn_Clicked(object sender, EventArgs e)
{
    if (graphService == null)
    {
        graphService = new GraphService();
    }
    user = await graphService.GetMyDetailsAsync();
    HelloLabel.Text = $"Hello, {user.DisplayName}!";
}

Запустите приложение и нажмите кнопку Загрузить сведения о пользователе :

Запустите приложение.

Когда откроется окно Вход в учетную запись , выберите существующую учетную запись или щелкните Использовать другую учетную запись:

Выберите учетную запись.

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

После завершения проверки подлинности вы увидите displayName пользователя в приложении:

Сведения о пользователе загружены в метку.

Обновление пользовательского интерфейса для отображения сведений о пользователе

Теперь, когда GraphService возвращает сведения о пользователе, давайте обновим пользовательский интерфейс, чтобы отобразить некоторые дополнительные сведения о профиле пользователя.

В Файле MainPage.xaml сначала обновите содержимое VerticalStackLayout, удалив существующую метку приветствия и Image элемент управления и добавив четыре новые метки для отображения сведений о пользователе. Каждой обновляемой метке присваивается имя, и мы предоставили текст заполнителя, пока данные не будут загружены из запроса Graph. Содержимое VerticalStackLayout теперь должно выглядеть следующим образом:

<VerticalStackLayout
    Spacing="25"
    Padding="30,0"
    VerticalOptions="Center">

    <Label
        x:Name="HelloLabel"
        Text="Hello, World!"
        SemanticProperties.Description="Displays a welcome message for the user"
        SemanticProperties.HeadingLevel="Level1"
        FontSize="32"
        HorizontalOptions="Center" />

    <Button
        x:Name="CounterBtn"
        Text="Click me"
        SemanticProperties.Hint="Counts the number of times you click"
        Clicked="CounterBtn_Clicked"
        HorizontalOptions="Center" />

    <Button
        Text="Load User Info"
        SemanticProperties.Hint="Loads user information from Microsoft Graph"
        Clicked="GetUserInfoBtn_Clicked"
        HorizontalOptions="Center" />

    <Label
        x:Name="DisplayNameLabel"
        Text="Display name"
        SemanticProperties.Description="Displays the user's display name from Microsoft Graph."
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />

    <Label
        x:Name="UserFirstNameLabel"
        Text="First name"
        SemanticProperties.Description="Displays the user's first name info from Microsoft Graph"
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />

    <Label
        x:Name="UserLastNameLabel"
        Text="Last name"
        SemanticProperties.Description="Displays the user's last name from Microsoft Graph"
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />

    <Label
        x:Name="UserPrincipalNameLabel"
        Text="User Principal Name"
        SemanticProperties.Description="Displays the user principal name from Microsoft Graph"
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />

</VerticalStackLayout>

Наконец, в Файле MainPage.xaml.cs обновите элементы пользовательского интерфейса значениями новых свойств в обработчике GetUserInfoBtn_Clicked событий, используя свойства объекта Graph User:

private async void GetUserInfoBtn_Clicked(object sender, EventArgs e)
{
    if (graphService == null)
    {
        graphService = new GraphService();
    }
    user = await graphService.GetMyDetailsAsync();
    HelloLabel.Text = $"Hello, {user.DisplayName}!";

    DisplayNameLabel.Text = user.DisplayName;
    UserFirstNameLabel.Text = user.GivenName;
    UserLastNameLabel.Text = user.Surname;
    UserPrincipalNameLabel.Text = user.UserPrincipalName;
}

Снова запустите приложение и нажмите кнопку Загрузить сведения о пользователе . После проверки подлинности в приложении должны отобразиться сведения о пользователе:

В метки загружены дополнительные сведения о пользователе.

Сведения об установке и начале работы с пакетом SDK Microsoft Graph в приложениях .NET MAUI см. в статье Установка пакета SDK microsoft Graph для .NET.