教學課程：使用 Key Vault 從 JavaScript App Service 保護認知服務連線

發行項
08/02/2024

Azure App Service 可以不需要使用連接字串，即可使用受控身分識別連線後端服務，其能夠消除連線祕密，以管理並保持您在實際執行環境中的後端連線能力安全。針對不支援受控識別且仍然需要連線祕密的後端服務，您可以使用 Key Vault 來管理連線祕密。本教學課程使用 Azure AI 服務作為範例，為您示範其實際執行方式。當您完成時，您會擁有能對 Azure AI 服務進行程式設計呼叫的應用程式，而不需將任何連線密碼儲存在 App Service 內。

範例應用程式

提示

Azure AI 服務確實能透過受控識別支援驗證，但本教學課程會使用訂用帳戶金鑰驗證來示範您可以如何連線至來自 App Services 不支援受控識別的 Azure 服務。

教學課程案例的架構圖。

透過此結構：

與 Key Vault 的連線能力受到受控識別保護
App Service 使用 Key Vault 參考作為應用程式設定來存取祕密。
對金鑰保存庫的存取僅限於應用程式。應用程式參與者，例如系統管理員，可能能夠完全控制 App Service 資源，但是同時無法存取 Key Vault 祕密。
如果您的應用程式程式碼已透過應用程式設定存取連線祕密，則不需要變更。

您將了解：

啟用受控識別
使用受控識別連線至 Key Vault
使用 Key Vault 參考
存取 Azure AI 服務

必要條件

備妥環境以使用 Azure CLI。

在 Azure Cloud Shell 中使用 Bash 環境。如需詳細資訊，請參閱 Azure Cloud Shell 中的 Bash 快速入門。
若要在本地執行 CLI 參考命令，請安裝 Azure CLI。若您在 Windows 或 macOS 上執行，請考慮在 Docker 容器中執行 Azure CLI。如需詳細資訊，請參閱〈如何在 Docker 容器中執行 Azure CLI〉。
- 如果您使用的是本機安裝，請使用 az login 命令，透過 Azure CLI 來登入。請遵循您終端機上顯示的步驟，完成驗證程序。如需其他登入選項，請參閱使用 Azure CLI 登入。
- 出現提示時，請在第一次使用時安裝 Azure CLI 延伸模組。如需擴充功能詳細資訊，請參閱使用 Azure CLI 擴充功能。
- 執行 az version 以尋找已安裝的版本和相依程式庫。若要升級至最新版本，請執行 az upgrade。

建立可連線至 Azure AI 服務的應用程式

建立資源群組以包含您所有的資源：

# Save resource group name as variable for convenience
groupName=myKVResourceGroup
region=westeurope

az group create --name $groupName --location $region

建立 Azure AI 服務資源。以您選擇的唯一名稱取代 <cs-resource-name>。
```
# Save resource name as variable for convenience. 
csResourceName=<cs-resource-name>

az cognitiveservices account create --resource-group $groupName --name $csResourceName --location $region --kind TextAnalytics --sku F0 --custom-domain $csResourceName
```
注意

--sku F0 會建立免費層 Azure AI 服務資源。每個訂用帳戶僅限一個免費層 TextAnalytics 資源的配額。如果您已經超過配額，請改用 --sku S。

設定 JavaScript 應用程式

在本機複製範例存放庫，並將範例應用程式部署至 App Service。以唯一名稱取代 <app-name>。

# Clone and prepare sample application
git clone https://github.com/Azure-Samples/app-service-language-detector.git
cd app-service-language-detector/javascript
zip -r default.zip .

# Save app name as variable for convenience
appName=<app-name>

az appservice plan create --resource-group $groupName --name $appName --sku FREE --location $region --is-linux
az webapp create --resource-group $groupName --plan $appName --name $appName --runtime "node:18-lts"
az webapp config appsettings set --resource-group $groupName --name $appName --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true
az webapp deploy --resource-group $groupName --name $appName --src-path ./default.zip

上述命令會：

