Tutoriel : Authentification d'Azure SignalR Service auprès d'Azure Functions

Dans ce tutoriel étape par étape, vous créez un salon de conversation instantanée avec authentification et messagerie privée en utilisant ces technologies :

• Azure Functions : API principale pour l’authentification des utilisateurs et l’envoi de messages de conversation.
• Service Azure SignalR : service permettant de diffuser de nouveaux messages auprès des clients connectés à la conversation.
• Stockage Azure : service de stockage requis par Azure Functions.
• Azure App Service : service qui fournit l’authentification utilisateur.

Modèle v4

Remarque

Vous pouvez obtenir le code de cet article sur GitHub.

Modèle v3

Notes

Vous pouvez obtenir le code de cet article sur GitHub.

Prérequis

• Compte Azure avec un abonnement actif. Si vous n’en avez pas, vous pouvez en créer un gratuitement.
• Node.js (version 20.x).
• Azure Functions Core Tools (version 4).

Vous rencontrez des problèmes ? Dites-le nous.

Créer des ressources essentielles sur Azure

Créer une ressource Azure SignalR Service

Votre application accède à une instance Azure SignalR Service. Utilisez les étapes suivantes pour créer une instance Azure SignalR Service à l’aide du Portail Microsoft Azure :

1. Dans le Portail Microsoft Azure, sélectionnez le bouton Créer une ressource (+).

2. Recherchez Service SignalR et sélectionnez-le.

3. Sélectionnez Create (Créer).

4. Entrez les informations ci-après.

   Nom	Valeur
   Groupe de ressources	Créer un groupe de ressources avec un nom unique.
   Nom de la ressource	Entrez un nom unique pour l’instance de service Azure SignalR.
   Région	Sélectionnez une région proche de chez vous.
   Niveau tarifaire	Sélectionnez Gratuit.
   Mode de service	Sélectionnez serverless.

5. Sélectionnez Vérifier + créer.

6. Sélectionnez Create (Créer).

Vous rencontrez des problèmes ? Dites-le nous.

Créer une application de fonction Azure et un compte de stockage Azure

1. Depuis l’écran d’accueil dans le Portail Microsoft Azure, sélectionnez Créer une ressource (+).

2. Recherchez Application de fonction, puis sélectionnez-la.

3. Sélectionnez Create (Créer).

4. Entrez les informations ci-après.

   Nom	Valeur
   Groupe de ressources	Utiliser le même groupe de ressources qu’avec votre instance Azure SignalR Service.
   Nom de l’application de fonction	Entrez un nom unique pour l’application de fonction.
   Pile d’exécution	Sélectionnez Node.js.
   Région	Sélectionnez une région proche de chez vous.

5. Par défaut, un nouveau compte de stockage Azure est créé dans le même groupe de ressources avec votre application de fonction. Si vous souhaitez utiliser un autre compte de stockage dans l’application de fonction, basculez vers l’onglet Hébergement pour choisir un compte.

6. Sélectionnez Vérifier + créer, puis Créer.

Créer un projet Azure Functions localement

Initialiser une application de fonction

1. À partir d’une ligne de commande, créez un dossier racine pour votre projet et accédez au dossier.

2. Exécutez la commande suivante dans votre terminal pour créer un projet Functions JavaScript :

Modèle v4

func init --worker-runtime node --language javascript --name my-app --model V4

Modèle v3

func init --worker-runtime node --language javascript --name my-app --model V3

Par défaut, le projet généré inclut un fichier host.json qui contient les bundles d’extensions qui incluent l’extension SignalR. Pour plus d’informations sur les bundles d’extensions, consultez Inscrire des extensions de liaison Azure Functions.

Configurer les paramètres de l’application

Lorsque vous exécutez et déboguez le runtime Azure Functions en local, l’application de la fonction lit les paramètres de l’application à partir de local.settings.json. Mettez à jour ce fichier avec la chaîne de connexion de l’instance Azure SignalR Service et du compte de stockage que vous avez créés précédemment.

Remplacez le contenu du fichier local.settings.json par le code suivant :

{
  "IsEncrypted": false,
  "Values": {
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsStorage": "<your-storage-account-connection-string>",
    "AzureSignalRConnectionString": "<your-Azure-SignalR-connection-string>"
  }
}

Dans le code précédent :

