チュートリアル: 外部テナントを使用して .NET MAUI アプリでユーザーをサインインさせる

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

このチュートリアルは、.NET マルチプラットフォームアプリ UI (.NET MAUI) シェルを構築する方法を示すシリーズの最後の部分であり、サインインとサインアウトのコードを追加し、そのアプリを Windows プラットフォームで実行する方法について説明します。このシリーズのパート 2 で、.NET MAUI シェルアプリの作成、MSAL ヘルパークラスを使用した MSAL SDK のサポートの追加、必要なライブラリのインストール、画像リソースの追加を行いました。この最後の手順では、サインインとサインアウトのコードを .NET MAUI シェルに追加し、そのアプリを Windows プラットフォームで実行する方法を示します。

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

サインインとサインアウトコードを追加します。
アプリシェルを変更します。
プラットフォーム固有のコードを追加します。
アプリ設定を追加します。
.NET MAUI シェルアプリを実行してテストします。

前提条件

チュートリアル: .NET MAUI アプリを外部テナントに登録して構成する

.NET MAUI アプリのユーザーインターフェイス (UI) は、各ターゲットプラットフォームのネイティブコントロールにマップされるオブジェクトで構成されています。 .NET MAUI アプリの UI の作成に使用される主なコントロールグループは、ページ、レイアウト、ビューです。

メインビューページを追加する

次の手順では、main view が定義されるようにコードを組みます。

プロジェクトから MainPage.xaml と MainPage.xaml.cs を削除します。これらはもう必要ありません。 [ソリューションエクスプローラー] ペインで、[MainPage.xaml] のエントリを見つけて、右クリックして [削除] を選択します。
[SignInMaui] プロジェクトで右クリックし、[追加]>[新しいフォルダー] を選択します。フォルダーの名前を [Views] にします。
[Views] で右クリックします。
[追加]>[新しい項目...] を選択します。
テンプレートの一覧で [.NET MAUI] を選択します。
[.NET MAUI ContentPage (XAML)] テンプレートを選択します。ファイルの名前を [MainView.xaml] にします。
[追加] を選択します。

MainView.xaml ファイルが新しいドキュメントタブで開き、ページの UI を表すすべての XAML マークアップが表示されます。 XAML マークアップを次のマークアップで置き換えます。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SignInMaui.Views.MainView"
             Title="Microsoft Entra External ID"
             >
    <Shell.BackButtonBehavior>
        <BackButtonBehavior IsVisible="False" IsEnabled="False" />
    </Shell.BackButtonBehavior>

    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Center">

            <Image
                Source="external_id.png"
                SemanticProperties.Description="External ID"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label 
                Text="CIAM"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="26"
                HorizontalOptions="Center" />

            <Label 
                Text="MAUI sample"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="26"
                HorizontalOptions="Center" />

            <Button 
                x:Name="SignInButton"
                Text="Sign In"
                SemanticProperties.Hint="Sign In"
                Clicked="OnSignInClicked"
                HorizontalOptions="Center"
                IsEnabled="False"/>

        </VerticalStackLayout>
    </ScrollView>
 
</ContentPage>

ファイルを保存します。

以下でページに配置された XAML コントロールの主要なパーツを理解しましょう。
- <ContentPage> は MainView クラスのルートオブジェクトです。
- <VerticalStackLayout> は ContentPage の子オブジェクトです。このレイアウトコントロールは、子要素を垂直方向に順番に配置します。
- <Image> は画像を表示します。この場合は、前にダウンロードした azureactive_directory.png_ を使用しています。
- <Label> コントロールはテキストを表示します。
- <Button> はユーザーが押すことができ、これによって Clicked イベントが発生します。 Clicked イベントに応じてコードを実行できます。
- Clicked="OnSignInClicked" ボタンの Clicked イベントは OnSignInClicked イベントハンドラーに割り当てられ、これは分離コードファイルで定義されます。このコードを次の手順で作成します。

OnSignInClicked イベントを処理する

次の手順は、ボタンの Clicked イベントのコードを追加することです。

