Chamada de áudio/vídeo de um aplicativo personalizado em uma reunião do Teams

Artigo
Developer (Intermediário)
59 minutos para concluir

Nível: Intermediário

Neste tutorial, você aprenderá como Serviços de Comunicação do Azure pode ser usado em um aplicativo de React personalizado para permitir que um usuário faça uma chamada de áudio/vídeo em uma reunião do Microsoft Teams. Você aprenderá sobre os diferentes blocos de construção que podem ser usados para tornar esse cenário possível e será fornecido com etapas práticas para orientá-lo pelos diferentes serviços do Microsoft Cloud envolvidos.

O que você criará neste Tutorial

Visão geral da solução de aplicativo

Arquitetura do cenário de

Pré-requisitos

Node LTS – Node LTS é usado para este projeto
git
Visual Studio Code ou outro IDE de sua escolha.
Extensão Azure Functions para VS Code
Azure Functions Core Tools
Assinatura do Azure
Locatário do desenvolvedor do Microsoft 365
Conta do GitHub
Visual Studio se estiver usando a versão C# do tutorial. Visual Studio Code também podem ser usados, se preferir.

As tecnologias usadas neste tutorial incluem

React
Serviços de Comunicação do Azure
Funções do Azure
Microsoft Graph
Microsoft Teams

Create um recurso de Serviços de Comunicação do Azure

57 minutos restantes

Neste exercício, você criará um recurso acs (Serviços de Comunicação do Azure) no portal do Azure.

ACS no portal do Azure

Para começar, execute as seguintes tarefas:

Visite o portal do Azure no navegador e entre.
Digite serviços de comunicação na barra de pesquisa na parte superior da página e selecione Serviços de Comunicação nas opções exibidas.
Selecione Create na barra de ferramentas.
Execute as seguintes tarefas:
- Selecione sua assinatura do Azure.
- Selecione o grupo de recursos a ser usado (crie um novo caso não exista).
- Insira um nome de recurso do ACS. Ele precisa ser um valor exclusivo.
- Selecione um local de dados.
Selecione Examinar + Create seguido por Create.
Depois que o recurso do ACS for criado, navegue até ele e selecione Configurações –> Identidades & Tokens de Acesso do Usuário.
Marque a caixa de seleção VOIP (chamada de voz e vídeo ).
Selecione Gerar.
Copie os valores de tokende Identidade e Acesso do Usuário para um arquivo local. Você precisará dos valores mais adiante neste exercício.
Selecione Configurações –> Chaves e copie a chave primária cadeia de conexão valor para o arquivo local em que você copiou a identidade do usuário e os valores de token.
Para executar o aplicativo, você precisará de um link de reunião do Teams. Acesse o Microsoft Teams, entre com seu locatário de desenvolvedor do Microsoft 365 e selecione a opção Calendário à esquerda.

Dica

Se você não tiver uma conta do Microsoft 365 no momento, poderá se inscrever na assinatura do Programa de Desenvolvedores do Microsoft 365 . Ele é gratuito por 90 dias e será renovado continuamente enquanto você estiver usando-o para atividade de desenvolvimento. Se você tiver uma assinatura do Visual Studio Enterprise ou Professional , ambos os programas incluirão uma assinatura gratuita do desenvolvedor do Microsoft 365, ativa durante toda a vida útil de sua assinatura do Visual Studio.
Selecione uma data/hora no calendário, adicione um título para a reunião, convide um usuário do locatário do desenvolvedor do Microsoft 365 e selecione Salvar.
Selecione a nova reunião que você adicionou no calendário e copie o link de reunião do Teams exibido no mesmo arquivo em que você armazenou a identidade do usuário, o token e o cadeia de conexão do ACS.
Agora que o recurso do ACS está configurado e você tem um link de ingresso na reunião do Teams, vamos colocar o aplicativo React em execução.

Integrar Serviços de Comunicação do Azure Chamada a um aplicativo de React

47 minutos restantes

Neste exercício, você adicionará a composição de chamada de interface do usuário do ACS em um aplicativo React para habilitar a realização de chamadas de áudio/vídeo de um aplicativo personalizado em uma reunião do Microsoft Teams.

ACS no React

