快速入門：設定使用 Azure Active Directory B2C 的單頁應用程式登入

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

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

Prerequisites

• Visual Studio Code

• 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. 瀏覽至應用程式的 URL。 例如： http://localhost:6420 。

使用您的帳戶登入

1. 選取 [登入] 來開始使用者旅程圖。

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

   

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

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

存取受保護的 API 資源

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

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

後續步驟

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