使用 Azure AD B2C 在範例 Web 應用程式中設定驗證

  • 發行項

本文使用範例 ASP.NET Web 應用程式，說明如何將 Azure Active Directory B2C （Azure AD B2C） 驗證新增至 Web 應用程式。

重要

本文所參考的範例 ASP.NET Web 應用程式無法用來呼叫 REST API，因為它會傳回標識符令牌，而不是存取令牌。 如需可呼叫 REST API 的 Web 應用程式，請參閱 使用 Azure AD B2C 保護使用 ASP.NET Core 所建置的 Web API。

概觀

OpenID 連線 （OIDC） 是以 OAuth 2.0 為基礎的驗證通訊協定。 您可以使用 OIDC 安全地將使用者登入應用程式。 此 Web 應用程式範例會使用 Microsoft Identity Web。 Microsoft Identity Web 是一組 ASP.NET 核心連結庫，可簡化對 Web 應用程式的新增驗證和授權支援。

登入流程包含下列步驟：

  1. 使用者移至 Web 應用程式，然後選取 [登入]。
  2. 應用程式會起始驗證要求，並將使用者重新導向至 Azure AD B2C。
  3. 用戶 註冊或登入 並 重設密碼。 或者，他們可以使用社交帳戶登入。
  4. 使用者成功登入之後，Azure AD B2C 會將標識碼令牌傳回給應用程式。
  5. 應用程式會驗證標識碼令牌、讀取宣告，並將安全頁面傳回給使用者。

當標識元令牌過期或應用程式會話失效時，應用程式會起始新的驗證要求，並將使用者重新導向至 Azure AD B2C。 如果 Azure AD B2C SSO 工作階段 作用中，Azure AD B2C 會發出存取令牌，而不會提示使用者再次登入。 如果 Azure AD B2C 工作階段過期或變成無效，系統會提示使用者再次登入。

登出

註銷流程牽涉到下列步驟：

  1. 從應用程式，用戶註銷。
  2. 應用程式會清除其會話物件，而驗證連結庫會清除其令牌快取。
  3. 應用程式會將使用者帶往 Azure AD B2C 註銷端點，以終止 Azure AD B2C 工作階段。
  4. 系統會將使用者重新導向回應用程式。

必要條件

執行下列任一項的電腦：

步驟 1：設定您的使用者流程

當使用者嘗試登入您的應用程式時，應用程式會透過使用者流程啟動授權端點的驗證要求。 使用者流程會定義和控制用戶體驗。 使用者完成使用者流程之後，Azure AD B2C 會產生令牌，然後將使用者重新導向回您的應用程式。

如果您尚未這麼做， 請建立使用者流程或自定義原則。 重複這些步驟以建立三個不同的使用者流程，如下所示：

  • 合併登入 和註冊 使用者流程，例如 susi。 此使用者流程也支援 忘記密碼 體驗。
  • 設定檔案編輯使用者流程，例如 edit_profile。
  • 密碼重設使用者流程，例如 reset_password。

Azure AD B2C 前面加上 B2C_1_ 使用者流程名稱。 例如，susi 會成為 B2C_1_susi。

步驟 2：註冊 Web 應用程式

若要讓應用程式能夠使用 Azure AD B2C 登入，請在 Azure AD B2C 目錄中註冊您的應用程式。 註冊您的應用程式會建立應用程式與 Azure AD B2C 之間的信任關係。

在應用程式註冊期間，您將指定 重新導向 URI。 重新導向 URI 是使用者在向 Azure AD B2C 進行驗證之後，由 Azure AD B2C 重新導向的端點。 應用程式註冊程式會產生應用程式識別碼，也稱為用戶端標識符，可唯一識別您的應用程式。 註冊應用程式之後，Azure AD B2C 會同時使用應用程式識別碼和重新導向 URI 來建立驗證要求。

