適用於： 
員工租戶 外部租戶 （進一步了解）
在本快速入門中，您將使用範例應用程式來學習如何將驗證功能加入至桌面應用程式。 範例應用程式可讓使用者登入和註銷，並使用 Microsoft 驗證連結庫 （MSAL） 來處理驗證。
開始之前，請使用 選擇此頁面頂端的租用戶類型 選取器，以選取租用戶類型。 Microsoft Entra ID 提供兩種租戶組態，員工 和 外部。 員工租戶配置適用於你的員工、內部應用程式和其他組織資源。 外部租戶適用於面向客戶的應用程式。
先決條件
- 有有效訂閱的 Azure 帳戶。 如果您還沒有帳戶，免費建立帳戶。
- 此 Azure 帳戶必須具有管理應用程式的許可權。 下列任何Microsoft Entra 角色都包含必要的許可權：
- 應用程式管理員
- 應用程式開發人員
- 員工租戶。 您可以使用預設目錄或設定新的租戶。
- 在 Microsoft Entra 系統管理中心註冊新的應用程式， 僅針對此組織目錄中的帳戶進行設定。 如需詳細資訊 ，請參閱註冊應用程式 。 從應用程式 [概 觀 ] 頁面記錄下列值，以供稍後使用：
- 應用程式 （用戶端） 識別碼
- 目錄（租戶）識別碼
- 使用 行動及桌面應用程式 平台組態新增下列重新導向 URI。 如需詳細資訊 ，請參閱如何在應用程式中新增重新導向 URI 。
-
重新導向 URI：
http://localhost
-
重新導向 URI：
- Node.js
- Visual Studio Code 或其他程式碼編輯器
下載範例專案
備註
本教程中提供的 Electron 範例程式特別為搭配 MSAL-node 使用而設計。 電子應用程式中不支援 MSAL 瀏覽器。 請確定您已完成下列步驟，以正確設定您的專案。
若要複製範例，請開啟命令提示字元並流覽至您想要建立專案的位置，然後輸入下列命令：
git clone https://github.com/Azure-Samples/ms-identity-javascript-nodejs-desktop.git下載 .zip 檔案。 將它解壓縮到名稱長度少於 260 個字元的檔案路徑。
設定專案
在您的程式代碼編輯器中，開啟 ms-identity-javascript-nodejs-desktop-main/App/authConfig.js 檔案。 請將數值替換如下：
| 變數 | 描述 | 範例 |
|---|---|---|
Enter_the_Cloud_Instance_Id_Here |
註冊應用程式的 Azure 雲端實例 |
https://login.microsoftonline.com/ （包括尾端正斜線） |
Enter_the_Tenant_Info_Here |
租用戶標識碼或主要網域名稱 |
contoso.microsoft.com 或 aaaabbbb-0000-cccc-1111-dddd2222eeee |
Enter_the_Application_Id_Here |
您註冊之應用程式的用戶端識別碼 | 00001111-aaaa-2222-bbbb-3333cccc4444 |
Enter_the_Graph_Endpoint_Here |
您的應用程式將呼叫的 Microsoft Graph API 雲端實例 |
https://graph.microsoft.com/ （包括尾端正斜線） |
您的檔案看起來應該如下所示：
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,
};
執行應用程式
您必須安裝此範例的相依性一次：
cd ms-identity-javascript-nodejs-desktop-main npm install然後，透過命令提示字元或主控台執行應用程式：
npm start選取 登入 以開始登入程序。
第一次登入時，系統會提示您提供同意，以允許應用程式登入並存取配置檔。 成功登入之後，系統會將您重新導向回應用程式。
下一步
若要深入瞭解使用 MSAL 節點進行電子桌面應用程式開發，請參閱教學課程：
先決條件
- 有有效訂閱的 Azure 帳戶。 如果您還沒有帳戶，免費建立帳戶。
- 此 Azure 帳戶必須具有管理應用程式的許可權。 下列任何Microsoft Entra 角色都包含必要的許可權：
- 應用程式管理員
- 應用程式開發人員
- 雲端應用程式管理員
- 外部租戶。 若要建立一個，請從下列方法中選擇：
- （建議）使用 Microsoft Entra External ID extension，直接在 Visual Studio Code 中設定外部租使用者
- 在 Microsoft Entra 系統管理中心建立新的外部租戶
- 使用者流程。 如需詳細資訊，請參閱 為外部租使用者中的應用程式建立自助式註冊使用者流程。 此使用者流程可用於多個應用程式。
- 在 Microsoft Entra 系統管理中心註冊新的應用程式， 僅針對此組織目錄中的帳戶進行設定。 如需詳細資訊 ，請參閱註冊應用程式 。 從應用程式 [概 觀 ] 頁面記錄下列值，以供稍後使用：
- 應用程式 （用戶端） 識別碼
- 目錄（租戶）識別碼
- 將應用程式新增至使用者流程
- 使用 行動及桌面應用程式 平台組態新增下列重新導向 URI。 如需詳細資訊 ，請參閱如何在應用程式中新增重新導向 URI 。
-
重新導向 URI：
http://localhost
-
重新導向 URI：
- Node.js
- Visual Studio Code 或其他程式碼編輯器*
下載範例專案
備註
本教程中提供的 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
設定範例 Web 應用程式
在您的程式代碼編輯器中，開啟
App\authConfig.js檔案。尋找占位符：
Enter_the_Application_Id_Here，並將其替換為您先前註冊的應用程式（用戶端）ID。Enter_the_Tenant_Subdomain_Here，並將它取代為 Directory （tenant） 子域。 例如，如果您的租戶主要網域是contoso.onmicrosoft.com，請使用contoso。 如果您沒有租用戶名稱，請了解如何讀取租用戶詳細資料。
執行及測試範例 Web 應用程式
您現在可以測試範例電子桌面應用程式。 執行應用程式之後，桌面應用程式視窗會自動出現：
在您的終端機中，執行下列命令：
npm start
在出現的桌面視窗中，選取 [[登入] 或 [註冊] 按鈕。 瀏覽器視窗隨即開啟，系統會提示您登入。
在瀏覽器登入頁面上，輸入 電子郵件位址，選取 [下一步]，輸入 密碼，然後選取 [登入]。 如果您沒有帳戶，請選取 [沒有帳戶？建立一個 連結，以啟動註冊流程。
如果您選擇註冊選項，請在填寫電子郵件、單次密碼、新密碼和更多帳戶詳細數據之後，完成整個註冊流程。 您會看到類似下列螢幕快照的頁面。 如果您選擇登入選項，您會看到類似的頁面。 頁面會顯示令牌 ID 聲明。
