.NET MAUI アプリに認証を追加する

[アーティクル]
01/12/2024

手記

この製品は提供終了です。 .NET 8 以降を使用するプロジェクトの代わりに、Community Toolkit Datasync ライブラリを参照してください。

このチュートリアルでは、Microsoft Entra ID を使用して、TodoApp プロジェクトに Microsoft 認証を追加します。このチュートリアルを完了する前に、プロジェクト作成し、バックエンドをデプロイしていることを確認してください。

先端

Microsoft Entra ID は認証に使用されますが、Azure Mobile Apps では任意の認証ライブラリを使用できます。

バックエンドサービスに認証を追加する

バックエンドサービスは、標準の ASP.NET 6 サービスです。 ASP.NET 6 サービスの認証を有効にする方法を示すチュートリアルは、Azure Mobile Apps で動作します。

バックエンドサービスに対して Microsoft Entra 認証を有効にするには、次の手順を実行する必要があります。

Microsoft Entra ID を使用してアプリケーションを登録します。
ASP.NET 6 バックエンドプロジェクトに認証チェックを追加します。

アプリケーションを登録する

まず、Microsoft Entra テナントに Web API を登録し、次の手順に従ってスコープを追加します。

Azure portalにサインインします。
複数のテナントにアクセスできる場合は、上部のメニューの ディレクトリとサブスクリプション フィルターを使用して、アプリケーションを登録するテナントに切り替えます。
Microsoft Entra ID検索して選択します。
[管理] で、[新しい登録][アプリの登録] 選択します。
- 名前: アプリケーションの名前を入力します。たとえば、TodoApp クイックスタートをします。アプリのユーザーには、この名前が表示されます。後で変更できます。
- サポートされているアカウントの種類: 任意の組織ディレクトリ (任意の Microsoft Entra ディレクトリ - マルチテナント) と個人の Microsoft アカウント (Skype、Xbox など) にアカウントを
[登録] を選択します。
[管理] で、[API の公開][スコープの追加] 選択します。
アプリケーション ID URIの場合は、[保存して続行] を選択既定受け入れます。
次の詳細を入力します。
- スコープ名の: access_as_user
- 誰が同意できますか?: 管理者とユーザーの
- 管理者の同意の表示名: Access TodoApp
- 管理者の同意の説明: Allows the app to access TodoApp as the signed-in user.
- ユーザー同意表示名: Access TodoApp
- ユーザーの同意の説明: Allow the app to access TodoApp on your behalf.
- 状態の: 有効な
[スコープ追加] を選択して、スコープの追加を完了します。
api://<client-id>/access_as_user (Web API スコープと呼ばれます) と同様に、スコープの値に注意してください。クライアントを構成するときにスコープが必要です。
[概要]選択します。
Essentials セクション (Web API アプリケーション IDと呼ばれます) のアプリケーション (クライアント) ID に注意してください。バックエンドサービスを構成するには、この値が必要です。

Visual Studio を開き、TodoAppService.NET6 プロジェクトを選択します。

プロジェクトを右クリックし、[NuGet パッケージの管理]<選択します。..します。
新しいタブで、[参照選択し、検索ボックス「Microsoft.Identity.Web」と入力します。
Microsoft.Identity.Web パッケージを選択し、インストールを押します。
プロンプトに従って、パッケージのインストールを完了します。
Program.csを開きます。 using ステートメントの一覧に次を追加します。

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.Identity.Web;

builder.Services.AddDbContext()の呼び出しのすぐ上に次のコードを追加します。

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
  .AddMicrosoftIdentityWebApi(builder.Configuration);
builder.Services.AddAuthorization();

app.MapControllers()の呼び出しのすぐ上に次のコードを追加します。

app.UseAuthentication();
app.UseAuthorization();

Program.cs は次のようになります。

using Microsoft.AspNetCore.Datasync;
using Microsoft.EntityFrameworkCore;
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.Identity.Web;
using TodoAppService.NET6.Db;
  
var builder = WebApplication.CreateBuilder(args);
var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");
  
if (connectionString == null)
{
  throw new ApplicationException("DefaultConnection is not set");
}
  
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
  .AddMicrosoftIdentityWebApi(builder.Configuration);
builder.Services.AddAuthorization();
builder.Services.AddDbContext<AppDbContext>(options => options.UseSqlServer(connectionString));
builder.Services.AddDatasyncControllers();
  
var app = builder.Build();
  
// Initialize the database
using (var scope = app.Services.CreateScope())
{
  var context = scope.ServiceProvider.GetRequiredService<AppDbContext>();
  await context.InitializeDatabaseAsync().ConfigureAwait(false);
}
  
// Configure and run the web service.
app.UseAuthentication();
app.UseAuthorization();
app.MapControllers();
app.Run();

Controllers\TodoItemController.csを編集します。クラスに [Authorize] 属性を追加します。クラスは次のようになります。

using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Datasync;
using Microsoft.AspNetCore.Datasync.EFCore;
using Microsoft.AspNetCore.Mvc;
using TodoAppService.NET6.Db;

namespace TodoAppService.NET6.Controllers
{
  [Authorize]
  [Route("tables/todoitem")]
  public class TodoItemController : TableController<TodoItem>
  {
    public TodoItemController(AppDbContext context)
      : base(new EntityTableRepository<TodoItem>(context))
    {
    }
  }
}

appsettings.jsonを編集します。次のブロックを追加します。

  "AzureAd": {
    "Instance": "https://login.microsoftonline.com",
    "ClientId": "<client-id>",
    "TenantId": "common"
  },

<client-id> を、前に記録した Web API アプリケーション ID に置き換えます。完了すると、次のようになります。

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com",
    "ClientId": "<client-id>",
    "TenantId": "common"
  },
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=TodoApp;Trusted_Connection=True"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