Visite o GitHub e entre. Se você ainda não tiver uma conta do GitHub, poderá selecionar a opção Inscrever-se para criar uma.
Visite o Repositório GitHub do Microsoft Cloud.
Selecione a opção Fork para adicionar o repositório à sua organização/conta do GitHub desejada.
Execute o comando a seguir para clonar esse repositório em seu computador. Substitua <YOUR_ORG_NAME> pelo nome da sua organização/conta do GitHub.
```
git clone https://github.com/<YOUR_ORG_NAME>/MicrosoftCloud
```
Abra a pasta de projeto samples/acs-to-teams-meeting no Visual Studio Code.
Expanda a pasta cliente/react .
Abra o arquivo package.json no VS Code e observe que os seguintes pacotes ACS estão incluídos:
```
@azure/communication-common 
@azure/communication-react
```
Marcar duas marcar que você tenha o npm 10 ou superior instalado abrindo uma janela do terminal e executando o seguinte comando:
```
npm --version
```
Dica

Se você não tiver o npm 10 ou superior instalado, poderá atualizar o npm para a versão mais recente executando npm install -g npm.
Abra uma janela de terminal e execute o npm install comando na pasta react para instalar as dependências do aplicativo.
Abra App.tsx e tire um momento para explorar as importações na parte superior do arquivo. Eles lidam com a importação de símbolos de chamada de áudio/vídeo e segurança do ACS que serão usados no aplicativo.
```
import { 
    AzureCommunicationTokenCredential,
    CommunicationUserIdentifier 
} from '@azure/communication-common';
import {  
  CallComposite, 
  fromFlatCommunicationIdentifier, 
  useAzureCommunicationCallAdapter 
} from '@azure/communication-react';
import React, { useState, useMemo, useEffect } from 'react';
import './App.css';
```
Observação

Você verá como o CallComposite componente é usado posteriormente neste exercício. Ele fornece a funcionalidade principal da interface do usuário para Serviços de Comunicação do Azure habilitar a realização de uma chamada de áudio/vídeo do aplicativo em uma reunião do Microsoft Teams.
Localize o App componente e execute as seguintes tarefas:
- Reserve um momento para examinar as useState definições no componente.
- Substitua as aspas userIduseState vazias da função pelo valor de identidade de usuário do ACS copiado no exercício anterior.
- Substitua as aspas tokenuseState vazias da função pelo valor do token ACS copiado no exercício anterior.
- Substitua as aspas teamsMeetingLinkuseState vazias da função pelo valor do link de reunião do Teams copiado no exercício anterior.
```
// Replace '' with the ACS user identity value
const [userId, setUserId] = useState<string>('');

// Replace '' with the ACS token value
const [token, setToken] = useState<string>('');

// Replace '' with the Teams meeting link value
const [teamsMeetingLink, setTeamsMeetingLink] = useState<string>('');
```
Observação

Posteriormente neste tutorial, você verá como recuperar os userIdvalores , tokene teamsMeetingLink dinamicamente.
Reserve um momento para explorar as useMemo funções no App componente.
- A credentialuseMemo função cria uma nova AzureCommunicationTokenCredential instância depois que o token tem um valor.
- A callAdapterArgsuseMemo função retorna um objeto que tem os argumentos usados para fazer uma chamada de áudio/vídeo. Observe que é usado os userIdvalores , credentiale teamsMeetingLink nos argumentos de chamada ACS.
```
const credential = useMemo(() => {
    if (token) {
        return new AzureCommunicationTokenCredential(token)
    }
    return;
}, [token]);

const callAdapterArgs = useMemo(() => {
    if (userId && credential && displayName && teamsMeetingLink) {
        return {
            userId: fromFlatCommunicationIdentifier(userId) as CommunicationUserIdentifier,
            displayName,
            credential,
            locator: { meetingLink: teamsMeetingLink },
        }
    }
    return {};
}, [userId, credential, displayName, teamsMeetingLink]);
```
Observação

