Criar dinamicamente uma reunião do Microsoft Teams usando o Microsoft Graph

Neste exercício, você automatizará o processo de criação de um link de reunião do Microsoft Teams e a passagem para o ACS usando o Azure Functions e o Microsoft Graph.

1. Você precisará criar um aplicativo de ID do Microsoft Entra para autenticação de aplicativo Daemon. Nesta etapa, a autenticação será tratada em segundo plano com credenciais de aplicativo e um aplicativo de ID do Microsoft Entra usará permissões de aplicativo para fazer chamadas à API do Microsoft Graph. O Microsoft Graph será usado para criar dinamicamente uma reunião do Microsoft Teams e retornar a URL de reunião do Teams.

2. Execute as seguintes etapas para criar um aplicativo de ID do Microsoft Entra:

   1. Acesse o portal do Azure e selecione a ID do Microsoft Entra.
   2. Selecione a guia Registro de aplicativo seguida por + Novo registro.
   3. Preencha os detalhes do novo formulário de registro do aplicativo, conforme mostrado abaixo, e selecione Registrar:
      • Nome: Aplicativo de Interoperabilidade do ACS Teams
      • Tipos de Conta com Suporte: Contas em qualquer diretório organizacional (qualquer diretório do Microsoft Entra ID – multilocação) e Contas Pessoais da Microsoft (por exemplo, Skype, Xbox)
      • URI de redirecionamento: deixe isso em branco
   4. Depois que o aplicativo for registrado, acesse as permissões de API e selecione + Adicionar uma permissão.
   5. Selecione o Microsoft Graph seguido por permissões de aplicativo.
   6. Selecione a Calendars.ReadWrite permissão e, em seguida, selecione Adicionar.
   7. Depois de adicionar as permissões, selecione Conceder consentimento do administrador para <YOUR_ORGANIZATION_NAME>.
   8. Vá para a guia Certificados > segredos , selecione + Novo segredo do cliente e, em seguida, selecione Adicionar.
   9. Copie o valor do segredo em um arquivo local. Você usará o valor posteriormente neste exercício.
   10. Vá para a guia Visão geral e copie os valores Application (client) ID e Directory (tenant) ID no mesmo arquivo local que você usou na etapa anterior.

Criando um arquivolocal.settings.json

C#

1. Abra o samples/acs-to-teams-meeting/server/csharp/GraphACSFunctions.sln no Visual Studio ou abra a pasta GraphACSFunctions no Visual Studio Code.

2. Vá para o GraphACSFunctions projeto e crie um local.settings.json arquivo com os seguintes valores:

   {
       "IsEncrypted": false,
       "Values": {
           "FUNCTIONS_WORKER_RUNTIME": "dotnet-isolated",
           "TENANT_ID": "",
           "CLIENT_ID": "",
           "CLIENT_SECRET": "",
           "USER_ID": "",
           "ACS_CONNECTION_STRING": ""
       },
       "Host": {
           "LocalHttpPort": 7071,
           "CORS": "*",
           "CORSCredentials": false
       },
       "watchDirectories": [
           "Shared"
       ]
   }
   

   • Use os valores que você copiou para o arquivo local em um exercício anterior para atualizar os valores TENANT_ID, CLIENT_ID e CLIENT_SECRET.
   • Defina USER_ID com a ID do usuário que você gostaria de criar uma Reunião do Microsoft Teams.

   Você pode obter a ID de Usuário no portal do Azure.

   • Efetue o login usando a conta de administrador do locatário do desenvolvedor do Microsoft 365.
   • Selecione Microsoft Entra ID
   • Navegue até a guia Usuários na barra lateral.
   • Pesquise seu nome de usuário e selecione-o para ver os detalhes do usuário.
   • Dentro dos detalhes do usuário, Object ID representa o User ID. Copie o valor Object ID e use-o para o valor USER_ID em local.settings.json.

   

   Observação

   ACS_CONNECTION_STRING será usado no próximo exercício para que você ainda não precise atualizá-lo.

3. Abra GraphACSFunctions.sln localizado na pasta acs-to-teams-meeting/server/csharp e observe que inclui os seguintes pacotes do Microsoft Graph e Identity:

   <PackageReference Include="Azure.Communication.Identity" Version="1.3.1" />
   <PackageReference Include="Azure.Identity" Version="1.11.2" />
   <PackageReference Include="Microsoft.Graph" Version="5.51.0" />
   

