使用 Azure AD B2C 在範例 WPF 傳統型應用程式中設定驗證

  • 發行項

本文使用範例 Windows Presentation Foundation （WPF） 傳統 型應用程式來說明如何將 Azure Active Directory B2C （Azure AD B2C） 驗證新增至傳統型應用程式。

概觀

OpenID Connect (OIDC) 是建置於 OAuth 2.0 上的驗證通訊協定。 您可以使用 OIDC 安全地將使用者登入應用程式。 此傳統型應用程式範例會使用 Microsoft 驗證連結庫 （MSAL） 搭配 OIDC 授權碼證明金鑰進行程式碼交換 （PKCE） 流程。 MSAL 是 Microsoft 提供的連結庫，可簡化將驗證和授權支援新增至傳統型應用程式。

登入流程牽涉到下列步驟：

  1. 用戶開啟應用程式，然後選取 [登入]。
  2. 應用程式會開啟桌面裝置的系統瀏覽器，並啟動對 Azure AD B2C 的驗證要求。
  3. 用戶註冊或登入、重設密碼，或使用社交帳戶登入。
  4. 使用者成功登入之後，Azure AD B2C 會將授權碼傳回給應用程式。
  5. 應用程式會採取下列動作：
    1. 它會將授權碼交換至標識碼令牌、存取令牌和重新整理令牌。
    2. 它會讀取標識碼令牌宣告。
    3. 它會將令牌儲存在記憶體內部快取中，以供稍後使用。

應用程式註冊概觀

若要讓應用程式能夠使用 Azure AD B2C 登入並呼叫 Web API，請在 Azure AD B2C 目錄中註冊兩個應用程式。

  • 傳統 型應用程式註冊可讓您的應用程式 使用 Azure AD B2C 登入。 在應用程式註冊期間，指定重新 導向 URI。 重新導向 URI 是使用者在向 Azure AD B2C 驗證之後，由 Azure AD B2C 重新導向的端點。 應用程式註冊程式會產生應用程式識別碼，也稱為用戶端標識符，可唯一識別傳統型應用程式（例如應用程式識別碼：1）。

  • Web API 註冊可讓您的應用程式呼叫受保護的 Web API。 註冊會公開 Web API 許可權（範圍）。 應用程式註冊程式會產生應用程式識別碼，以唯一識別您的 Web API（例如，應用程式識別碼：2）。 授與傳統型應用程式 （應用程式識別符：1） Web API 範圍的許可權（應用程式識別碼：2）。

下列圖表說明應用程式註冊和架構：

Diagram of the desktop app with web API, registrations, and tokens.

呼叫 Web API

驗證完成後，使用者會與叫用受保護 Web API 的應用程式互動。 Web API 使用 持有人令牌 驗證。 持有人令牌是應用程式從 Azure AD B2C 取得的存取令牌。 應用程式會在 HTTPS 要求的授權標頭中傳遞令牌。

Authorization: Bearer <access token>

如果存取令牌的範圍不符合 Web API 的範圍，驗證連結庫會取得具有正確範圍的新存取令牌。

註銷流程

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

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

必要條件

執行 Visual Studio 2019 與 .NET 桌面開發的電腦。

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

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

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

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

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

步驟 2：註冊您的應用程式

建立傳統型應用程式和 Web API 應用程式註冊，並指定 Web API 的範圍。

步驟 2.1：註冊 Web API 應用程式

