Partager via


Créer une application web utilisant le service SignalR et l’authentification GitHub

Cet exemple de script crée une nouvelle ressource de service Azure SignalR, utilisée pour transmettre les mises à jour en temps réel de contenus aux clients. Ce script ajoute également une application web et un plan App Service pour héberger une application web ASP.NET Core qui utilise le service SignalR. L’application web est configurée avec les paramètres d’application établissant la connexion avec la nouvelle ressource de service SignalR, et l’authentification avec GitHub. L’application web est également configurée pour utiliser une source de déploiement du référentiel git local.

Important

Des chaînes de connexion brutes sont utilisées dans cet article uniquement à des fins de démonstration.

Une chaîne de connexion contient les informations d’autorisation requises pour que votre application puisse accéder à Azure SignalR Service. La clé d’accès dans la chaîne de connexion est comme un mot de passe principal pour votre service. Dans les environnements de production, protégez toujours vos clés d’accès. Utilisez Azure Key Vault pour gérer et permuter vos clés de façon sécurisée, sécuriser votre chaîne de connexion en utilisant Microsoft Entra ID et autoriser l’accès avec Microsoft Entra ID.

Évitez de distribuer des clés d’accès à d’autres utilisateurs, de les coder en dur ou de les enregistrer en texte brut dans un emplacement accessible à d’autres personnes. Effectuez une rotation de vos clés si vous pensez qu’elles ont pu être compromises.

Si vous ne disposez pas d’un compte Azure, créez-en un gratuitement avant de commencer.

Azure Cloud Shell

Azure héberge Azure Cloud Shell, un environnement d’interpréteur de commandes interactif que vous pouvez utiliser dans votre navigateur. Vous pouvez utiliser Bash ou PowerShell avec Cloud Shell pour utiliser les services Azure. Vous pouvez utiliser les commandes préinstallées Cloud Shell pour exécuter le code de cet article sans avoir à installer quoi que ce soit dans votre environnement local.

Pour démarrer Azure Cloud Shell :

Choix Exemple/Lien
Sélectionnez Essayer en haut à droite d’un bloc de code ou de commande. Cette action n’a pas pour effet de copier automatiquement le code ni la commande dans Cloud Shell. Capture d’écran montrant un exemple d’essai pour Azure Cloud Shell.
Accédez à https://shell.azure.com ou sélectionnez le bouton Lancer Cloud Shell pour ouvrir Cloud Shell dans votre navigateur. Bouton permettant de lancer Azure Cloud Shell.
Sélectionnez le bouton Cloud Shell dans la barre de menus en haut à droite du portail Azure. Capture d’écran montrant le bouton Cloud Shell dans le portail Azure

Pour utiliser Azure Cloud Shell, procédez comme suit :

  1. Démarrez Cloud Shell.

  2. Sélectionnez le bouton Copier sur un bloc de code (ou un bloc de commande) pour copier le code ou la commande.

  3. Collez le code ou la commande dans la session Cloud Shell en sélectionnant Ctrl+Maj+V (sur Windows et Linux) ou Cmd+Maj+V (sur macOS).

  4. Sélectionnez Entrée pour exécuter le code ou la commande.

Exemples de scripts

Des chaînes de connexion brutes sont utilisées dans cet article uniquement à des fins de démonstration. Dans les environnements de production, protégez toujours vos clés d’accès. Utilisez Azure Key Vault pour gérer et permuter vos clés de façon sécurisée, sécuriser votre chaîne de connexion en utilisant Microsoft Entra ID et autoriser l’accès avec Microsoft Entra ID.

Lancement d’Azure Cloud Shell

Azure Cloud Shell est un interpréteur de commandes interactif et gratuit que vous pouvez utiliser pour exécuter les étapes de cet article. Il contient des outils Azure courants préinstallés et configurés pour être utilisés avec votre compte.

Pour ouvrir Cloud Shell, sélectionnez simplement Essayer en haut à droite d’un bloc de code. Vous pouvez aussi lancer Cloud Shell dans un onglet distinct du navigateur en accédant à https://shell.azure.com.

Quand Cloud Shell s’ouvre, vérifiez que Bash est sélectionné pour votre environnement. Les sessions ultérieures utiliseront Azure CLI dans un environnement Bash. Sélectionnez Copier pour copier les blocs de code, collez-les dans Cloud Shell, puis appuyez sur Entrée pour les exécuter.

Connexion à Azure

Cloud Shell est automatiquement authentifié sous le compte initial utilisé pour la connexion. Utilisez le script suivant pour vous connecter avec un autre abonnement, en remplaçant subscriptionId par votre ID d’abonnement Azure.