useMemo é usado nesse cenário porque queremos que apenas o AzureCommunicationTokenCredential objeto e os args do adaptador de chamada sejam criados uma vez à medida que os parâmetros necessários forem passados. Veja detalhes adicionais sobre useMemo aqui.
Depois que o credentials e callAdapterArgs estiverem prontos, a linha a seguir manipulará a criação de um adaptador de chamada ACS usando o useAzureCommunicationCallAdapter gancho de React fornecido pelo ACS. O callAdapter objeto será usado posteriormente no componente composto de chamada da interface do usuário.
```
const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);
```
Observação

Como useAzureCommunicationCallAdapter é um gancho de React, ele não atribuirá um valor até callAdapter que o callAdapterArgs valor seja válido.

Anteriormente, você atribuiu a identidade do usuário, o token e o link de reunião do Teams aos valores de estado no App componente. Isso funciona bem por enquanto, mas em um exercício posterior você verá como recuperar dinamicamente esses valores. Como você definiu os valores anteriormente, comente o código na função, conforme mostrado a useEffect seguir. Depois de obter o Azure Functions em execução nos próximos exercícios, você revisitará esse código.

useEffect(() => {
    /* Commenting out for now

    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();

    */
}, []);

Localize o código JSX a seguir. Ele usa o CallComposite símbolo que você viu importado para renderizar a interface do usuário usada para fazer uma chamada de áudio/vídeo do aplicativo React em uma reunião do Teams. O callAdapter que você explorou anteriormente é passado para sua adapter propriedade para fornecer os argumentos necessários.
```
if (callAdapter) {
    return (
        <div>
            <h1>Contact Customer Service</h1>
            <div className="wrapper">
                <CallComposite
                    adapter={callAdapter} 
                />
            </div>
        </div>
    );
}
```
Salve o arquivo antes de continuar.
Execute npm start na janela do terminal para executar o aplicativo. Verifique se você executa o comando dentro da pasta react .
Depois que os aplicativos são compilados, você deverá ver uma interface do usuário de chamada exibida. Habilite a seleção do microfone e da câmera e inicie a chamada. Você deve ver que está colocado em uma sala de espera. Se você ingressar na reunião configurada anteriormente no Microsoft Teams, poderá permitir que o convidado insira a reunião.
Pressione Ctrl + C para interromper o aplicativo. Agora que você o executou com êxito, vamos explorar como você pode obter dinamicamente a identidade e o token do usuário do ACS e criar automaticamente uma reunião do Microsoft Teams e retornar a URL de ingresso usando o Microsoft Graph.

Create dinamicamente uma Reunião do Microsoft Teams usando o Microsoft Graph

37 minutos restantes

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 Azure Functions e o Microsoft Graph.

Reunião do Create Teams

Você precisará criar um aplicativo Microsoft Entra ID para autenticação de aplicativo Daemon. Nesta etapa, a autenticação será tratada em segundo plano com credenciais de aplicativo e um aplicativo Microsoft Entra ID usará Permissões de Aplicativo para fazer chamadas do Microsoft API do Graph. O Microsoft Graph será usado para criar dinamicamente uma reunião do Microsoft Teams e retornar a URL de reunião do Teams.
Execute as seguintes etapas para criar um aplicativo Microsoft Entra ID:
1. Vá para portal do Azure e selecione Microsoft Entra ID.
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 Microsoft Entra ID - Multilocatário) e contas pessoais da Microsoft (por exemplo, Skype, Xbox)
  - URI de redirecionamento: deixe isso em branco
4. Depois que o aplicativo for registrado, acesse Permissões de API e selecione + Adicionar uma permissão.
5. Selecione 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. Acesse 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 Application (client) ID valores e Directory (tenant) ID para o mesmo arquivo local que você usou na etapa anterior.

Criando um arquivo de local.settings.json

C#
TypeScript

Abra o samples/acs-to-teams-meeting/server/csharp/GraphACSFunctions.sln no Visual Studio ou abra a pasta GraphACSFunctions no Visual Studio Code.
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 copiados para o arquivo local em um exercício anterior para atualizar os TENANT_IDvalores e CLIENT_IDCLIENT_SECRET .
- Defina USER_ID com a ID de usuário que você gostaria de criar uma Reunião do Microsoft Teams.
Você pode obter a ID de Usuário do portal do Azure.
- Faça logon usando sua conta de administrador de locatário do desenvolvedor do Microsoft 365.
- Selecione Microsoft Entra ID
- Navegue até a guia Usuários na barra lateral.
- Pesquisa 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 Object ID valor e use-o para o USER_ID valor 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.

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