建立 Linux App Service 方案
建立適用於 Node.js 18 LTS 的 Web 應用程式
設定 Web 應用程式以在部署時安裝 npm 套件
上傳 zip 檔案，並安裝 npm 套件

將祕密設定為應用程式設定

將 Azure AI 服務祕密設為應用程式設定 CS_ACCOUNT_NAME 和 CS_ACCOUNT_KEY。

# Get subscription key for Cognitive Services resource
csKey1=$(az cognitiveservices account keys list --resource-group $groupName --name $csResourceName --query key1 --output tsv)

az webapp config appsettings set --resource-group $groupName --name $appName --settings CS_ACCOUNT_NAME="$csResourceName" CS_ACCOUNT_KEY="$csKey1"

在瀏覽器中，瀏覽至您在 <app-name>.azurewebsites.net 的部署應用程式，並試用各種語言字串的語言偵測器。

如果您查看應用程式程式碼，您可能會注意到偵測結果的偵錯輸出字型色彩與背景相同。您可以透過嘗試反白在結果正下方的空白字元查看。

保護後端連線能力

目前，連線祕密會儲存為您 App Service 應用程式中的應用程式設定。此方法已經保護來自您應用程式程式碼基底的連線祕密。然而，任何可以管理您應用程式的參與者也可以查看應用程式設定。在此步驟中，您會將連線祕密移動至金鑰保存庫，並鎖定存取，所以只有您可以進行管理，而且只有 App Service 應用程式可以使用其受控識別進行讀取。

建立金鑰保存庫。以唯一名稱取代 <vault-name>。
```
# Save app name as variable for convenience
vaultName=<vault-name>

az keyvault create --resource-group $groupName --name $vaultName --location $region --sku standard --enable-rbac-authorization
```
--enable-rbac-authorization 參數將 Azure 角色型存取控制 (RBAC) 設定為權限模型。此預設設定會使所有存取原則權限失效。

為您自己提供保存庫的 Key Vault 祕密長 RBAC 角色。

vaultResourceId=$(az keyvault show --name $vaultName --query id --output tsv)
myId=$(az ad signed-in-user show --query id --output tsv)
az role assignment create --role "Key Vault Secrets Officer" --assignee-object-id $myId --assignee-principal-type User --scope $vaultResourceId

為您的應用程式啟用系統指派的受控識別，並為其提供 Key Vault 祕密使用者 RBAC 角色。

az webapp identity assign --resource-group $groupName --name $appName --scope $vaultResourceId --role  "Key Vault Secrets User"

將 Azure AI 服務資源名稱和訂用帳戶金鑰新增為保存庫的祕密，並將其識別碼儲存為下一個步驟的環境變數。

csResourceKVUri=$(az keyvault secret set --vault-name $vaultName --name csresource --value $csResourceName --query id --output tsv)
csKeyKVUri=$(az keyvault secret set --vault-name $vaultName --name cskey --value $csKey1 --query id --output tsv)

之前，您會在應用程式中將祕密設定為應用程式設定 CS_ACCOUNT_NAME 和 CS_ACCOUNT_KEY。現在，請將其改成設定為金鑰保存庫參考。

az webapp config appsettings set --resource-group $groupName --name $appName --settings CS_ACCOUNT_NAME="@Microsoft.KeyVault(SecretUri=$csResourceKVUri)" CS_ACCOUNT_KEY="@Microsoft.KeyVault(SecretUri=$csKeyKVUri)"

在瀏覽器中，再次瀏覽至 <app-name>.azurewebsites.net。如果您取回偵測結果，您則正在使用金鑰保存庫參考連線至 Azure AI 服務端點。

恭喜，您的應用程式現在使用金鑰保存庫中保留的祕密連線至 Azure AI 服務，不需要對應用程式程式碼進行任何變更。

清除資源

在上述步驟中，您已建立資源群組中的 Azure 資源。如果您在未來不需要這些資源，請在 Cloud Shell 中執行下列命令，刪除資源群組：

az group delete --name $groupName

此命令可能會花一分鐘執行。

共用方式為