分享方式：

在 Electron 傳統型應用程式範例中登入使用者

  • 文章

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

本操作指南會使用 Electron 傳統型應用程式範例來示範如何將驗證新增至傳統型應用程式。 應用程式範例可讓使用者登入和登出。範例 Web 應用程式會使用適用於 Node 的 Microsoft 驗證程式庫 (MSAL) 來處理驗證。

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

  • 在 Microsoft Entra 系統管理中心註冊傳統型應用程式。

  • 在 Microsoft Entra 系統管理中心建立登入和登出使用者流程。

  • 將 Web 應用程式與使用者流程產生關聯。

  • 更新 Electron 傳統型應用程式範例來使用您自己的外部租用戶詳細資料。

  • 執行並測試傳統型應用程式範例。

必要條件

註冊傳統型應用程式

若要讓應用程式能夠使用 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] 輸入 http://localhost，然後選取 [設定]。
  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. 選取 建立。 新的使用者流程會出現在 [使用者流程] 清單中。 如有需要，請重新整理頁面。

若要啟用自助式密碼重設，請使用啟用自助式密碼重設一文中的步驟。

將 Web 應用程式與使用者流程建立關聯

若要讓客戶使用者在使用您的應用程式時看到註冊或登入體驗，您必須將您的應用程式與使用者流程關聯起來。 雖然許多應用程式可以與您的使用者流程產生關聯，但單一應用程式只能與一個使用者流程產生關聯。

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

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

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

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

  5. 選取新增應用程式。

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

  7. 選擇選取。

將應用程式與使用者流程關聯後，您即可從 Microsoft Entra 系統管理中心使用您的應用程式模擬使用者的註冊或登入體驗，以測試您的使用者流程。 若要這麼做，請使用測試註冊和登入使用者流程中的步驟。

複製或下載 Web 應用程式範例

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

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

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

安裝專案相依性

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

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

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

    npm install && npm update

設定 Web 應用程式範例

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

  2. 尋找預留位置：

    1. Enter_the_Application_Id_Here 並將其取代為您稍早註冊之應用程式的應用程式 (用戶端) 識別碼。

    2. Enter_the_Tenant_Subdomain_Here 並將其取代為目錄 (租用戶) 子網域。 例如，若租用戶主要網域是 contoso.onmicrosoft.com，請使用 contoso。 如果您沒有租用戶名稱，請了解如何閱讀租用戶詳細資料。

執行並測試 Web 應用程式範例

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

  1. 在終端內，執行下列 命令：

    npm start

    登入 Electron 傳統型應用程式的螢幕擷取畫面。

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

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

  4. 如果您選擇註冊選項，在填寫電子郵件、一次性密碼、新密碼和更多帳戶詳細資料之後，您便能完成整個註冊流程。 您會看到類似下列螢幕擷取畫面的頁面。 如果您選擇登入選項，則會看到類似的頁面。 頁面會顯示權杖識別碼宣告。

    在 Electron 傳統型應用程式中檢視權杖宣告的螢幕擷取畫面。

另請參閱