• Entrez la chaîne de connexion SignalR Service Azure dans un paramètre AzureSignalRConnectionString.

  Pour obtenir la chaîne, accédez à votre instance du service Azure SignalR dans le Portail Microsoft Azure. Dans la section Paramètres, recherchez le paramètre Clés. Sélectionnez le bouton Copier à droite de la chaîne de connexion pour le copier dans le Presse-papiers. Vous pouvez utiliser la chaîne de connexion primaire ou secondaire.

• Entrez la chaîne de connexion du compte de stockage dans le paramètre AzureWebJobsStorage.

  Pour obtenir la chaîne, accédez à votre compte de stockage dans le Portail Microsoft Azure. Dans la section Sécurité + mise en réseau, recherchez le paramètre Clés d’accès. Sélectionnez le bouton Copier à droite de la chaîne de connexion pour le copier dans le Presse-papiers. Vous pouvez utiliser la chaîne de connexion primaire ou secondaire.

Vous rencontrez des problèmes ? Faites-le nous savoir.

Créer une fonction pour authentifier les utilisateurs du service Azure SignalR

Lorsque l’application de conversation s’ouvre pour la première fois dans le navigateur, elle demande des informations d’identification valides pour se connecter au service SignalR Azure. Créez une fonction de déclenchement HTTP et nommée negotiate dans votre application de fonction pour retourner ces informations de connexion.

Remarque

Cette fonction doit être nommée negotiate car le client SignalR nécessite un point de terminaison qui se termine par /negotiate.

Modèle v4

1. À partir du dossier racine du projet, créez la fonction negotiate à partir d’un modèle intégré à l’aide de la commande suivante :

   func new --template "HTTP trigger" --name negotiate
   

2. Ouvrez src/functions/negotiate.js, mettez à jour le contenu de la façon suivante :

   const { app, input } = require('@azure/functions');
   
   const inputSignalR = input.generic({
       type: 'signalRConnectionInfo',
       name: 'connectionInfo',
       hubName: 'default',
       connectionStringSetting: 'AzureSignalRConnectionString',
   });
   
   app.post('negotiate', {
       authLevel: 'anonymous',
       handler: (request, context) => {
           return { body: JSON.stringify(context.extraInputs.get(inputSignalR)) }
       },
       route: 'negotiate',
       extraInputs: [inputSignalR],
   });
   

   La fonction contient une liaison de déclencheur HTTP pour recevoir des requêtes des clients SignalR. La fonction contient également une liaison d’entrée SignalR pour générer des informations d’identification valides pour qu’un client se connecte à un hub de service SignalR Azure nommé default.

   Cette fonction prend les informations de connexion SignalR de la liaison d’entrée et les renvoie au client dans le corps de la réponse HTTP.

   Il n’existe aucune propriété userId dans la liaison signalRConnectionInfo pour le développement local. Vous l'ajouterez plus tard pour définir le nom d'utilisateur d'une connexion SignalR lorsque vous déployez l'application de fonction sur Azure.

Modèle v3

1. À partir du dossier racine du projet, créez la fonction negotiate à partir d’un modèle intégré à l’aide de la commande suivante :

   func new --template "SignalR negotiate HTTP trigger" --name negotiate
   

2. Ouvrez negotiate/function.json pour afficher la configuration de la liaison de fonction.

   La fonction contient une liaison de déclencheur HTTP pour recevoir des requêtes des clients SignalR. La fonction contient également une liaison d’entrée SignalR pour générer des informations d’identification valides pour qu’un client se connecte à un hub de service SignalR Azure nommé default.

   {
     "disabled": false,
     "bindings": [
       {
         "authLevel": "anonymous",
         "type": "httpTrigger",
         "direction": "in",
         "methods": ["post"],
         "name": "req",
         "route": "negotiate"
       },
       {
         "type": "http",
         "direction": "out",
         "name": "res"
       },
       {
         "type": "signalRConnectionInfo",
         "name": "connectionInfo",
         "hubName": "default",
         "connectionStringSetting": "AzureSignalRConnectionString",
         "direction": "in"
       }
     ]
   }
   

   Il n’existe aucune propriété userId dans la liaison signalRConnectionInfo pour le développement local. Vous l'ajouterez plus tard pour définir le nom d'utilisateur d'une connexion SignalR lorsque vous déployez l'application de fonction sur Azure.