Visual Studio の [ソリューションエクスプローラー] ペインで、[MainView.xaml] ファイルを展開して、分離コードファイル [MainView.xaml.cs] を表示します。 [MainView.xaml.cs] を開き、ファイルの内容を次のコードで置き換えます。

// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.

using SignInMaui.MSALClient;
using Microsoft.Identity.Client;

namespace SignInMaui.Views
{
    public partial class MainView : ContentPage
    {
        public MainView()
        {
            InitializeComponent();

            IAccount cachedUserAccount = PublicClientSingleton.Instance.MSALClientHelper.FetchSignedInUserFromCache().Result;

            _ = Dispatcher.DispatchAsync(async () =>
            {
                if (cachedUserAccount == null)
                {
                    SignInButton.IsEnabled = true;
                }
                else
                {
                    await Shell.Current.GoToAsync("claimsview");
                }
            });
        }

        private async void OnSignInClicked(object sender, EventArgs e)
        {
            await PublicClientSingleton.Instance.AcquireTokenSilentAsync();
            await Shell.Current.GoToAsync("claimsview");
        }
        protected override bool OnBackButtonPressed() { return true; }

    }
}

MainView クラスは、アプリのメインビューを表示するコンテンツページです。コンストラクターでは、キャッシュされたユーザーアカウントが見つからない場合、PublicClientSingleton インスタンスからの MSALClientHelper を使用してキャッシュされたユーザーアカウントを取得しサインインボタンを有効にします。

サインインボタンがクリックされると、AcquireTokenSilentAsync メソッドを呼び出してトークンをサイレントで取得し、Shell.Current.GoToAsync メソッドを使用して claimsview ページに遷移します。さらに、OnBackButtonPressed メソッドは true を返すようにオーバーライドされるので、このビューの戻るボタンは無効になります。

要求ビューページを追加する

次の手順では、ClaimsView ページが定義されるようにコードを組みます。ページには、ID トークンで見つかったユーザーの要求が表示されます。

Visual Studio の [ソリューションエクスプローラー] ペインで、[Views] を右クリックします。
[追加]>[新しい項目...] を選択します。
テンプレートの一覧で [.NET MAUI] を選択します。
[.NET MAUI ContentPage (XAML)] テンプレートを選択します。ファイルの名前を [ClaimsView.xaml] にします。
[追加] を選択します。

ClaimsView.xaml ファイルが新しいドキュメントタブで開き、ページの UI を表すすべての XAML マークアップが表示されます。 XAML マークアップを次のマークアップで置き換えます。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SignInMaui.Views.ClaimsView"
             Title="ID Token View">
    <Shell.BackButtonBehavior>
        <BackButtonBehavior IsVisible="False" IsEnabled="False" />
    </Shell.BackButtonBehavior>
    <VerticalStackLayout>
        <Label 
            Text="CIAM"
            FontSize="26"
            HorizontalOptions="Center" />
        <Label 
            Text="MAUI sample"
            FontSize="26"
            Padding="0,0,0,20"
            HorizontalOptions="Center" />

        <Label 
            Padding="0,20,0,0"
            VerticalOptions="Center" 
            HorizontalOptions="Center"
            FontSize="18"
            Text="Claims found in ID token"
            />
        <ListView ItemsSource="{Binding IdTokenClaims}"
                  x:Name="Claims">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Padding="0, 0, 0, 0">
                            <Label Grid.Column="1" 
                                   Text="{Binding}" 
                                   HorizontalOptions="Center" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <Button
            x:Name="SignOutButton"
            Text="Sign Out"
            HorizontalOptions="Center"
            Clicked="SignOutButton_Clicked" />
    </VerticalStackLayout>
</ContentPage>

この XAML マークアップコードは、.NET MAUI アプリの要求ビューの UI レイアウトを表します。まず、ContentPage をタイトルで定義し、戻るボタンの動作を無効にします。

VerticalStackLayout 内には、静的テキストを表示するいくつかの Label 要素があり、その後に Claims という名前の ListView が続き、ID トークンで見つかった要求を表示するための IdTokenClaims というコレクションにバインドされます。各要求は、ViewCell 内で DataTemplate を使用してレンダリングされ、グリッド内で中央揃えの Label として表示されます。

