Tutorial: Azure SignalR Service-Authentifizierung mit Azure Functions

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

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

1. Erstellen Sie mit dem folgenden Befehl im Stammordner des Projekts die Funktion negotiate aus einer integrierten Vorlage:

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

2. Öffnen Sie src/functions/negotiate.js, und aktualisieren Sie den Inhalt wie folgt:

   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],
   });
   

   Die Funktion enthält eine HTTP-Triggerbindung zum Empfangen von Anforderungen von SignalR-Clients. Die Funktion enthält auch eine SignalR-Eingabebindung, um gültige Anmeldeinformationen für einen Client zu generieren, damit eine Verbindung mit einem Azure SignalR Service-Hub namens default hergestellt werden kann.

   Diese Funktion übernimmt die SignalR-Verbindungsinformationen aus der Eingabebindung und gibt sie an den Client im HTTP-Antworttext zurück.

   Es gibt keine userId-Eigenschaft in der signalRConnectionInfo-Bindung für die lokale Entwicklung. Sie fügen sie später hinzu, um den Benutzernamen einer SignalR-Verbindung festzulegen, wenn Sie die Funktions-App in Azure bereitstellen.

1. Erstellen Sie mit dem folgenden Befehl im Stammordner des Projekts die Funktion negotiate aus einer integrierten Vorlage:

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

2. Öffnen Sie die Datei negotiate/function.json, um die Funktionsbindungskonfiguration anzuzeigen.

   Die Funktion enthält eine HTTP-Triggerbindung zum Empfangen von Anforderungen von SignalR-Clients. Die Funktion enthält auch eine SignalR-Eingabebindung, um gültige Anmeldeinformationen für einen Client zu generieren, damit eine Verbindung mit einem Azure SignalR Service-Hub namens default hergestellt werden kann.

   {
     "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"
       }
     ]
   }
   

   Es gibt keine userId-Eigenschaft in der signalRConnectionInfo-Bindung für die lokale Entwicklung. Sie fügen sie später hinzu, um den Benutzernamen einer SignalR-Verbindung festzulegen, wenn Sie die Funktions-App in Azure bereitstellen.

3. Schließen Sie die Datei negotiate/function.json.

4. Öffnen Sie negotiate/index.js, um den Textteil der Funktion anzuzeigen:

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

   Diese Funktion übernimmt die SignalR-Verbindungsinformationen aus der Eingabebindung und gibt sie an den Client im HTTP-Antworttext zurück. Der SignalR-Client verwendet diese Informationen zum Herstellen einer Verbindung mit der Azure SignalR Service-Instanz.

1. Erstellen Sie mit dem folgenden Befehl im Stammordner des Projekts eine HTTP-Triggerfunktion mit dem Namen sendMessage aus der Vorlage:

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

2. Öffnen Sie die Datei src/functions/sendMessage.js, und aktualisieren Sie den Inhalt wie folgt:

   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]
               });
       }
   });
   

   Die Funktion enthält einen HTTP-Trigger und eine SignalR-Ausgabebindung. Sie übernimmt den Textteil aus der HTTP-Anforderung und sendet ihn an Clients, die mit Azure SignalR Service verbunden sind. Dabei wird auf jedem Client eine Funktion namens newMessage aufgerufen.

   Die Funktion kann die Identität des Absenders lesen und den Wert recipient im Nachrichtentext akzeptieren, damit Sie eine Nachricht privat an einen einzelnen Benutzer senden können. Sie verwenden diese Funktionen später im Tutorial.

3. Speichern Sie die Datei .

1. Erstellen Sie mit dem folgenden Befehl im Stammordner des Projekts eine HTTP-Triggerfunktion mit dem Namen sendMessage aus der Vorlage:

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

2. Ersetzen Sie zum Konfigurieren von Bindungen für die Funktion den Inhalt von sendMessage/function.json durch den folgenden Code:

   {
     "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"
       }
     ]
   }
   

   Der vorangehende Code nimmt zwei Änderungen an der ursprünglichen Datei vor:

   • Die Route wird in messages geändert und der HTTP-Trigger auf die POST-HTTP-Methode beschränkt.
   • Eine Azure SignalR Service-Ausgabebindung wird hinzugefügt, die eine von der Funktion zurückgegebene Nachricht an alle Clients sendet, die mit einem Azure SignalR Service-Hub namens default verbunden sind.