4. Vá para Program.cs e anote o seguinte código no ConfigureServices método:

       var host = new HostBuilder()
           .ConfigureFunctionsWebApplication()
           .ConfigureServices(services => {
               services.AddApplicationInsightsTelemetryWorkerService();
               services.ConfigureFunctionsApplicationInsights();
               services.AddSingleton(static p =>
               {
                   var config = p.GetRequiredService<IConfiguration>();
                   var clientSecretCredential = new ClientSecretCredential(
                       config.GetValue<string>("TENANT_ID"),
                       config.GetValue<string>("CLIENT_ID"),
                       config.GetValue<string>("CLIENT_SECRET")
                   );
   
                   return new GraphServiceClient(
                       clientSecretCredential,
                       ["https://graph.microsoft.com/.default"]
                   );
               });
   
               ...
   
               services.AddSingleton<IGraphService, GraphService>();
           })
           .Build();
   }
   

   • Esse código cria um GraphServiceClient objeto que pode ser usado para chamar o Microsoft Graph do Azure Functions. É um singleton e pode ser injetado em outras classes.
   • Você pode fazer chamadas à API do Microsoft Graph com permissões somente de aplicativo (como Calendars.ReadWrite) passando um ClientSecretCredential valor para o GraphServiceClient construtor. O ClientSecretCredential usa os valores Tenant Id, Client Id e Client Secret do aplicativo de ID do Microsoft Entra.

5. Abrir Serviços/GraphService.cs.

6. Reserve um momento para explorar o CreateMeetingEventAsync método:

   using System;
   using System.Threading.Tasks;
   using Microsoft.Graph;
   using Microsoft.Extensions.Configuration;
   
   namespace GraphACSFunctions.Services;
   
   public class GraphService : IGraphService
   {
       private readonly GraphServiceClient _graphServiceClient;
       private readonly IConfiguration _configuration;
   
       public GraphService(GraphServiceClient graphServiceClient, IConfiguration configuration)
       {
           _graphServiceClient = graphServiceClient;
           _configuration = configuration;
       }
   
       public async Task<string> CreateMeetingAsync()
       {
           var userId = _configuration.GetValue<string>("USER_ID");
           var newMeeting = await _graphServiceClient
               .Users[userId]
               .Calendar
               .Events
               .PostAsync(new()
               {
                   Subject = "Customer Service Meeting",
                   Start = new()
                   {
                       DateTime = DateTime.UtcNow.ToString("yyyy-MM-ddTHH:mm:ss"),
                       TimeZone = "UTC"
                   },
                   End = new()
                   {
                       DateTime = DateTime.UtcNow.AddHours(1).ToString("yyyy-MM-ddTHH:mm:ss"),
                       TimeZone = "UTC"
                   },
                   IsOnlineMeeting = true
               });
           return newMeeting.OnlineMeeting.JoinUrl;
       }
   }
   

   • GraphServiceClient e IConfiguration os objetos são injetados no construtor e atribuídos a campos.
   • A CreateMeetingAsync() função posta dados na API de Eventos do Calendário do Microsoft Graph, que cria dinamicamente um evento no calendário de um usuário e retorna a URL de junção.

7. Abra TeamsMeetingFunctions.cs e tire um momento para examinar seu construtor. O GraphServiceClient que você olhou anteriormente é injetado e atribuído ao campo _graphService.

   private readonly IGraphService _graphService;
   
   public TeamsMeetingFunction(IGraphService graphService) => _graphService = graphService;
   

