Esercitazione: Autenticazione del servizio Azure SignalR con Funzioni di Azure

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. Nella cartella del progetto radice creare la funzione negotiate da un modello predefinito usando il comando seguente:

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

2. Aprire src/functions/negotiate.js e aggiornare il contenuto nel modo seguente:

   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 funzione contiene un binding di trigger HTTP per ricevere richieste dai client SignalR. La funzione contiene inoltre un binding di input SignalR che genera credenziali valide per la connessione di un client a un hub del servizio Azure SignalR denominato default.

   Questa funzione accetta le informazioni di connessione a SignalR dal binding di input e le restituisce al client nel corpo della risposta HTTP.

   Non esiste alcuna userId proprietà nel binding signalRConnectionInfo per lo sviluppo locale. Verrà aggiunto in un secondo momento per impostare il nome utente di una connessione SignalR quando si distribuisce l'app per le funzioni in Azure.

1. Nella cartella del progetto radice creare la funzione negotiate da un modello predefinito usando il comando seguente:

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

2. Aprire negotiate/function.json per visualizzare la configurazione nel binding di funzioni.

   La funzione contiene un binding di trigger HTTP per ricevere richieste dai client SignalR. La funzione contiene inoltre un binding di input SignalR che genera credenziali valide per la connessione di un client a un hub del servizio Azure SignalR denominato 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"
       }
     ]
   }
   

   Non esiste alcuna userId proprietà nel binding signalRConnectionInfo per lo sviluppo locale. Verrà aggiunto in un secondo momento per impostare il nome utente di una connessione SignalR quando si distribuisce l'app per le funzioni in Azure.

3. Chiudere il file negotiate/function.json.

4. Aprire negotiate/index.js per visualizzare il corpo della funzione:

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

   Questa funzione accetta le informazioni di connessione a SignalR dall'associazione di input e le restituisce al client nel corpo della risposta HTTP. Il client SignalR usa queste informazioni per connettersi all'istanza del Servizio Azure SignalR.

1. Nella cartella del progetto radice creare la funzione di trigger HTTP sendMessage da un modello predefinito usando il comando seguente:

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

2. Aprire il file src/functions/sendMessage.js e aggiornare il contenuto nel modo seguente:

   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 funzione contiene un trigger HTTP e un binding di output SignalR. Accetta il corpo dalla richiesta HTTP e lo invia ai client connessi al servizio Azure SignalR. Richiama una funzione denominata newMessage in ogni client.

   La funzione può leggere l'identità del mittente e può accettare un valore recipient nel corpo del messaggio per consentire di inviare un messaggio privatamente a un singolo utente. Queste funzionalità verranno usate più avanti nell'esercitazione.

3. Salvare il file.

1. Nella cartella del progetto radice creare la funzione di trigger HTTP sendMessage da un modello predefinito usando il comando seguente:

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

2. Per configurare le associazioni per la funzione, sostituire il contenuto di sendMessage/function.json con il codice seguente:

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

   Il codice precedente apporta due modifiche al file originale:

   • Cambia la route in messages e limita il trigger HTTP metodo HTTP POST.
   • Aggiunge un binding di output per il Servizio Azure SignalR che invia un messaggio restituito dalla funzione a tutti i client connessi a un hub del Servizio Azure SignalR denominato default.

3. Sostituire il contenuto di sendMessage/index.js con il codice seguente:

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

   Questa funzione accetta il corpo dalla richiesta HTTP e lo invia ai client connessi al servizio Azure SignalR. Richiama una funzione denominata newMessage in ogni client.

   La funzione può leggere l'identità del mittente e può accettare un valore recipient nel corpo del messaggio per consentire di inviare un messaggio privatamente a un singolo utente. Queste funzionalità verranno usate più avanti nell'esercitazione.

4. Salvare il file.

1. Creare un file denominato index.html nella directory radice del progetto di funzione.

2. Copiare e incollare il contenuto di index.html nel file. Salvare il file.

3. Nella cartella del progetto radice, creare una funzione di trigger HTTP denominata index dal modello usando questo comando:

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

4. Modificare il contenuto di src/functions/index.js nel codice seguente:

   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 funzione legge la pagina Web statica e la restituisce all'utente.

5. Testare l'app in locale. Avviare l'app per le funzioni usando questo comando:

   func start
   

6. Aprire http://localhost:7071/api/index nel Web browser. Verrà visualizzata una pagina Web di chat.

   

7. Immettere un messaggio nella casella di chat.

   Dopo aver selezionato il tasto INVIO, il messaggio viene visualizzato nella pagina Web. Poiché il nome utente del client SignalR non è impostato, si inviano tutti i messaggi in modo anonimo.

1. Creare una cartella denominata content nella directory radice del progetto di funzione.

2. Nella cartella content creare un file denominato index.html.

3. Copiare e incollare il contenuto di index.html nel file. Salvare il file.

4. Nella cartella del progetto radice, creare una funzione di trigger HTTP denominata index dal modello usando questo comando:

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

5. Modificare il contenuto di index/index.js nel codice seguente:

   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 funzione legge la pagina Web statica e la restituisce all'utente.

6. Aprire index/function.jsone modificare il valore authLevel delle associazioni in anonymous. L'intero file sarà ora simile all'esempio seguente:

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

7. Testare l'app in locale. Avviare l'app per le funzioni usando questo comando:

   func start
   

8. Aprire http://localhost:7071/api/index nel Web browser. Verrà visualizzata una pagina Web di chat.

   

9. Immettere un messaggio nella casella di chat.

   Dopo aver selezionato il tasto INVIO, il messaggio viene visualizzato nella pagina Web. Poiché il nome utente del client SignalR non è impostato, si inviano tutti i messaggi in modo anonimo.

1. Aprire il file src/functions/negotiate.js.

2. Inserire una proprietà userId nel binding inputSignalR con il valore {headers.x-ms-client-principal-name}. Questo valore è un'espressione di binding che imposta il nome utente del client SignalR sul nome dell'utente autenticato. Il binding dovrebbe ora essere simile all'esempio seguente:

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

3. Salvare il file.

1. Aprire negotiate/function.json.

2. Inserire una proprietà userId nel binding SignalRConnectionInfo con il valore {headers.x-ms-client-principal-name}. Questo valore è un'espressione di binding che imposta il nome utente del client SignalR sul nome dell'utente autenticato. Il binding dovrebbe ora essere simile all'esempio seguente:

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

3. Salvare il file.