クイックスタート: Azure Active Directory B2C を使用した ASP.NET アプリケーションのサインインの設定

  • [アーティクル]

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

このクイック スタートでは、ASP.NET アプリケーションにソーシャル ID プロバイダーを使ってサインインし、Azure AD B2C で保護された Web API を呼び出します。

前提条件

  • Visual Studio 2022 と ASP.NET と Web 開発ワークロード。

  • Facebook、Google、または Microsoft のソーシャル アカウント。

  • ZIP ファイルをダウンロードするか、GitHub からサンプル Web アプリケーションを複製します。

    git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-webapp-and-webapi.git

    サンプル ソリューションには 2 つのプロジェクトがあります。

    • TaskWebApp - タスク リストの作成と編集を行う Web アプリケーション。 この Web アプリケーションは、サインアップまたはサインインのユーザー フローを使用してユーザーをサインアップまたはサインインします。
    • TaskService - タスク リストの作成、読み取り、更新、削除機能をサポートする Web API。 この Web API は Azure AD B2C によって保護されており、Web アプリケーションによって呼び出されます。

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

  1. サンプル アプリケーションのプロジェクト フォルダーにある B2C-WebAPI-DotNet.sln ソリューションを Visual Studio で開きます。

  2. このクイック スタートでは、TaskWebApp プロジェクトと TaskService プロジェクトの両方を同時に実行します。 ソリューション エクスプローラーで B2C-WebAPI-DotNet ソリューションを右クリックし、[スタートアップ プロジェクトの構成...] を選びます。

  3. [マルチ スタートアップ プロジェクト] を選択し、両方のプロジェクトの [アクション] を [開始] に変更します。

  4. [OK] を選択します。

  5. F5 キーを押して両方のアプリケーションをデバッグします。 各アプリケーションは、それぞれ別のブラウザー タブで開かれます。

    • https://localhost:44316/ - ASP.NET Web アプリケーション。 このクイック スタートでは、このアプリケーションを直接操作します。
    • https://localhost:44332/ - ASP.NET Web アプリケーションによって呼び出される Web API。

自分のアカウントを使用してサインインする

  1. ASP.NET Web アプリケーションで [サインアップ/サインイン] を選択してワークフローを開始します。

    [サインアップ/サインイン] リンクが強調表示されている、ブラウザー内のサンプル ASP.NET Web アプリを示すスクリーンショット

    このサンプルは、ソーシャル ID プロバイダーを使用する方法や、メール アドレスを使用してローカル アカウントを作成する方法など、複数のサインアップ方法に対応しています。 このクイック スタートでは、Facebook、Google、Microsoft のいずれかのソーシャル ID プロバイダー アカウントを使用します。

  2. Azure AD B2C では、サンプルの Web アプリケーションに対する Fabrikam と呼ばれる架空の会社のサインイン ページが提供されます。 ソーシャル ID プロバイダーを使用してサインアップするには、使用する ID プロバイダーのボタンを選択します。

    [サインイン] または [サインアップ] ページの ID プロバイダー ボタンのスクリーンショット

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

  3. ID プロバイダーのサインイン プロセスを完了します。

プロファイルの編集

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

  1. アプリケーションのメニュー バーで、プロファイル名を選択してから [プロファイルの編集] を選択して、作成したプロファイルを編集します。

    [プロファイルの編集] リンクが強調表示されているブラウザーのサンプル Web アプリのスクリーンショット

  2. [表示名] または [市] を変更し、 [続行] を選択してプロファイルを更新します。

    変更内容が Web アプリケーションのホーム ページの右上の部分に表示されます。

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

  1. [To Do リスト] を選択して、To-Do リスト項目を入力および変更します。

  2. [新しい項目] テキスト ボックスにテキストを入力します。 To-Do リスト項目を追加する Azure AD B2C で保護された Web API を呼び出すには、 [追加] を選択します。

    [To Do リスト] リンクおよび [追加] ボタンが強調表示されているブラウザーのサンプル Web アプリのスクリーンショット。

    ASP.NET Web アプリケーションは、保護された Web API リソースへの要求に、ユーザーの To Do リスト項目に対する操作を実行するための Microsoft Entra アクセス トークンを追加します。

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

次のステップ

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