最後に、レイアウトの下部の中央に Sign Out ボタンがあり、クリックされると SignOutButton_Clicked イベントハンドラーがトリガーされます。

ClaimsView データを処理する

次の手順は、ClaimsView データを処理するためのコードを追加することです。

Visual Studio の [ソリューションエクスプローラー] ペインで、[ClaimsView.xaml] ファイルを展開して、分離コードファイル [ClaimsView.xaml.cs] を表示します。 [ClaimsView.xaml.cs] を開き、ファイルの内容を次のコードで置き換えます。
```
using SignInMaui.MSALClient;
using Microsoft.Identity.Client;

namespace SignInMaui.Views;

public partial class ClaimsView : ContentPage
{
    public IEnumerable<string> IdTokenClaims { get; set; } = new string[] {"No claims found in ID token"};
    public ClaimsView()
    {
        BindingContext = this;
        InitializeComponent();

        _ = SetViewDataAsync();
    }

    private async Task SetViewDataAsync()
    {
        try
        {
            _ = await PublicClientSingleton.Instance.AcquireTokenSilentAsync();

            IdTokenClaims = PublicClientSingleton.Instance.MSALClientHelper.AuthResult.ClaimsPrincipal.Claims.Select(c => c.Value);

            Claims.ItemsSource = IdTokenClaims;
        }

        catch (MsalUiRequiredException)
        {
            await Shell.Current.GoToAsync("claimsview");
        }
    }

    protected override bool OnBackButtonPressed() { return true; }

    private async void SignOutButton_Clicked(object sender, EventArgs e)
    {
        await PublicClientSingleton.Instance.SignOutAsync().ContinueWith((t) =>
        {
            return Task.CompletedTask;
        });

        await Shell.Current.GoToAsync("mainview");
    }
}
```
ClaimsView.xaml.cs コードは、.NET MAUI アプリの要求ビューの分離コードを表します。まず、必要な名前空間をインポートし、ContentPage を拡張する ClaimsView クラスを定義します。 IdTokenClaims プロパティは文字列の Enumerable であり、最初はクレームが見つからないことを示す 1 つの文字列に設定されています。

ClaimsView コンストラクターは、バインディングコンテキストを現在のインスタンスに設定し、ビューコンポーネントを初期化し、SetViewDataAsync メソッドを非同期的に呼び出します。 SetViewDataAsync メソッドは、トークンのサイレントな取得を試み、認証結果から要求を取得し、それらを Claims という名前の ListView に表示するために IdTokenClaims プロパティを設定します。認証にユーザー操作が必要であることを示す MsalUiRequiredException が発生した場合、アプリは要求ビューに遷移します。

OnBackButtonPressed メソッドは、戻るボタンの動作を常に true を返すようにオーバーライドして、ユーザーがこのビューから戻る動作をできないようにします。 SignOutButton_Clicked イベントハンドラーは、PublicClientSingleton インスタンスを使用してユーザーをサインアウトし、完了すると main view に遷移します。

アプリシェルを変更する

AppShell クラスは、アプリのビジュアル階層、つまりアプリの UI の作成に使用される XAML マークアップを定義します。 AppShell が Views について知ることができるように、これを更新します。

[ソリューションエクスプローラー] ペインで AppShell.xaml ファイルをダブルクリックして、XAML エディターを開きます。 XAML マークアップを次のコードで置き換えます。
```
<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="SignInMaui.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:SignInMaui.Views"
    Shell.FlyoutBehavior="Disabled">

    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainView}"
        Route="MainPage" />
</Shell>
```
XAML コードは、ポップアップ動作を無効にするクラスをAppShell定義し、メインコンテンツを、クラスをShellContent指すタイトルHomeとコンテンツテンプレートを持つ要素にMainView設定します。
Visual Studio の [ソリューションエクスプローラー] ペインで、[AppShell.xaml] ファイルを展開して、分離コードファイル [AppShell.xaml.cs] を表示します。 [AppShell.xaml.cs] を開き、ファイルの内容を次のコードで置き換えます。
```
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
using SignInMaui.Views;

namespace SignInMaui;

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();
        Routing.RegisterRoute("mainview", typeof(MainView));
        Routing.RegisterRoute("claimsview", typeof(ClaimsView));
    }
}
```
AppShell.xaml.cs ファイルを更新して、MainView と ClaimsView に必要なルート登録を含めます。 InitializeComponent() メソッドを呼び出すことで、AppShell クラスの初期化が確実に行われるようにします。 RegisterRoute() メソッドは、mainview と claimsview ルートをそれぞれのビューの種類 MainView と ClaimsView に関連付けます。

