Criar dinamicamente uma identidade e um token dos Serviços de Comunicação do Azure

Neste exercício, você aprenderá como recuperar dinamicamente a identidade do usuário e os valores de token dos Serviços de Comunicação do Azure usando o Azure Functions. Uma vez recuperados, os valores serão passados para o composto da interface do usuário do ACS para permitir que uma chamada seja feita por um cliente.

C#

1. Abra local.settings.json e atualize o valor ACS_CONNECTION_STRING com a cadeia de conexão ACS que guardou numa tarefa anterior.

2. Abra Startup.cs no Visual Studio e explore a segunda AddSingleton() chamada no ConfigureServices() método.

   var host = new HostBuilder()
       .ConfigureFunctionsWebApplication()
       .ConfigureServices(services => {
   
           ...
   
           services.AddSingleton(static p =>
           {
               var config = p.GetRequiredService<IConfiguration>();
               var connectionString = config.GetValue<string>("ACS_CONNECTION_STRING");
               return new CommunicationIdentityClient(connectionString);
           });
   
           ...
   
       })
       .Build();
   }
   

3. A AddSingleton() chamada cria um CommunicationIdentityClient objeto usando o ACS_CONNECTION_STRING valor de local.settings.json.

4. Abra ACSTokenFunction.cs e localize o construtor e as definições de campo.

   • É definido um campo nomeado Scopes que inclui o CommunicationTokenScope.VoIP escopo. Esse escopo é usado para criar o token de acesso para a chamada de vídeo.

     private static readonly CommunicationTokenScope[] Scopes =
     [
         CommunicationTokenScope.VoIP,
     ];
     

   • A CommunicationIdentityClient instância singleton criada em Startup.cs é injetada no construtor e atribuída ao _tokenClient campo.

     private readonly CommunicationIdentityClient _tokenClient;
     
     public ACSTokenFunction(CommunicationIdentityClient tokenClient)
     {
         _tokenClient = tokenClient;
     }
     

