Azure AD B2C を使ってサンプル WPF デスクトップアプリで認証を構成する

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

この記事では、サンプルの Windows Presentation Foundation (WPF) デスクトップアプリケーションを使用して、Azure Active Directory B2C (Azure AD B2C) 認証をデスクトップアプリに追加する方法について説明します。

概要

OpenID Connect (OIDC) は、OAuth 2.0 を基盤にした認証プロトコルです。 OIDC を使用して、ユーザーを安全にアプリケーションにサインインさせることができます。このデスクトップアプリのサンプルでは、OIDC 認可コード Proof Key for Code Exchange (PKCE) フローで Microsoft Authentication Library (MSAL) を使用します。 MSAL は、デスクトップアプリへの認証と認可サポートの追加を簡略化する、Microsoft 提供のライブラリです。

サインインフローでは、次の手順が実行されます。

ユーザーがアプリを開き、[サインイン] を選択します。
アプリによってデスクトップデバイスのシステムブラウザーが開き、Azure AD B2C に対する認証要求が開始されます。
ユーザーがサインアップまたはサインイン、パスワードのリセット、またはソーシャルアカウントを使用したサインインを行います。
ユーザーがサインインに成功すると、Azure AD B2C からアプリに認可コードが返されます。
アプリによって次のアクションが実行されます。
1. 認可コードが、ID トークン、アクセストークン、更新トークンと交換されます。
2. ID トークン要求が読み取られます。
3. 後で使用できるように、トークンがメモリ内キャッシュに格納されます。

アプリ登録の概要

アプリで Azure AD B2C を使用してサインインし、Web API を呼び出せるようにするには、Azure AD B2C ディレクトリに 2 つのアプリケーションを登録します。

デスクトップアプリケーションを登録すると、アプリは Azure AD B2C を使用してサインインできるようになります。アプリの登録時に、リダイレクト URI を指定します。リダイレクト URI は、ユーザーが Azure AD B2C で認証を行った後、Azure AD B2C によってリダイレクトされるエンドポイントです。アプリの登録プロセスによって、デスクトップアプリを一意に識別する "アプリケーション ID″ ("クライアント ID″ とも呼ばれる) が生成されます (たとえば "アプリ ID: 1″)。
Web API を登録すると、保護された Web API をアプリで呼び出すことができます。この登録により、Web API のアクセス許可 (スコープ) が公開されます。アプリの登録プロセスによって、Web API を一意に識別する "アプリケーション ID″ が生成されます (たとえば "アプリ ID: 2″)。デスクトップアプリ (App ID: 1) のアクセス許可を Web API スコープ (App ID: 2) に付与します。

アプリケーションの登録とアーキテクチャについて、次の図に示します。

Diagram of the desktop app with web API, registrations, and tokens.

Web API の呼び出し

認証が完了した後、ユーザーがアプリと対話すると、保護された Web API が呼び出されます。その Web API では、ベアラートークン認証が使用されます。ベアラートークンは、アプリによって Azure AD B2C から取得されたアクセストークンです。アプリでは、HTTPS 要求の Authorization ヘッダーでトークンを渡します。

Authorization: Bearer <access token>

アクセストークンのスコープが Web API のスコープと一致しない場合、認証ライブラリでは正しいスコープの新しいアクセストークンが取得されます。

サインアウトフロー

サインアウトフローには、次の手順が含まれます。

アプリから、ユーザーがサインアウトします。
アプリによってそのセッションオブジェクトがクリアされ、認証ライブラリによってそのトークンキャッシュがクリアされます。
アプリによってユーザーが Azure AD B2C サインアウトエンドポイントに移動し、Azure AD B2C セッションが終了されます。
ユーザーが再びアプリにリダイレクトされます。

前提条件

.NET デスクトップ開発で Visual Studio 2019 を実行しているコンピューター。

手順 1: ユーザーフローを構成する

ユーザーがアプリにサインインしようとすると、ユーザーフローを介した承認エンドポイントへの認証要求がアプリによって開始されます。ユーザーフローによって、ユーザーのエクスペリエンスが定義および制御されます。ユーザーがユーザーフローを完了すると、Azure AD B2C によってトークンが生成され、ユーザーはアプリケーションにリダイレクトされます。

ユーザーフローまたはカスタムポリシーの作成をまだ行っていない場合は、作成します。手順を繰り返して、次のように 3 つの個別のユーザーフローを作成します。

サインインとサインアップを結合したユーザーフロー (例:)susi。このユーザーフローでは、パスワードを忘れた 場合のエクスペリエンスもサポートされています。
プロファイル編集 ユーザーフロー (例: edit_profile) 。
パスワードのリセット ユーザーフロー (例: reset_password)。

Azure AD B2C は、 B2C_1_ ユーザーフロー名の前に付加されます。たとえば、susi が B2C_1_susi になります。

手順 2: アプリケーションを登録する

デスクトップアプリと Web API アプリケーションの登録を作成し、Web API のスコープを指定します。

手順 2.1: Web API アプリを登録する

