從內部部署 JavaScript 應用程式向 Azure 資源進行驗證

  • 發行項

在 Azure 外部執行的應用程式（例如內部部署或第三方資料中心）應該使用應用程式服務主體在存取 Azure 資源時向 Azure 進行驗證。 系統會在 Azure 中使用應用程式註冊程序來建立應用程式服務主體物件。 建立應用程式服務主體時，會產生應用程式的用戶端標識碼和客戶端密碼。 您會將用戶端識別碼、用戶端密碼和租使用者標識符儲存在環境變數中，讓適用於 JavaScript 的 Azure SDK 在運行時間使用環境變數向 Azure 驗證您的應用程式。

應該為每個環境建立不同的應用程式註冊（例如測試、階段、生產環境），應用程式正在執行。 這可讓每個服務主體設定環境特定的資源許可權，並確定部署到某個環境的應用程式不會與屬於另一個環境一部分的 Azure 資源交談。

1：在 Azure 中註冊應用程式

您可以使用 Azure 入口網站或 Azure CLI 向 Azure 註冊應用程式。

登入 Azure 入口網站並遵循下列步驟。

指示 Screenshot
在 Azure 入口網站中:
  1. 在 Azure 入口網站頂端的搜尋列中輸入應用程式註冊。
  2. 在搜尋列下方出現的功能表上的 [服務] 標題下，選取標有 [應用程式註冊] 的項目。
 A screenshot showing how to use the top search bar in the Azure portal to find and navigate to the App registrations page.
在 [應用程式註冊] 頁面上，選取 [+ 新增註冊]。 A screenshot showing the location of the New registration button in the App registrations page.
在 [註冊應用程式] 頁面中，如下所示填妥表單。
  1. 名稱 → 輸入 Azure 中應用程式註冊的名稱。 建議此名稱包括為其進行應用程式註冊的應用程式名稱和環境 (測試、實際執行)。
  2. 支援的帳戶類型 → 僅限此組織目錄中的帳戶。
選取 [註冊] 來註冊您的應用程式，並建立應用程式服務主體。		 A screenshot to fill out Register by giving the app a name and specifying supported account types as accounts in this organizational directory only.
在您應用程式的 [應用程式註冊] 頁面中：
  1. 應用程式 （用戶端） 識別碼 →這是您的應用程式在本機開發期間用來存取 Azure 的應用程式識別碼。 將此值複製到文本編輯器中的暫存位置，因為您將在未來的步驟中用到此值。
  2. 目錄（租使用者）標識碼 →您的應用程式在向 Azure 驗證時也需要此值。 請將此值複製到文字編輯器內的暫存位置，後續步驟同樣還會用到。
  3. 用戶端認證 → 您必須為應用程式設定用戶端認證，之後應用程式才能向 Azure 驗證並使用 Azure 服務。 請選取 [新增憑證或祕密]，將憑證新增至您的應用程式。
 A screenshot of the App registration after completion. This screenshot shows the application and tenant IDs, which will be needed in a future step.
在 [憑證及祕密] 頁面中，選取 [+ 新增用戶端密碼]。 A screenshot showing the location of the link to use to create a new client secret on the certificates and secrets page.
[新增用戶端密碼] 對話方塊會在頁面右側彈出。 此對話方塊會顯示：
  1. 說明 → 輸入 Current 的值。
  2. 到期 → 選取 24 個月 的值。
選取 [新增] 新增祕密。

重要: 在祕密到期日之前，在您的行事曆中設定提醒。這樣您就可以在此祕密到期前新增新的祕密，並在此祕密到期前更新您的應用程式，以避免應用程式中的服務中斷。		 A screenshot showing the page where a new client secret is added for the application service principal created by the app registration process.
[ 憑證與秘密] 頁面會顯示客戶端密碼的值。

將此值複製到文本編輯器中的暫存位置，因為您在未來的步驟中需要此值。

重要：這是您唯一會看到此值的時間。 離開或重新整理此頁面之後，您將無法再次看到此值。 您可以新增另一個客戶端密碼，而不會使此客戶端密碼失效，但您不會再次看到此值。		 A screenshot showing the page with the generated client secret.

2：將角色指派給應用程式服務主體

