Integração com o Microsoft Teams

7 min de leitura

Integração com o Microsoft Teams

Devido às recentes atualizações nos serviços da Microsoft Azure, o processo de criação e integração de Bots pelo Portal do Azure passou por diversas modificações, tornando necessário o desenvolvimento de uma nova documentação, atualizada, para a integração com o Microsoft Teams. O objetivo desta documentação é orientar os usuários na criação, implementação e integração do Chatbot no ambiente corporativo, Microsoft Azure e Teams, da Raízen.

As informações e orientações contidas nesta documentação estão sujeitas a alterações conforme futuras atualizações das plataformas e ferramentas da Microsoft.

Etapas para integração do Chatbot no Teams:

Comunicação com a Weni;
Registro do aplicativo no Portal da Azure;
Criação do Bot no Portal do Azure;
Habilitar o Canal de Atendimento do Teams na Weni;
Criação da Aplicação na AppStudio;
Publicar a Aplicação no Teams.

1. Comunicação com a Weni

No Microsoft Teams, a comunicação do Chatbot com a Weni ocorre pela URL de callback. Essa URL deve ser pega assim que a integração do canal do Teams na plataforma Weni ocorrer.

2. Registro do aplicativo no Portal do Azure

A criação do registro do aplicativo no Portal do Azure deve ser realizada pelo cliente, é recomendado que o usuário tenha permissões administrativas para criar o Bot. No Portal do Azure, pesquise por Registros de aplicativo:

${"base64":" ","img":{"width":1913,"height":535,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":84905,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_1.png"}}$

Na seção de Registros de aplicativo, selecione Novo Registro:

${"base64":" ","img":{"width":678,"height":559,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":30425,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_2.png"}}$

Na aba de Registrar um aplicativo, insira o Nome do Bot, e escolha a opção:

• Contas em qualquer diretório organizacional (qualquer locatário do Microsoft Entra ID - multilocatário) e contas pessoais da Microsoft (por exemplo, Skype, Xbox).

Não é necessário inserir informações no campo de URI de direcionamento (opcional). Após esses passos, realize o registro do aplicativo em ""Registrar"":

${"base64":" ","img":{"width":1537,"height":945,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":76738,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_3.png"}}$

Após a criação do aplicativo, acesse o Registro de aplicativo e selecione o aplicativo criado. Em Visão geral, copie o ID do aplicativo (cliente), ele será utilizado para a criação e registro do Bot da Azure.

${"base64":" ","img":{"width":1536,"height":370,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":46417,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_4.png"}}$

Dentro do aplicativo, selecione Certificados e segredos:

${"base64":" ","img":{"width":462,"height":729,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":41693,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_5.png"}}$

Em Certificados e segredos, selecione Novo segredo do cliente, insira uma Descrição e defina o tempo de expiração (Expira em, recomendado: 24 meses), clique em Adicionar:

${"base64":" ","img":{"width":1913,"height":904,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":106516,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_6.png"}}$

Após a criação do Segredos do cliente, é gerado um Valor e um ID secreto, essas informações serão utilizadas para habilitar o canal de atendimento na Weni.

${"base64":" ","img":{"width":1057,"height":198,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":17827,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_7.png"}}$

OBS: É recomendando salvar o Valor e o ID secreto, essas informações são sigilosas e não é possível visualizar seus valores após atualização da página.

3. Criação do Bot no Portal do Azure

A criação do Bot no Portal do Azure deve ser realizada pelo cliente, é recomendado que o usuário tenha permissões administrativas para criar o Bot.

No campo de pesquisa da página inicial, pesquise por Azure bot.

Na seção Criar um Bot do Azure, insira um Identificador do Bot, selecione a Assinatura (Avaliação Gratuita) ou outra de sua opção, também será necessário criar um Grupo de recursos. No campo Novo local do grupo de recursos, selecione a região Sul do Brasil. Altere o Tipo de preço, para Free, conforme imagem:

${"base64":" ","img":{"width":851,"height":934,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":71302,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_8.png"}}$

Na etapa da Microsoft App ID, selecione Usar registro de aplicativo existente:

