Tutorial: autenticação do Azure SignalR Service com as Funções do 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. Na pasta raiz do projeto, crie a função a negotiate partir de um modelo interno usando o seguinte comando:

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

2. Abra src/functions/negotiate.js, atualize o conteúdo da seguinte forma:

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

   A função contém uma ligação de gatilho HTTP para receber solicitações de clientes SignalR. A função também contém uma ligação de entrada SignalR para gerar credenciais válidas para um cliente se conectar a um hub do Serviço Azure SignalR chamado default.

   Esta função obtém as informações de conexão SignalR da ligação de entrada e as retorna ao cliente no corpo da resposta HTTP..

   Não há nenhuma userId propriedade na vinculação para o signalRConnectionInfo desenvolvimento local. Você irá adicioná-lo mais tarde para definir o nome de usuário de uma conexão SignalR quando implantar o aplicativo de função no Azure.

1. Na pasta raiz do projeto, crie a função a negotiate partir de um modelo interno usando o seguinte comando:

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

2. Abra negotiate/function.json para visualizar a configuração de vinculação de função.

   A função contém uma ligação de gatilho HTTP para receber solicitações de clientes SignalR. A função também contém uma ligação de entrada SignalR para gerar credenciais válidas para um cliente se conectar a um hub do Serviço Azure SignalR chamado 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"
       }
     ]
   }
   

   Não há nenhuma userId propriedade na vinculação para o signalRConnectionInfo desenvolvimento local. Você irá adicioná-lo mais tarde para definir o nome de usuário de uma conexão SignalR quando implantar o aplicativo de função no Azure.

3. Feche o arquivo negotiate/function.json .

4. Abra a negociação/index.js para visualizar o corpo da função:

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

   Esta função recebe as informações de ligação do SignalR a partir do enlace de entrada e devolve-as ao cliente no corpo da resposta HTTP. O cliente SignalR usa essas informações para se conectar à instância do Serviço SignalR do Azure.

1. Na pasta raiz do projeto, crie uma função de gatilho HTTP nomeada sendMessage a partir do modelo usando o seguinte comando:

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

2. Abra o arquivo src/functions/sendMessage.js , atualize o conteúdo da seguinte maneira:

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

   A função contém um gatilho HTTP e uma ligação de saída SignalR. Ele pega o corpo da solicitação HTTP e o envia para clientes conectados ao Serviço Azure SignalR. Ele invoca uma função nomeada newMessage em cada cliente.

   A função pode ler a identidade do remetente e pode aceitar um recipient valor no corpo da mensagem para permitir que você envie uma mensagem de forma privada para um único usuário. Você usará essas funcionalidades mais adiante no tutorial.

3. Guarde o ficheiro.

1. Na pasta raiz do projeto, crie uma função de gatilho HTTP nomeada sendMessage a partir do modelo usando o seguinte comando:

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

2. Para configurar associações para a função, substitua o conteúdo de sendMessage/function.json pelo seguinte código:

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

   O código anterior faz duas alterações no arquivo original:

   • Ele altera a rota e messages restringe o gatilho POST HTTP ao método HTTP.
   • Ele adiciona uma ligação de saída do Serviço Azure SignalR que envia uma mensagem retornada pela função para todos os clientes conectados a um hub do Serviço Azure SignalR chamado default.

3. Substitua o conteúdo de sendMessage/index.js pelo seguinte código:

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

   Essa função pega o corpo da solicitação HTTP e o envia para clientes conectados ao Serviço Azure SignalR. Ele invoca uma função nomeada newMessage em cada cliente.

   A função pode ler a identidade do remetente e pode aceitar um recipient valor no corpo da mensagem para permitir que você envie uma mensagem de forma privada para um único usuário. Você usará essas funcionalidades mais adiante no tutorial.

4. Guarde o ficheiro.

1. Crie um arquivo chamado index.html no diretório raiz do seu projeto de função.

2. Copie e cole o conteúdo do index.html no seu ficheiro. Guarde o ficheiro.

3. Na pasta raiz do projeto, crie uma função de gatilho HTTP nomeada index a partir do modelo usando este comando:

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

4. Modifique o conteúdo de src/functions/index.js para o seguinte código:

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

   A função lê a página da Web estática e a retorna ao usuário.

5. Teste seu aplicativo localmente. Inicie o aplicativo de função usando este comando:

   func start
   

6. Abra http://localhost:7071/api/index no seu navegador da Web. Deve aparecer uma página Web de chat.

   

7. Insira uma mensagem na caixa de chat.

   Depois de selecionar a tecla Enter, a mensagem aparece na página da Web. Como o nome de usuário do cliente SignalR não está definido, você está enviando todas as mensagens anonimamente.

1. Crie uma pasta chamada content no diretório raiz do seu projeto de função.

2. Na pasta de conteúdo , crie um arquivo chamado index.html.

3. Copie e cole o conteúdo do index.html no seu ficheiro. Guarde o ficheiro.

4. Na pasta raiz do projeto, crie uma função de gatilho HTTP nomeada index a partir do modelo usando este comando:

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

5. Modifique o conteúdo do index/index.js código a seguir:

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

   A função lê a página da Web estática e a retorna ao usuário.

6. Abra o índice/function.json e altere o authLevel valor das ligações para anonymous. Agora, todo o arquivo se parece com este exemplo:

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

7. Teste seu aplicativo localmente. Inicie o aplicativo de função usando este comando:

   func start
   

8. Abra http://localhost:7071/api/index no seu navegador da Web. Deve aparecer uma página Web de chat.

   

9. Insira uma mensagem na caixa de chat.

   Depois de selecionar a tecla Enter, a mensagem aparece na página da Web. Como o nome de usuário do cliente SignalR não está definido, você está enviando todas as mensagens anonimamente.

1. Abra o arquivo src/functions/negotiate.js .

2. Insira uma userId propriedade na inputSignalR associação com o valor {headers.x-ms-client-principal-name}. Esse valor é uma expressão de associação que define o nome de usuário do cliente SignalR como o nome do usuário autenticado. A vinculação agora deve se parecer com este exemplo:

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

3. Guarde o ficheiro.

1. Negociação aberta /function.json.

2. Insira uma userId propriedade na SignalRConnectionInfo associação com o valor {headers.x-ms-client-principal-name}. Esse valor é uma expressão de associação que define o nome de usuário do cliente SignalR como o nome do usuário autenticado. A vinculação agora deve se parecer com este exemplo:

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

3. Guarde o ficheiro.