接著，您必須決定應用程式針對哪些資源需要哪些角色 (權限)，並將這些角色指派給應用程式。 角色可在資源、資源群組或訂閱範圍內獲派其他角色。 此範例會顯示如何在資源群組範圍內為服務主體指派角色，因為多數應用程式都會將所有 Azure 資源劃分在單一資源群組中。

指示 Screenshot
用 Azure 入口網站頂端的搜尋方塊，搜尋資源群組的名稱，藉此找出應用程式的資源群組。

選取對話方塊中 資源群組 標題下方的資源群組名稱，瀏覽至您的資源群組。		 A screenshot showing the top search box in the Azure portal to locate and navigate to the resource group you want to assign roles (permissions) to.
在資源群組分頁中，從左側功能表選取 存取控制 (IAM)。 A screenshot of the resource group page showing the location of the Access control (IAM) menu item.
在 存取控制 (IAM) 分頁上：
  1. 選取 [角色指派] 索引標籤。
  2. 從頂端功能表選取 [+ 新增]，然後從產生的下拉功能表中選取 [新增角色指派]。
 A screenshot showing how to navigate to the role assignments tab and the location of the button used to add role assignments to a resource group.
新增角色指派 分頁列出所有可指派至資源群組之角色的清單。
  1. 請善用搜尋方塊，將清單篩選為更易於管理的大小。 此範例顯示如何針對儲存體 Blob 角色進行篩選。
  2. 選取您要指派的角色。
    選取 [下一步] 前往下一個畫面。
 A screenshot showing how to filter and select role assignments to be added to the resource group.
下一個 新增角色指派 分頁能讓您指定要指派角色的使用者。
  1. 選取 [存取權指派對象為] 下的 [使用者、群組或服務主體]。
  2. 選取 [成員] 下的 [+ 選取成員]
對話框會在 Azure 入口網站 右側開啟。		 A screenshot showing the radio button to select to assign a role to a Microsoft Entra group and the link used to select the group to assign the role to.
在 [選取成員] 對話方塊進行下列設定：
  1. [選取] 文字輸入框可用來篩選訂閱中的使用者及群組清單。 如有需要，請輸入您為應用程式建立的服務主體前幾個字元來篩選清單。
  2. 選取與應用程式相關聯的服務主體。
選取對話方塊底部的 [選取] 來繼續。		 A screenshot showing how to filter for and select the Microsoft Entra group for the application in the Select members dialog box.
服務主體會在 [ 新增角色指派 ] 畫面上顯示為已選取。

選取 [檢閱 + 指派] 移至最終分頁，然後再次選取 [檢閱 + 指派] 完成此流程。		 A screenshot showing the completed Add role assignment page and the location of the Review + assign button used to complete the process.

3：設定應用程式的環境變數

您必須為執行 JavaScript 應用程式的進程設定 AZURE_CLIENT_ID、 AZURE_TENANT_ID和 AZURE_CLIENT_SECRET 環境變數，讓應用程式服務主體認證可在運行時間使用。 對象 DefaultAzureCredential 會尋找這些環境變數中的服務主體資訊。

AZURE_CLIENT_ID=<value>
AZURE_TENANT_ID=<value>
AZURE_CLIENT_SECRET=<value>

4：在應用程式中實作 DefaultAzureCredential

若要向 Azure 驗證 Azure SDK 用戶端物件，您的應用程式應該使用DefaultAzureCredential來自@azure/身分識別套件的 類別。

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

npm install @azure/identity

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

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

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

// connect-with-default-azure-credential.js
import { BlobServiceClient } from '@azure/storage-blob';
import { DefaultAzureCredential } from '@azure/identity';
import 'dotenv/config'

const accountName = process.env.AZURE_STORAGE_ACCOUNT_NAME;
if (!accountName) throw Error('Azure Storage accountName not found');

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

當上述程式代碼具現化 DefaultAzureCredential 物件時， DefaultAzureCredential 讀取環境變數 AZURE_SUBSCRIPTION_ID、 AZURE_TENANT_ID、 AZURE_CLIENT_ID和 AZURE_CLIENT_SECRET ，讓應用程式服務主體資訊連線到 Azure。