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

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

はじめに

このチュートリアルでは、Visual Studio 2022 (17.3 以降) で Windows 用 .NET MAUI アプリを作成し、Microsoft Graph からユーザー データを読み込む方法について説明します。 Azure Identity を使用してMicrosoft アカウントを認証します。 MSAL トークンの形式の ID 情報は、Graph SDK 呼び出しを承認し、認証されたユーザーの表示名を取得するために使用されます。

環境のセットアップ

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

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ディレクトリ (テナント) ID の値を コピーして保存します。 これらの値は、次のセクションの GraphService クラスに格納します。

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

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

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

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

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

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

Graph SDK と Azure Identity を統合する

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

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

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

Azure.Identity パッケージ。

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

次に、Microsoftを検索します。グラフ:

Microsoft。Graph パッケージ。

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

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

プロジェクトをもう一度右クリックし、[ 追加] を選択| コンテキスト メニューのクラス。

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

GraphService クラスを追加します。

クラスに 4 つのプライベート メンバーを 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.Request().GetAsync();
    }
    catch (Exception ex)
    {
        Console.WriteLine($"Error loading user details: {ex}");
        return null;
    }
}

に追加された新しいコードをコンパイルするには、2 つの using ステートメントが GraphService必要です。

using Azure.Identity;
using Microsoft.Graph;

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 で、 と Userのプライベート変数を にGraphService追加します。

private GraphService graphService;
private User user;

MainPage.xaml で に追加したClickedイベントのイベント ハンドラーを追加GetUserInfoButtonします。 イベント ハンドラーは、 が null の場合は の GraphService インスタンスを作成し、ユーザー データをフェッチする呼び出しを行います。 の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 ユーザー情報を返すようになったので、ユーザー インターフェイスを更新して、追加のユーザー プロファイル情報を表示してみましょう。

まず、クラスに新しい監視可能なプロパティをMainViewModel追加して、Graph API応答から 、GivenNameSurname、および UserPrincipalName フィールドを格納DisplayNameします。

[ObservableProperty]
private string userName = "";

[ObservableProperty]
private string userGivenName = "";

[ObservableProperty]
private string userSurname = "";

[ObservableProperty]
private string userPrincipalName = "";

MainPage.xaml.cs で、Graph User オブジェクトのプロパティを使用して GetUserInfoBtn_Clicked 、イベント ハンドラーの新しいプロパティの値を設定します。

[RelayCommand]
private async Task LoadUserInformation()
{
    var service = new GraphService();
    Microsoft.Graph.User user = await service.GetMyDetailsAsync();
    helloMessage = $"Hello, {user.DisplayName}";

    UserName = user.DisplayName;
    UserGivenName = user.GivenName;
    UserSurname = user.Surname;
    UserPrincipalName = user.UserPrincipalName;
}

最後に、MainPage.xaml で の内容を更新し、既存の VerticalStackLayoutウェルカム ラベルとコントロールを削除し Image 、4 つの新しいラベルを追加してユーザー情報を表示します。 の VerticalStackLayout 内容は次のようになります。

<VerticalStackLayout
    Spacing="25"
    Padding="30,0"
    VerticalOptions="Center">
    <Label
        Text="{Binding Path=HelloMessage, Mode=OneWay}"
        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"
        Command="{Binding Path=IncrementCounterCommand}"
        HorizontalOptions="Center" />
    <Button
        Text="Load User Info"
        SemanticProperties.Hint="Loads user information from Microsoft Graph"
        Command="{Binding Path=LoadUserInformationCommand}"
        HorizontalOptions="Center" />
    <Label
        Text="{Binding Path=UserName, Mode=OneWay}"
        SemanticProperties.Description="Displays the user's display name from Microsoft Graph."
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />
    <Label
        Text="{Binding Path=UserGivenName, Mode=OneWay}"
        SemanticProperties.Description="Displays the user's first name info from Microsoft Graph"
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />
    <Label
        Text="{Binding Path=UserSurname, Mode=OneWay}"
        SemanticProperties.Description="Displays the user's last name from Microsoft Graph"
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />
    <Label
        Text="{Binding Path=UserPrincipalName, Mode=OneWay}"
        SemanticProperties.Description="Displays the user principal name from Microsoft Graph"
        SemanticProperties.HeadingLevel="Level2"
        FontSize="18"
        HorizontalOptions="Center" />
</VerticalStackLayout>

アプリをもう一度実行し、[ ユーザー情報の読み込み ] ボタンをクリックします。 認証後、アプリにユーザー情報が表示されます。

追加のユーザー情報がラベルに読み込まれました。

.NET MAUI アプリでMicrosoft Graph SDK をインストールして使用する方法については、「Microsoft Graph .NET SDK をインストールする」を参照してください。

.NET MAUI を学習するためのリソース

Microsoft Graph SDK の概要

ネイティブ クライアント アプリケーションを構成する

Azure AD ID とアクセス管理 API の概要