快速開始：使用 Azure Active Directory B2C 設定單頁應用程式的登入功能

這很重要

自 2025 年 5 月 1 日起，Azure AD B2C 將不再可供新客戶購買。 在我們的常見問題中深入瞭解。

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

在本快速入門中，您會使用單頁應用程式，使用社交識別提供者登入，並呼叫受 Azure AD B2C 保護的 Web API。

先決條件

• Visual Studio 代碼

• Node.js

• Facebook、Google 或 Microsoft 的社交帳戶

• 來自 GitHub 的程式代碼範例： ms-identity-b2c-javascript-spa：

  您可以 下載 zip 封存盤 或複製存放庫

  git clone https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git
  

執行應用程式

1. 從 Node.js 命令提示字元執行下列命令，以啟動伺服器：

   npm install
   npm update
   npm start
   

   伺服器由 server.js啟動 ，會顯示其正在接聽的端口：

   Listening on port 6420...
   

2. 請前往應用程式的網址。 例如： http://localhost:6420 。

使用您的帳戶登入

1. 選取 登入 以開始使用者旅程。

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

   

   您可以使用您的社交帳戶認證進行驗證（登入），並授權應用程式從您的社交帳戶讀取資訊。 藉由授與存取權，應用程式可以從社交帳戶擷取個人資料資訊，例如您的姓名和城市。

3. 完成身分識別提供者的登入流程。

存取受保護的 API 資源

選取 [呼叫 API ]，讓您的顯示名稱從 Web API 傳回為 JSON 物件。

範例單頁應用程式在對受保護 Web API 資源的要求中包含存取令牌。

後續步驟

• 現在在 Azure 入口網站中開始建立您自己的 Azure Active Directory B2C 租戶