3. Fermez le fichier negotiate/function.json.

4. Ouvrez negotiate/index.js pour afficher le corps de la fonction :

   module.exports = async function (context, req, connectionInfo) {
     context.res.body = connectionInfo;
   };
   

   Cette fonction tire les informations de connexion SignalR de la liaison d’entrée et les retourne au client dans le corps de réponse HTTP. Le client SignalR utilise ces informations pour se connecter à l’instance Azure SignalR Service.

Vous rencontrez des problèmes ? Dites-le nous.

Créer une fonction pour envoyer des messages de conversation

L’application web nécessite également une API HTTP pour envoyer des messages de conversation. Créez une fonction de déclenchement HTTP qui envoie des messages à tous les clients connectés qui utilisent Azure SignalR Service :

Modèle v4

1. Dans le dossier racine du projet, créez une fonction de déclencheur HTTP nommée sendMessage à partir du modèle à l’aide de la commande suivante :

   func new --name sendMessage --template "Http trigger"
   

2. Ouvrez le fichier src/functions/sendMessage.js, mettez à jour le contenu de la façon suivante :

   const { app, output } = require('@azure/functions');
   
   const signalR = output.generic({
       type: 'signalR',
       name: 'signalR',
       hubName: 'default',
       connectionStringSetting: 'AzureSignalRConnectionString',
   });
   
   app.http('messages', {
       methods: ['POST'],
       authLevel: 'anonymous',
       extraOutputs: [signalR],
       handler: async (request, context) => {
           const message = await request.json();
           message.sender = request.headers && request.headers.get('x-ms-client-principal-name') || '';
   
           let recipientUserId = '';
           if (message.recipient) {
               recipientUserId = message.recipient;
               message.isPrivate = true;
           }
           context.extraOutputs.set(signalR,
               {
                   'userId': recipientUserId,
                   'target': 'newMessage',
                   'arguments': [message]
               });
       }
   });
   

   La fonction contient un déclencheur HTTP et une liaison de sortie SignalR. Elle prend le corps de la requête HTTP et l’envoie aux clients connectés à Azure SignalR Service. Il appelle une fonction nommée newMessage sur chaque client.

   La fonction peut lire l’identité de l’expéditeur et accepter une valeur recipient dans le corps du message pour vous permettre d’envoyer en privé un message à un seul utilisateur. Vous utiliserez ces fonctionnalités plus tard dans ce tutoriel.

3. Enregistrez le fichier.

Modèle v3

1. Dans le dossier racine du projet, créez une fonction de déclencheur HTTP nommée sendMessage à partir du modèle à l’aide de la commande suivante :

   func new --name sendMessage --template "Http trigger"
   

2. Pour configurer des liaisons pour la fonction, remplacez le contenu de sendMessage/function.json par le code suivant :

   {
     "disabled": false,
     "bindings": [
       {
         "authLevel": "anonymous",
         "type": "httpTrigger",
         "direction": "in",
         "name": "req",
         "route": "messages",
         "methods": ["post"]
       },
       {
         "type": "http",
         "direction": "out",
         "name": "res"
       },
       {
         "type": "signalR",
         "name": "$return",
         "hubName": "default",
         "direction": "out"
       }
     ]
   }
   

   Le code précédent apporte deux modifications au fichier d’origine :

   • Il modifie l’itinéraire vers messages et restriction du déclencheur HTTP à la méthode HTTP POST.
   • Il ajoute une liaison de sortie de Azure SignalR Service qui envoie un message retourné par la fonction à tous les clients connectés à un hub Azure SignalR Service nommé default.

3. Remplacez le contenu de sendMessage/index.js par le code suivant :

   module.exports = async function (context, req) {
     const message = req.body;
     message.sender =
       (req.headers && req.headers["x-ms-client-principal-name"]) || "";
   
     let recipientUserId = "";
     if (message.recipient) {
       recipientUserId = message.recipient;
       message.isPrivate = true;
     }
   
     return {
       userId: recipientUserId,
       target: "newMessage",
       arguments: [message],
     };
   };
   

   Cette fonction prend le corps de la requête HTTP et l’envoie aux clients connectés au service Azure SignalR. Il appelle une fonction nommée newMessage sur chaque client.

   La fonction peut lire l’identité de l’expéditeur et accepter une valeur recipient dans le corps du message pour vous permettre d’envoyer en privé un message à un seul utilisateur. Vous utiliserez ces fonctionnalités plus tard dans ce tutoriel.

