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

[アーティクル]
07/05/2024

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 プロジェクトの作成

Note

.NET MAUI プロジェクトの設定に既に慣れている場合は、「 Azure でクライアントを登録する」セクションに進むことができます。

Visual Studio を起動し、スタートウィンドウで 新しいプロジェクトを作成 をクリックして新しいプロジェクトを作成します。

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

[新しいプロジェクトの作成] ウィンドウの [すべてのプロジェクトの種類] ドロップダウンで [MAUI] を選択し、[.NET MAUI アプリ] テンプレートを選択し、[次へ] ボタンをクリックします。

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

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

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

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

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

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

プロジェクトが作成されます。

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

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

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

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

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

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

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

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

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

[サポートされているアカウントの種類] セクションで、 [Accounts in any organizational directory and personal Microsoft accounts (for example, Skype, Xbox, Outlook.com)](任意の組織のディレクトリ内のアカウントと個人用の Microsoft アカウント (例: Skype、Xbox、Outlook.com)) を選択します。

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

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

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

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

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

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

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

Microsoft Graph User.Read アクセス許可が構成されたアクセス許可に存在しない場合は追加アクセス許可を選択します。 Request API のアクセス許可画面Microsoft Graph > アプリケーションのアクセス許可を選択しUser.Readを検索。 Userを展開し、User.Read を選択し、[アクセス許可の追加] をクリックします。

Graph SDK と Azure ID を統合する

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

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

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

Azure.Identity パッケージ。

Install をクリックして、Azure.Identity パッケージの最新の安定バージョンをプロジェクトに追加します。

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

Microsoft.Graph パッケージ。

Install をクリックして、Microsoft.Graph パッケージの最新の安定バージョンをプロジェクトに追加します。

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

プロジェクトを再度右クリックし、コンテキストメニューから [追加 | クラス] を選択します。

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

GraphService クラスを追加します。

GraphService クラスに 4 つのプライベートメンバーを追加し、プレースホルダーテキストの独自の client 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("https://localhost"),
        };

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

Note

'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のテキストが更新され、ユーザーに 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 コントロールを削除し、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 を統合する

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

次のステップ

関連項目

その他のリソース

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