3. Ersetzen Sie den Inhalt von sendMessage/index.js durch den folgenden Code:

   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],
     };
   };
   

   Diese Funktion übernimmt den Textteil aus der HTTP-Anforderung und sendet ihn an Clients, die mit Azure SignalR Service verbunden sind. Dabei wird auf jedem Client eine Funktion namens newMessage aufgerufen.

   Die Funktion kann die Identität des Absenders lesen und den Wert recipient im Nachrichtentext akzeptieren, damit Sie eine Nachricht privat an einen einzelnen Benutzer senden können. Sie verwenden diese Funktionen später im Tutorial.

4. Speichern Sie die Datei .

1. Erstellen Sie eine Datei namens index.html im Stammverzeichnis Ihres Funktionsprojekts.

2. Kopieren Sie den Inhalt der Datei index.html, und fügen Sie ihn in Ihre Datei ein. Speichern Sie die Datei .

3. Erstellen Sie mit diesem Befehl im Stammordner des Projekts eine HTTP-Triggerfunktion mit dem Namen index aus der Vorlage:

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

4. Ändern Sie den Inhalt der Datei src/functions/index.js, sodass sie den folgenden Code enthält:

   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,
           };
       }
   });
   

   Die Funktion liest die statische Webseite und gibt sie an den oder die Benutzer*in zurück.

5. Testen Sie Ihre App lokal. Starten Sie die Funktions-App mit diesem Befehl:

   func start
   

6. Öffnen Sie http://localhost:7071/api/index in Ihrem Webbrowser. Eine Chatwebseite sollte angezeigt werden.

   

7. Geben Sie eine Nachricht in das Chatfeld ein.

   Nachdem Sie die EINGABETASTE gedrückt haben, wird die Nachricht auf der Webseite angezeigt. Da der Benutzername des SignalR-Clients nicht festgelegt ist, senden Sie alle Nachrichten anonym.

1. Erstellen Sie im Stammverzeichnis Ihres Funktionsprojekts einen Ordner mit dem Namen content.

2. Erstellen Sie im Ordner content eine Datei mit dem Namen index.html.

3. Kopieren Sie den Inhalt der Datei index.html, und fügen Sie ihn in Ihre Datei ein. Speichern Sie die Datei .

4. Erstellen Sie mit diesem Befehl im Stammordner des Projekts eine HTTP-Triggerfunktion mit dem Namen index aus der Vorlage:

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

5. Ändern Sie den Code von index/index.js wie folgt:

   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",
       },
     };
   };
   

   Die Funktion liest die statische Webseite und gibt sie an den oder die Benutzer*in zurück.

6. Öffnen Sie index/function.json, und ändern Sie den authLevel-Wert der Bindungen in anonymous. Nun sieht die gesamte Datei wie im folgenden Beispiel aus:

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

7. Testen Sie Ihre App lokal. Starten Sie die Funktions-App mit diesem Befehl:

   func start
   

8. Öffnen Sie http://localhost:7071/api/index in Ihrem Webbrowser. Eine Chatwebseite sollte angezeigt werden.

   

9. Geben Sie eine Nachricht in das Chatfeld ein.

   Nachdem Sie die EINGABETASTE gedrückt haben, wird die Nachricht auf der Webseite angezeigt. Da der Benutzername des SignalR-Clients nicht festgelegt ist, senden Sie alle Nachrichten anonym.

1. Öffnen Sie die Datei src/functions/negotiate.js.

2. Fügen Sie eine userId-Eigenschaft in die inputSignalR-Bindung mit dem Wert {headers.x-ms-client-principal-name} ein. Dieser Wert ist ein Bindungsausdruck, der den Benutzernamen des SignalR-Clients auf den Namen des authentifizierten Benutzers festlegt. Die Bindung sollte nun wie in diesem Beispiel aussehen:

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

3. Speichern Sie die Datei .

1. Öffnen Sie die Datei negotiate/function.json.

2. Fügen Sie eine userId-Eigenschaft in die SignalRConnectionInfo-Bindung mit dem Wert {headers.x-ms-client-principal-name} ein. Dieser Wert ist ein Bindungsausdruck, der den Benutzernamen des SignalR-Clients auf den Namen des authentifizierten Benutzers festlegt. Die Bindung sollte nun wie in diesem Beispiel aussehen:

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

3. Speichern Sie die Datei .