快速入門：從 Node.js 傳統型應用程式登入使用者並呼叫 Microsoft Graph - Microsoft identity platform

文章
07/03/2024

在本快速入門中，您會下載並執行程式碼範例，該範例會示範 Electron 桌面應用程式如何登入使用者，並取得存取權杖呼叫 Microsoft Graph API。

本快速入門會使用適用於 Node.js 的 Microsoft 驗證程式庫 (MSAL Node) 與具有 PKCE 的授權碼流程。

必要條件

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

註冊和下載範例應用程式

遵循下方步驟開始使用。

步驟 1：註冊應用程式

提示

根據您開始使用的入口網站，本文中的步驟可能略有不同。

若要手動註冊您的應用程式，並將應用程式註冊資訊新增到您的解決方案，請執行下列步驟：

以至少雲端應用程式系統管理員的身分登入 Microsoft Entra 系統管理中心。
若有權存取多個租用戶，請使用頂端功能表中的 [設定] 圖示，以從 [目錄 + 訂用帳戶] 功能表中切換至您想要在其中註冊應用程式的租用戶。
瀏覽至 [身分識別]>[應用程式]>[應用程式註冊]，然後選取 [新增註冊]。
輸入應用程式的名稱，例如 msal-node-desktop。您的應用程式使用者可能會看到此名稱，而且您稍後可以加以變更。
選取 [暫存器] 以建立應用程式。
在 [管理] 底下，選取 [驗證]。
選取 [新增平台]>[行動和傳統應用程式]。
在 [重新導向 URI] 區段中，輸入 http://localhost。
選取設定。

步驟 2：下載 Electron 範例專案

下載程式碼範例

步驟 3：設定 Electron 範例專案

*將專案解壓縮，開啟 ms-identity-JavaScript-nodejs-desktop-main 資料夾，然後開啟 .authConfig.js 檔案。取代值，如下所示：

變數	描述	範例
`Enter_the_Cloud_Instance_Id_Here`	註冊應用程式所在的 Azure 雲端執行個體	`https://login.microsoftonline.com/` (包含向前頃斜線)
`Enter_the_Tenant_Id_Here`	租用戶識別碼或主要網域	`contoso.microsoft.com` 或 `aaaabbbb-0000-cccc-1111-dddd2222eeee`
`Enter_the_Application_Id_Here`	所註冊應用程式的用戶端識別碼	`00001111-aaaa-2222-bbbb-3333cccc4444`
`Enter_the_Redirect_Uri_Here`	您註冊的應用程式重新導向 URI	`msal00001111-aaaa-2222-bbbb-3333cccc4444://auth`
`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,
 };

步驟 4：執行應用程式

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

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

然後，透過命令提示字元或主控台執行應用程式：
```
npm start
```
選取 [登入] 以啟動登入程序。

第一次登入時，系統會提示您同意允許應用程式登入和存取您的設定檔。成功登入之後，系統會將您重新導向回應用程式。

其他相關資訊

此範例的運作方式

當使用者第一次選取 [登入] 按鈕時，會呼叫 MSAL Node 的 acquireTokenInteractive 方法。這個方法會將使用者重新導向至使用 Microsoft 身分識別平台端點登入、取得授權碼，然後用此授權碼來換取存取權杖。

MSAL 節點

MSAL 節點是程式庫，用來登入使用者並要求權杖，該權杖是用來存取受 Microsoft 身分識別平台保護的 API。如需如何搭配使用 MSAL 節點與桌面應用程式的詳細資訊，請參閱這篇文章。

您可以執行下列 npm 命令來安裝 MSAL 節點。

npm install @azure/msal-node --save

下一步

若要深入了解如何使用 MSAL 節點進行 Electron 桌面應用程式開發，請參閱教學課程：

教學課程：在 Electron 桌面應用程式中登入使用者並呼叫 Microsoft Graph API

分享方式：