使用開發人員帳戶在本機開發期間向 Azure 服務驗證 JavaScript 應用程式

當您建立雲端應用程式時，開發人員必須在其本機工作站上偵錯及測試應用程式。 當應用程式在本機開發期間於開發人員的工作站上執行時，仍必須向應用程式使用的任何 Azure 服務進行驗證。 本文涵蓋如何使用開發人員的 Azure 認證，在本機開發期間向 Azure 驗證應用程式。

若要讓應用程式在使用開發人員的 Azure 認證進行本機開發期間向 Azure 進行驗證，開發人員必須從 Visual Studio Code Azure Tools 擴充功能、Azure CLI 或 Azure PowerShell 登入 Azure。 Azure SDK for JavaScript 能夠偵測開發人員已從其中一個工具登入，然後從認證快取取得必要的認證，以以登入使用者身分向 Azure 驗證應用程式。

這種方法對開發小組而言最容易設定，因為使用的是開發人員現有 Azure 帳戶。 不過，開發人員帳戶的許可權可能會超過應用程式所需的許可權，因此超過應用程式在生產環境中執行的許可權。 您可以改為建立在本機開發期間使用的應用程式服務主體，設定其權限範圍與應用程式需要的存取權相符。

1 - 建立 Microsoft Entra 群組以進行本機開發

由於幾乎一律有多個開發人員在應用程式上工作，因此建議您先建立Microsoft Entra 群組，以封裝應用程式在本機開發中所需的角色（許可權）。 這具有以下優點。

• 由於角色是在群組層級指派，因此指派給每位開發人員的角色都能保證相同。
• 如果應用程式需要新的角色，則只需要將它新增至應用程式的 Microsoft Entra 群組。
• 如果新的開發人員加入小組，他們只需要新增至正確的Microsoft Entra 群組，才能取得正確的許可權來處理應用程式。

如果您的開發小組已經有 Microsoft Entra 群組，您可以使用該群組。 否則，請完成下列步驟以建立 Microsoft Entra 群組。

Azure 入口網站

指示	Screenshot
在頁面頂端的搜尋方塊中輸入 Microsoft Entra ID，然後從服務底下選取 [Microsoft Entra ID]，以流覽至 Azure 入口網站 中的 [Microsoft Entra 標識符] 頁面。
在 [Microsoft Entra ID] 頁面中，選取側功能表內的 [群組]。
在 [所有群組] 頁面中，選取 [新增群組]。
在 [新增群組] 頁面進行下列設定： 群組類型 → 安全性。 [群組名稱] → 安全性群組的名稱，通常從應用程式名稱建立。 在群組名稱中包含 local-dev 這樣的字串也很有幫助，能夠指出群組的用途。 [群組描述] → 群組用途的描述。 選取 [成員] 下方的 [未選取任何成員] 連結，為群組新增成員。
在 [新增成員] 對話方塊進行下列設定： 使用搜尋方塊篩選清單中的使用者名稱清單。 為此應用程式選擇一或多個使用者進行本機開發。 當您選擇物件時，物件會移至對話框底部的 [選取的項目] 清單。 完成後，請選擇 [選取] 按鈕。
回到 [新增群組] 頁面，選取 [建立] 以建立群組。 群組隨即建立，而您會回到 [所有群組] 頁面。 群組最多可能需 30 秒才會顯示，且礙於 Azure 入口網站中的快取，您可能必須重新整理頁面才能看見。

Azure CLI

az ad group create 命令可在 Microsoft Entra ID 中建立群組。 --display-name 和 --main-nickname 是必要參數。 提供給群組的名稱應根據應用程式而定。 在群組名稱中包含 'local-dev' 這類字詞也很有幫助，能夠指出群組的用途。

az ad group create \
    --display-name MyDisplay \
    --mail-nickname MyDisplay  \
    --description <group-description>

若要將成員新增至群組，您將需要 Azure 使用者的物件識別碼。 請使用 az ad user list 列出可用的服務主體。 --filter 參數命令接受 OData 樣式篩選，且可用於根據使用者顯示名稱篩選清單，如下所示。 參數 --query 會傳回指定的數據行。

az ad user list \
    --filter "startswith(displayName, 'Bob')" \
    --query "[].{objectId:objectId, displayName:displayName}" \
    --output table

之後可用 az ad group member add 命令來將成員新增至群組。

az ad group member add \
    --group <group-name> \
    --member-id <object-id>

2 - 將角色指派給 Microsoft Entra 群組

接著，您必須決定應用程式針對哪些資源需要哪些角色 (權限)，並將這些角色指派給應用程式。 在此範例中，角色會指派給在步驟 1 中建立的 Microsoft Entra 群組。 角色可在資源、資源群組或訂閱範圍內獲派其他角色。 此範例示範如何在資源群組範圍中指派角色，因為大部分的應用程式都會將其所有 Azure 資源群組組成單一資源群組。

