分享方式：

在 .NET MAUI 傳統型應用程式範例中登入使用者

  • 文章

適用於：具有灰色 X 符號的白色圓圈。 員工租用戶 具有白色核取符號的綠色圓圈。 外部租用戶 (深入了解)

本操作指南使用 .NET Multi-platform App UI (.NET MAUI) 範例來示範如何使用外部租用戶將驗證新增至傳統型應用程式。 應用程式範例可讓使用者登入和登出。.NET MAUI 傳統型應用程式範例會使用適用於 .NET 的 Microsoft 驗證程式庫 (MSAL) 來處理驗證。

在本文中，您將執行下列工作：

  • 在外部租用戶中註冊 .NET MAUI 傳統型應用程式。
  • 在外部租用戶中建立登入和登出使用者流程。
  • 將 .NET MAUI 傳統型應用程式與使用者流程產生關聯。
  • 更新 .NET MAUI 傳統型應用程式範例，以使用您自己的外部租用戶詳細資料。
  • 執行並測試 .NET MAUI 傳統型應用程式範例。

必要條件

註冊 .NET MAUI 傳統型應用程式

若要讓應用程式能夠使用 Microsoft Entra 登入使用者，Microsoft Entra 外部 ID 必須能辨識您建立的應用程式。 應用程式註冊會在應用程式與 Microsoft Entra 之間建立信任關係。 當您註冊應用程式時，外部 ID 會產生稱為應用程式 (用戶端) 識別碼的唯一識別碼，這個值可在建立驗證要求時用來識別您的應用程式。

下列步驟示範如何在 Microsoft Entra 系統管理中心註冊您的應用程式：

  1. 至少以應用程式開發人員的身分登入 Microsoft Entra 系統管理中心。

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

  3. 瀏覽至 [身分識別]>[應用程式]>[應用程式註冊]。

  4. 選取 + 新增註冊。

  5. 在出現的 [註冊應用程式] 頁面中；

    1. 輸入向應用程式使用者顯示的有意義應用程式名稱，例如 ciam-client-app。
    2. 在 [支援的帳戶類型] 底下，選取 [僅在此組織目錄中的帳戶]。

  6. 選取註冊。

  7. 應用程式的 [概觀] 窗格會在成功註冊時顯示。 記錄應用程式 (用戶端) 識別碼，以用於您的應用程式原始程式碼。

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

  1. 在 [管理] 底下，選取 [驗證]。
  2. 在 [平台設定] 頁面中，選取 [新增平台]，然後選取 [行動應用程式與傳統型應用程式] 選項。
  3. 針對 [重新導向 URI] 輸入 msalEnter_the_Application_Id_Here://auth，將 Enter_the_Application_Id_Here 取代為您稍早複製的應用程式 (用戶端) 識別碼，然後選取 [設定]。
  4. 選取儲存以儲存變更。

  1. 從 [應用程式註冊] 頁面中，選取您建立的應用程式 (例如 ciam-client-app)，以開啟其 [概觀] 頁面。

  2. 在「管理」下方選取 [API 權限]。 從 [設定的權限] 清單中，您的應用程式已獲指派 User.Read 權限。 不過，由於租用戶是外部租用戶，因此取用者使用者本身無法同意此權限。 身為管理員的您，必須代表租用戶中的所有使用者同意此權限：

    1. 選取 [代表 <您的租用戶名稱> 授與管理員同意]，接著選取 [是]。
    2. 選取 [重新整理]，然後驗證 [已授與 <您的租用戶名稱>] 是否出現在這兩個範圍的 [狀態] 下方。

建立使用者流程

