Självstudier: Azure SignalR Service-autentisering med 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. Från rotprojektmappen negotiate skapar du funktionen från en inbyggd mall med hjälp av följande kommando:

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

2. Öppna src/functions/negotiate.js, uppdatera innehållet på följande sätt:

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

   Funktionen innehåller en HTTP-utlösarbindning för att ta emot begäranden från SignalR-klienter. Funktionen innehåller också en SignalR-indatabindning för att generera giltiga autentiseringsuppgifter för en klient för att ansluta till en Azure SignalR Service-hubb med namnet default.

   Den här funktionen tar SignalR-anslutningsinformationen från indatabindningen och returnerar den till klienten i HTTP-svarstexten..

   Det finns ingen userId egenskap i bindningen signalRConnectionInfo för lokal utveckling. Du lägger till den senare för att ange användarnamnet för en SignalR-anslutning när du distribuerar funktionsappen till Azure.

1. Från rotprojektmappen negotiate skapar du funktionen från en inbyggd mall med hjälp av följande kommando:

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

2. Öppna negotiate/function.json för att visa funktionsbindningskonfigurationen.

   Funktionen innehåller en HTTP-utlösarbindning för att ta emot begäranden från SignalR-klienter. Funktionen innehåller också en SignalR-indatabindning för att generera giltiga autentiseringsuppgifter för en klient för att ansluta till en Azure SignalR Service-hubb med namnet 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"
       }
     ]
   }
   

   Det finns ingen userId egenskap i bindningen signalRConnectionInfo för lokal utveckling. Du lägger till den senare för att ange användarnamnet för en SignalR-anslutning när du distribuerar funktionsappen till Azure.

3. Stäng filen negotiate/function.json.

4. Öppna negotiate/index.js för att visa funktionens brödtext:

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

   Den här funktionen hämtar SignalR-anslutningsinformationen från indatabindningen och returnerar den till klienten i HTTP-svarstexten. SignalR-klienten använder den här informationen för att ansluta till Azure SignalR Service-instansen.

1. Från rotprojektmappen skapar du en HTTP-utlösarfunktion med namnet sendMessage från mallen med hjälp av följande kommando:

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

2. Öppna filen src/functions/sendMessage.js och uppdatera innehållet på följande sätt:

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

   Funktionen innehåller en HTTP-utlösare och en SignalR-utdatabindning. Den tar brödtexten från HTTP-begäran och skickar den till klienter som är anslutna till Azure SignalR Service. Den anropar en funktion med namnet newMessage på varje klient.

   Funktionen kan läsa avsändarens identitet och kan acceptera ett recipient värde i meddelandetexten så att du kan skicka ett meddelande privat till en enskild användare. Du använder dessa funktioner senare i självstudien.

3. Spara filen.

1. Från rotprojektmappen skapar du en HTTP-utlösarfunktion med namnet sendMessage från mallen med hjälp av följande kommando:

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

2. Om du vill konfigurera bindningar för funktionen ersätter du innehållet i sendMessage/function.json med följande kod:

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

   Föregående kod gör två ändringar i den ursprungliga filen:

   • Den ändrar vägen till messages och begränsar HTTP-utlösaren till POST HTTP-metoden.
   • Den lägger till en Azure SignalR Service-utdatabindning som skickar ett meddelande som returneras av funktionen till alla klienter som är anslutna till en Azure SignalR Service-hubb med namnet default.

3. Ersätt innehållet i sendMessage/index.js med följande kod:

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

   Den här funktionen tar brödtexten från HTTP-begäran och skickar den till klienter som är anslutna till Azure SignalR Service. Den anropar en funktion med namnet newMessage på varje klient.

   Funktionen kan läsa avsändarens identitet och kan acceptera ett recipient värde i meddelandetexten så att du kan skicka ett meddelande privat till en enskild användare. Du använder dessa funktioner senare i självstudien.

4. Spara filen.

1. Skapa en fil med namnet index.html i rotkatalogen för funktionsprojektet.

2. Kopiera och klistra in innehållet i index.html i filen. Spara filen.

3. Från rotprojektmappen skapar du en HTTP-utlösarfunktion med namnet index från mallen med hjälp av det här kommandot:

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

4. Ändra innehållet i src/functions/index.js till följande kod:

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

   Funktionen läser den statiska webbsidan och returnerar den till användaren.

5. Testa appen lokalt. Starta funktionsappen med det här kommandot:

   func start
   

6. Öppna http://localhost:7071/api/index i webbläsaren. En chattwebbsida bör visas.

   

7. Ange ett meddelande i chattrutan.

   När du har valt returnyckeln visas meddelandet på webbsidan. Eftersom användarnamnet för SignalR-klienten inte har angetts skickar du alla meddelanden anonymt.

1. Skapa en mapp med namnet innehåll i rotkatalogen för funktionsprojektet.

2. Skapa en fil med namnet index.html i innehållsmappen.

3. Kopiera och klistra in innehållet i index.html i filen. Spara filen.

4. Från rotprojektmappen skapar du en HTTP-utlösarfunktion med namnet index från mallen med hjälp av det här kommandot:

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

5. Ändra innehållet index/index.js i till följande kod:

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

   Funktionen läser den statiska webbsidan och returnerar den till användaren.

6. Öppna index/function.json och ändra authLevel värdet för bindningarna till anonymous. Nu ser hela filen ut så här:

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

7. Testa appen lokalt. Starta funktionsappen med det här kommandot:

   func start
   

8. Öppna http://localhost:7071/api/index i webbläsaren. En chattwebbsida bör visas.

   

9. Ange ett meddelande i chattrutan.

   När du har valt returnyckeln visas meddelandet på webbsidan. Eftersom användarnamnet för SignalR-klienten inte har angetts skickar du alla meddelanden anonymt.

1. Öppna filen src/functions/negotiate.js .

2. Infoga en userId egenskap i bindningen inputSignalR med värdet {headers.x-ms-client-principal-name}. Det här värdet är ett bindningsuttryck som anger användarnamnet för SignalR-klienten till namnet på den autentiserade användaren. Bindningen bör nu se ut så här:

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

3. Spara filen.

1. Öppna negotiate/function.json.

2. Infoga en userId egenskap i bindningen SignalRConnectionInfo med värdet {headers.x-ms-client-principal-name}. Det här värdet är ett bindningsuttryck som anger användarnamnet för SignalR-klienten till namnet på den autentiserade användaren. Bindningen bör nu se ut så här:

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

3. Spara filen.