<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" />

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 de Azure Functions. É um singleton e pode ser injetado em outras classes.
Você pode fazer chamadas do Microsoft API do Graph com permissões somente de aplicativo (como Calendars.ReadWrite) passando um ClientSecretCredential valor para o GraphServiceClient construtor. O ClientSecretCredential usa os Tenant Idvalores e Client IdClient Secret do aplicativo Microsoft Entra ID.

Abra Serviços/GraphService.cs.

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

Abra TeamsMeetingFunctions.cs e tire um momento para examinar seu construtor. O GraphServiceClient que você examinou anteriormente é injetado e atribuído ao _graphService campo.
```
private readonly IGraphService _graphService;

public TeamsMeetingFunction(IGraphService graphService) => _graphService = graphService;
```

Localize o Run método :

[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 do 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.

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 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 o Azure Functions Core Tools instalado em seu computador.

Abra a pasta de projeto samples/acs-to-teams-meeting/server/typescript em Visual Studio Code.
Create 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 copiados para o arquivo local em um exercício anterior para atualizar os TENANT_IDvalores e CLIENT_IDCLIENT_SECRET .
- Defina USER_ID com a ID de usuário que você gostaria de criar uma Reunião do Microsoft Teams.
Você pode obter a ID de Usuário do portal do Azure.
- Faça logon usando sua conta de administrador de locatário do desenvolvedor do Microsoft 365.
- Selecione Microsoft Entra ID,
- Navegue até a guia Usuários na barra lateral.
- Pesquisa 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 Object ID valor e use-o para o USER_ID valor 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.
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
```
Abra uma janela de terminal na pasta typescript e execute o npm install comando para instalar as dependências do aplicativo.
Abra Compartilhado/graph.ts e tire 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 posteriormente 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.
Tire um momento para examinar clientSecretCredential e appGraphClient. Eles serão usados posteriormente no processo de autenticação e ao chamar o Microsoft API do Graph:
```
let clientSecretCredential;
let appGraphClient;
```

Localize a ensureGraphForAppOnlyAuth função:

ClientSecretCredentialusa os Tenant Idvalores e Client IdClient Secret do aplicativo Microsoft Entra ID.
O authProvider objeto é definido como um aplicativo Microsoft Entra ID que será autenticado em segundo plano e usará permissões somente de aplicativo (como Calendars.ReadWrite) para fazer chamadas do Microsoft API do 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
        });
    }
}

Reserve um momento para explorar a createNewMeetingAsync função. Ele posta dados na API de Eventos de 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;

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

createNewMeetingAsync é importado de graph.ts. Ele lida com a criação e recuperação de novos detalhes do evento.
userId é recuperado de local.settings.json dentro da função Gatilho Http. Essa recuperação é feita acessando a USER_ID variável de ambiente 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 ingresso 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;

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

Chamando a Função do Azure de React

Agora que a httpTriggerTeamsUrl função está pronta para uso, vamos chamá-la do aplicativo React.
Expanda a pasta client/react .
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 React à medida que forem compilados para que você possa alterá-los facilmente conforme necessário durante o processo de build.
Abra o arquivo client/react/App.tsx no VS Code.
Localize a teamsMeetingLink variável de estado no componente . Remova o link de equipes codificadas e substitua-o por aspas vazias:
```
const [teamsMeetingLink, setTeamsMeetingLink] = useState<string>('');
```

Localize a useEffect função e altere-a para ter a aparência a seguir. Isso lida com a chamada da Função do Azure que você examinou anteriormente, o 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();

}, []);

Salve o arquivo antes de continuar.
Abra uma janela de terminal na cd pasta *react e execute npm start para compilar e executar o aplicativo.
Depois que o aplicativo for compilado e carregado, você deverá ver a interface do usuário de chamada do ACS exibida e, em seguida, poderá chamar a reunião do Teams que foi criada dinamicamente pelo Microsoft Graph.
Interrompa o processo de terminal inserindo Ctrl + C na janela do terminal.
Interrompa o projeto Azure Functions.

Observação

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

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

27 minutos restantes

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

Create identidade e token do ACS

C#
TypeScript

Abra local.settings.json e atualize o ACS_CONNECTION_STRING valor com o ACS cadeia de conexão salvo em um exercício anterior.

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

A AddSingleton() chamada cria um CommunicationIdentityClient objeto usando o ACS_CONNECTION_STRING valor de local.settings.json.
Abra ACSTokenFunction.cs e localize o construtor e as definições de campo.
- Um campo chamado Scopes é definido 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;
}
```

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

Ele define uma função chamada de HttpTriggerAcsToken que pode ser chamada com uma solicitação HTTP GET.
Um novo usuário do 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 .
A ID de usuário e o token são retornados da função como um objeto JSON.

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

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 o Azure Functions Core Tools instalado em seu computador.
Agora que os Azure Functions estão em execução localmente, o cliente precisa ser capaz de chamá-los para obter a identidade do usuário do ACS e os valores de token.
Abra o arquivo samples/acs-to-teams-meeting/client/react/App.tsx no editor.
Localize as userId variáveis de estado e token no componente . Remova os valores codificados e substitua-os por aspas vazias:
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

Localize a useEffect função e altere-a para ter a seguinte aparência para habilitar a chamada à 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();

}, []);