若要建立 Web 應用程式註冊，請使用下列步驟：

  1. 登入 Azure 入口網站。

  2. 如果您有多個租使用者的存取權，請選取頂端功能表中的 [設定] 圖示，從 [目錄 + 訂用帳戶] 功能表切換至您的 Azure AD B2C 租使用者。

  3. 在 Azure 入口網站中，搜尋並選取 [Azure AD B2C]。

  4. 選取 [應用程式註冊]，然後選取 [新增註冊]。

  5. 在 [名稱] 底下，輸入應用程式的名稱（例如 webapp1）。

  6. 在 [支援的帳戶類型] 下，選取 [任何身分識別提供者或組織目錄中的帳戶 (用於運用使用者流程來驗證使用者)]。

  7. 在 [重新導向 URI] 下，選取 [Web]，然後在 [URL] 方塊中輸入 https://localhost:44316/signin-oidc。

  8. 在 [驗證] 底下，移至 [隱含授與和混合式流程]，選取 [用於隱含和混合式流程] 複選框。

  9. 在 [許可權] 底下，選取 [ 授與系統管理員同意以開啟標識符和離線訪問許可權] 複選框。

  10. 選取註冊。

  11. 選取 [概觀]。

  12. 當您設定 Web 應用程式時，請記錄應用程式 （client） 識別碼 以供稍後使用。

    Screenshot of the web app Overview page for recording your web application ID.

步驟 3：取得 Web 應用程式範例

下載 zip 檔案，或從 GitHub 複製範例 Web 應用程式。

git clone https://github.com/Azure-Samples/active-directory-aspnetcore-webapp-openidconnect-v2

將範例檔案解壓縮至路徑總長度為 260 或更少字元的資料夾。

步驟 4：設定範例 Web 應用程式

在範例資料夾中，在 1-WebApp-OIDC/1-5-B2C/ 資料夾中，使用 Visual Studio 或 Visual Studio Code 開啟 WebApp-OpenID 連線-DotNet.csproj 專案。

在專案根資料夾下，開啟 appsettings.json 檔案。 此檔案包含 Azure AD B2C 識別提供者的相關信息。 更新下列應用程式設定屬性：

區段​​ 機碼 值
AzureAdB2C 執行個體 Azure AD B2C 租用戶名稱 的第一個部分（例如 ， https://contoso.b2clogin.com）。
AzureAdB2C 網域 您的 Azure AD B2C 租使用者完整 租使用者名稱 （例如 ， contoso.onmicrosoft.com）。
AzureAdB2C ClientId 步驟 2 中的 Web 應用程式應用程式 （用戶端） 識別碼。
AzureAdB2C SignUpSignInPolicyId 您在步驟 1 中建立的使用者流程或自定義原則。

您的最終組態檔看起來應該像下列 JSON：

"AzureAdB2C": {
  "Instance": "https://contoso.b2clogin.com",
  "Domain": "contoso.onmicrosoft.com",
  "ClientId": "<web-app-application-id>",
  "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
  "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
}

步驟 5：執行範例 Web 應用程式

  1. 建置並執行專案。

  2. 移至 https://localhost:44316。

  3. 選取 [ 註冊/登入]。

    Screenshot of the sign in and sign up button on the project Welcome page.

  4. 完成註冊或登入程式。

成功驗證之後，您會在導覽列上看到您的顯示名稱。 若要檢視 Azure AD B2C 令牌傳回至應用程式的宣告，請選取 [ 宣告]。

Screenshot of the web app token claims.

部署您的應用程式

在生產應用程式中，應用程式註冊重新導向 URI 通常是應用程式執行所在的可公開存取端點，例如 https://contoso.com/signin-oidc。

您可以隨時在已註冊的應用程式中新增和修改重新導向 URI。 下列限制適用於重新導向 URI：

  • 回復 URL 的開頭必須是 配置 https。
  • 回復 URL 會區分大小寫。 其大小寫必須符合執行中應用程式的 URL 路徑大小寫。

下一步