若要建立 Web API 應用程式註冊（應用程式識別碼：2），請遵循下列步驟：

  1. 登入 Azure 入口網站。

  2. 請確定您使用的是包含 Azure AD B2C 租用戶的目錄。 在入口網站工具列中選取 [ 目錄 + 訂用帳戶 ] 圖示。

  3. 在入口 網站設定 |[目錄 + 訂用帳戶 ] 頁面，在 [ 目錄名稱 ] 列表中尋找您的 Azure AD B2C 目錄，然後選取 [ 切換]。

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

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

  6. 針對 [ 名稱]，輸入應用程式的名稱（例如 my-api1）。 保留 [重新導向 URI] 和 [支持的帳戶類型] 的預設值。

  7. 選取註冊。

  8. 完成應用程式註冊之後，請選取 [ 概觀]。

  9. 記錄應用程式 （client） 識別碼值，以供稍後在設定 Web 應用程式時使用。

    Screenshot that demonstrates how to get a web A P I application I D.

步驟 2.2：設定 Web API 應用程式範圍

  1. 選取您建立的 my-api1 應用程式（應用程式識別碼：2）以開啟其 [概 觀 ] 頁面。

  2. 在 [管理] 底下，選取 [公開 API]。

  3. 在 [ 應用程式識別碼 URI] 旁，選取 [ 設定 ] 連結。 以唯一名稱取代預設值 （GUID），然後選取 [儲存]。

    當您的 Web 應用程式要求 Web API 的存取權杖時，它應該新增此 URI 作為您為 API 定義之每個範圍的前置詞。

  4. 在此 API 定義的 [範圍] 下，選取 [新增範圍]。

  5. 若要建立定義 API 讀取存取權的範圍：

    1. 針對 [範圍名稱]，輸入 tasks.read。
    2. 如需 管理員 同意顯示名稱，請輸入工作 API 的讀取許可權。
    3. 針對 管理員 同意描述，輸入 [允許讀取工作 API]。

  6. 選取新增範圍。

  7. 選取 [新增範圍]，然後新增定義 API 寫入權限的範圍：

    1. 針對 [範圍名稱]，輸入 tasks.write。
    2. 針對 管理員 同意顯示名稱，輸入工作 API 的寫入存取權。
    3. 針對 管理員 同意描述，輸入 [允許寫入工作 API]。

  8. 選取新增範圍。

步驟 2.3：註冊傳統型應用程式

若要建立傳統型應用程式註冊，請執行下列動作：

  1. 登入 Azure 入口網站。
  2. 選取 [應用程式註冊]，然後選取 [新增註冊]。
  3. 在 [名稱] 底下，輸入應用程式的名稱（例如 desktop-app1）。
  4. 在 [支援的帳戶類型] 下，選取 [任何身分識別提供者或組織目錄中的帳戶 (用於運用使用者流程來驗證使用者)]。
  5. 在 [重新導向 URI] 下，選取 [公用用戶端/原生] [桌面和桌面]，然後在 [URL] 方塊中輸入 https://your-tenant-name.b2clogin.com/oauth2/nativeclient。 將取代 your-tenant-name 為您的 租用戶名稱。 如需其他選項，請參閱 設定重新導向 URI。
  6. 選取註冊。
  7. 完成應用程式註冊之後，請選取 [ 概觀]。
  8. 當您設定 傳統型應用程式時，請記錄應用程式 （client） 識別碼 以供稍後使用。 Screenshot highlighting the desktop application ID.

步驟 2.4：授與 Web API 的桌面應用程式許可權

若要授與您的應用程式 （應用程式識別碼： 1） 權限，請遵循下列步驟：

  1. 選取 應用程式註冊，然後選取您建立的應用程式（應用程式識別碼：1）。

  2. 在 [管理] 底下，選取 [API 許可權]。

  3. 在 [設定的許可權] 底下，選取 [新增許可權]。

  4. 選取 [ 我的 API] 索引標籤 。

  5. 選取應授與 Web 應用程式存取權的 API （應用程式識別碼：2）。 例如，輸入 my-api1。

  6. 在 [許可權] 下展開工作，然後選取您稍早定義的範圍（例如 tasks.read 和 tasks.write）。

  7. 選取新增權限。

  8. 選取 [ 授與管理員同意] 以取得 <租用戶名稱>。

  9. 選取 [是]。

  10. 選取 [重新整理]，然後確認 [已授與...] 出現在這兩個範圍的 [狀態] 底下。

  11. 從 [ 設定的許可權] 清單中，選取您的範圍，然後複製範圍完整名稱。

    Screenshot of the configured permissions pane, showing that read access permissions are granted.