Salve o arquivo antes de continuar.
Abra uma janela de terminal e execute npm start na react pasta . Depois de compilar e carregar, você verá a interface do usuário de chamada do ACS exibida e poderá chamar a reunião do Teams que foi criada dinamicamente pelo Microsoft Graph.
Pare o aplicativo React pressionando Ctrl + C na janela do terminal.
Interrompa o projeto Azure Functions.
Confirme as alterações do git e envie-as por push para o repositório GitHub usando Visual Studio Code:
- Selecione o ícone Controle do Código-Fonte (3º abaixo na barra de ferramentas Visual Studio Code).
- Insira um mensagem do commit e selecione Confirmar.
- Selecione Sincronizar Alterações.

Abra local.settings.json e atualize o ACS_CONNECTION_STRING valor com o ACS cadeia de conexão salvo em um exercício anterior.

Abra server/typescript/src/functions/httpTriggerAcsToken.ts em Visual Studio Code. Ele 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;

A função executa as seguintes tarefas:
- Importações que serão usadas CommunicationIdentityClient para criar a identidade do usuário e o token.
```
import { CommunicationIdentityClient } from '@azure/communication-identity';
```
- Obtém o cadeia de conexão ACS de uma variável de ambiente chamada ACS_CONNECTION_STRING.
```
const connectionString = process.env.ACS_CONNECTION_STRING;
```
Observação

Esse é o valor 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 do ACS e obtém um token IP de Voice Over.
```
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 }
};
```
Vá para a pasta server/typescript em uma janela do terminal e execute npm start.
Agora que os Azure Functions estão em execução localmente, o cliente precisa ser capaz de chamá-los para obter a identidade do usuário do ACS e os valores de token.
Abra o arquivo client/react/App.tsx no editor.
Localize as userId variáveis de estado e token no componente . Remova os valores codificados e substitua-os por aspas vazias:
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

Localize a useEffect função e altere-a para ter a seguinte aparência para habilitar a chamada à 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();

}, []);

Salve o arquivo antes de continuar.
Abra um terminal separado e execute npm start na pasta react . Depois de compilar e carregar, você verá a interface do usuário de chamada do ACS exibida e poderá chamar a reunião do Teams que foi criada dinamicamente pelo Microsoft Graph.
Interrompa os dois processos de terminal (React e Azure Functions) selecionando Ctrl + C.
Confirme as alterações do git e envie-as por push para o repositório GitHub usando Visual Studio Code:
- Selecione o ícone Controle do Código-Fonte (3º abaixo na barra de ferramentas Visual Studio Code).
- Insira um mensagem do commit e selecione Confirmar.
- Selecione Sincronizar Alterações.

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

17 minutos restantes

Importante

Além dos pré-requisitos listados para este tutorial, você também precisará instalar as ferramentas a seguir em seu computador para concluir este exercício.

CLI do Azure
Se você estiver usando o VS Code, instale a extensão Azure Functions