${"base64":" ","img":{"width":836,"height":382,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":35922,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_9.png"}}$

Em ID do aplicativo, insira o ID do aplicativo (cliente).

Após inserir a ID do aplicativo, clique em Examinar + criar, após a Azure examinar as credenciais da App ID, clique em Criar, conforme imagem:

${"base64":" ","img":{"width":785,"height":938,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":56266,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_10.png"}}$

Com a implementação do Bot concluída, podemos acessar os recursos (Ir para o recurso) e alterar alguns parâmetros importantes do Bot, como: Nome, ícone e descrição.

${"base64":" ","img":{"width":1447,"height":564,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":57134,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_11.png"}}$

Dentro do Bot, selecione Perfil de Bot, escolha um ícone, e o Nome de exibição do Bot para os usuários, clique em Aplicar.

${"base64":" ","img":{"width":1123,"height":730,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":55795,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_12.png"}}$

Em Configuração, insira a URL de call-back fornecida pela equipe de Onboarding no Ponto de extremidade de mensagens, e clique em Aplicar, conforme imagem de exemplo:

${"base64":" ","img":{"width":1121,"height":685,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":62442,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_13.png"}}$

Em Canais, adicione o canal do Microsoft Teams, depois clique em Salvar:

${"base64":" ","img":{"width":1078,"height":873,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":58904,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_14.png"}}$

Um pop-up sobre os Termos do Serviço da Microsoft deve aparecer, com os Termos de Publicação dos Canais da Microsoft e Políticas de Privacidade da Microsoft, contendo informações de interesse para a equipe de Segurança da Informação.

${"base64":" ","img":{"width":824,"height":258,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":128723,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_15.png"}}$

4. Criação da Aplicação na App

No momento, o usuário apenas consegue interagir com o Chatbot através do Link para divulgação do Bot, para que o Chatbot fique disponível para todos os usuários no Teams é Interno necessário a criação do Aplicativo, através do Portal de desenvolvimento ou Developer Tools em inglês.

Temos dois passos: Portal de Desenvolvimento no Microsoft Teams e Microsoft Teams Admin Center:

• Portal de Desenvolvimento = https://teams.microsoft.com ou no aplicativo do Teams

• Microsoft Teams Admin Center = https://admin.teams.microsoft.com/dashboard

4.1 Portal do Desenvolvimento

Para criar a app utilizando o Portal do Desenvolvimento, é necessário seguir os seguintes passos:

1º - Acesse o Portal do Desenvolvedor, digitando (Portal de desenvolvimento) no campo pesquisar.

${"base64":" ","img":{"width":787,"height":531,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":296940,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_16.png"}}$

2º Clique em Aplicativos.

${"base64":" ","img":{"width":589,"height":278,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":113588,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_17.png"}}$

3º Clique em +NOVO APLICATIVO

4º Abrirá um pop-up para Adiconar o nome do APP.

Esse nome definirá o nome do Chatbot/assistente virtual, após insierir, clique em adicionar.

${"base64":" ","img":{"width":430,"height":154,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":15861,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_18.png"}}$

4.1.1 Informação Básica

Após adicionar o nome do Bot, abrirá uma sessão para configuração denominada: Informação Básica.

${"base64":" ","img":{"width":848,"height":801,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":245718,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_19.png"}}$

Preencha o campo Breve descrição. Você pode usar o exemplo a seguir: (ex: AssistenteVirtual)

• Preencha o campo Descrição longa. Você pode usar o exemplo a seguir: (ex: AssistenteVirtual)

• Preencha o campo Nome do desenvolvedor ou empresa. Você pode usar o exemplo a seguir ou se preferir usar o nome da sua empresa: (Raízen)

