適用於 綠色圓圈內含白色勾選符號。 勞動力租用者 綠色圓圈內含白色勾選符號。 外部租用者( 深入瞭解

在本快速入門中,您將使用範例應用程式來學習如何將驗證功能加入至桌面應用程式。 範例應用程式可讓使用者登入和註銷,並使用 Microsoft 驗證連結庫 (MSAL) 來處理驗證。

開始之前,請使用 選擇此頁面頂端的租用戶類型 選取器,以選取租用戶類型。 Microsoft Entra ID 提供兩種租戶組態, 員工 外部 。 員工租戶配置適用於你的員工、內部應用程式和其他組織資源。 外部租戶適用於面向客戶的應用程式。

  • 有有效訂閱的 Azure 帳戶。 如果您還沒有帳戶, 免費建立帳戶
  • 此 Azure 帳戶必須具有管理應用程式的許可權。 下列任何Microsoft Entra 角色都包含必要的許可權:
    • 應用程式管理員
    • 應用程式開發人員
    • 員工租戶。 您可以使用預設目錄或 設定新的租戶
    • Microsoft Entra 系統管理中心 註冊新的應用程式, 僅針對此組織目錄中的帳戶 進行設定。 如需詳細資訊 ,請參閱註冊應用程式 。 從應用程式 [概 ] 頁面記錄下列值,以供稍後使用:
      • 應用程式 (用戶端) 識別碼
      • 目錄(租戶)識別碼
      • 本教程中提供的 Electron 範例程式特別為搭配 MSAL-node 使用而設計。 電子應用程式中不支援 MSAL 瀏覽器。 請確定您已完成下列步驟,以正確設定您的專案。

      • 若要複製範例,請開啟命令提示字元並流覽至您想要建立專案的位置,然後輸入下列命令:

        git clone https://github.com/Azure-Samples/ms-identity-javascript-nodejs-desktop.git
                      下載 .zip 檔案。 將它解壓縮到名稱長度少於 260 個字元的檔案路徑。

        您的檔案看起來應該如下所示:

        const AAD_ENDPOINT_HOST = "https://login.microsoftonline.com/"; // include the trailing slash
        const msalConfig = {
            auth: {
                clientId: "00001111-aaaa-2222-bbbb-3333cccc4444",
                authority: `${AAD_ENDPOINT_HOST}/aaaabbbb-0000-cccc-1111-dddd2222eeee`,
            system: {
                loggerOptions: {
                    loggerCallback(loglevel, message, containsPii) {
                         console.log(message);
                     piiLoggingEnabled: false,
                     logLevel: LogLevel.Verbose,
        const GRAPH_ENDPOINT_HOST = "https://graph.microsoft.com/"; // include the trailing slash
        const protectedResources = {
             graphMe: {
                 endpoint: `${GRAPH_ENDPOINT_HOST}v1.0/me`,
                 scopes: ["User.Read"],
        module.exports = {
             msalConfig: msalConfig,
             protectedResources: protectedResources,
        
      • 在 Visual Studio 中開啟專案。

      • 編輯 active-directory-wpf-msgraph-v2/App.xaml.cs,並以下列程式代碼取代字段 ClientIdTenant 的值:

        private static string ClientId = "Enter_the_Application_Id_here";
        private static string Tenant = "Enter_the_Tenant_Info_Here";
                      Enter_the_Application_Id_here - 是您註冊之應用程式的 應用程式(用戶端)標識碼

        若要尋找 應用程式 (用戶端) 識別碼的值,請移至 Microsoft Entra 系統管理中心的 [應用程式 概觀] 頁面。

        Enter_the_Tenant_Info_Here - 設定為下列其中一個選項:

      • 如果您的應用程式支援此組織目錄中的 帳戶,請將此值取代為 租使用者識別子租使用者名稱 (例如,contoso.microsoft.com)

      • 如果您的應用程式支援任何組織目錄中的 帳戶,請將此值取代為 organizations

      • 如果您的應用程式支援任何組織目錄中的 帳戶和個人Microsoft帳戶,請將此值取代為 common

        若要尋找 Directory (tenant)識別碼支援的帳戶類型的值,請移至 Microsoft Entra 系統管理中心的 [概觀] 頁面。

        若要在 Visual Studio 中建置並執行範例應用程式,請遵循下列步驟:

      • 選取 [偵錯] 功能表,>[開始偵錯],或按 F5 鍵。 您的應用程式 MainWindow 已顯示。
      • 選取「呼叫 Microsoft Graph API」按鈕。
      • 使用您的 Microsoft Entra 帳戶(公司或學校帳戶)或Microsoft帳戶 (live.com, outlook.com) 認證登入。
      • 如果您第一次執行應用程式,系統會提示您同意允許應用程式存取使用者配置檔並登入。 同意要求的許可權之後,應用程式會顯示您已成功登入。
      • 您應該會看到從呼叫 Microsoft Graph API 取得的一些基本令牌資訊和用戶數據。

      • 有有效訂閱的 Azure 帳戶。 如果您還沒有帳戶,免費建立帳戶
      • 此 Azure 帳戶必須具有管理應用程式的許可權。 下列任何Microsoft Entra 角色都包含必要的許可權:
        • 應用程式管理員
        • 應用程式開發人員
        • 雲端應用程式管理員
        • 外部租戶。 若要建立一個,請從下列方法中選擇:
          • (建議)使用 Microsoft Entra External ID extension,直接在 Visual Studio Code 中設定外部租使用者
          • 在 Microsoft Entra 系統管理中心建立新的外部租戶
          • 使用者流程。 如需詳細資訊,請參閱 為外部租使用者中的應用程式建立自助式註冊使用者流程。 此使用者流程可用於多個應用程式。
          • Microsoft Entra 系統管理中心註冊新的應用程式, 僅針對此組織目錄中的帳戶進行設定。 如需詳細資訊 ,請參閱註冊應用程式 。 從應用程式 [概 ] 頁面記錄下列值,以供稍後使用:
            • 應用程式 (用戶端) 識別碼
            • 目錄(租戶)識別碼
            • 將應用程式新增至使用者流程

              本教程中提供的 Electron 範例程式特別為搭配 MSAL-node 使用而設計。 電子應用程式中不支援 MSAL 瀏覽器。 請確定您已完成下列步驟,以正確設定您的專案。

              若要取得傳統型應用程式範例程式代碼,執行下列命令,從 GitHub 下載 .zip 檔案 或複製範例 Web 應用程式:

              git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git
              

              如果您選擇下載 .zip 檔案,請將範例應用程式檔案解壓縮到一個其路徑總長度不超過 260 個字元的資料夾。

              安裝專案依賴項

            • 開啟主控台視窗,並變更為包含電子範例應用程式的目錄:

              cd 1-Authentication\3-sign-in-electron\App
              
            • 執行下列命令來安裝應用程式相依性:

              npm install && npm update
              
            • 在 Visual Studio 中,開啟 ms-identity-ciam-dotnet-tutorial-main/1-Authentication/2-sign-in-maui/appsettings.json 檔案。
            • 尋找佔位符
                Enter_the_Tenant_Subdomain_Here,並將它取代為 Directory (tenant) 子域。 例如,如果您的租戶主要網域是 contoso.onmicrosoft.com,請使用 contoso。 如果您沒有租用戶名稱,請了解如何讀取租用戶詳細資料Enter_the_Application_Id_Here,並將其替換為您先前註冊的應用程式(用戶端)ID。
              1. 在 IDE 中開啟專案(例如 Visual Studio 或 Visual Studio Code),以設定程式代碼。

              2. 在您的程式代碼編輯器中,開啟 ms-identity-ciam-dotnet-tutorial>> 資料夾中的 appsettings.json 檔案。

              3. Enter_the_Application_Id_Here 取代為您稍早註冊之應用程式的應用程式(客戶端)標識碼。

              4. Enter_the_Tenant_Subdomain_Here 取代為 Directory (tenant) 子域。 例如,如果您的主域是 contoso.onmicrosoft.com,請將 Enter_the_Tenant_Subdomain_Here 取代為 contoso。 如果您沒有主要網域,請瞭解如何 讀取租戶詳細數據

              5. 在出現的桌面視窗中,選取 [[登入] 或 [註冊] 按鈕。 瀏覽器視窗隨即開啟,系統會提示您登入。

              6. 在瀏覽器登入頁面上,輸入 電子郵件位址,選取 [下一步],輸入 密碼,然後選取 [登入]。 如果您沒有帳戶,請選取 [沒有帳戶?建立一個 連結,以啟動註冊流程。

              7. 如果您選擇註冊選項,請在填寫電子郵件、單次密碼、新密碼和更多帳戶詳細數據之後,完成整個註冊流程。 您會看到類似下列螢幕快照的頁面。 如果您選擇登入選項,您會看到類似的頁面。 頁面會顯示令牌 ID 聲明。

                .NET MAUI 應用程式的設計目的是在多個作系統和裝置上執行。 您必須選取您要用來測試和偵錯應用程式的目標。

                將 Visual Studio 工具列中的 [偵錯目標] 設定為您想要進行偵錯和測試的裝置。 下列步驟示範將 偵錯目標 設定為 Windows

              8. 選取 [偵錯目標] 下拉式清單
              9. 選擇架構
              10. 選取 net7.0-windows...
              11. 按下 F5,或選取 Visual Studio 頂端的 播放按鈕 來執行應用程式。

              12. 您現在可以測試範例 .NET MAUI 桌面應用程式。 執行應用程式之後,桌面應用程式視窗會自動出現:

  •