快速入門：設定使用 Azure Active Directory B2C 登入 ASP.NET 應用程式

Azure Active Directory B2C (Azure AD B2C) 提供雲端身分識別管理，使您的應用程式、企業和客戶受到保護。 Azure AD B2C 可讓您的應用程式使用開放式標準通訊協定，向社交帳戶和企業帳戶進行驗證。

在本快速入門中，您會使用 ASP.NET 應用程式透過社交識別提供者登入，並呼叫受 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
  

  範例方案中有兩個專案：

  • 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. 選取 [確定]。

5. 按 F5 鍵可進行兩個應用程式的偵錯。 每個應用程式會在自己的瀏覽器索引標籤中開啟：

   • https://localhost:44316/ - ASP.NET Web 應用程式。 在本快速入門中，您直接與此應用程式互動。
   • https://localhost:44332/ - ASP.NET Web 應用程式呼叫的 Web API。

使用您的帳戶登入

1. 選取 ASP.NET Web 應用程式中的 [註冊/登入]，以啟動工作流程。

   

   此範例支援數個登入選項，包括使用社交識別提供者或使用電子郵件地址建立本機帳戶。 在本快速入門中，請使用 Facebook、Google 或 Microsoft 的社交身分識別提供者帳戶。

2. Azure AD B2C 會針對範例 Web 應用程式，呈現 Fabrikam 虛構公司的登入頁面。 若要使用社交識別提供者註冊，選取您要使用的識別提供者按鈕。

   

   您可使用您的社交帳戶認證進行驗證 (登入)，以及授權應用程式讀取您的社交帳戶資訊。 透過授與存取權，應用程式可以從社交帳戶擷取設定檔資訊，例如您的名稱與縣/市。

3. 完成識別提供者的登入程序。

編輯您的設定檔

Azure Active Directory B2C 提供讓使用者更新其設定檔的功能。 範例 Web 應用程式會對工作流程使用 Azure AD B2C 編輯設定檔使用者流程。

1. 在應用程式功能表列中，選取您的設定檔名稱，然後選取 [編輯設定檔] 以編輯您建立的設定檔。

   

2. 變更您的 [顯示名稱] 或 [縣/市]，然後選取 [繼續] 以更新設定檔。

   變更會顯示在 Web 應用程式首頁的右上方。

存取受保護的 API 資源

1. 選取 [待辦事項清單]，以輸入並修改您的待辦事項清單項目。

2. 在 [新項目] 文字方塊中，輸入文字。 若要呼叫受 Azure AD B2C 保護的 Web API 以新增至待辦事項清單項目，請選取 [新增]。

   

   ASP.NET Web 應用程式在對受保護 Web API 資源的要求中包含Microsoft Entra存取權杖，以對使用者的 To-do 清單專案執行作業。

您已成功使用 Azure AD B2C 使用者帳戶，對受 Azure AD B2C 保護的 Web API 提出授權呼叫。

後續步驟

在 Azure 入口網站中建立 Azure Active Directory B2C 租用戶