プラットフォーム固有のコードを追加する

.NET MAUI アプリプロジェクトには Platforms フォルダーが含まれており、各子フォルダーは、.NET MAUI がターゲットにできるプラットフォームを表しています。既定の Application クラスを補完するアプリケーション固有の動作を提供するには、Platforms/Windows/App.xaml.cs を変更します。

ファイルの内容を次のコードで置き換えます。

using SignInMaui.MSALClient;
using Microsoft.Identity.Client;
using Microsoft.UI.Xaml;

// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.

namespace SignInMaui.WinUI;

/// <summary>
/// Provides application-specific behavior to supplement the default Application class.
/// </summary>
public partial class App : MauiWinUIApplication
{
    /// <summary>
    /// Initializes the singleton application object.  This is the first line of authored code
    /// executed, and as such is the logical equivalent of main() or WinMain().
    /// </summary>
    public App()
    {
        this.InitializeComponent();

        // configure redirect URI for your application
        PlatformConfig.Instance.RedirectUri = $"msal{PublicClientSingleton.Instance.MSALClientHelper.AzureAdConfig.ClientId}://auth";

        // Initialize MSAL
        IAccount existinguser = Task.Run(async () => await PublicClientSingleton.Instance.MSALClientHelper.InitializePublicClientAppAsync()).Result;

    }

    protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();

    protected override void OnLaunched(LaunchActivatedEventArgs args)
    {
        base.OnLaunched(args);

        var app = SignInMaui.App.Current;
        PlatformConfig.Instance.ParentWindow = ((MauiWinUIWindow)app.Windows[0].Handler.PlatformView).WindowHandle;
    }
}

コードでは、アプリケーションのリダイレクト URI を構成し、MSAL を初期化してから、アプリケーションの親ウィンドウを設定します。さらに、OnLaunched メソッドをオーバーライドして起動イベントを処理し、親ウィンドウハンドルを取得します。

アプリ設定を追加する

設定を使用すると、アプリの動作を構成するデータをコードから分離できるため、アプリを再構築せずに動作を変更できます。 MauiAppBuilder は、.NET MAUI アプリで設定を構成するための ConfigurationManager を提供します。 appsettings.json ファイルを EmbeddedResource として追加しましょう。

appsettings.json を作成するには、次の手順に従います。

Visual Studio の [ソリューションエクスプローラー] ペインで、[SignInMaui] プロジェクトで右クリック>[追加]>[新しい項目...]。
[Web]>[JavaScript JSON 構成ファイル] を選択します。そのファイルに appsettings.json という名前を付けます。
[追加] を選択します。
[appsettings.json] を選択します
[プロパティ] ペインで、[ビルドアクション] を [埋め込みリソース] に設定します。
[プロパティ] ペインで、[出力ディレクトリにコピー] を [常にコピー] に設定します。

appsettings.json ファイルの内容を次のコードで置き換えます。

{
  "AzureAd": {
    "Authority": "https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/",
    "ClientId": "Enter_the_Application_Id_Here",
    "CacheFileName": "msal_cache.txt",
    "CacheDir": "C:/temp"
  },
  "DownstreamApi": {
    "Scopes": "openid offline_access"
  }
}

appsettings.json 内で次のプレースホルダーを見つけます。
1. Enter_the_Tenant_Subdomain_Here を、ディレクトリ (テナント) サブドメインに置き換えます。たとえば、テナントのプライマリドメインが contoso.onmicrosoft.com の場合は、contoso を使用します。テナント名がない場合は、テナントの詳細を読み取る方法を確認してください。
2. Enter_the_Application_Id_Here を、前に登録したアプリのアプリケーション (クライアント) ID に置き換えます。

