チュートリアル: Microsoft Graph SDK を使用して .NET MAUI アプリを作成する

[アーティクル]
02/03/2025

Microsoft Graph SDK を利用してユーザーデータを表示するクロスプラットフォームアプリを Windows 上に構築することで、.NET MAUI を活用できます。

このチュートリアルでは、次の方法について説明します。

.NET MAUI 開発用に環境を設定し、.NET MAUI プロジェクトを作成する
クライアントアプリを Azure に登録する
Azure Identity および 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 App] テンプレートを選択して、[次へ] ボタンをクリックします。

.NET MAUI アプリテンプレート。

[新しいプロジェクト の構成] ウィンドウで、プロジェクトに名前を付け、その場所を選択して、[次へ ] ボタンをクリックします。

新しいプロジェクトに名前を付けます。

[追加情報] ウィンドウで、[作成] ボタンをクリックします。

新しいプロジェクトを作成します。

プロジェクトが作成され、その依存関係が復元されるまで待ちます。

Project が作成されます。

Visual Studio のツールバーで、Windows マシン ボタンを押してアプリをビルドして実行します。 [こちらをクリック] ボタンをクリックして、ボタンコンテンツがクリック数に応じて更新されることを確認します。

Windows 上の .NET MAUI アプリが期待どおりに動作していることを確認したので、Graph SDK を統合できます。次のセクションでは、Microsoft Graph の認証と呼び出しに必要なパッケージを追加します。

Azure にクライアントを登録する

Microsoft Graph からユーザーデータを読み取るために、アプリに付与された User.Read スコープを使用して Azure で アプリ 登録を行う必要があります。アプリケーションを登録するには、次の手順に従います。

Azure portalにサインインします。

複数のテナントにアクセスできる場合は、上部のメニューの ディレクトリとサブスクリプション フィルターを使用して、アプリケーションを登録するテナントに切り替えます。

Azure Active Directoryを検索して選択します。

[管理] で、[アプリの登録] > [新規登録] を選択します。

アプリケーションの名を入力します (例: Win-App-calling-MsGraph)。アプリのユーザーにこの名前が表示される場合があり、後で変更できます。

[サポートされているアカウントの種類] セクションで、任意の組織ディレクトリのアカウントと個人用 Microsoft アカウント (Skype、Xbox、Outlook.com など) を選択します。

[登録] を選択してアプリケーションを作成します。

後で使用するために、アプリケーション (クライアント) ID と ディレクトリ (テナント) ID 値をコピーして保存します。これらの値は、次のセクションの GraphService クラスに格納します。

[管理] で、[認証] を選択します。

[モバイルアプリケーションとデスクトップアプリケーション> プラットフォームを追加する] を選択します。

[リダイレクト URI] セクションで、[https://login.microsoftonline.com/common/oauth2/nativeclient] を選択し、[カスタムリダイレクト URI] http://localhost追加します。

[構成] をクリックします。

[管理] の下にある [API のアクセス許可] を選択します。

Microsoft Graph User.Read アクセス許可が [構成済みのアクセス許可] にない場合は、[アクセス許可を追加] を選択します。 [Request API のアクセス許可] 画面で、Microsoft Graph> アプリケーションのアクセス許可を選択し、User.Read を検索します。 [ユーザー] > [User.Read] > [アクセス許可を追加] の順に選択します。

Graph SDK と Azure ID を統合する

Windows で .NET MAUI アプリを実行し、Azure でアプリの登録を構成したので、Azure Identity と Microsoft Graph と統合するために、いくつかの NuGet パッケージをプロジェクトに追加しましょう。

ソリューションエクスプローラー でプロジェクト 右クリックし、コンテキストメニューから [NuGet パッケージの管理]... を選択します。

NuGet パッケージマネージャー ウィンドウで、[参照] タブを選択し、Azure.Identityを検索します。

Azure.Identity パッケージ。

[インストール] をクリックして、安定したバージョンの Azure.Identity パッケージをプロジェクトに追加します。

次に、Microsoft.Graphを検索します。

Microsoft.Graph パッケージ

[インストール] をクリックして、安定したバージョンの Microsoft.Graph パッケージをプロジェクトに追加します。

新しいパッケージのインストールが完了したら、NuGet パッケージマネージャーの ウィンドウを閉じます。

プロジェクトをもう一度右クリックし、コンテキストメニューから「追加」を選択し、「クラス」 を選択します。

[新しい項目の追加] ウィンドウが表示されたら、クラスにGraphService 名前を付け、[追加]をクリックします。

GraphService クラスを追加します。

GraphService クラスに 4 つのプライベートメンバーを追加し、プレースホルダーテキストの独自の クライアント 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;

GraphServiceに Initialize() メソッドを追加します。これはコンストラクターから呼び出されます。初期化コードは、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("http://localhost"),
        };

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

手記

'Initialize()' メソッドは現在、Windows のみをサポートしています。 iOS と Android での認証には、別の NuGet パッケージ (Microsoft.Identity.Client) といくつかの追加手順が必要です。モバイル認証の詳細については、「ネイティブクライアントアプリケーションの構成」を参照してください。

認証されたユーザーの User オブジェクトを返す GetMyDetailsAsync() という名前のパブリック非同期メソッドを追加します。

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

GraphServiceに追加された新しいコードをコンパイルするには、2 つの 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;

MainPage.xamlの GetUserInfoButton に追加した Clicked イベントにイベントハンドラーを追加します。イベントハンドラーは、GraphService のインスタンスが null の場合に作成し、ユーザーデータをフェッチする呼び出しを行います。 HelloLabelのテキストが更新され、ユーザーに「こんにちは」と表示され、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 コントロールを削除し、4 つの新しいラベルを追加してユーザー情報を表示します。更新される各ラベルには名前が付けられ、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 を使用してレコメンデーションアプリを作成する

次の方法で共有

チュートリアル: Microsoft Graph SDK を使用して .NET MAUI アプリを作成する

前提条件

環境の設定

.NET MAUI プロジェクトの作成

Azure にクライアントを登録する

Graph SDK と Azure ID を統合する

ユーザー情報を表示するようにユーザーインターフェイスを更新する

次の手順

関連項目

その他のリソース

次の方法で共有

チュートリアル: Microsoft Graph SDK を使用して .NET MAUI アプリを作成する

前提 条件

環境の設定

.NET MAUI プロジェクトの作成

Azure にクライアントを登録する

Graph SDK と Azure ID を統合する

ユーザー情報を表示するようにユーザー インターフェイスを更新する

次の手順

関連項目

その他のリソース

前提条件

ユーザー情報を表示するようにユーザーインターフェイスを更新する