クイックスタート: Azure Active Directory B2C を使用したデスクトップアプリのサインインの設定

[アーティクル]
06/01/2023

Azure Active Directory B2C (Azure AD B2C) は、アプリケーション、ビジネス、顧客を保護するためのクラウド ID 管理を提供します。 Azure AD B2C に対応したアプリケーションは、オープンな標準プロトコルを使用し、ソーシャルアカウントやエンタープライズアカウントで認証を行うことができます。このクイックスタートでは、WPF (Windows Presentation Foundation) デスクトップアプリケーションにソーシャル ID プロバイダーを使ってサインインし、Azure AD B2C で保護された Web API を呼び出します。

Azure サブスクリプションをお持ちでない場合は、開始する前に Azure 無料アカウントを作成してください。

前提条件

Visual Studio 2019 と ASP.NET と Web 開発ワークロード。
Facebook、Google、Microsoft のいずれかのソーシャルアカウント。
GitHub から ZIP ファイルをダウンロードするか、Azure-Samples/active-directory-b2c-dotnet-desktop リポジトリをクローンします。
```
git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-desktop.git
```

Visual Studio でアプリケーションを実行する

サンプルアプリケーションのプロジェクトフォルダーにある active-directory-b2c-wpf.sln ソリューションを Visual Studio で開きます。
NuGet パッケージを復元します。
F5 キーを押してアプリケーションをデバッグします。

[サインイン] を選び、サインアップまたはサインイン ワークフローを開始します。

このサンプルは、いくつかのサインアップオプションをサポートしています。これらのオプションには、ソーシャル ID プロバイダーの使用や、メールアドレスを使用したローカルアカウントの作成が含まれます。このクイックスタートでは、Facebook、Google、Microsoft のいずれかのソーシャル ID プロバイダーアカウントを使用します。
Azure AD B2C には、サンプルの Web アプリケーション用に Fabrikam という名前の架空の会社のサインインページが用意されています。ソーシャル ID プロバイダーを使用してサインアップするには、使用する ID プロバイダーのボタンを選択します。

ユーザーは、ソーシャルアカウントの資格情報を使用して認証 (サインイン) し、アプリケーションがそのソーシャルアカウントから情報を読み取ることを承認します。アクセスを許可することにより、アプリケーションはソーシャルアカウントからプロファイル情報 (名前やお住まいの都市など) を取得できるようになります。
ID プロバイダーのサインインプロセスを完了します。

新しいアカウントのプロファイルの詳細には、ソーシャルアカウントからの情報があらかじめ設定されています。

プロファイルの編集

Azure AD B2C には、ユーザーが自分のプロファイルを更新することができる機能があります。このサンプル Web アプリのワークフローには、Azure AD B2C の編集プロファイルユーザーフローが使用されます。

作成したプロファイルを編集するには、アプリケーションのメニューバーで [プロファイルの編集] を選びます。
作成したアカウントに関連付けられている ID プロバイダーを選択します。たとえば、アカウントの作成時に ID プロバイダーとして Facebook を使用した場合は、Facebook を選択して、関連付けられているプロファイルの詳細を変更します。
表示名や都市を変更し、[続行] を選びます。

新しいアクセストークンが [Token info](トークン情報) テキストボックスに表示されます。プロファイルに対する変更を確認する場合は、アクセストークンをコピーしてトークンデコーダー https://jwt.ms に貼り付けます。

保護された API リソースにアクセスする

[Call API](API の呼び出し) を選び、保護されたリソースに対して要求を行います。

Call API

このアプリケーションは、保護された Web API リソースへの要求に Microsoft Entra アクセストークンを追加します。 Web API からは、アクセストークンに含まれている表示名が返されます。

Azure AD B2C ユーザーアカウントを使用して、Azure AD B2C で保護された Web API の承認済みの呼び出しを正しく行いました。

リソースをクリーンアップする

他の Azure AD B2C クイックスタートやチュートリアルを試す場合は、Azure AD B2C テナントを使用できます。不要になったら、Azure AD B2C テナントを削除することができます。

次のステップ

このクイックスタートでは、サンプルのデスクトップアプリケーションを使用して次のことを行いました。

カスタムサインインページを使用してサインインする
ソーシャル ID プロバイダーを使用してサインインする
Azure AD B2C アカウントを作成する
Azure AD B2C によって保護された Web API を呼び出す

独自の Azure AD B2C テナントを作成してみましょう。

Azure Portal で Azure Active Directory B2C テナントを作成する

クイック スタート: Azure Active Directory B2C を使用したデスクトップ アプリのサインインの設定