5. Explore o Run() método em ACSTokenFunction.cs:

   [Function("HttpTriggerAcsToken")]
   public async Task<HttpResponseData> Run(
       [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequestData req,
       ILogger log)
   {
       var user = await _tokenClient.CreateUserAsync();
       var userToken = await _tokenClient.GetTokenAsync(user, Scopes);
   
       var response = req.CreateResponse(HttpStatusCode.OK);
       await response.WriteAsJsonAsync(
           new
           {
               userId = user.Value.Id,
               userToken.Value.Token,
               userToken.Value.ExpiresOn
           }
       );
       return response;
   }
   

   • Define uma função chamada HttpTriggerAcsToken que pode ser invocada com uma solicitação HTTP GET.
   • Um novo usuário ACS é criado chamando o _tokenClient.CreateUserAsync() método.
   • Um token de acesso usado para chamadas de vídeo é criado chamando o _tokenClient. GetTokenAsync() método.
   • O ID do usuário e o token são retornados da função como um objeto JSON.

6. Execute o programa pressionando F5 no Visual Studio ou selecionando Depurar --> Iniciar Depuração no menu. Isso iniciará o projeto do Azure Functions e disponibilizará o ACSTokenFunction para chamada.

   Observação

   Se você estiver usando o VS Code, você pode abrir uma janela de terminal na pasta GraphACSFunctions e executar func start. Isso pressupõe que você tenha as Ferramentas Principais do Azure Functions instaladas em sua máquina.

7. Agora que o Azure Functions está sendo executado localmente, o cliente precisa ser capaz de chamá-los para obter a identidade do usuário do ACS e os valores de token.

8. Abra o arquivo samples/acs-to-teams-meeting/client/react/App.tsx em seu editor.

9. Encontre as variáveis de estado userId e token no componente. Remova os valores codificados e substitua-os por aspas vazias:

   const [userId, setUserId] = useState<string>('');
   const [token, setToken] = useState<string>('');
   

10. Localize a useEffect função e altere-a para ter a seguinte aparência para habilitar a chamada da Função do Azure para recuperar uma identidade de usuário e um token do ACS:

    useEffect(() => {
        const init = async () => {
            setMessage('Getting ACS user');
            //Call Azure Function to get the ACS user identity and token
            let res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
            let user = await res.json();
            setUserId(user.userId);
            setToken(user.token);
    
            setMessage('Getting Teams meeting link...');
            //Call Azure Function to get the meeting link
            res = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
            let link = await res.text();
            setTeamsMeetingLink(link);
            setMessage('');
            console.log('Teams meeting link', link);
        }
        init();
    
    }, []);
    

11. Salve o arquivo antes de continuar.

12. Abra uma janela do terminal e execute npm start na react pasta. Depois que o sistema compilar e carregar, deverá ver a interface de utilizador de chamada do ACS exibida e poderá entrar na reunião do Teams que foi criada de forma dinâmica pelo Microsoft Graph.

13. Pare o aplicativo React pressionando Ctrl + C na janela do terminal.

14. Pare o projeto do Azure Functions.

15. Confirme suas alterações do git e envie-as por push para o repositório do GitHub usando o Visual Studio Code:

    • Selecione o ícone Controle do código-fonte (3º abaixo na barra de ferramentas Código do Visual Studio).
    • Insira uma mensagem de confirmação e selecione Confirmar.
    • Selecione Sincronizar alterações.

TypeScript

1. Abra local.settings.json e atualize o valor ACS_CONNECTION_STRING com a cadeia de conexão ACS que guardou numa tarefa anterior.

2. Abra server/typescript/src/functions/httpTriggerAcsToken.ts no Visual Studio Code. Tem o seguinte código:

   import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions";
   import { CommunicationIdentityClient } from '@azure/communication-identity';
   
   export async function httpTriggerAcsToken(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
       // Get ACS connection string from local.settings.json (or App Settings when in Azure)
       const connectionString = process.env.ACS_CONNECTION_STRING;
       let tokenClient = new CommunicationIdentityClient(connectionString);
       const user = await tokenClient.createUser();
       const userToken = await tokenClient.getToken(user, ["voip"]);
       return {
           jsonBody: { userId: user.communicationUserId, ...userToken }
       };
   }
   
   app.http('httpTriggerAcsToken', {
       methods: ['GET'],
       authLevel: 'anonymous',
       handler: httpTriggerAcsToken
   });
   
   export default httpTriggerAcsToken;
   

3. A função executa as seguintes tarefas:

   • Importações CommunicationIdentityClient que serão usadas para criar a identidade e o token do usuário.

     import { CommunicationIdentityClient } from '@azure/communication-identity';
     

   • Obtém a cadeia de conexão ACS de uma variável de ambiente chamada ACS_CONNECTION_STRING.

     const connectionString = process.env.ACS_CONNECTION_STRING;
     

   Observação

   Este é o valor da cadeia de conexão que você adicionou ao arquivo local.settings.json anteriormente.

   • Cria uma nova CommunicationIdentityClient instância e passa a cadeia de conexão ACS para ela.

     let tokenClient = new CommunicationIdentityClient(connectionString);
     

   • Cria um usuário ACS e obtém um token de Voz sobre IP.

     const user = await tokenClient.createUser();
     const userToken = await tokenClient.getToken(user, ["voip"]);
     

   • Envia os valores userId e token de volta para o chamador.

     return {
         jsonBody: { userId: user.communicationUserId, ...userToken }
     };
     

4. Vá para a pasta server/typescript em uma janela do terminal e execute npm start.

5. Agora que o Azure Functions está sendo executado localmente, o cliente precisa ser capaz de chamá-los para obter a identidade do usuário do ACS e os valores de token.

6. Abra o arquivo client/react/App.tsx em seu editor.

7. Encontre as variáveis de estado userId e token no componente. Remova os valores codificados e substitua-os por aspas vazias:

   const [userId, setUserId] = useState<string>('');
   const [token, setToken] = useState<string>('');
   

8. Localize a useEffect função e altere-a para ter a seguinte aparência para habilitar a chamada da Função do Azure para recuperar uma identidade de usuário e um token do ACS:

   useEffect(() => {
       const init = async () => {
           setMessage('Getting ACS user');
           //Call Azure Function to get the ACS user identity and token
           let res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
           let user = await res.json();
           setUserId(user.userId);
           setToken(user.token);
   
           setMessage('Getting Teams meeting link...');
           //Call Azure Function to get the meeting link
           res = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
           let link = await res.text();
           setTeamsMeetingLink(link);
           setMessage('');
           console.log('Teams meeting link', link);
       }
       init();
   
   }, []);
   

9. Salve o arquivo antes de continuar.

10. Abra um terminal separado e execute npm start na pasta react . Depois que o sistema compilar e carregar, deverá ver a interface de utilizador de chamada do ACS exibida e poderá entrar na reunião do Teams que foi criada de forma dinâmica pelo Microsoft Graph.

11. Pare ambos os processos de terminal (React e Azure Functions) selecionando Ctrl + C.

12. Confirme suas alterações do git e envie-as por push para o repositório do GitHub usando o Visual Studio Code:

    • Selecione o ícone Controle do código-fonte (3º abaixo na barra de ferramentas Código do Visual Studio).
    • Insira uma mensagem de confirmação e selecione Confirmar.
    • Selecione Sincronizar alterações.

Próximo Passo

Implantar o aplicativo no Azure Functions e nos aplicativos de contêiner do Azure