• Preencha o campo Site. Você pode usar o exemplo a seguir ou se preferir usar o site da sua empresa: (https://www.raizen.com.br/)

• Preencha o campo Política de privacidade. Você pode usar o exemplo a seguir ou se preferir, usar a política da sua empresa: (ex: https://raizen.com/sobre-araizen/politicas-e-procedimentos)

• Preencha o campo Termos de uso. Você pode usar o exemplo a seguir ou se preferir, usar o Termo de uso da sua empresa: (https://raizen.com/sobre-a-raizen/politicas-eprocedimentos)

• Preencha o campo ID do Aplicativo (cliente). Esse campo ID do Aplicativo, deve ser preenchido com o ID do Aplicativo criado na AZURE. Com esse ID, o aplicativo do Teams integra com o aplicativo do Azue. A imagem a seguir representa a inserção dessa informação.

A imagem a seguir representa a inserção dessa informação.

${"base64":" ","img":{"width":852,"height":340,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":147086,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_20.png"}}$

Após o preenchimento das informações básicas, clique em salvar. Em seguida, deve-se configurar algumas informações localizadas abaixo do nome do BOT. Iniciando na aba Configurar, onde temos os seguintes pontos.

${"base64":" ","img":{"width":792,"height":718,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":141795,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_21.png"}}$

4.1.2 Marca

Para inserir a Imagem da persona do Bot, clique em Marca, onde abrirá um pop-up para fazer upload das imagens do Bot, o qual tem que obedecer as especificações de tamanho.

4.1.3 Recursos do Aplicativo

Após inserir as imagens, clique em Recursos do aplicativo e em seguida Bot.

${"base64":" ","img":{"width":864,"height":369,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":174495,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_22.png"}}$

Em seguida, será aberta uma tela para configuração de alguns parâmetros do Bot.

No campo (Identificar seu bot), clique em Insira um ID de bot e em seguinda preencha com o ID do Aplicativo criado no passo 2 - Registro do aplicativo no Portal do Azure. Os demais campos devem ser selecionados seguindo os exemplos do print da imagem abaixo.

${"base64":" ","img":{"width":853,"height":786,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":282920,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_23.png"}}$

Ao concluir as configurações, clique em Salvar.

5. Publicar a Aplicação no Teams

Clique no botão publicar.

${"base64":" ","img":{"width":819,"height":129,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":21928,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_24.png"}}$

Ao clicarmos em publicar, abrirá um pop-up - (Publicar seu aplicativo) Clique na opção (Publicar para sua organização)

${"base64":" ","img":{"width":752,"height":562,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":159708,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_25.png"}}$

Após clicar, abrirá uma janela semelhante à da figura abaixo. Clique no botão Publicar seu aplicativo.

Logo em seguida, aparecerá uma mensagem notificando que a publicação foi enviada para aprovação.

O App será enviada para aprovação, caso seja aprovado, estará disponível para os usuários Teams da empresa.

6. Realizar a aprovação da publicação do App no Teams

Para aprovar a App, acesse: https://admin.teams.microsoft.com/dashboard, em seguida, clique em Teams apps.

${"base64":" ","img":{"width":855,"height":664,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":248304,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_26.png"}}$

Em seguida clique em Manage apps. Após isso, deve-se clicar em Search by name.

${"base64":" ","img":{"width":853,"height":261,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":84046,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_27.png"}}$

Inserir o nome do Bot que foi criado, conforme exemplo abaixo para a realização do filtro. Em seguida, Clique no nome do BOT.

${"base64":" ","img":{"width":857,"height":275,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":80802,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_28.png"}}$

A tela seguinte será para publicar a App. Clique em Publish.

${"base64":" ","img":{"width":795,"height":340,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":131748,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_29.png"}}$

Um pop-up de confirmação aparecerá na tela, clique em Publish novamente.

${"base64":" ","img":{"width":733,"height":275,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":142279,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_30.png"}}$

Após o procedimento, a informação sobre pendentes para aprovação fica zerada.

${"base64":" ","img":{"width":523,"height":385,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":122722,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_31.png"}}$

Agora o App está disponível para todos os usuários Teams do ambiente do cliente. Para acessar o aplicativo e começar a conversar com o Chatbot, procure o Catálogo de Aplicativos do Microsoft Teams na barra lateral.

Selecione Feito para sua organização e clique em Adicionar:

${"base64":" ","img":{"width":850,"height":95,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":30984,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/weni-by-vtex/integra%C3%A7%C3%B5es/integracao-com-o-microsoft-teams_32.png"}}$