Neste exercício, você aprenderá a implantar as funções do Microsoft Graph e do ACS discutidas em exercícios anteriores para Azure Functions. Você também criará uma imagem de contêiner e a implantará nos Aplicativos de Contêiner do Azure.

Aplicativos de Contêiner do Azure

Observação

Esta seção usa o Visual Studio para publicar as funções C# no Azure. Se preferir usar Visual Studio Code, siga as instruções no Create uma função C# no Azure usando Visual Studio Code início rápido.

Abra o samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln projeto no Visual Studio.
Clique com o botão direito do mouse no GraphACSFunctions projeto e selecione Publicar.
Selecione Azure na seção de destino e clique em Avançar.
Selecione Aplicativo de Funções do Azure (Windows)e clique em Avançar.
Selecione sua assinatura e selecione + Create Novo.
Insira as seguintes informações:
- Nome da função: um nome global exclusivo é necessário. Exemplo: acsFunctions<YOUR_LAST_NAME>.
- Assinatura: selecione sua assinatura.
- Grupo de Recursos: selecione um grupo de recursos que você criou anteriormente neste tutorial ou também pode criar um novo.
- Plano de Hospedagem: Plano de consumo.
- Local: selecione a região na qual você gostaria de implantar.
- Armazenamento do Azure: Create um novo. (Você também pode selecionar uma conta de armazenamento existente.)
- Insights do Azure: Create um novo. (Você também pode selecionar uma conta de armazenamento existente.)
Observação

Um nome global exclusivo é necessário. Você pode tornar o nome mais exclusivo adicionando um número ou seu sobrenome ao final do nome.
Depois que o Aplicativo de Funções do Azure for criado, você verá uma tela de confirmação. Verifique se a opção Executar do pacote está selecionada e selecione Concluir.
Selecione Publicar para implantar a função no Azure.
Depois que a função for implantada no Azure, vá para o portal do Azure e selecione o Aplicativo de Funções que você criou.
Copie a URL da função implantada. Você usará o valor posteriormente neste exercício.
Selecione Configurações –> Configuração no menu à esquerda.
Selecione + Botão Nova configuração de aplicativo e adicione as seguintes chaves e valores nas configurações do aplicativo. Você pode recuperar esses valores de local.settings.json no GraphACSFunctions projeto.
```
# Retrieve these values from local.settings.json
TENANT_ID: <YOUR_VALUE>
CLIENT_ID: <YOUR_VALUE>
CLIENT_SECRET: <YOUR_VALUE>
USER_ID: <YOUR_VALUE>
ACS_CONNECTION_STRING: <YOUR_VALUE>
```
Selecione o botão Salvar para salvar as configurações.
Por fim, você precisa habilitar o CORS (Compartilhamento de Recursos entre Origens) para o aplicativo de funções para tornar as APIs do aplicativo de funções acessíveis de fora do seu domínio. Selecione Configurações –> CORS no menu à esquerda.
Insira * (acessível de qualquer domínio) na caixa de texto Origens Permitidas e selecione o botão Salvar .

Vamos começar usando o VS Code para implantar o código de funções em Azure Functions.

Abra a pasta de projeto server/typescript .
Você já deve ter executado npm install e ver uma pasta node_modules na raiz do projeto. Caso contrário, abra uma janela de comando e execute npm install para instalar as dependências.
Abra o pallet de comando do VS Code (Shift+Cmd+P no Mac | Shift+Ctrl+P no Windows) e selecione Azure Functions: Create Aplicativo de Funções no Azure.

Observação

Se você não vir essa opção, verifique se tem a extensão Azure Functions instalada no VS Code.
Você será solicitado a inserir as seguintes informações:
- Seu nome da assinatura do Azure.
- O nome da função: acsFunctions<YOUR_LAST_NAME>.
Observação

