在範例電子桌面應用程式中登入使用者

本操作指南會使用範例 Electron 傳統型應用程式來示範如何將驗證新增至傳統型應用程式。 範例應用程式可讓使用者登入和註銷。範例 Web 應用程式會使用 Microsoft Authentication Library （MSAL） 讓 Node 處理驗證。

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

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

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

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

• 使用您自己的外部租使用者詳細數據更新範例電子桌面應用程式。

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

必要條件

• Node.js。

• Visual Studio Code 或其他程式碼編輯器。

• 外部租使用者。 如果您還沒有試用版， 請註冊免費試用。

註冊傳統型應用程式

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

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

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

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

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

4. 選取 + 新增註冊。

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

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

6. 選取註冊。

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

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

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

授與 API 許可權

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

2. 在 [管理] 之下選取 [API 權限]。

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

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

5. 在 [常用 Microsoft API] 區段底下，選取 [Microsoft Graph]。

6. 選取 [委派的許可權] 選項。

7. 在 [選取許可權] 區段下，搜尋並選取 openid 和 offline_access 許可權。

8. 選取 [ 新增許可權] 按鈕。

9. 此時，您已正確指派許可權。 不過，由於租用戶是客戶的租使用者，因此取用者使用者本身無法同意這些許可權。 身為系統管理員必須代表租使用者中的所有使用者同意這些許可權：

   1. 選取 [授與租用戶名稱>的<管理員同意]，然後選取 [是]。
   2. 選取 [重新整理]，然後確認 [為租用戶名稱>授與] <出現在這兩個範圍的 [狀態] 底下。

設定選擇性宣告

1. 在 [管理] 底下，選取 [令牌設定]。

2. 選取 [ 新增選擇性宣告]。

3. 選取 選擇性宣告類型，然後選擇 [ 標識符]。

4. 選取選擇性宣告 login_hint。

5. 選取 [ 新增 ] 以儲存變更。

建立使用者流程

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

1. 以至少外部標識碼使用者流程 管理員 istrator 身分登入 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. 選擇選取。

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

若要取得傳統型應用程式範例程式代碼， 請執行下列命令，下載.zip檔案 ，或從 GitHub 複製範例 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
   

設定範例 Web 應用程式

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

2. 尋找佔位元：

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

   2. Enter_the_Tenant_Subdomain_Here 並將它取代為 Directory （tenant） 子域。 例如，如果您的租使用者主要網域是 contoso.onmicrosoft.com，請使用 contoso。 如果您沒有租用戶名稱，請瞭解如何 閱讀您的租使用者詳細數據。

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

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

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

   npm start
   

   

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

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

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

   

另請參閱

• 啟用密碼重設。
• 自定義默認商標。
• 使用Google設定登入。
• 探索電子桌面應用程式範例程序代碼。