カスタム URL ドメインを使用する (省略可能)

カスタムドメインを使用して、認証 URL を完全にブランド化します。ユーザーの視点から見ると、認証プロセスの間、ユーザーは ciamlogin.com ドメイン名にリダイレクトされず、あなたのドメインにとどまります。

カスタムドメインを使用するには、次の手順に従います。

「外部テナントのアプリに対してカスタム URL ドメインを有効にする」の手順を実行して、外部テナントに対してカスタム URL ドメインを有効にします。
appsettings.json ファイルを開きます。
1. Authority プロパティの値を https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here に更新します。 Enter_the_Custom_Domain_Here を実際のカスタム URL ドメインに、Enter_the_Tenant_ID_Here を実際のテナント ID に置き換えます。テナント ID がわからない場合は、テナントの詳細を読み取る方法を確認してください。
2. [Enter_the_Custom_Domain_Here] という値を持つ knownAuthorities プロパティを追加します。

カスタム URL ドメインが login.contoso.com、テナント ID が aaaabbbb-0000-cccc-1111-dddd2222eeee の場合、appsettings.json ファイルに変更を加えた後には、ファイルは次のスニペットのようになるはずです。

{
  "AzureAd": {
    "Authority": "https://login.contoso.com/aaaabbbb-0000-cccc-1111-dddd2222eeee",
    "ClientId": "Enter_the_Application_Id_Here",
    "CacheFileName": "msal_cache.txt",
    "CacheDir": "C:/temp",
    "KnownAuthorities": ["login.contoso.com"]
  },
  "DownstreamApi": {
    "Scopes": "openid offline_access"
  }
}

.NET MAUI デスクトップアプリを実行してテストする

.NET MAUI アプリは、複数のオペレーティングシステムとデバイス上で実行できるように設計されています。どのターゲットでアプリをテストしてデバッグしたいかを選択する必要があります。

Visual Studio ツールバーの [デバッグターゲット] を、デバッグしてテストしたいデバイスに設定します。次の手順は、[デバッグターゲット] を Windows に設定する方法を示しています。

[デバッグターゲット] ドロップダウンリストを選択します。
フレームワークを選択します
[net7.0-windows...] を選択します

F5 キーを押すか、Visual Studio の上部にある "再生ボタン" を選択してアプリを実行します。

これでサンプルの .NET MAUI デスクトップアプリケーションをテストできるようになりました。アプリケーションを実行すると、デスクトップアプリケーションウィンドウが自動的に表示されます。
表示されたデスクトップウィンドウで、[サインイン] ボタンを選択します。ブラウザーウィンドウが開き、サインインが求められます。

サインインプロセス中に、さまざまなアクセス許可を付与するように求められます (アプリケーションがデータにアクセスできるようにします)。サインインと同意が成功すると、アプリケーション画面にメインページが表示されます。

次の手順

チュートリアル: .NET MAUI アプリにアプリロールを追加し、IDトークンで受け取る

次の方法で共有

前提条件

メインビューページを追加する

OnSignInClicked イベントを処理する

要求ビューページを追加する

ClaimsView データを処理する

アプリシェルを変更する

プラットフォーム固有のコードを追加する

アプリ設定を追加する

カスタム URL ドメインを使用する (省略可能)

.NET MAUI デスクトップアプリを実行してテストする

次の手順

フィードバック

その他のリソース

次の方法で共有

前提条件

サインインとサインアウト コードを追加する

メイン ビュー ページを追加する

OnSignInClicked イベントを処理する

要求ビュー ページを追加する

ClaimsView データを処理する

アプリ シェルを変更する

プラットフォーム固有のコードを追加する

アプリ設定を追加する

カスタム URL ドメインを使用する (省略可能)

.NET MAUI デスクトップ アプリを実行してテストする

次の手順

フィードバック

その他のリソース

サインインとサインアウトコードを追加する

メインビューページを追加する

要求ビューページを追加する

アプリシェルを変更する

.NET MAUI デスクトップアプリを実行してテストする