Um nome global exclusivo é necessário. Você pode tornar o nome mais exclusivo adicionando um número ou seu sobrenome ao final do nome.
- A pilha de runtime – selecione a versão mais recente doNode.js LTS .
- A região (selecione qualquer região desejada).
Depois que o Aplicativo de Funções do Azure for criado, você verá uma mensagem sobre como exibir os detalhes.
Voltar ao pallet de comando no VS Code e selecione Azure Functions: Implantar no Aplicativo de Funções. Você será solicitado a selecionar sua assinatura e o nome do Aplicativo de Funções criado anteriormente.
Depois que a função for implantada no Azure, faça o seguinte:
- Selecione a extensão do Azure no VS Code (clique no ícone do Azure na barra lateral).
- Expanda a assinatura.
- Expanda seu Aplicativo de Funções.
- Clique com o botão direito do mouse na função e selecione Procurar Site. Verifique se o aplicativo de funções está funcionando corretamente antes de continuar.
Copie o domínio do Azure Function para um arquivo local. Você usará o valor posteriormente neste exercício.

Implantar nos Aplicativos de Contêiner do Azure

A primeira tarefa que você executará é criar um novo recurso de Registro de Contêiner do Azure (ACR). Depois que o registro for criado, você criará uma imagem e a enviará por push para o Registro.
Abra uma janela de comando e execute o seguinte comando para fazer logon em sua assinatura do Azure:
```
az login
```