請遵循下列步驟來建立使用者流程，讓客戶可用來登入或註冊應用程式。

  1. 至少以外部 ID 使用者流程管理員的身分登入 Microsoft Entra 系統管理中心。

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

  3. 瀏覽至 [身分識別]>[外部身分識別]>[使用者流程]。

  4. 選取 [+ 新增使用者流程]。

  5. 在 [建立] 頁面上：

    1. 輸入使用者流程的名稱，例如 SignInSignUpSample。

    2. 在 [識別提供者] 清單中，選取 [電子郵件帳戶]。 此識別提供者可讓使用者使用其電子郵件地址來登入或註冊。

      注意

      至於其他識別提供者，只有在您設定與他們同盟之後，才會在這裡列出。 例如，如果您設定與 Google 或 Facebook 同盟，就可以在這裡選取這些額外的識別提供者。

    3. 在 [電子郵件帳戶] 下方，您可以選取兩個選項之一。 在本教學課程中，選取 [電子郵件及密碼]。

      • 電子郵件及密碼：可讓新使用者使用電子郵件地址作為登入名稱，並使用密碼作為其第一個要素認證來註冊和登入。
      • 電子郵件一次性密碼：可讓新使用者使用電子郵件地址作為登入名稱，並使用電子郵件一次性密碼作為其第一個要素認證來註冊和登入。 電子郵件一次性密碼必須在租用戶層級啟用 ([所有識別提供者]>[電子郵件一次性密碼])，此選項才能在使用者流程層級使用。

    4. 在 [使用者屬性] 下方，選擇您要在註冊時向使用者收集的屬性。 選取 [顯示更多] 後，您可以選擇 [國家/地區]、[顯示名稱] 及 [郵遞區號] 的屬性和宣告。 選取 [確定]。 (只有在使用者第一次註冊時，才會提示使用者輸入屬性。)

  6. 選取 建立。 新的使用者流程會出現在 [使用者流程] 清單中。 如有需要，請重新整理頁面。

若要啟用自助式密碼重設，請使用啟用自助式密碼重設 (部分機器翻譯) 一文中的步驟。

將 .NET MAUI 傳統型應用程式與使用者流程產生關聯

雖然許多應用程式可以與您的使用者流程相關聯，但單一應用程式只能與一個使用者流程相關聯。 使用者流程允許設定特定應用程式的使用者體驗。 例如，您可以設定使用者流程，要求使用者使用電子郵件地址來登入或註冊。

  1. 在側邊欄功能表上，選取 [身分識別]。

  2. 選取 [外部身分識別]，然後選取 [使用者流程]。

  3. 在 [使用者流程] 頁面中，選取您稍早建立的使用者流程名稱，例如 SignInSignUpSample。

  4. 在 [使用] 下方，選取 [應用程式]。

  5. 選取新增應用程式。

  6. 從清單中選取應用程式，例如 ciam-client-app，或使用搜尋方塊來尋找應用程式並選取。

  7. 選擇選取。

複製或下載 .NET MAUI 傳統型應用程式範例

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

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

設定 .NET MAUI 傳統型應用程式範例

  1. 在 Visual Studio 中，開啟 ms-identity-ciam-dotnet-tutorial-main/1-Authentication/2-sign-in-maui/appsettings.json 檔案。
  2. 尋找預留位置：
    1. Enter_the_Tenant_Subdomain_Here 並將其取代為目錄 (租用戶) 子網域。 例如，如果您的租用戶主要網域是 contoso.onmicrosoft.com，請使用 contoso。 如果您沒有租用戶名稱，請了解如何閱讀租用戶詳細資料。
    2. Enter_the_Application_Id_Here 並將其取代為您稍早註冊的應用程式所使用的應用程式 (用戶端) 識別碼。

執行並測試 .NET MAUI 傳統型應用程式範例

.NET MAUI 應用程式已設計為可在多個作業系統和裝置上執行。 您必須選取目標以用來測試應用程式並進行偵錯。

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

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

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

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

    傳統型應用程式中登入按鈕的螢幕擷取畫面

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

    在傳統型應用程式中輸入認證的使用者提示螢幕擷取畫面。

    在登入過程中，系統會提示您授與各種權限 (允許應用程式存取您的資料)。 成功登入並同意後，應用程式畫面會顯示主頁面。

    登入後傳統型應用程式中主頁面的螢幕擷取畫面。

後續步驟