8. Localize o método Run.

   [Function("HttpTriggerTeamsUrl")]
   public async Task<HttpResponseData> Run(
       [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequestData req,
       ILogger log)
   {
       var response = req.CreateResponse(HttpStatusCode.OK);
       await response.WriteStringAsync(await _graphService.CreateMeetingAsync());
       return response;
   }
   

   • Ele define um nome de função HttpTriggerTeamsUrl que pode ser chamado com uma solicitação HTTP GET.
   • Ele chama _graphService.CreateMeetingAsync(), que cria um novo evento e retorna a URL de junção.

9. Execute o programa pressionando F5 no Visual Studio ou selecionando Depurar –> Iniciar Depuração no menu. Essa ação inicia o projeto Azure Functions e disponibiliza a ACSTokenFunction para chamada.

Observação

Se você estiver usando o VS Code, poderá 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 seu computador.

Máquina

1. Abra a pasta de projeto de exemplo/acs-to-teams-meeting/server/typescript no Visual Studio Code.

2. Crie um arquivo local.settings.json com os seguintes valores:

   {
       "IsEncrypted": false,
       "Values": {
           "FUNCTIONS_WORKER_RUNTIME": "node",
           "TENANT_ID": "",
           "CLIENT_ID": "",
           "CLIENT_SECRET": "",
           "USER_ID": "",
           "ACS_CONNECTION_STRING": ""
       },
       "Host": {
           "LocalHttpPort": 7071,
           "CORS": "*",
           "CORSCredentials": false
       },
       "watchDirectories": [
           "Shared"
       ]
   }
   

   • Use os valores que você copiou para o arquivo local em um exercício anterior para atualizar os valores TENANT_ID, CLIENT_ID e CLIENT_SECRET.
   • Defina USER_ID com a ID do usuário que você gostaria de criar uma Reunião do Microsoft Teams.

   Você pode obter a ID de Usuário no portal do Azure.

   • Efetue o login usando a conta de administrador do locatário do desenvolvedor do Microsoft 365.
   • Selecione Microsoft Entra ID,
   • Navegue até a guia Usuários na barra lateral.
   • Pesquise seu nome de usuário e selecione-o para ver os detalhes do usuário.
   • Dentro dos detalhes do usuário, Object ID representa o User ID. Copie o valor Object ID e use-o para o valor USER_ID em local.settings.json.

   

   Observação

   ACS_CONNECTION_STRING será usado no próximo exercício para que você ainda não precise atualizá-lo.

3. Abra o arquivo package.json no VS Code e observe que os seguintes pacotes do Microsoft Graph e da Identidade estão incluídos:

   @azure/communication-identity
   @azure/identity
   @microsoft/microsoft-graph-client
   

4. Abra uma janela de terminal na pasta typescript e execute o npm install comando para instalar as dependências do aplicativo.

5. Abra o Shared/graph.ts e reserve um momento para explorar as importações na parte superior do arquivo. Esse código manipula a importação de símbolos de autenticação e cliente que são usados na Função do Azure para chamar o Microsoft Graph.

   import { startDateTimeAsync, endDateTimeAsync } from './dateTimeFormat';
   import { ClientSecretCredential } from '@azure/identity';
   import { Client } from '@microsoft/microsoft-graph-client';
   import { TokenCredentialAuthenticationProvider } from '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials';
   import 'isomorphic-fetch';
   

   Dica

   Você também verá importações de dateTimeFormat.ts que são usadas mais adiante neste exercício. startDateTimeAsync e endDateTimeAsync são usados durante a criação de um link de reunião do Microsoft Teams para definir a data de início e a data de término da reunião.

6. Tire um momento para examinar clientSecretCredential e appGraphClient. Eles serão usados posteriormente no processo de autenticação e ao chamar a API do Microsoft Graph:

   let clientSecretCredential;
   let appGraphClient;
   

7. Localize a ensureGraphForAppOnlyAuth função:

   • ClientSecretCredential usa os valores Tenant Id, Client Id e Client Secret do aplicativo Microsoft Entra ID.
   • O authProvider objeto é definido como um aplicativo de ID do Microsoft Entra que será autenticado em segundo plano e usará permissões somente de aplicativo (como Calendars.ReadWrite) para fazer chamadas à API do Microsoft Graph.

   function ensureGraphForAppOnlyAuth() {
       if (!clientSecretCredential) {
           clientSecretCredential = new ClientSecretCredential(
               process.env.TENANT_ID,
               process.env.CLIENT_ID,
               process.env.CLIENT_SECRET
           );
       }
   
       if (!appGraphClient) {
           const authProvider = new TokenCredentialAuthenticationProvider(
           clientSecretCredential, {
               scopes: [ 'https://graph.microsoft.com/.default' ]
           });
   
           appGraphClient = Client.initWithMiddleware({
               authProvider: authProvider
           });
       }
   }
   

8. Reserve um momento para explorar a createNewMeetingAsync função. Ele posta dados na API de Eventos do Calendário do Microsoft Graph, que cria dinamicamente um evento no calendário de um usuário e retorna os novos detalhes do evento:

   async function createNewMeetingAsync(userId) {
       ensureGraphForAppOnlyAuth();
       let startTime = await startDateTimeAsync();
       let endTime = await endDateTimeAsync();
       const newMeeting = `/users/${userId}/calendar/events`;
   
       const event = {
       subject: 'Customer Service Meeting',
       start: {
           dateTime: startTime,
           timeZone: 'UTC'
       },
       end: {
           dateTime: endTime,
           timeZone: 'UTC'
       },
       isOnlineMeeting: true
       };
   
       const newEvent = await appGraphClient.api(newMeeting).post(event);    
       return newEvent;     
   }
   
   export default createNewMeetingAsync;
   

9. Acesse server/typescript/src/functions/httpTriggerTeamsUrl.ts e explore a função Http Trigger:

   • createNewMeetingAsync é importado de graph.ts. Ele lida com a criação e o acesso a novos detalhes do evento.
   • userId é recuperado de local.settings.json dentro da função gatilho HTTP. Essa recuperação é feita ao acessar a variável do ambiente USER_ID usando process.env.USER_ID.
   • Quando a função é disparada, ela chama createNewMeetingAsync com a ID de usuário definida e retorna os novos detalhes do evento no teamMeetingLink parâmetro.
   • A função acessa a URL de participação na reunião do Teams chamando meeting.onlineMeeting.joinUrl e retorna o valor no corpo da resposta.

   import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions";
   import createNewMeetingAsync from '../../Shared/graph';
   
   let teamsMeetingLink;
   
   export async function httpTriggerTeamsUrl(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
       context.log("Request received");
       const userId = process.env.USER_ID;
       context.log('UserId', userId);
   
       teamsMeetingLink = await createNewMeetingAsync(userId);
       const body = JSON.stringify(teamsMeetingLink);
       const meeting = JSON.parse(body);
       context.log("meeting:", meeting);
   
       return {
           // status: 200, /* Defaults to 200 */
           body: meeting.onlineMeeting.joinUrl
       }    
   };
   
   app.http('httpTriggerTeamsUrl', {
       methods: ['GET'],
       authLevel: 'anonymous',
       handler: httpTriggerTeamsUrl
   });
   
   export default httpTriggerTeamsUrl;
   

10. Use uma janela de terminal para executar npm start na pasta samples/acs-video-to-teams-meeting/server/typescript e rodar a função localmente.

Chamando a Função Azure a partir do React

1. Agora que a httpTriggerTeamsUrl função está pronta para uso, vamos chamá-la do aplicativo React.

2. Expanda a pasta cliente/react .

3. Adicione um arquivo .env à pasta com os seguintes valores:

   REACT_APP_TEAMS_MEETING_FUNCTION=http://localhost:7071/api/httpTriggerTeamsUrl
   REACT_APP_ACS_USER_FUNCTION=http://localhost:7071/api/httpTriggerAcsToken
   

   Esses valores serão passados para o React à medida que forem compilados para que você possa alterá-los facilmente conforme necessário durante o processo de build.

4. Abra o arquivo client/react/App.tsx no VS Code.

5. Localize a teamsMeetingLink variável de estado no componente. Remova o link de equipes codificados e substitua-o por aspas vazias:

   const [teamsMeetingLink, setTeamsMeetingLink] = useState<string>('');
   

6. Localize a função useEffect e altere-a para que se pareça com o exemplo a seguir. Isso manipula a chamada da Função do Azure que você analisou anteriormente, que cria uma reunião do Teams e retorna o link de ingresso na reunião:

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

7. Salve o arquivo antes de continuar.

8. Abra uma janela de terminal, cd na pasta *react, e execute npm start para compilar e executar o aplicativo.

9. Depois que o aplicativo compilar e carregar, você deverá ver a interface do usuário de chamada do ACS exibida e, em seguida, pode chamar para a reunião do Teams que foi criada dinamicamente pelo Microsoft Graph.

10. Interrompa o processo de terminal inserindo Ctrl + C na janela do terminal.

11. Interrompa o projeto do Azure Functions.

Próxima Etapa

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

Observação

Visite a documentação dos Serviços de Comunicação do Azure para saber mais sobre como estender as reuniões do Microsoft Teams de outras maneiras.