Web API アプリの登録 (App ID: 2) を作成するには、次の手順に従います。

Azure portal にサインインします。
ご自分の Azure AD B2C テナントが含まれるディレクトリを必ず使用してください。ポータルツールバーの [Directories + subscriptions](ディレクトリ + サブスクリプション) アイコンを選択します。
[ポータルの設定] | [Directories + subscriptions](ディレクトリ + サブスクリプション) ページの [ディレクトリ名] の一覧で自分の Azure AD B2C ディレクトリを見つけて、 [切り替え] を選択します。
Azure portal で、 [Azure AD B2C] を検索して選択します。
[アプリの登録] を選択し、 [新規登録] を選択します。
アプリケーションの名前を入力します (my-api1 など)。 [リダイレクト URI] と [サポートされているアカウントの種類] を既定値のままにします。
[登録] を選択します。
アプリ登録が完了したら、 [概要] を選択します。
アプリケーション (クライアント) ID の値を記録しておきます。これは、後で Web アプリケーションを構成するときに使用します。

手順 2.2: Web API アプリのスコープを構成する

作成した my-api1 アプリケーション (App ID: 2) を選択して、その [概要] ページを開きます。
[管理] の [API の公開] を選択します。
[アプリケーション ID URI] の横にある [設定] リンクを選択します。既定値 (GUID) を一意の名前 (例: tasks-api) に置き換え、[保存] を選択します。

Web アプリケーションで Web API のアクセストークンを要求するときに、API に対して定義する各スコープのプレフィックスとしてこの URI を追加する必要があります。
[この API で定義されるスコープ] で、 [スコープの追加] を選択します。
API への読み取りアクセスを定義するスコープを作成するには:
1. [スコープ名] に tasks.read を入力します。
2. [管理者の同意の表示名] で、「Read access to tasks API」を入力します。
3. [管理者の同意の説明] で、「Allows read access to the tasks API」を入力します。
[スコープの追加] を選択します。
[Add a scope (スコープの追加)] を選択し、API への書き込みアクセスを定義するスコープを追加します。
1. [スコープ名] に「tasks.write」を入力します。
2. [管理者の同意の表示名] に、「Write access to tasks API」を入力します。
3. [管理者の同意の説明] に、「Allows write access to the tasks API」を入力します。
[スコープの追加] を選択します。

手順 2.3: デスクトップアプリを登録する

デスクトップアプリの登録を作成するには、次の手順を実行します。

Azure portal にサインインします。
[アプリの登録] を選択し、 [新規登録] を選択します。
[名前] には、アプリケーションの名前を入力します (たとえば desktop-app1)。
[サポートされているアカウントの種類] で、 [Accounts in any identity provider or organizational directory (for authenticating users with user flows)]((ユーザーフローを使用してユーザーを認証するための) 任意の ID プロバイダーまたは組織のディレクトリのアカウント) を選択します。
[リダイレクト URI] で、[パブリッククライアント/ネイティブ (デスクトップとデスクトップ)] を選択して、URL ボックスに「https://your-tenant-name.b2clogin.com/oauth2/nativeclient」と入力します。 your-tenant-name を、実際のテナント名に置き換えます。その他のオプションについては、「リダイレクト URI を構成する」を参照してください。
[登録] を選択します。
アプリ登録が完了したら、 [概要] を選択します。
後にデスクトップアプリケーションを構成するときに使うために、アプリケーション (クライアント) ID を記録しておきます。

手順 2.4: デスクトップアプリに Web API に対するアクセス許可を付与する

アプリ (アプリ ID: 1) にアクセス許可を付与するには、次の手順をおこないます。

[アプリの登録] を選択し、作成したアプリを選択します (アプリ ID: 1)。
[管理] の下にある [API のアクセス許可] を選択します。
[構成されたアクセス許可] の下で [アクセス許可の追加] を選択します。
[自分の API] タブを選択します。
Web アプリケーションへのアクセス許可が必要な API を選択します (アプリ ID: 2)。たとえば、「my-api1」と入力します。
[アクセス許可] で、 [タスク] を展開し、前に定義したスコープを選択します(たとえば、tasks.read と tasks.write)。
[アクセス許可の追加] を選択します.
[<テナント名> に管理者の同意を与えます] を選択します。
[はい] を選択します。
[最新の情報に更新] を選択し、両方のスコープの [状態] に、Granted for ...(... に付与されました) と表示されていることを確認します。
[Configured permissions (構成済みのアクセス許可)] の一覧からスコープを選択し、スコープの完全な名前をコピーします。

手順 3: サンプル Web API を構成する

このサンプルでは、デスクトップアプリが Web API に対して使用できる、関連するスコープを持つアクセストークンを取得します。コードから Web API を呼び出すには、次の手順を実行します。

既存の Web API を使用するか、新しいものを作成します。詳細については、「Azure AD B2C を使用した独自の WEB API での認証の有効化」を参照してください。
Web API を構成したら、その Web API エンドポイントの URI をコピーします。次の手順でその Web API エンドポイントを使用します。

ヒント