サービスをもう一度 Azure に発行します。

TodoAppService.NET6 プロジェクトを右クリックし、[発行]選択します。..します。
タブの右上隅にある [発行] ボタンを選択します。

ブラウザーを開いて https://yoursite.azurewebsites.net/tables/todoitem?ZUMO-API-VERSION=3.0.0します。サービスは、認証が必要であることを示す 401 応答を返すようになったことに注意してください。

エラーが表示されているブラウザーのスクリーンショット。

ID サービスにアプリを登録する

Microsoft Data Sync Framework には、HTTP トランザクションのヘッダー内で Json Web トークン (JWT) を使用する認証プロバイダーが組み込まれています。このアプリケーションは、Microsoft Authentication Library (MSAL) を使用してこのようなトークンを要求し、サインインしているユーザーをバックエンドサービスに承認します。

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

ネイティブクライアントを登録して、Microsoft Identity Library (MSAL) などのクライアントライブラリを使用して、アプリでホストされている Web API への認証を許可できます。

Azure portalで、[新規登録][Microsoft Entra IDアプリの登録] を選択します。
[アプリケーション の登録] ページで、次の手順を実行します。
- アプリ登録の名前を入力します。名前 native-quickstart を使用して、バックエンドサービスで使用される名前と区別することができます。
- 任意の組織ディレクトリ (任意の Microsoft Entra ディレクトリ - マルチテナント) と個人の Microsoft アカウント (Skype、Xbox など)アカウントを選択します。
- リダイレクト URI :
  - パブリッククライアント (モバイル & デスクトップ) を選択します
  - URL quickstart://auth を入力します