Azure 入口網站

指示	Screenshot
用 Azure 入口網站頂端的搜尋方塊，搜尋資源群組的名稱，藉此找出應用程式的資源群組。 選取對話方塊中 資源群組 標題下方的資源群組名稱，瀏覽至您的資源群組。
在資源群組分頁中，從左側功能表選取 存取控制 (IAM)。
在 存取控制 (IAM) 分頁上： 選取 [角色指派] 索引標籤。 從頂端功能表選取 [+ 新增]，然後從產生的下拉功能表中選取 [新增角色指派]。
新增角色指派 分頁列出所有可指派至資源群組之角色的清單。 請善用搜尋方塊，將清單篩選為更易於管理的大小。 此範例顯示如何針對儲存體 Blob 角色進行篩選。 選取您要指派的角色。 選取 [下一步] 前往下一個畫面。
下一個 新增角色指派 分頁能讓您指定要指派角色的使用者。 選取 [存取權指派對象為] 下的 [使用者、群組或服務主體]。 選取 [成員] 下的 [+ 選取成員] 對話方塊會在 Azure 入口網站的右側開啟。
在 [選取成員] 對話方塊進行下列設定： [選取] 文字輸入框可用來篩選訂閱中的使用者及群組清單。 如有需要，請輸入您為應用程式所建立本機開發 Microsoft Entra 群組的前幾個字元。 選取與您的應用程式相關聯的本機開發 Microsoft Entra 群組。 選取對話方塊底部的 [選取] 來繼續。
Microsoft Entra 群組會在 [新增角色指派] 畫面上顯示為已選取。 選取 [檢閱 + 指派] 移至最終分頁，然後再次選取 [檢閱 + 指派] 完成此流程。

Azure CLI

使用 az role assignment create 命令，可在 Azure 中將角色指派給應用程式服務主體。

az role assignment create --assignee "{appId}" \
    --scope /subscriptions/"{subscriptionName}" \
    --role "{roleName}" \
    --resource-group "{resourceGroupName}"

請使用 az role definition list 命令取得可指派給服務主體的角色名稱。

az role definition list --query "sort_by([].{roleName:roleName, description:description}, &roleName)" --output table

例如，若要允許應用程式服務主體讀取、寫入和刪除對 msdocs-sdk-auth-example 資源群組中所有記憶體帳戶 Azure 儲存體 Blob 容器和數據的訪問許可權，您可以使用下列命令，將應用程式服務主體指派給記憶體 Blob 數據參與者角色。

az role assignment create --assignee "aaaaaaaa-bbbb-cccc-7777-888888888888" \
    --scope /subscriptions/"Storage Blob Data Subscriber" \
    --role "Storage Blob Data Contributor" \
    --resource-group "msdocs-sdk-auth-example"

如需在資源或訂閱等級使用 Azure CLI 指派權限的更多資訊，請參閱使用 Azure CLI 指派 Azure 角色一文。

3 - 使用 VS Code、Azure CLI 或 Azure PowerShell 登入 Azure

Azure PowerShell

在開發人員工作站上開啟終端，然後從 Azure PowerShell 登入 Azure。

Connect-AzAccount

4 - 在應用程式中實作 DefaultAzureCredential

若要向 Azure 驗證 Azure SDK 用戶端物件，您的應用程式應該使用 DefaultAzureCredential 套件中的 @azure/identity 類別。 在此案例中， DefaultAzureCredential 會循序檢查開發人員是否已使用 VS Code Azure 工具擴充功能、Azure CLI 或 Azure PowerShell 登入 Azure。 如果開發人員使用任何這些工具登入 Azure，則應用程式會使用用來登入工具的認證向 Azure 進行驗證。

首先，將 @azure/身分 識別套件新增至您的應用程式。

npm install @azure/identity

接下來，針對在應用程式中建立 Azure SDK 用戶端物件的任何 JavaScript 程式代碼，您會想要：

1. 從模組匯入 DefaultAzureCredential @azure/identity 類別。
2. 建立 DefaultAzureCredential 物件。
3. 將 DefaultAzureCredential 對象傳遞至 Azure SDK 用戶端物件建構函式。

下列程式碼區段示範其中一種範例。

import { BlobServiceClient } from '@azure/storage-blob';
import { DefaultAzureCredential } from '@azure/identity';

// Acquire a credential object
const tokenCredential = DefaultAzureCredential();

const blobServiceClient = BlobServiceClient(
        `https://${accountName}.blob.core.windows.net`,
        tokenCredential
);

DefaultAzureCredential 會自動偵測為應用程式設定的驗證機制，並取得向 Azure 驗證應用程式所需的令牌。 如果應用程式使用多個SDK用戶端，則相同的認證物件可以與每個SDK客戶端物件搭配使用。