快速入門：在範例桌面應用程式中登入使用者

• Node.js
• Visual Studio Code 或其他程式碼編輯器

• 已安裝 通用 Windows 平台開發 工作負載的 Visual Studio

1. 從已註冊應用程式的 [概觀] 頁面，在 [管理 ] 底下，選取 [驗證]。
2. 在 [平台組態] 頁面上，選擇 [新增平臺]，然後選擇 [>行動裝置和桌面應用程式]。
3. 在 [重新導向 URI] 區段中，輸入 http://localhost。
4. 選擇 ，設定。

1. 從已註冊應用程式的 [概觀] 頁面的 [管理] 底下，選取 [驗證]。
2. 在 [平臺組態] 頁面上，選取 [新增一個平臺>行動和桌面應用程式]。
3. 在 [重新導向 URI] 區段中，選取 [https://login.microsoftonline.com/common/oauth2/nativeclient]，然後在 [自定義重新導向 URI] 中，新增 ms-appx-web://microsoft.aad.brokerplugin/{client_id}，其中 {client_id} 是應用程式的應用程式（用戶端）標識符。
4. 選擇 配置。

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

  git clone https://github.com/Azure-Samples/ms-identity-javascript-nodejs-desktop.git
  

• 下載 .zip 檔案。 將它解壓縮到名稱長度少於 260 個字元的檔案路徑。

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

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

• 下載 .zip 檔案

*擷取項目，開啟 ms-identity-JavaScript-nodejs-desktop-main 資料夾，然後開啟 .authConfig.js 檔案。 請將數值替換如下：

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

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,
 };

1. 將 zip 檔案解壓縮到靠近磁碟根目錄的本機資料夾，例如，C：\Azure-Samples。

2. 在 Visual Studio 中開啟專案。

3. 編輯 App.Xaml.cs，並以下列程式代碼取代 ClientId 和 Tenant 字段的值：

   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 系統管理中心的[概觀] 頁面。

1. 您必須安裝此範例的相依性一次：

   cd ms-identity-javascript-nodejs-desktop-main
   npm install
   

2. 然後，透過命令提示字元或主控台執行應用程式：

   npm start
   

3. 選取 登入 以開始登入程序。

   第一次登入時，系統會提示您提供同意，以允許應用程式登入並存取配置檔。 成功登入之後，系統會將您重新導向回應用程式。

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

1. 選取 [偵錯] 功能表，>[開始偵錯]，或按 F5 鍵。 您的應用程式 MainWindow 已顯示。
2. 選取「呼叫 Microsoft Graph API」按鈕。
3. 使用您的 Microsoft Entra 帳戶（公司或學校帳戶）或Microsoft帳戶 （live.com， outlook.com） 認證登入。
4. 如果您第一次執行應用程式，系統會提示您同意允許應用程式存取使用者配置檔並登入。 同意要求的許可權之後，應用程式會顯示您已成功登入。

您應該會看到從呼叫 Microsoft Graph API 取得的一些基本令牌資訊和用戶數據。

若要深入瞭解使用 MSAL 節點進行電子桌面應用程式開發，請參閱教學課程：

試用 Windows 桌面教學課程，以取得建置應用程式和新功能的完整逐步指南，包括本快速入門的完整說明。

• Node.js
• Visual Studio Code 或其他程式碼編輯器*

• .NET 7.0 SDK 或更新版本
• 已安裝 MAUI 工作負載的 Visual Studio 2022：
  • 適用於 Windows 的 指示
  • macOS 的 指示
• 將應用程式新增至使用者流程

• Visual Studio Code 或其他程式碼編輯器
• .NET 7.0 或更新版本
• 將應用程式新增至使用者流程

若要將您的應用程式類型指定至您的應用程式註冊，請遵循下列步驟：

1. 在 [管理] 下，選取 [身份驗證]。
2. 在 [平臺組態] 頁面上，選取 [新增平臺]，然後選取 [行動裝置和傳統型應用程式] 選項。
3. 針對 自訂重新導向 URI，輸入 http://localhost，然後選擇 設定。
4. 選取 [設定] 以儲存變更。

若要將您的應用程式類型指定至您的應用程式註冊，請遵循下列步驟：