4. Enregistrez le fichier .

Vous rencontrez des problèmes ? Faites-le nous savoir.

Héberger l’interface utilisateur web du client chat

L’interface utilisateur de l’application de chat est une simple application mono-page (SPA) créée avec l’infrastructure Vue JavaScript à l’aide du client JavaScript SignalR ASP.NET Core. Par souci de simplicité, l’application de fonction héberge la page web. Dans un environnement de production, vous pouvez utiliser Static Web Apps pour héberger la page web.

Modèle v4

1. Créez un fichier nommé index.html dans le répertoire racine de votre projet de fonction.

2. Copiez et collez le contenu d’index.html dans votre fichier. Enregistrez le fichier .

3. Dans le dossier racine du projet, créez une fonction de déclencheur HTTP nommée index à partir du modèle avec cette commande :

   func new --name index --template "Http trigger"
   

4. Modifiez le contenu de src/functions/index.js avec le code suivant :

   const { app } = require('@azure/functions');
   const { readFile } = require('fs/promises');
   
   app.http('index', {
       methods: ['GET'],
       authLevel: 'anonymous',
       handler: async (context) => {
           const content = await readFile('index.html', 'utf8', (err, data) => {
               if (err) {
                   context.err(err)
                   return
               }
           });
   
           return {
               status: 200,
               headers: {
                   'Content-Type': 'text/html'
               },
               body: content,
           };
       }
   });
   

   La fonction lit la page web statique et la retourne à l’utilisateur.

5. Testez votre application localement. Démarrez l’application de fonction à l’aide de cette commande :

   func start
   

6. Ouvrez http://localhost:7071/api/index dans votre navigateur web. Une page web de conversation doit apparaître.

   

7. Entrez un message dans la zone de conversation.

   Après avoir sélectionné la touche Entrée, le message s’affiche sur la page web. Étant donné que le nom d’utilisateur du client SignalR n’est pas défini, vous envoyez tous les messages de manière anonyme.

Modèle v3

1. Créez un dossier nommé content dans le répertoire racine de votre projet de fonction.

2. Dans le dossier content, créez un fichier nommé index.html.

3. Copiez et collez le contenu d’index.html dans votre fichier. Enregistrez le fichier .

4. Dans le dossier racine du projet, créez une fonction de déclencheur HTTP nommée index à partir du modèle avec cette commande :

   func new --name index --template "Http trigger"
   

5. Remplacez le contenu de index/index.js par le code suivant :

   const fs = require("fs");
   
   module.exports = async function (context, req) {
     const fileContent = fs.readFileSync("content/index.html", "utf8");
   
     context.res = {
       // status: 200, /* Defaults to 200 */
       body: fileContent,
       headers: {
         "Content-Type": "text/html",
       },
     };
   };
   

   La fonction lit la page web statique et la retourne à l’utilisateur.

6. Ouvrez index/function.json et remplacez la valeur authLevel des liaisons par anonymous. Maintenant, l’ensemble du fichier ressemble à cet exemple :

   {
     "bindings": [
       {
         "authLevel": "anonymous",
         "type": "httpTrigger",
         "direction": "in",
         "name": "req",
         "methods": ["get", "post"]
       },
       {
         "type": "http",
         "direction": "out",
         "name": "res"
       }
     ]
   }
   

7. Testez votre application localement. Démarrez l’application de fonction à l’aide de cette commande :

   func start
   

8. Ouvrez http://localhost:7071/api/index dans votre navigateur web. Une page web de conversation doit apparaître.

   

9. Entrez un message dans la zone de conversation.

   Après avoir sélectionné la touche Entrée, le message s’affiche sur la page web. Étant donné que le nom d’utilisateur du client SignalR n’est pas défini, vous envoyez tous les messages de manière anonyme.

Vous rencontrez des problèmes ? Dites-le nous.

Procéder à un déploiement vers Azure et activer l’authentification

Vous avez exécuté l’application de fonction et l’application de conversation localement. À présent, déployez-les sur Azure et activez l’authentification ainsi que la messagerie privée.

Configurer l’authentification pour l’application de fonction