Si vous ne disposez pas d’un compte Azure, créez-en un gratuitement avant de commencer.

subscription="subscriptionId" # Set Azure subscription ID here

az account set -s $subscription # ...or use 'az login'

Pour en savoir plus, consultez définir l’abonnement actif ou se connecter de manière interactive.

Créer le service SignalR avec App Service

# Create a SignalR Service with an App Service

# Variable block
let "randomIdentifier=$RANDOM*$RANDOM"
location="East US"
resourceGroup="msdocs-azure-signalr-rg-$randomIdentifier"
tag="create-signal-service-with-app-service"
signalRSvc="msdocs-signalr-svc-$randomIdentifier"
webApp="msdocs-web-app-signalr-$randomIdentifier"
appSvcPlan="msdocs-app-svc-plan-$randomIdentifier"
signalRSku="Standard_S1"
unitCount="1"
serviceMode="Default"
planSku="Free"

# Create a resource group
echo "Creating $resourceGroup in "$location"..."
az group create --name $resourceGroup --location "$location" --tag $tag

# Create the Azure SignalR Service resource
echo "Creating $signalRSvc"
az signalr create \
  --name $signalRSvc \
  --resource-group $resourceGroup \
  --sku $signalRSku \
  --unit-count $unitCount \
  --service-mode $serviceMode

# Create an App Service plan.
echo "Creating $appSvcPlan"
az appservice plan create --name $appSvcPlan --resource-group $resourceGroup --sku $planSku

# Create the Web App
echo "Creating $webApp"
az webapp create --name $webApp --resource-group $resourceGroup --plan $appSvcPlan

# Get the SignalR primary connection string
primaryConnectionString=$(az signalr key list --name $signalRSvc \
  --resource-group $resourceGroup --query primaryConnectionString -o tsv)
echo $primaryConnectionString

# Add an app setting to the web app for the SignalR connection
az webapp config appsettings set --name $webApp --resource-group $resourceGroup \
  --settings "AzureSignalRConnectionString=$primaryConnectionString"

Activer l’authentification GitHub et le déploiement Git pour l’application web

  1. Mettez à jour les valeurs du script suivant en fonction de votre inscription d’application OAuth GitHub.

    GitHubClientId=<Replace with your GitHub OAuth app Client ID>
    GitHubClientSecret=<Replace with your GitHub OAuth app Client Secret>
    
  2. Ajouter des paramètres d’application à utiliser avec l’authentification GitHub

    az webapp config appsettings set --name $webApp --resource-group $resourceGroup --settings "GitHubClientSecret=$GitHubClientSecret" 
    
  3. Configurez le déploiement Git et retournez l’URL de déploiement.

    az webapp deployment source config-local-git --name $webAppName --resource-group $resourceGroupName --query [url] -o tsv
    

Nettoyer les ressources

Utilisez la commande suivante pour supprimer le groupe de ressources et toutes les ressources associées à celui-ci à l’aide de la commande az group delete, sauf si vous avez toujours besoin de ces ressources. La création, ainsi que la suppression, de certaines de ces ressources peut prendre du temps.

az group delete --name $resourceGroup

Informations de référence sur l’exemple

Chaque commande du tableau renvoie à une documentation spécifique. Ce script utilise les commandes suivantes :

Commande Remarques
Créer un groupe avec la commande az group create. Crée un groupe de ressources dans lequel toutes les ressources sont stockées.
az signalr create Crée une ressource Azure SignalR Service.
az signalr key list Répertorie les clés qui seront utilisées par votre application lors de la transmission des mises à jour en temps réel de contenus avec SignalR.
az appservice plan create (Crée un plan de service d'application Azure) Crée un plan Azure App Service pour l’hébergement des applications web.
az webapp create Crée une application web Azure utilisant le plan d’hébergement App Service.
az webapp config appsettings set Ajoute de nouveaux paramètres pour l’application web. Ces paramètres d’application sont utilisés pour stocker la chaîne de connexion SignalR et les secrets d’application GitHub OAuth.
az webapp deployment user set Met à jour les informations d’identification du déploiement.
az webapp deployment source config-local-git Récupère une URL pour un point de terminaison de référentiel Git à cloner et à établir comme instance de réception pour le déploiement d’application web.

Étapes suivantes

Pour plus d’informations sur l’interface Azure CLI, consultez la documentation relative à l’interface Azure CLI.

Des exemples supplémentaires de script de l’interface CLI du service Azure SignalR sont disponibles dans la documentation sur le service Azure SignalR.