Habilite o compartilhamento de arquivos usando a Biblioteca da Interface do Usuário no Chat de Interoperabilidade do Teams - An Azure Communication Services tutorial

Artigo
07/16/2024

Em um Chat de Interoperabilidade do Teams ("Chat de Interoperabilidade"), podemos habilitar o compartilhamento de arquivos entre os usuários finais dos Serviços de Comunicação do Azure e os usuários do Teams. Observe que o Chat de Interoperabilidade é diferente do Chat dos Serviços de Comunicação do Azure. Se você quiser habilitar o compartilhamento de arquivos em um Chat dos Serviços de Comunicação do Azure, consulte Adicionar compartilhamento de arquivos com a Biblioteca da Interface do Usuário no Chat dos Serviços de Comunicação do Azure. Atualmente, o usuário final dos Serviços de Comunicação do Azure só pode receber anexos de arquivo do usuário do Teams. Consulte Casos de uso da biblioteca da interface do usuário para saber mais.

Importante

O recurso de compartilhamento de arquivos vem com o CallWithChat Composite sem configurações adicionais.

Transferir código

Acesse o código deste tutorial no GitHub.

Pré-requisitos

Uma conta do Azure com uma subscrição ativa. Para obter detalhes, consulte Criar uma conta gratuitamente.
Visual Studio Code numa das plataformas suportadas.
Node.js, Ative LTS e versões Maintenance LTS. Use o node --version comando para verificar sua versão.
Um recurso ativo dos Serviços de Comunicação e uma cadeia de conexão. Crie um recurso de Serviços de Comunicação.
Usando a biblioteca da interface do usuário versão 1.17.0 ou a mais recente.
Tenha uma reunião do Teams criada e o link da reunião pronto.
Esteja familiarizado com o funcionamento do ChatWithChat Composto .

Fundo

Em primeiro lugar, precisamos entender que o Teams Interop Chat tem que fazer parte de uma reunião do Teams atualmente. Quando o usuário do Teams cria uma reunião online, um thread de bate-papo é criado e associado à reunião. Para permitir que o usuário final dos Serviços de Comunicação do Azure ingresse no chat e comece a enviar/receber mensagens, um participante da reunião (um usuário do Teams) precisaria admiti-los à chamada primeiro. Caso contrário, eles não terão acesso ao chat.

Depois que o usuário final dos Serviços de Comunicação do Azure for admitido na chamada, ele poderá começar a conversar com outros participantes na chamada. Neste tutorial, vamos verificar como a imagem embutida funciona no bate-papo de interoperabilidade.

Descrição geral

Semelhante a como estamos adicionando suporte a imagens embutidas à biblioteca da interface do usuário, precisamos de um CallWithChat composto criado. Vamos seguir o exemplo básico da página do livro de histórias para criar um ChatWithChat Composite.

A partir do código de exemplo, ele precisa de CallWithChatExampleProps, que é definido como o seguinte trecho de código:

export type CallWithChatExampleProps = {
  // Props needed for the construction of the CallWithChatAdapter
  userId: CommunicationUserIdentifier;
  token: string;
  displayName: string;
  endpointUrl: string;
  locator: TeamsMeetingLinkLocator | TeamsMeetingIdLocator | CallAndChatLocator;

  // Props to customize the CallWithChatComposite experience
  fluentTheme?: PartialTheme | Theme;
  compositeOptions?: CallWithChatCompositeOptions;
  callInvitationURL?: string;
};

Para poder iniciar o Composite para bate-papo de reunião, precisamos passar TeamsMeetingLinkLocator ou TeamsMeetingIdLocator, que se parece com isto:

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

{ "meetingId": "<TEAMS_MEETING_ID>", "passcode": "<TEAMS_MEETING_PASSCODE>"}

Isso é tudo o que você precisa - e não há outra configuração necessária para permitir que o usuário final dos Serviços de Comunicação do Azure receba anexos de arquivo do usuário do Teams!

Permissões

Quando o arquivo é compartilhado de um cliente do Teams, o usuário do Teams tem opções para definir as permissões de arquivo como:

"Qualquer um"
"Pessoas na sua organização"
"Pessoas atualmente neste bate-papo"
"Pessoas com acesso existente"
"Pessoas que você escolhe"

Especificamente, a biblioteca da interface do usuário atualmente suporta apenas "Qualquer pessoa" e "Pessoas que você escolher" (com endereço de e-mail) e todas as outras permissões não são suportadas. Se o usuário do Teams enviou um arquivo com permissões sem suporte, o usuário final dos Serviços de Comunicação do Azure poderá ser solicitado a uma página de logon ou ter acesso negado quando clicar no anexo do arquivo no thread de chat.

Captura de tela de um cliente do Teams listando permissões de arquivo.

Além disso, o administrador locatário do usuário do Teams pode impor restrições ao compartilhamento de arquivos, incluindo a desativação de algumas permissões de arquivos ou a desativação da opção de compartilhamento de arquivos em conjunto.

Executar o código

Vamos executar npm run start , então você deve ser capaz de acessar nosso aplicativo de exemplo através localhost:3000 da seguinte captura de tela:

Captura de ecrã de uma biblioteca de IU dos Serviços de Comunicação do Azure.

Basta clicar no botão de bate-papo localizado na parte inferior para revelar o painel de bate-papo e agora se o usuário do Teams enviar alguns arquivos, você verá algo como a seguinte captura de tela:

Captura de ecrã de um cliente do Teams a enviar um ficheiro.