Incorporar chat numa aplicação personalizada do Microsoft Teams

Este artigo descreve como criar um aplicativo personalizado do Microsoft Teams para interagir com uma instância dos Serviços de Comunicação do Azure. Este aplicativo de bate-papo permite funções de intertrabalho entre os dois sistemas, mantendo ambientes de back-end separados e configurações de identidade.

Casos de utilização

  • Suporte no ponto de venda e pós-venda

    Os sites de consumidores podem fornecer um acesso rápido a um canal de bate-papo, seja para bots automatizados ou associados de vendas ou ambos. Recomendamos o uso de uma instância isolada do Serviço de Comunicação do Azure.

    Da mesma forma, o suporte e a coordenação pós-venda se beneficiam da capacidade de usar o bate-papo de forma independente enquanto incorporados ao Teams.

  • Serviços de consulta remota seguros

    Para aplicativos médicos de telepresença, serviços bancários e outros cenários sensíveis à privacidade, a criptografia e a segurança fornecidas pelos Serviços de Comunicação do Azure permitem esses casos de uso sem a necessidade de os participantes remotos usarem o Teams. Você pode marcar a solução conforme necessário e os funcionários da sua organização podem acessar as consultas a partir da instalação existente do Teams.

  • Cenários de requisitos de separação de dados

    Para algumas áreas, talvez seja necessário garantir a quarentena geográfica de dados em jurisdições específicas. A área de armazenamento de dados legais de uma empresa pode ser diferente do local necessário para armazenar os dados do cliente. Você pode configurar esse cenário usando o local de armazenamento dos Serviços de Comunicação do Azure na criação da instância. O local pode ser diferente do local de armazenamento do Teams.

    Captura de tela da seleção de um local de armazenamento dos Serviços de Comunicação do Azure na criação da instância.

Arquitetura

O diagrama a seguir mostra a visão geral do aplicativo de bate-papo de extensibilidade do Teams.

Diagrama de arquitetura do aplicativo de chat de extensibilidade do Azure Communications Services Teams.

  1. Uma instância dos Serviços de Comunicação do Azure habilita a solução.

  2. A API da Web fornece função do lado do servidor para a solução, para aplicativos internos e externos.

  3. Os clientes da Contoso usam aplicativos cliente (Web ou móveis) para interagir com os funcionários. Este exemplo mostra um aplicativo Web usado para hospedar o conteúdo.

  4. Os funcionários da Contoso usam o aplicativo Teams em seu cliente do Teams. O cliente do Teams é um aplicativo Web hospedado em um aplicativo personalizado do Teams e implantado no Teams por meio de um iframe dentro do cliente do Teams.

    A instância dos Serviços de Comunicação do Azure não está diretamente conectada ao ambiente do Teams. O ambiente dos Serviços de Comunicação é apresentado por meio do aplicativo personalizado do Teams.

    O aplicativo personalizado do Teams ganha o logon único (SSO) do Teams, que fornece o ID de usuário do Teams para o aplicativo. O aplicativo de mensagens personalizado usa o ID de usuário do Teams para mapear para o ID de usuário do serviço de comunicação.

Crie a solução

Você precisa dos seguintes componentes para criar o aplicativo de bate-papo.

  1. Uma instância dos Serviços de Comunicação do Azure.

  2. Um servidor de API para hospedar os componentes de back-end. O servidor de API fornece a lógica de back-end necessária. Casos de uso comuns incluem autenticação de usuário e APIs de gerenciamento de threads de chat.

  3. Uma instância de aplicativo Web para hospedar os componentes de front-end. Os componentes de frontend para a Web voltada para o cliente e, potencialmente, para conduzir o layout personalizado do aplicativo do Teams por meio do iframe incorporado.

  4. Um aplicativo personalizado do Teams configurou o Teams para habilitar a instalação desse aplicativo. Para fornecer a experiência aos funcionários, configure o aplicativo personalizado do Teams para usar conteúdo da Web orientado a partir de um aplicativo Web ou por meio de uma implantação de aplicativo personalizado do Teams.

Projetar a aplicação

Você pode projetar o site de portal voltado para o cliente conforme necessário para atender às suas necessidades de negócios. Um simples aplicativo web de chamada / bate-papo geralmente requer dois recursos:

  • Autenticação (inscrição / início de sessão)
  • Interface de usuário principal de bate-papo (e chamada)

O logon único (SSO) do Teams fornece autenticação no aplicativo personalizado do Teams voltado para funcionários. Nesse caso, o funcionário precisa ver uma lista adicional de clientes antes da experiência principal de bate-papo (e chamada).

Algumas outras considerações para o trabalho de design dentro das equipes incluem diretrizes para garantir uma experiência coesa, inclusiva e acessível. Para obter mais informações, consulte Projetando seu aplicativo Microsoft Teams.

