教程：使用 Microsoft Graph SDK 创建 .NET MAUI 应用

  • 项目

通过在 Windows 上构建一个跨平台应用，利用 Microsoft Graph SDK 显示用户数据，从而开始使用 .NET MAUI。

本教程介绍如何执行下列操作：

  • 为 .NET MAUI 开发设置环境并创建 .NET MAUI 项目
  • 在 Azure 中注册客户端应用
  • 与 Azure 标识 和 Microsoft Graph SDK 集成
  • 更新用户界面以显示来自 Microsoft Graph 的用户信息

先决条件

设置环境

如果你尚未设置 .NET MAUI 开发环境，请按照在 Windows 上开始使用 .NET MAUI 的步骤进行操作。

创建 .NET MAUI 项目

注意

如果已熟悉设置 .NET MAUI 项目，则可以跳到 Azure 部分中的“注册客户端”。

启动 Visual Studio，然后在开始窗口中单击“ 创建新项目 ”以创建新项目：

创建新项目。

在“创建新项目”窗口中，在“所有项目类型”下拉列表中选择“MAUI”，选择“.NET MAUI 应用”模板，然后单击“下一步”按钮：

.NET MAUI 应用模板。

在 “配置新项目 ”窗口中，为项目命名，为其选择位置，然后单击“ 下一步 ”按钮：

为新项目命名。

在 “其他信息 ”窗口中，单击“ 创建 ”按钮：

创建新项目。

等待项目创建并还原其依赖项：

创建项目。

在 Visual Studio 工具栏中，按“ Windows 计算机”按钮生成并运行应用。 单击“单击我”按钮，并验证按钮内容是否随单击次数而更新。

现在，你已验证 Windows 上的 .NET MAUI 应用是否按预期工作，我们可以集成 Graph SDK。 在下一部分中，你将添加对 Microsoft Graph 进行身份验证和调用所需的包。

在 Azure 中注册客户端

若要从 Microsoft Graph 读取用户数据，需要在 Azure 中向应用授予 User.Read 范围的应用注册。 若要注册应用程序，请执行以下步骤：

登录到 Azure 门户。

如果有权访问多个租户，请使用顶部菜单中的 “目录 + 订阅 ”筛选器切换到要在其中注册应用程序的租户。

搜索并选择“Azure Active Directory” 。

在“管理”下，选择“应用注册”>“新建注册”。

输入应用程序的名称（例如 Win-App-calling-MsGraph）。 应用的用户可能会看到此名称，你稍后可对其进行更改。

在“支持的帐户类型”部分，选择“任何组织目录中的帐户和个人 Microsoft 帐户(例如 Skype、Xbox、Outlook.com)”。

选择“注册”以创建应用程序。

复制并保存 应用程序（客户端）ID 和 目录（租户）ID 值以供以后使用。 我们将在下一部分的 GraphService 类中存储这些值。

在“管理”下，选择“身份验证”。

选择“ 添加平台 > 移动和桌面应用程序”。

在 “重定向 URI ”部分中，选择 https://login.microsoftonline.com/common/oauth2/nativeclient 并在 “自定义重定向 URI ”中添加 https://localhost。

选择“配置” 。

在“管理”下选择“API 权限” 。

如果Microsoft Graph User.Read 权限不存在于“已配置”权限下，请选择“添加权限”。 在 “请求 API 权限 ”屏幕中，选择 Microsoft Graph > 应用程序权限 并搜索 User.Read。 展开 “用户”，选择“ User.Read”，然后单击“ 添加权限”。

集成 Graph SDK 和 Azure 标识

在 Windows 上运行 .NET MAUI 应用并配置了 Azure 中的应用注册后，让我们将几个 NuGet 包添加到项目中，以便与 Azure 标识集成并Microsoft Graph。

在“解决方案资源管理器”中右键单击该项目，然后从上下文菜单中选择“管理 NuGet 包...”。

在 NuGet 程序包管理器 窗口中，选择“浏览”选项卡并搜索 Azure.Identity：

Azure.Identity 包。

单击“安装”将 Azure.Identity 包的最新稳定版本添加到项目。

接下来，搜索 Microsoft.Graph：

Microsoft.Graph 包。

单击“安装”，将 Microsoft.Graph 包的最新稳定版本添加到项目。

在新包完成安装后关闭 NuGet 程序包管理器 窗口。

再次右键单击该项目并从上下文菜单中选择“添加 | 类”。

在 显示的“添加新项 ”窗口中，为类 GraphService 命名，然后单击“ 添加：

添加 GraphService 类。

将四个私有成员添加到 GraphService 该类，替换占位符文本的自己的 客户端 ID 和 租户 ID 值：

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 。 身份验证成功后，身份验证令牌将由凭据类以及请求的范围 （User.Read） 提供GraphServiceClient。

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

编译添加到GraphService以下项的新代码需要两个using语句：

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

在 MainPage.xaml 中，向 Hello， World！ 标签添加一个x:Name：

<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中，使用 Graph User 对象的属性，使用事件处理程序中的 GetUserInfoBtn_Clicked 新属性的值更新 UI 元素：

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

再次运行应用，然后单击“ 加载用户信息 ”按钮。 身份验证后，应会看到应用中显示的用户信息：

已在标签中加载了其他用户信息。

若要了解如何在 .NET MAUI 应用中安装和开始使用 Microsoft Graph SDK，请参阅 安装 Microsoft Graph .NET SDK。

后续步骤

转到下一篇文章，了解如何…

使用 .NET MAUI 和 ChatGPT 创建建议应用

另请参阅

用于学习 .NET MAUI 的资源

Microsoft Graph SDK 概述

配置本机客户端应用程序

Azure AD 标识和访问管理 API 概述