[登録] を選択します。
[API のアクセス許可選択[マイ APIにアクセス許可追加します。
バックエンドサービス用に先ほど作成したアプリ登録を選択します。アプリの登録が表示されない場合は、access_as_user スコープを追加したことを確認してください。
[アクセス許可選択] で、access_as_userを選択し、[アクセス許可の追加]選択します。
[認証>モバイルアプリケーションとデスクトップアプリケーションを選択します。
[https://login.microsoftonline.com/common/oauth2/nativeclient] の横にあるチェックボックスをオンにします。
msal{client-id}://auth の横にあるチェックボックスをオンにします ({client-id} をアプリケーション ID に置き換えます)。
[URIの追加] を選択し、追加の URI のフィールドに http://localhost を追加します。
ページ 下部にある [保存] を選択します。
[概要]選択します。モバイルアプリを構成するために必要な アプリケーション (クライアント) ID (ネイティブクライアントアプリケーション IDと呼ばれます) を書き留めます。

次の 3 つのリダイレクト URL を定義しました。

http://localhost は、WPF アプリケーションで使用されます。
https://login.microsoftonline.com/common/oauth2/nativeclient は、UWP アプリケーションで使用されます。
msal{client-id}://auth は、モバイル (Android および iOS) アプリケーションで使用されます。

Microsoft Identity Client をアプリに追加する

Visual Studio で TodoApp.sln ソリューションを開き、TodoApp.MAUI プロジェクトをスタートアッププロジェクトとして設定します。 TodoApp.MAUI プロジェクトに Microsoft Identity Library (MSAL) を追加します。

Microsoft Identity Library (MSAL) をプラットフォームプロジェクトに追加します。

プロジェクトを右クリックし、[NuGet パッケージの管理 選択します。..します。
[参照] タブ選択します。
検索ボックスに「Microsoft.Identity.Client」と入力し、Enter キーを押します。
結果を選択し、[インストール] をクリックします。
使用許諾契約書に同意してインストールを続行します。

ネイティブクライアント ID とバックエンドスコープを構成に追加します。

TodoApp.Data プロジェクトを開き、Constants.cs ファイルを編集します。 ApplicationId と Scopesの定数を追加します。

  public static class Constants
  {
      /// <summary>
      /// The base URI for the Datasync service.
      /// </summary>
      public static string ServiceUri = "https://demo-datasync-quickstart.azurewebsites.net";

      /// <summary>
      /// The application (client) ID for the native app within Microsoft Entra ID
      /// </summary>
      public static string ApplicationId = "<client-id>";

      /// <summary>
      /// The list of scopes to request
      /// </summary>
      public static string[] Scopes = new[]
      {
          "<scope>"
      };
  }

は、Microsoft Entra ID でクライアントアプリケーションを登録するときに受け取ったネイティブクライアントアプリケーション ID に置き換え、サービスアプリケーションの登録中に API を公開使用したときにコピーした Web API スコープに置き換えます。

TodoApp.MAUI プロジェクトで MainPage.xaml.cs クラスを開きます。次の using ステートメントを追加します。

using Microsoft.Datasync.Client;
using Microsoft.Identity.Client;
using System.Diagnostics;

MainPage クラスで、新しいプロパティを追加します。

public IPublicClientApplication IdentityClient { get; set; }

読み取るコンストラクターを調整します。

public MainPage()
{
    InitializeComponent();
    TodoService = new RemoteTodoService(GetAuthenticationToken);
    viewModel = new MainViewModel(this, TodoService);
    BindingContext = viewModel;
}

GetAuthenticationToken メソッドをクラスに追加します。

public async Task<AuthenticationToken> GetAuthenticationToken()
{
    if (IdentityClient == null)
    {
#if ANDROID
        IdentityClient = PublicClientApplicationBuilder
            .Create(Constants.ApplicationId)
            .WithAuthority(AzureCloudInstance.AzurePublic, "common")
            .WithRedirectUri($"msal{Constants.ApplicationId}://auth")
            .WithParentActivityOrWindow(() => Platform.CurrentActivity)
            .Build();
#elif IOS
        IdentityClient = PublicClientApplicationBuilder
            .Create(Constants.ApplicationId)
            .WithAuthority(AzureCloudInstance.AzurePublic, "common")
            .WithIosKeychainSecurityGroup("com.microsoft.adalcache")
            .WithRedirectUri($"msal{Constants.ApplicationId}://auth")
            .Build();
#else
        IdentityClient = PublicClientApplicationBuilder
            .Create(Constants.ApplicationId)
            .WithAuthority(AzureCloudInstance.AzurePublic, "common")
            .WithRedirectUri("https://login.microsoftonline.com/common/oauth2/nativeclient")
            .Build();
#endif
    }

    var accounts = await IdentityClient.GetAccountsAsync();
    AuthenticationResult result = null;
    bool tryInteractiveLogin = false;

    try
    {
        result = await IdentityClient
            .AcquireTokenSilent(Constants.Scopes, accounts.FirstOrDefault())
            .ExecuteAsync();
    }
    catch (MsalUiRequiredException)
    {
        tryInteractiveLogin = true;
    }
    catch (Exception ex)
    {
        Debug.WriteLine($"MSAL Silent Error: {ex.Message}");
    }

    if (tryInteractiveLogin)
    {
        try
        {
            result = await IdentityClient
                .AcquireTokenInteractive(Constants.Scopes)
                .ExecuteAsync();
        }
        catch (Exception ex)
        {
            Debug.WriteLine($"MSAL Interactive Error: {ex.Message}");
        }
    }

    return new AuthenticationToken
    {
        DisplayName = result?.Account?.Username ?? "",
        ExpiresOn = result?.ExpiresOn ?? DateTimeOffset.MinValue,
        Token = result?.AccessToken ?? "",
        UserId = result?.Account?.Username ?? ""
    };
}

GetAuthenticationToken() メソッドは、Microsoft Identity Library (MSAL) と連携して、サインインしているユーザーをバックエンドサービスに承認するのに適したアクセストークンを取得します。この関数は、クライアントを作成するための RemoteTodoService に渡されます。認証が成功すると、各要求を承認するために必要なデータを含む AuthenticationToken が生成されます。そうでない場合は、期限切れの無効なトークンが代わりに生成されます。

プラットフォーム指定子で #if 領域を使用して、プラットフォーム固有のオプションを追加できます。たとえば、Android では、呼び出し元のページから渡される親アクティビティを指定する必要があります。

認証用に Android アプリを構成する

次のコードを使用して、新しいクラス Platforms\Android\MsalActivity.cs を作成します。

using Android.App;
using Android.Content;
using Microsoft.Identity.Client;

namespace TodoApp.MAUI
{
    [Activity(Exported = true)]
    [IntentFilter(new[] { Intent.ActionView },
        Categories = new[] { Intent.CategoryBrowsable, Intent.CategoryDefault },
        DataHost = "auth",
        DataScheme = "msal{client-id}")]
    public class MsalActivity : BrowserTabActivity
    {
    }
}

{client-id} をネイティブクライアントのアプリケーション ID (Constants.ApplicationIdと同じ) に置き換えます。

プロジェクトが Android バージョン 11 (API バージョン 30) 以降を対象とする場合は、AndroidManifest.xml を更新して、Android パッケージの表示要件満たす必要があります。 Platforms/Android/AndroidManifest.xml を開き、次の queries/intent ノードを manifest ノードに追加します。

<manifest>
  ...
  <queries>
    <intent>
      <action android:name="android.support.customtabs.action.CustomTabsService" />
    </intent>
  </queries>
</manifest>

MauiProgram.csを開きます。ファイルの先頭に次の using ステートメントを含めます。

using Microsoft.Identity.Client;

ビルダーを次のコードに更新します。

    builder
        .UseMauiApp<App>()
        .ConfigureLifecycleEvents(events =>
        {
#if ANDROID
            events.AddAndroid(platform =>
            {
                platform.OnActivityResult((activity, rc, result, data) =>
                {
                    AuthenticationContinuationHelper.SetAuthenticationContinuationEventArgs(rc, result, data);
                });
            });
#endif
        })
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
        });

iOS 用アプリケーションを更新した後にこの手順を実行する場合は、#if ANDROID (#if と #endifを含む) によって指定されたコードを追加します。コンパイラは、コンパイルされているプラットフォームに基づいて正しいコードを選択します。このコードは、iOS 用の既存のブロックの前または後に配置できます。

Android で認証が必要な場合は、ID クライアントを取得し、システムブラウザーを開く内部アクティビティに切り替えます。認証が完了すると、システムブラウザーは定義済みのリダイレクト URL (msal{client-id}://auth) にリダイレクトします。 MsalActivity はリダイレクト URL をトラップし、OnActivityResult()を呼び出してメインアクティビティに戻ります。 OnActivityResult() メソッドは、MSAL 認証ヘルパーを呼び出してトランザクションを完了します。

Android アプリをテストする

スタートアッププロジェクトとして設定し、ターゲットとして Android エミュレーターを選択し、F5 押してアプリをビルドして実行します。アプリが起動すると、アプリにサインインするように求められます。最初の実行時に、アプリに同意するように求められます。認証が完了すると、アプリは通常どおりに実行されます。

Windows アプリをテストする

スタートアッププロジェクトとして設定し、ターゲットとして Windows マシン選択し、F5 押してアプリをビルドして実行します。アプリが起動すると、アプリにサインインするように求められます。最初の実行時に、アプリに同意するように求められます。認証が完了すると、アプリは通常どおりに実行されます。

次の手順

次に、オフラインストアを実装して、オフラインで動作するようにアプリケーションを構成します。

詳細については、次を参照してください。

クイックスタート: Microsoft ID プラットフォームを使用して Web API を保護する
MSAL.NET を使用した Xamarin Android の構成要件とトラブルシューティングのヒント
シナリオ: Web API を呼び出すモバイルアプリケーション

次の方法で共有

.NET MAUI アプリに認証を追加する

バックエンドサービスに認証を追加する

アプリケーションを登録する

ID サービスにアプリを登録する

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

Microsoft Identity Client をアプリに追加する

認証用に Android アプリを構成する

Android アプリをテストする

Windows アプリをテストする

次の手順

詳細については、次を参照してください。

その他のリソース

次の方法で共有

.NET MAUI アプリに認証を追加する

バックエンド サービスに認証を追加する

アプリケーションを登録する

ID サービスにアプリを登録する

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

Microsoft Identity Client をアプリに追加する

認証用に Android アプリを構成する

Android アプリをテストする

Windows アプリをテストする

次の手順

詳細については、次を参照してください。

その他のリソース

バックエンドサービスに認証を追加する

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