Jusqu’ici, l’application de conversation fonctionne de façon anonyme. Dans Azure, vous allez utiliser l’authentification App Service pour authentifier l’utilisateur. L’ID utilisateur ou le nom d’utilisateur de l’utilisateur authentifié est passé à la liaison SignalRConnectionInfo pour générer des informations de connexion qui authentifient l’utilisateur.

Modèle v4

1. Ouvrez le fichier src/functions/negotiate.js.

2. Insérez une propriété userId dans la liaison inputSignalR avec la valeur {headers.x-ms-client-principal-name}. Cette valeur est une expression de liaison qui définit le nom de l’utilisateur authentifié comme nom d’utilisateur du client SignalR. La liaison doit maintenant ressembler à cet exemple :

   const inputSignalR = input.generic({
       type: 'signalRConnectionInfo',
       name: 'connectionInfo',
       hubName: 'default',
       connectionStringSetting: 'AzureSignalRConnectionString',
       userId: '{headers.x-ms-client-principal-name}'
   });
   

3. Enregistrez le fichier.

Modèle v3

1. Ouvrez negotiate/function.json.

2. Insérez une propriété userId dans la liaison SignalRConnectionInfo avec la valeur {headers.x-ms-client-principal-name}. Cette valeur est une expression de liaison qui définit le nom de l’utilisateur authentifié comme nom d’utilisateur du client SignalR. La liaison doit maintenant ressembler à cet exemple :

   {
     "type": "signalRConnectionInfo",
     "name": "connectionInfo",
     "userId": "{headers.x-ms-client-principal-name}",
     "hubName": "default",
     "direction": "in"
   }
   

3. Enregistrez le fichier.

Déployer l’application de fonction dans Azure

Déployez l’application de fonction sur Azure à l’aide de la commande suivante :

func azure functionapp publish <your-function-app-name> --publish-local-settings

L’option --publish-local-settings publie vos paramètres locaux à partir du fichier local.settings.json dans Azure. Vous n’avez donc pas besoin de les configurer à nouveau dans Azure.

Activer l’authentification App Service

Azure Functions prend en charge l’authentification avec Microsoft Entra ID, Facebook, Twitter, compte Microsoft et Google. Vous allez utiliser Microsoft comme fournisseur d’identité pour ce tutoriel.

1. Dans le Portail Microsoft Azure, accédez à la page de ressources de votre application de fonction.

2. Sélectionnez Paramètres>Authentification.

3. Sélectionnez Ajouter un fournisseur d’identité.

   

4. Dans la liste Fournisseurs d’identité, sélectionnez Microsoft. Ensuite, cliquez sur Ajouter.

   

Les réglages effectués créent un enregistrement d’application qui associe votre fournisseur d’identité à votre application de fonction.

Pour plus d’informations sur les fournisseurs d’identité pris en charge, consultez les articles suivants :

• Microsoft Entra ID
• Facebook
• Twitter
• Compte Microsoft
• Google

Tester l’application

1. Ouvrir https://<YOUR-FUNCTION-APP-NAME>.azurewebsites.net/api/index.
2. Sélectionnez Connexion pour vous authentifier auprès du fournisseur d’authentification que vous avez choisi.
3. Envoyez des messages publics en les entrant dans la zone principale de conversation.
4. Envoyez des messages privés en sélectionnant un nom d’utilisateur dans l’historique de conversation. Seul le destinataire sélectionné reçoit ces messages.

Félicitations ! Vous avez déployé une application chat en temps réel et serverless.

Vous rencontrez des problèmes ? Dites-le nous.

Nettoyer les ressources

Pour supprimer les ressources que vous avez créées à l’occasion de ce tutoriel, supprimez le groupe de ressources à l’aide du Portail Microsoft Azure.

Attention

La suppression du groupe de ressources supprime toutes les ressources qu’il contient. Si le groupe de ressources contient des ressources qui n’entrent pas dans le cadre de ce tutoriel, elles sont également supprimées.

Vous rencontrez des problèmes ? Faites-le nous savoir.

Étapes suivantes

Dans ce didacticiel, vous avez appris à utiliser Azure Functions avec le service Azure SignalR. En savoir plus sur la création d’applications en temps réel serverless avec des liaisons de service Azure SignalR pour Azure Functions :

Applications en temps réel avec Azure SignalR Service et Azure Functions

Vous rencontrez des problèmes ? Dites-le nous.