教學課程：使用 Microsoft Graph SDK 建立 .NET MAUI 應用程式

在 Windows 上組建跨平台應用程式，讓它利用 Microsoft Graph SDK 來顯示使用者資料，藉此熟悉 .NET MAUI 的實際操作。

在本教學課程中，您會了解如何：

• 設定 .NET MAUI 的開發環境並建立 .NET MAUI 專案
• 在 Azure 中註冊用戶端應用程式
• 整合 Azure 身分識別和 Microsoft Graph SDK
• 更新使用者介面以顯示 Microsoft Graph 的使用者資訊

必要條件

• 具有有效訂用帳戶的 Azure 帳戶。 免費建立帳戶。
• .NET MAUI 安裝需求。
• 如果您對 Windows 的 .NET MAUI 不熟悉，請先參考組建第一個 Windows 適用的 .NET MAUI 應用程式教學課程。

設定環境

如果您尚未設定 .NET MAUI 的開發環境，請按照步驟開始使用 Windows 的 .NET MAUI。

建立 .NET MAUI 專案

注意

如果您已經熟悉如何設定 .NET MAUI 專案，您可以跳到在 Azure 註冊用戶端一節。

啟動 Visual Studio，然後在起始視窗按一下 [建立新專案] 以建立新的專案：

在「建立新專案」視窗的 [所有專案類型] 下拉式清單中選取 [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)。

選取 [暫存器] 以建立應用程式。

複製並儲存 [應用程式 (用戶端) 識別碼] 與 [目錄 (租用戶) 識別碼] 值供稍後使用。 我們將在下一節的 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 套件的最新穩定版本新增至專案。

接下來，搜尋「Microsoft.Graph」：

按一下 [安裝]，將 Microsoft.Graph 套件的最新穩定版本新增至專案。

在新套件完成安裝之後，關閉「NuGet 套件管理員」視窗。

再次以滑鼠右鍵按一下專案，並從操作功能表中選取 [新增 | 類別]。

在顯示的「新增項目」視窗中，將類別命名為 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 類別進行驗證。 成功驗證後，認證類別會連同要求的範圍 (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;
    }
}

您需要兩個 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;

新增事件處理常式給您在 MainPage.xaml 的 GetUserInfoButton 新增的 Clicked 事件使用。 如果事件處理常式為 null，就會建立 GraphService 執行個體，並呼叫以擷取使用者資料。 HelloLabel 的文字經過更新後會向使用者說 hello，並顯示 Microsoft Graph 的 DisplayName 屬性：

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 物件的屬性，將 UI 元素更新為 GetUserInfoBtn_Clicked 事件處理常式的新屬性值：

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 概觀