步驟 3：設定範例 Web API

此範例會取得具有傳統型應用程式可用於 Web API 的相關範圍存取令牌。 若要從程式代碼呼叫 Web API，請執行下列動作：

  1. 使用現有的 Web API，或建立新的 API。 如需詳細資訊，請參閱 使用 Azure AD B2C 在您自己的 Web API 中啟用驗證。
  2. 設定 Web API 之後，請複製 Web API 端點的 URI。 在下一個步驟中，您將使用 Web API 端點。

提示

如果您沒有 Web API，您仍然可以執行此範例。 在此情況下，應用程式會傳回存取令牌，但無法呼叫 Web API。

步驟 4：取得 WPF 傳統型應用程式範例

  1. 下載 .zip 檔案，或從 GitHub 存放庫複製範例 Web 應用程式。

    git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-desktop.git

  2. 在 Visual Studio 中開啟 active-directory-b2c-wpf 解決方案（ active-directory-b2c-wpf.sln 檔案）。

步驟 5：設定範例傳統型應用程式

在 active-directory-b2c-wpf 專案中，開啟 App.xaml.cs 檔案。 類別 App.xaml.cs 成員包含 Azure AD B2C 識別提供者的相關信息。 傳統型應用程式會使用此資訊來建立與 Azure AD B2C 的信任關係、登入和註銷使用者、取得令牌，以及驗證它們。

更新下列類別成員：

機碼 值
TenantName Azure AD B2C 租用戶名稱 的第一個部分（例如 ， contoso.b2clogin.com）。
ClientId 步驟 2.3 中的傳統型應用程式識別碼。
PolicySignUpSignIn 您在步驟 1 中建立的註冊或登入使用者流程或自定義原則。
PolicyEditProfile 您在步驟 1 中建立的編輯設定檔使用者流程或自定義原則。
ApiEndpoint （選擇性）您在步驟 3 中建立的 Web API 端點（例如 ， https://contoso.azurewebsites.net/hello。
ApiScopes 您在步驟 2.4 中建立的 Web API 範圍。

您的最終 App.xaml.cs 檔案看起來應該像下列 C# 程式代碼：

public partial class App : Application
{

private static readonly string TenantName = "contoso";
private static readonly string Tenant = $"{TenantName}.onmicrosoft.com";
private static readonly string AzureAdB2CHostname = $"{TenantName}.b2clogin.com";
private static readonly string ClientId = "<web-api-app-application-id>";
private static readonly string RedirectUri = $"https://{TenantName}.b2clogin.com/oauth2/nativeclient";

public static string PolicySignUpSignIn = "b2c_1_susi";
public static string PolicyEditProfile = "b2c_1_edit_profile";
public static string PolicyResetPassword = "b2c_1_reset";

public static string[] ApiScopes = { $"https://{Tenant}//api/tasks.read" };
public static string ApiEndpoint = "https://contoso.azurewebsites.net/hello";

步驟 6：執行及測試傳統型應用程式

  1. 還原 NuGet 套件。

  2. 選取 F5 以建置並執行範例。

  3. 選取 [登入]，然後使用您的 Azure AD B2C 本機或社交帳戶註冊或登入。

    Screenshot highlighting how to start the sign-in flow.

  4. 成功註冊或登入之後，令牌詳細數據會顯示在 WPF 應用程式的下方窗格中。

    Screenshot highlighting the Azure AD B2C access token and user ID.

  5. 選取 [呼叫 API ] 以呼叫您的 Web API。

下一步

瞭解如何 使用 Azure AD B2C 在 WPF 傳統型應用程式中設定驗證選項。