次の方法で共有

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

重要

2025 年 5 月 1 日より、Azure AD B2C は新規のお客様向けに購入できなくなります。 詳細については、FAQ を参照してください。

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

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

[前提条件]

  • ASP.NET および Web 開発ワークロードを含む Visual Studio 2022。

  • 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. サンプル アプリケーション プロジェクト フォルダーで、Visual Studio で B2C-WebAPI-DotNet.sln ソリューションを開きます。

  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 を呼び出すには、 [追加] を選択します。

    ブラウザーのサンプル Web アプリのスクリーンショットで、[リスト] リンクと [追加] ボタンが強調表示 To-Do。

    ASP.NET Web アプリケーションには、ユーザーの to-do リスト アイテムに対する操作を実行するために、保護された Web API リソースへの要求に Microsoft Entra アクセス トークンが含まれています。

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

次のステップ

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

  • Last updated on