Tutoriel : Connexion sécurisée à Cognitive Service à partir de JavaScript App Service à l’aide de Key Vault

Article
08/02/2024

Azure App Service peut utiliser des identités managées pour se connecter à des services back-end sans chaîne de connexion, ce qui permet d’éliminer les secrets de connexion à gérer et de sécuriser la connectivité back-end dans un environnement de production. En ce qui concerne les services back-end qui ne prennent pas en charge les identités managées et ont quand même besoin de secrets de connexion, vous pouvez utiliser Key Vault pour gérer les secrets de connexion. Ce didacticiel utilise les services Azure AI comme exemple pour vous montrer comment procéder en pratique. Lorsque vous avez terminé, vous disposez d'une application qui effectue des appels par programme vers les services Azure AI, sans stocker de secrets de connexion dans App Service.

Exemple d’application

Conseil

Les services Azure AI prennent en charge l'authentification via les identités managées, mais ce didacticiel utilise l'authentification par clé de souscription pour montrer comment vous pouvez vous connecter à un service Azure qui ne prend pas en charge les identités managées à partir d'App Services.

Diagramme architectural du scénario du tutoriel.

Cette architecture présente les caractéristiques suivantes :

La connectivité à Key Vault est sécurisée par des identités managées.
App Service accède aux secrets à l’aide de références du coffre de clés utilisées comme paramètres d’application.
L’accès au coffre de clés est limité à l’application. Les contributeurs de l’application, par exemple les administrateurs, peuvent disposer d’un contrôle total sur les ressources App Service, mais n’ont pas accès aux secrets Key Vault.
Si le code de votre application accède déjà aux secrets de connexion avec les paramètres d’application, aucune modification n’est requise.

Contenu :

Activer les identités managées
Utiliser des identités managées pour se connecter à Key Vault
Utiliser des références Key Vault
Accéder aux services Azure AI

Prérequis

Préparez votre environnement pour l’interface Azure CLI.

Utilisez l’environnement Bash dans Azure Cloud Shell. Pour plus d’informations, consultez Démarrage rapide pour Bash dans Azure Cloud Shell.
Si vous préférez exécuter les commandes de référence de l’interface de ligne de commande localement, installez l’interface Azure CLI. Si vous exécutez sur Windows ou macOS, envisagez d’exécuter Azure CLI dans un conteneur Docker. Pour plus d’informations, consultez Guide pratique pour exécuter Azure CLI dans un conteneur Docker.
- Si vous utilisez une installation locale, connectez-vous à Azure CLI à l’aide de la commande az login. Pour finir le processus d’authentification, suivez les étapes affichées dans votre terminal. Pour connaître les autres options de connexion, consultez Se connecter avec Azure CLI.
- Lorsque vous y êtes invité, installez l’extension Azure CLI lors de la première utilisation. Pour plus d’informations sur les extensions, consultez Utiliser des extensions avec Azure CLI.
- Exécutez az version pour rechercher la version et les bibliothèques dépendantes installées. Pour effectuer une mise à niveau vers la dernière version, exécutez az upgrade.

Créer une application avec une connectivité aux services Azure AI

Créez un groupe de ressources qui contiendra toutes vos ressources :

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

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

Créez une ressource de services Azure AI. Remplacez <cs-resource-name> par le nom unique de votre choix.
```
# 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
```
Remarque

--sku F0 crée une ressource de services Azure AI de niveau gratuit. Chaque abonnement est limité à un quota d’une ressource TextAnalytics de niveau Gratuit. Si vous avez déjà dépassé le quota, utilisez plutôt --sku S.

Configurer une application JavaScript

Clonez l’exemple de référentiel localement et déployez l’exemple d’application sur App Service. Remplacez <app-name> par un nom unique.

# 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

Les commandes précédentes :

Créer un plan App Service Linux
Créer une application web pour Node.js 18 LTS
Configurer l’application web pour installer les packages npm lors du déploiement
Charger le fichier zip et installer les packages npm

Configurer des secrets sous forme de paramètres d’application

Configurez les secrets des services Azure AI en tant que paramètres d'application CS_ACCOUNT_NAME et 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"

Dans le navigateur, accédez à votre application de déploiement à l’adresse <app-name>.azurewebsites.net et essayez le détecteur de langage avec des chaînes exprimées dans différentes langues.

Comme vous pouvez le constater en examinant le code de l’application, la sortie de débogage de la détection se traduit par une police de la couleur de l’arrière-plan. Pour le voir, essayez de mettre en surbrillance l’espace blanc situé juste au-dessous du résultat.

Sécurisation de la connectivité back-end

Pour le moment, les secrets de connexion sont stockés sous forme de paramètres d’application dans l’application App Service. Cette approche sécurise déjà les secrets de connexion du codebase de votre application. Toutefois, un contributeur autorisé à gérer votre application peut également voir les paramètres de l’application. Au cours de cette étape, vous allez déplacer les secrets de connexion dans un coffre de clés et verrouiller l’accès afin d’être la seule personne à pouvoir le gérer. Seule l’application App Service pourra le lire à l’aide de son identité managée.

Création d’un coffre de clés Remplacez <vault-name> par un nom unique.
```
# 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
```
Le paramètre --enable-rbac-authorization--enable-rbac-authorization. Ce paramètre invalide par défaut toutes les autorisations des stratégies d’accès.

Donnez-vous le rôle RBAC Responsable des secrets Key Vault du coffre.

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

Activez l’identité managée affectée par le système de votre application et donnez-lui le rôle RBAC Utilisateur des secrets Key Vault du coffre.
```
az webapp identity assign --resource-group $groupName --name $appName --scope $vaultResourceId --role  "Key Vault Secrets User"
```

Ajoutez le nom de la ressource et la clé d'abonnement des services Azure AI en tant que secrets au coffre, puis enregistrez leurs ID en tant que variables d'environnement pour l'étape suivante.

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)

Précédemment, vous avez défini les secrets sous la forme des paramètres d’application CS_ACCOUNT_NAME et CS_ACCOUNT_KEY dans votre application. À présent, définissez-les comme références du coffre de clés.

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)"

Dans le navigateur, accédez à nouveau à <app-name>.azurewebsites.net. Si vous obtenez des résultats de détection, vous vous connectez au point de terminaison des services Azure AI avec des références de coffre de clés.

Félicitations, votre application se connecte maintenant aux services Azure AI à l'aide de secrets conservés dans votre coffre de clés, sans aucune modification de votre code d'application.

Nettoyer les ressources

Au cours des étapes précédentes, vous avez créé des ressources Azure au sein d’un groupe de ressources. Si vous ne pensez pas avoir besoin de ces ressources à l’avenir, supprimez le groupe de ressources en exécutant la commande suivante dans Cloud Shell :

az group delete --name $groupName

L’exécution de cette commande peut prendre une minute.

Partager via