1. 在 管理下，選取 驗證。
2. 在 [平臺組態] 頁面上，選取 [[新增平臺]，然後選取 [[行動裝置和桌面應用程式] 選項。
3. 針對 重新導向 URI，請輸入 msal{client_id}://auth。 請確定 {client_id} 符合應用程式註冊的值。 選擇 並設定。
4. 選取 [儲存] 以儲存變更。

若要將您的應用程式類型指定至您的應用程式註冊，請遵循下列步驟：

1. 在 [管理] 下，選取 [驗證]。
2. 在 [平臺組態] 頁面上，選取 [新增平臺]，然後選取 [行動裝置和傳統型應用程式] 選項。
3. 在 [自定義重新導向 URI] 底下的輸入欄位中，手動輸入 https://login.microsoftonline.com/common/oauth2/nativeclient，然後選取 配置 []。 如果您在選取方塊上選取此 URI，您可能會收到重新導向 URI 錯誤。

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

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

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

安裝專案相依性

1. 開啟主控台視窗，並變更為包含電子範例應用程式的目錄：

   cd 1-Authentication\3-sign-in-electron\App
   

2. 執行下列命令來安裝應用程式相依性：

   npm install && npm update
   

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

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

若要取得範例應用程式，您可以從 GitHub 複製它，或將它下載為 .zip 檔案。

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

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

• 下載 .zip 檔案。 將它解壓縮到名稱長度少於 260 個字元的檔案路徑。

1. 在您的程式代碼編輯器中，開啟 App\authConfig.js 檔案。

2. 尋找占位符：

   1. Enter_the_Application_Id_Here，並將它取代為您稍早註冊之應用程式的應用程式（用戶端）標識碼。

   2. Enter_the_Tenant_Subdomain_Here，並將它取代為 Directory （tenant） 子域。 例如，如果您的租戶主要網域是 contoso.onmicrosoft.com，請使用 contoso。 如果您沒有租戶名稱，請了解如何 查看租戶資訊。

1. 在 Visual Studio 中，開啟 ms-identity-ciam-dotnet-tutorial-main/1-Authentication/2-sign-in-maui/appsettings.json 檔案。
2. 尋找佔位符
   1. Enter_the_Tenant_Subdomain_Here，並將它取代為 Directory （tenant） 子域。 例如，如果您的租戶主要網域是 contoso.onmicrosoft.com，請使用 contoso。 如果您沒有租戶名稱，請了解如何 讀取租戶詳細資料。
   2. Enter_the_Application_Id_Here，並將它取代為您稍早註冊之應用程式的應用程式（用戶端）標識碼。

1. 在 IDE 中開啟專案（例如 Visual Studio 或 Visual Studio Code），以設定程式代碼。

2. 在您的程式代碼編輯器中，開啟 ms-identity-ciam-dotnet-tutorial>1-Authentication>5-sign-in-dotnet-wpf 資料夾中的 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。 如果您沒有主要網域，請瞭解如何 讀取租戶詳細數據。

您現在可以測試範例電子桌面應用程式。 執行應用程式之後，桌面應用程式視窗會自動出現：

1. 在您的終端機中，執行下列命令：

   npm start
   

   

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

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

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

   

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

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

1. 選取 [偵錯目標] 下拉式清單。
2. 選取 Framework
3. 選取 net7.0-windows...

按下 F5，或選取 Visual Studio 頂端的 播放按鈕 來執行應用程式。

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

   

2. 在出現的桌面視窗，選擇 登入 按鈕。 瀏覽器視窗隨即開啟，系統會提示您登入。

   

   在登入過程中，系統會提示您授與各種許可權（允許應用程式存取您的數據）。 成功登入並同意後，應用程式畫面會顯示主頁面。

   

1. 開啟主控台視窗，並變更為包含 WPF 桌面範例應用程式的目錄：

   cd 1-Authentication\5-sign-in-dotnet-wpf
   

2. 在您的終端機中，執行下列命令來執行應用程式：

   dotnet run
   

3. 啟動範例之後，您應該會看到具有 登入 按鈕的視窗。 選取 [登入] 按鈕。

   

4. 在登入頁面上，輸入您的帳戶電子郵件位址。 如果您沒有帳戶，請選取 沒有帳戶？建立一個，以啟動註冊流程。 請遵循此流程來建立新的帳戶並登入。

5. 登入之後，您會看到顯示成功登入的畫面，以及所擷取令牌中所儲存用戶帳戶的基本資訊。 基本信息會顯示在登入畫面的 [令牌資訊] 區段中

• 啟用密碼重設。
• 自訂預設商標。
• 探索電子桌面應用程式範例程式代碼。

• 教學課程：建立 .NET MAUI 應用程式。
• 啟用密碼重設。
• 自訂預設商標。

• 教學課程：在 WPF 桌面應用程式中驗證使用者身分
• 啟用密碼重設。
• 自訂預設商標。