Adicione as variáveis de shell a seguir substituindo seus valores pelos espaços reservados conforme apropriado. Adicione seu <GITHUB_USERNAME> como um valor minúsculo e substitua seu domínio Azure Functions pelo <valor AZURE_FUNCTIONS_DOMAIN> (inclua o https:// no valor de domínio).

Bash
PowerShell

GITHUB_USERNAME="<YOUR_GITHUB_USERNAME>"
RESOURCE_GROUP="<YOUR_RESOURCE_GROUP_NAME>"
ACR_NAME="aca"$GITHUB_USERNAME
AZURE_FUNCTIONS_DOMAIN="<YOUR_AZURE_FUNCTIONS_URL>"

$GITHUB_USERNAME="<YOUR_GITHUB_USERNAME>"
$RESOURCE_GROUP="<YOUR_RESOURCE_GROUP_NAME>"
$ACR_NAME="aca"+$GITHUB_USERNAME
$AZURE_FUNCTIONS_DOMAIN="<YOUR_AZURE_FUNCTIONS_URL>"

Create um novo recurso de Registro de Contêiner do Azure executando o seguinte comando:

Bash
PowerShell

az acr create \
    --resource-group $RESOURCE_GROUP \
    --name $ACR_NAME \
    --sku Basic \
    --admin-enabled true

az acr create `
    --resource-group $RESOURCE_GROUP `
    --name $ACR_NAME `
    --sku Basic `
    --admin-enabled true

Abra o arquivo client/react/Dockerfile no editor e observe que as seguintes tarefas são executadas:
- O aplicativo React é criado e atribuído ao estágio de build.
- O servidor nginx é configurado e a saída do estágio de build é copiada para a imagem do servidor nginx.

Crie a imagem de contêiner no Azure executando o comando a seguir na raiz da pasta client/react . Substitua <YOUR_FUNCTIONS_DOMAIN> pelo domínio Azure Functions que você copiou para um arquivo local anteriormente neste exercício.

Bash
PowerShell

az acr build --registry $ACR_NAME --image acs-to-teams-meeting \
  --build-arg REACT_APP_ACS_USER_FUNCTION=$AZURE_FUNCTIONS_DOMAIN/api/httpTriggerAcsToken \
  --build-arg REACT_APP_TEAMS_MEETING_FUNCTION=$AZURE_FUNCTIONS_DOMAIN/api/httpTriggerTeamsUrl .

az acr build --registry $ACR_NAME --image acs-to-teams-meeting `
  --build-arg REACT_APP_ACS_USER_FUNCTION=+$AZURE_FUNCTIONS_DOMAIN+/api/httpTriggerAcsToken `
  --build-arg REACT_APP_TEAMS_MEETING_FUNCTION=+$AZURE_FUNCTIONS_DOMAIN+/api/httpTriggerTeamsUrl .

Execute o comando a seguir para listar as imagens no registro. Você deverá ver sua nova imagem listada.
```
az acr repository list --name $ACR_NAME --output table
```
Agora que a imagem foi implantada, você precisa criar um Aplicativo de Contêiner do Azure que possa executar o contêiner.
Visite o portal do Azure no navegador e entre.
Digite aplicativos de contêiner na barra de pesquisa superior e selecione Aplicativos de Contêiner nas opções que aparecem.
Selecione Create na barra de ferramentas.

Observação

Embora você esteja usando o portal do Azure, um Aplicativo de Contêiner também pode ser criado usando a CLI do Azure. Para obter mais informações, confira Início Rápido: implante seu primeiro aplicativo de contêiner. Você verá um exemplo de como a CLI do Azure também pode ser usada no final deste exercício.
Execute as seguintes tarefas:
- Selecione sua assinatura.
- Selecione o grupo de recursos a ser usado (crie um novo, se necessário). Você pode usar o mesmo grupo de recursos usado para o recurso ACS, se desejar. Copie o nome do grupo de recursos para o mesmo arquivo local em que você armazenou seu domínio Azure Functions.
- Insira um nome de aplicativo contêiner de acs-to-teams-meeting.
- Selecione uma região.
- Selecione Create novo na seção Ambiente de Aplicativos de Contêiner.
- Insira um nome de ambiente de acs-to-teams-meeting-env.
- Selecione o botão Criar.
- Selecione Avançar: Configurações do aplicativo >.
Insira os seguintes valores na tela Create Aplicativo de Contêiner:
- Desmarque a caixa de seleção Usar imagem de início rápido .
- Nome: acs-to-teams-meeting
- Fonte da imagem: Registro de Contêiner do Azure
- Registro: <YOUR_ACR_REGISTRY_NAME.azurecr.io>
- Imagem: acs-to-teams-meeting
- Marca de imagem: mais recente
- CPU e memória: 0,25 núcleos de CPU, memória -.5 Gi
Na seção Configurações de entrada do aplicativo , faça o seguinte:
- Selecione a caixa de seleção Habilitado.
- Selecione o botão de opção Aceitar tráfego em qualquer lugar .
Isso criará um ponto de entrada (entrada) para seu aplicativo React e permitirá que ele seja chamado de qualquer lugar. Os Aplicativos de Contêiner do Azure redirecionam todo o tráfego para HTTPS.
- Porta de destino: 80

Selecione Examinar + criar. Depois que a validação for aprovada, selecione o botão Create.

Se você receber um erro, pode ser devido ao ambiente de aplicativos de contêiner ficar inativo por muito tempo. A solução mais simples será passar pelo processo de criação do aplicativo de contêiner novamente. Como alternativa, você pode executar o seguinte comando para criar o aplicativo de contêiner usando a CLI do Azure:

Bash
PowerShell

az containerapp create --name acs-to-teams-meeting --resource-group $RESOURCE_GROUP \
    --location westus --image acs-to-teams-meeting \
    --cpu 0.25 --memory 0.5 --environment-name acs-to-teams-meeting-env \
    --ingress-enabled true --ingress-target-port 80 --ingress-type External \
    --ingress-protocol Https --ingress-traffic Anywhere

az containerapp create --name acs-to-teams-meeting --resource-group $RESOURCE_GROUP `
    --location westus --image acs-to-teams-meeting `
    --cpu 0.25 --memory 0.5 --environment-name acs-to-teams-meeting-env `
    --ingress-enabled true --ingress-target-port 80 --ingress-type External `
    --ingress-protocol Https --ingress-traffic Anywhere

Depois que a implantação do aplicativo de contêiner for concluída, navegue até ela no portal do Azure e selecione a URL do Aplicativo na tela Visão geral para exibir o aplicativo em execução no contêiner nginx!

Share via

Chamada de áudio/vídeo de um aplicativo personalizado em uma reunião do Teams

O que você criará neste Tutorial

Visão geral da solução de aplicativo

Pré-requisitos

As tecnologias usadas neste tutorial incluem

Create um recurso de Serviços de Comunicação do Azure

Integrar Serviços de Comunicação do Azure Chamada a um aplicativo de React

Create dinamicamente uma Reunião do Microsoft Teams usando o Microsoft Graph

Criando um arquivo de local.settings.json

Chamando a Função do Azure de React

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

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

Implantar no Azure Functions

Implantar nos Aplicativos de Contêiner do Azure

Parabéns!

Você concluiu este tutorial

Comentários