Web API がなくても、このサンプルを実行できます。この場合、アプリはアクセストークンを返しますが、Web API を呼び出すことはできません。

手順 4: WPF デスクトップアプリのサンプルを取得する

.zip ファイルをダウンロードするか、GitHub リポジトリからサンプル Web アプリケーションをクローンします。
```
git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-desktop.git
```
Visual Studio で、active-directory-b2c-wpf ソリューション (active-directory-b2c-wpf.sln ファイル) を開きます。

手順 5: サンプルデスクトップアプリを構成する

active-directory-b2c-wpf プロジェクトで、App.xaml.cs ファイルを開きます。 App.xaml.cs クラスメンバーに、使用している Azure AD B2C ID プロバイダーに関する情報が含まれています。デスクトップアプリでは、この情報を使用して Azure AD B2C との信頼関係を確立し、ユーザーのサインインとサインアウトを行い、トークンを取得して検証します。

次のクラスメンバーを更新します。

キー	値
`TenantName`	Azure AD B2C テナント名の最初の部分 (例: `contoso.b2clogin.com`)。
`ClientId`	手順 2.3 のデスクトップアプリケーション ID。
`PolicySignUpSignIn`	手順 1 で作成したサインアップまたはサインインユーザーフローあるいはカスタムポリシー。
`PolicyEditProfile`	手順 1 で作成したプロファイル編集ユーザーフローまたはカスタムポリシー。
`ApiEndpoint`	(省略可能) 手順 3 で作成した Web API エンドポイント (例: `https://contoso.azurewebsites.net/hello`)。
`ApiScopes`	手順 2.4 で作成した Web API のスコープ。

最終的な App.xaml.cs ファイルは、次の C# コードのようになります。

public partial class App : Application
{

private static readonly string TenantName = "contoso";
private static readonly string Tenant = $"{TenantName}.onmicrosoft.com";
private static readonly string AzureAdB2CHostname = $"{TenantName}.b2clogin.com";
private static readonly string ClientId = "<web-api-app-application-id>";
private static readonly string RedirectUri = $"https://{TenantName}.b2clogin.com/oauth2/nativeclient";

public static string PolicySignUpSignIn = "b2c_1_susi";
public static string PolicyEditProfile = "b2c_1_edit_profile";
public static string PolicyResetPassword = "b2c_1_reset";

public static string[] ApiScopes = { $"https://{Tenant}//api/tasks.read" };
public static string ApiEndpoint = "https://contoso.azurewebsites.net/hello";

手順 6: デスクトップアプリを実行してテストする

NuGet パッケージを復元します。
F5 キーを選択し、サンプルをビルドして実行します。
[サインイン] を選択してから、Azure AD B2C のローカルまたはソーシャルアカウントを使用して、サインアップまたはサインインします。
サインアップまたはサインインに成功すると、WPF アプリの下部ウィンドウにトークンの詳細が表示されます。
[API の呼び出し] を選択して、Web API を呼び出します。

次の手順

Azure AD B2C を使用して WPF デスクトップアプリの認証オプションを構成する方法をご覧ください。

次の方法で共有

Azure AD B2C を使ってサンプル WPF デスクトップアプリで認証を構成する

概要

アプリ登録の概要

Web API の呼び出し

サインアウトフロー

前提条件

手順 1: ユーザーフローを構成する

手順 2: アプリケーションを登録する

手順 2.1: Web API アプリを登録する

手順 2.2: Web API アプリのスコープを構成する

手順 2.3: デスクトップアプリを登録する

手順 2.4: デスクトップアプリに Web API に対するアクセス許可を付与する

手順 3: サンプル Web API を構成する

手順 4: WPF デスクトップアプリのサンプルを取得する

手順 5: サンプルデスクトップアプリを構成する

手順 6: デスクトップアプリを実行してテストする

次の手順

フィードバック

その他のリソース

次の方法で共有

Azure AD B2C を使ってサンプル WPF デスクトップ アプリで認証を構成する

概要

アプリ登録の概要

Web API の呼び出し

サインアウト フロー

前提条件

手順 1: ユーザー フローを構成する

手順 2: アプリケーションを登録する

手順 2.1: Web API アプリを登録する

手順 2.2: Web API アプリのスコープを構成する

手順 2.3: デスクトップ アプリを登録する

手順 2.4: デスクトップ アプリに Web API に対するアクセス許可を付与する

手順 3: サンプル Web API を構成する

手順 4: WPF デスクトップ アプリのサンプルを取得する

手順 5: サンプル デスクトップ アプリを構成する

手順 6: デスクトップ アプリを実行してテストする

次の手順

フィードバック

その他のリソース

Azure AD B2C を使ってサンプル WPF デスクトップアプリで認証を構成する

サインアウトフロー

手順 1: ユーザーフローを構成する

手順 2.3: デスクトップアプリを登録する

手順 2.4: デスクトップアプリに Web API に対するアクセス許可を付与する

手順 4: WPF デスクトップアプリのサンプルを取得する

手順 5: サンプルデスクトップアプリを構成する

手順 6: デスクトップアプリを実行してテストする