Implementar o aplicativo personalizado do Teams

Comece sua jornada dedicada em Comece > Crie seu primeiro aplicativo do Teams.

Para obter o kit de ferramentas de desenvolvimento para Visual Studio Code, uma referência rápida a materiais de aprendizagem, exemplos de código e modelos de projeto, consulte Visão geral do Microsoft Teams Toolkit.

No Microsoft Teams Toolkit, selecione Nova guia Projeto>.

Captura de tela do Microsoft Teams Toolkit quando você seleciona Novo Projeto e, em seguida, Guia.

Um aplicativo Tab fornece a estrutura mais simples, que você pode refinar ainda mais para usar o React with Fluent UI.

Captura de tela do Microsoft Teams Toolkit quando você seleciona Recursos do aplicativo usando uma guia e, em seguida, Reaja com a interface do usuário fluente.

Você pode criar rapidamente um esqueleto de aplicativo e experimentá-lo localmente no Teams usando uma conta de desenvolvedor do Microsoft 365. Use o recurso React with Fluent UI e siga a instalação básica no Visual Studio Code.

Captura de tela do Microsoft Teams Toolkit parabéns quando seu aplicativo começa a ser executado.

Este projeto tem uma implementação de API modelada por meio do Azure Functions. Neste ponto, você precisa criar a implementação completa de back-end para uma plataforma de chat. A opção Guia Básico fornece a estrutura de front-end do aplicativo Web. Ele também habilita o SSO para o aplicativo, conforme descrito em Desenvolver experiência de logon único no Teams | GitHub.

Outras maneiras de implementar o aplicativo personalizado do Teams

Você pode criar um aplicativo Tab que vincula cada uma das guias a um aplicativo externo usando o arquivo do aplicativo manifest.json Teams. Para obter mais informações, consulte Exemplo de manifesto do aplicativo.

Você também pode usar um aplicativo Microsoft Entra existente, conforme descrito em Usar aplicativo Microsoft Entra existente no projeto TeamsFx.

Para obter mais informações sobre os recursos do Tabs, consulte Configurar o recurso Tab no aplicativo Teams | GitHub.

Crie o aplicativo de bate-papo

Para criar um aplicativo de bate-papo completo, você precisa de algumas funções importantes.

Você precisa de uma instância dos Serviços de Comunicação do Azure para hospedar os chats e fornecer a função para enviar e receber mensagens (e outros tipos de comunicação). Dentro desse sistema, cada ID de comunicação representa um usuário, fornecido pelo serviço de API para o aplicativo. O usuário recebe uma ID de comunicação assim que o fluxo de autenticação do usuário é concluído.

Fluxo de autenticação

Os pontos de extremidade dos Serviços de Comunicação do Azure exigem autenticação, fornecida na forma de um token de portador. O serviço de autenticação fornece um token por ID de comunicação.

Dependendo dos seus requisitos, talvez seja necessário fornecer um meio para que os usuários se inscrevam, façam logon ou resolvam alguma outra forma de link de autenticação única.

Você precisa criar identidades e emitir tokens de autenticação dentro de um serviço de back-end para segurança. Para obter mais informações, consulte Guia de início rápido: criar e gerenciar tokens de acesso.

Interface do usuário do bate-papo

O método mais rápido para fornecer um painel de chat com entrada de mensagem para a interface do usuário da Web é usar os compostos da Biblioteca da Interface do Usuário da Web React, do pacote communication-react do Azure. A documentação do Storybook explica a integração destes e também o uso direto dentro do ambiente do Storybook.

Captura de ecrã de uma aplicação de chat Microsoft Teams de exemplo em ação.

Bate-papo composto com a lista de participantes

O componente composto de chat requer o identificador de usuário e o token do fluxo de autenticação, o ponto de extremidade dos Serviços de Comunicação e o ID de thread ao qual ele deve ser anexado.

Os IDs de thread representam conversas entre grupos de identificadores de comunicação. Antes de uma conversa, você precisa criar o thread e adicionar usuários a esse thread. Você pode automatizar esse procedimento ou fornecer a função de uma guia no aplicativo Teams para os funcionários configurarem.

Bots de bate-papo

Você pode adicionar bots ao seu aplicativo de bate-papo. Para obter mais informações, consulte Guia de início rápido: adicionar um bot ao seu aplicativo de bate-papo.

Distribuir o aplicativo Teams

Para usar um aplicativo do Teams em uma organização, o administrador do Teams deve aprová-lo. Você pode criar um aplicativo personalizado do Teams e instalar o pacote do aplicativo por meio do centro de administração do Teams. Para obter mais informações, consulte Gerenciar aplicativos personalizados no centro de administração do Microsoft Teams.

Próximos passos

  • Para obter mais informações sobre como criar um aplicativo com interoperabilidade do Teams, consulte Contact center.
  • Last updated on