Tutoriais

Neste artigo, saiba mais sobre como criar recursos de aplicativos do Teams. Aqui está uma lista dos guias passo a passo disponíveis para os recursos da plataforma Teams.

#	Recurso	Guia passo a passo
1.	Bot	- Depure seu chat bot de IA usando o Microsoft 365 Agents Playground - Enviar mensagens proativas
2.	Extensão de mensagem	- Criar extensão de mensagem baseada em API - Criar extensão de mensagem baseada em ação - Crie seu primeiro aplicativo de extensão de mensagem usando JavaScript
3.	Tab	Crie seu primeiro aplicativo de guia usando Dó nítido
4.	SSO	- Criar um bot com autenticação SSO - Adicionar SSO ao aplicativo de extensão de guia e mensagem

Crie seu primeiro aplicativo bot

Inicie o desenvolvimento de aplicativos do Microsoft Teams com seu primeiro aplicativo do Teams. Você pode criar um aplicativo bot com o Teams usando Javascript.

Crie seu primeiro bot

Seu aplicativo tem um recurso, que vem com sua própria interface do usuário e UX:

Neste tutorial, você aprenderá a:

• Como configurar um novo projeto com o Microsoft 365 Agents Toolkit (anteriormente conhecido como Teams Toolkit).
• Como criar um aplicativo de bot.
• Como implantar seu aplicativo.

Pré-requisitos

Certifique-se de instalar as ferramentas a seguir para criar e implantar seus aplicativos.

	Instalar	Para usar...
Obrigatório
	Microsoft 365 Agents Toolkit	Uma extensão do Microsoft Visual Studio Code que cria um scaffolding de projeto para seu aplicativo. Use a versão mais recente.
	Microsoft Teams	Microsoft Teams para colaborar com todos com quem você trabalha por meio de aplicativos para chat, reuniões e chamadas, tudo em um só lugar.
	Node.js	Ambiente de tempo de execução JavaScript de back-end. Para obter mais informações, consulte Node.js tabela de compatibilidade de versão para o tipo de projeto.
	Microsoft Edge (recomendado) ou Google Chrome	Um navegador com ferramentas de desenvolvedor.
	Visual Studio Code	JavaScript, TypeScript ou ambientes de compilação da Estrutura do SharePoint (SPFx). Use a versão mais recente.
Opcional
	Ferramentas do Azure para o Visual Studio Code e a CLI do Azure	Ferramentas do Azure para acessar dados armazenados ou implantar um back-end baseado em nuvem para seu aplicativo do Teams no Azure.
	Ferramentas de desenvolvedor do React para Chrome OU Ferramentas de desenvolvedor do React para Microsoft Edge	Uma extensão do DevTools do navegador para a biblioteca JavaScript do React de código aberto.
	Microsoft Graph Explorer	Microsoft Graph Explorer, uma ferramenta baseada em navegador que permite executar uma consulta de dados do Microsoft Graph.
	Portal do desenvolvedor para o Teams	Portal baseado na Web para configurar, gerenciar e publicar seu aplicativo Teams, incluindo em sua organização ou na Microsoft Teams Store.

Dica

Se você trabalha com dados do Microsoft Graph, deve conhecer e marcar o Microsoft Graph Explorer. Essa ferramenta baseada em navegador permite que você consulte o Microsoft Graph fora de um aplicativo.

Configurar pré-requisitos

Depois de instalar as ferramentas necessárias, configure o ambiente de desenvolvimento.

Instalar o Kit de Ferramentas de Agentes do Microsoft 365

O Microsoft 365 Agents Toolkit (anteriormente conhecido como Teams Toolkit) ajuda a simplificar o processo de desenvolvimento com ferramentas para provisionar e implantar recursos de nuvem para seu aplicativo e publicar na Teams Store.

Você pode usar o Agents Toolkit com o Visual Studio Code ou uma interface de linha de comando chamada CLI do Microsoft 365 Agents Toolkit (anteriormente conhecida como CLI do TeamsFx).

Visual Studio Code

1. Abra o Visual Studio Code e selecione Extensões (Ctrl+Shift+X ou Exibir>Extensões).

2. Na caixa de pesquisa, insira Kit de Ferramentas para Agentes do Microsoft 365.

3. Selecione Instalar.

   

   O ícone do Microsoft 365 Agents Toolkit aparece na barra de atividades do Visual Studio Code.

Você também pode instalar o Agents Toolkit do Visual Studio Code Marketplace.

Linha de Comando

Para instalar a CLI do Agents Toolkit, use o npm gerenciador de pacotes e insira o seguinte comando no prompt de comando:

npm install -g @microsoft/m365agentstoolkit-cli

Dependendo da sua configuração, talvez seja necessário usar sudo para instalar a CLI:

sudo npm install -g --unsafe-perm @microsoft/m365agentstoolkit-cli

Essa condição é mais comum em sistemas Linux e macOS.

Certifique-se de adicionar o cache global npm ao seu PATH. Essa etapa normalmente é feita como parte do instalador do Node.js.

Você pode usar a CLI com o atk comando. Verifique se o comando está funcionando em execuçãoatk -h.

Cuidado

Antes de executar o TeamsFx em terminais do PowerShell, você deve habilitar a política de execução assinada remota para o PowerShell.

Configurar seu locatário de desenvolvimento do Teams

Um locatário é um espaço ou um contêiner para sua organização no Teams, onde você conversa, compartilha arquivos e realiza reuniões. Este espaço também é onde você carrega e testa seu aplicativo. Vamos verificar se você está pronto para desenvolver com o locatário.

Verificar se há opção de carregar um aplicativo

Depois de criar seu aplicativo personalizado, você deve carregar seu aplicativo no Teams com a opção Carregar um aplicativo personalizado . Entre em sua conta do Microsoft 365 para marcar se esta opção está habilitada.

As etapas a seguir ajudam a verificar se você pode carregar aplicativos no Teams:

1. No cliente do Teams, selecione o ícone Aplicativos .

2. Selecione Gerenciar seus aplicativos.

3. Selecione Carregar um aplicativo.

4. Procure a opção para carregar um aplicativo personalizado. Se a opção estiver visível, você poderá carregar aplicativos personalizados.

   

Observação

Se você não encontrar a opção para carregar um aplicativo personalizado, entre em contato com o administrador do Teams.

Criar um locatário de desenvolvedor gratuito do Teams

Se você não tiver uma conta de desenvolvedor do Teams, ingresse no programa de desenvolvedor do Microsoft 365. Essa etapa é opcional.

1. Vá para o programa de desenvolvedor do Microsoft 365.

2. Selecione Ingressar Agora e siga as instruções na tela.

3. Na tela de boas-vindas, selecione Configurar assinatura E5.

4. Configure sua conta de administrador. Depois de concluir, a seguinte tela será exibida:

   

5. Entre no Teams usando a conta de administrador que você acabou de configurar. Verifique se você tem a opção Carregar um aplicativo personalizado no Teams.

Obter uma conta gratuita do Azure

Se você quiser hospedar seu aplicativo ou acessar recursos no Azure, deverá ter uma assinatura do Azure. Crie uma conta gratuita antes de começar.

Agora você tem todas as ferramentas para configurar sua conta. Em seguida, vamos configurar seu ambiente de desenvolvimento e começar a criar! Selecione o aplicativo que você deseja criar primeiro.

Criar espaço de trabalho de projeto para seu aplicativo de bot

Vamos criar seu primeiro aplicativo de bot.

A funcionalidade de bot de um aplicativo do Teams cria um chatbot ou um bot de conversa. Você o usa para executar tarefas simples e automatizadas, como fornecer atendimento ao cliente. Um bot conversa com um serviço Web e ajuda você a usar suas ofertas. Você pode obter previsão do tempo, fazer reservas ou qualquer outro serviço oferecido usando um bot de conversação.

Como você já se preparou para criar esses aplicativos, poderá configurar um novo projeto do Teams para criar o aplicativo bot.

Neste tutorial, você aprende:

1. Como configurar um novo projeto de bot com o Kit de Ferramentas de Agentes.
2. Sobre a estrutura de diretórios do seu projeto de aplicativo.

Importante

Os bots estão disponíveis nos ambientes Government Community Cloud (GCC), GCC High, Departamento de Defesa (DoD) e Teams operados pela 21Vianet .

Criar seu espaço de trabalho de projeto de bot

Se os pré-requisitos estiverem prontos, vamos começar!

Observação

A interface do usuário do Visual Studio Code mostrada é do Mac. Pode ser diferente dependendo do sistema operacional, da versão do Kit de Ferramentas de Agentes e do ambiente.

Visual Studio Code

1. Abra o Visual Studio Code.

2. Selecione o ícone do Microsoft 365 Agents Toolkit na barra de atividades do Visual Studio Code.

3. Selecione Criar um novo agente/aplicativo>do aplicativo do Teams.

   

4. Selecione Bot para criar um novo projeto de bot.

   

5. Verifique se o Bot Básico está selecionado como o recurso do aplicativo que você deseja criar em seu aplicativo.

   

6. Selecione JavaScript como linguagem de programação.

   

7. Selecione a pasta padrão para armazenar a pasta raiz do projeto no local padrão.

   

   Você também pode alterar o local padrão pelas seguintes etapas:

   1. Selecione Procurar.

      

   2. Selecione o local para o espaço de trabalho do projeto.

   3. Selecione a pasta selecionada.

      

8. Insira um nome adequado para seu aplicativo e selecione Enter.

   

Uma caixa de diálogo é exibida, onde você seria obrigado a escolher sim ou não para confiar nos autores dos arquivos nesta pasta.

Seu aplicativo Teams com um recurso de bot é criado em poucos segundos.

Depois que seu aplicativo é criado, o Agents Toolkit exibe a seguinte mensagem:

Selecione Depuração local para visualizar seu projeto.

Uma rápida recapitulação da criação de um aplicativo do Teams.

Assista a esta breve recapitulação da criação de um aplicativo do Teams.

Linha de comando

Use a CLI "atk" para criar seu primeiro projeto. Comece na pasta em que deseja criar a pasta do projeto.

atk new

Você pode usar a CLI para criar um novo aplicativo do Teams. A CLI conduz você por uma série de perguntas. Cada pergunta inclui uma instrução sobre como respondê-la.

Por exemplo, use as teclas de direção para selecionar uma opção. Depois de fazer a escolha, selecione Enter para confirmá-la.

1. Selecione Criar um novo aplicativo do Teams.
2. Selecione Bot e desmarque Tab.
3. Selecione JavaScript como linguagem de programação.
4. Selecione Enter para selecionar a pasta do workspace padrão.
5. Insira um nome adequado para seu aplicativo, como HelloBot. O nome do aplicativo deve consistir apenas em caracteres alfanuméricos.

Depois de responder a todas as perguntas, seu projeto está criado.

Faça um tour pelo código-fonte do aplicativo de bot

Após a conclusão do scaffolding, exiba os diretórios e arquivos do projeto no Explorer no Visual Studio Code.

Pasta / Arquivo	Sumário
m365agents.yml	Arquivo de projeto principal
m365agents.local.yml	Isso substitui m365agents.yml por ações que permitem a execução e a depuração locais.
.vscode/	VSCode para depuração local.
appPackage/	Modelos para o manifesto do aplicativo Teams.
adaptiveCards/	Cartões Adaptáveis enviados de volta pelo bot.
infra/	Modelos para provisionamento de recursos do Azure.
index.js	Ponto de entrada e express manipulador do aplicativo.
teamsBot.js	Manipulador de atividades do Teams.

Dica

Familiarize-se com bots fora do Teams antes de integrar seu primeiro bot no Teams.

Compilar e executar seu primeiro aplicativo de bot

Depois de configurar o espaço de trabalho do projeto com o Kit de Ferramentas de Agentes, crie seu projeto de bot. Você precisa entrar em sua conta do Microsoft 365.

Entrar na sua conta do Microsoft 365

Use essa conta para entrar no Teams. Se você estiver usando um locatário do programa de desenvolvedor do Microsoft 365, a conta de administrador configurada durante o registro será sua conta do Microsoft 365.

Visual Studio Code

1. Abra o Visual Studio Code.

2. Selecione o ícone do Kit de Ferramentas para Agentes do Microsoft 365 na barra lateral.

3. Selecione Entrar no M365 usando suas credenciais.

   Seu navegador padrão da Web será aberto para permitir que você entre na conta.

4. Feche o navegador quando solicitado e retorne ao Visual Studio Code.

5. Retorne ao Kit de Ferramentas de Agentes no Visual Studio Code.

   Use essa conta para entrar no Teams. Se você estiver usando um locatário do programa de desenvolvedor do Microsoft 365, a conta de administrador configurada durante o registro será sua conta do Microsoft 365.

   

Agora você está pronto para compilar o aplicativo e executá-lo localmente!

Linha de comando

1. Entre no Microsoft 365 com a CLI do Kit de Ferramentas de Agentes do Microsoft 365 (anteriormente conhecida como CLI TeamsFx):

atk account login m365

Seu navegador padrão da Web será aberto para permitir que você entre na conta. Entre na sua conta do Azure usando suas credenciais. Feche o navegador quando for solicitado.

Os logons de conta são compartilhados entre o Visual Studio Code e a CLI do Agents Toolkit.

Agora que o ambiente de desenvolvimento está configurado, você pode criar, compilar e implantar seu primeiro aplicativo do Teams.

Crie e execute seu primeiro aplicativo de bot localmente

Para criar e executar seu aplicativo no ambiente local:

1. Selecione F5 no Visual Studio Code para executar o aplicativo no modo de depuração.

   Observação

   Se o Agents Toolkit não conseguir marcar um pré-requisito específico, ele solicitará que você marque.

   Saiba o que acontece quando você executa seu aplicativo localmente no depurador.

   Caso você esteja se perguntando, ao pressionar a tecla F5 , Agents Toolkit:

   1. Verifica todos os seguintes pré-requisitos:

   • Você está conectado com uma conta do Microsoft 365.
   • O upload de aplicativo personalizado está habilitado para sua conta do Microsoft 365.
   • Com suporte Node.js versão estiver instalada.
   • A porta exigida pelo aplicativo de bot está disponível.

   2. Instale pacotes npm.
   3. Inicia o Túnel de Desenvolvimento para criar um túnel HTTP.
   4. Registra o aplicativo no Microsoft Entra ID e configura o aplicativo.
   5. Registra o aplicativo bot no Bot Framework e configura o aplicativo bot.
   6. Registra o aplicativo no Portal do Desenvolvedor do Teams e configura o aplicativo.
   7. Inicia o aplicativo bot.
   8. Inicia o Teams em um navegador da Web e carrega o aplicativo de bot personalizado.

   

   Observação

   Quando você executa o aplicativo pela primeira vez, todas as dependências são baixadas e o aplicativo é compilado. Uma janela do navegador é aberta automaticamente quando a compilação é concluída. Esse processo pode levar de três a cinco minutos para ser concluído.

   O Teams executa seu aplicativo em um navegador da Web.

2. Entre com sua conta do Microsoft 365, se solicitado.

3. Selecione Adicionar para carregar o aplicativo de bot personalizado no Teams.

   

4. Selecione Abrir para abrir o aplicativo no escopo pessoal.

   Como alternativa, você pode pesquisar e selecionar o escopo necessário ou selecionar um canal, chat ou reunião na lista e passar pela caixa de diálogo para selecionar Ir.

   

   Agora o bot está sendo executado com êxito no Teams! Depois que o aplicativo é carregado, uma sessão de chat com o bot é aberta.

   

   Você pode digitar welcome para mostrar um card de introdução e digitar learn para ir para o Cartão Adaptável e a documentação de comando do bot.

   

   Você pode fazer atividades normais de depuração, como definir pontos de interrupção, como em qualquer outro aplicativo da web. Abra o bot/teamsBot.js arquivo e localize o onMessage() método. Defina um ponto de interrupção em qualquer caso. Em seguida, digite texto.

   Saiba como solucionar problemas se o aplicativo não for executado localmente.

   Para executar seu aplicativo no Teams com êxito, certifique-se de ter habilitado o upload de aplicativo personalizado em sua conta do Teams. Você pode saber mais sobre o upload de aplicativo personalizado na seção de pré-requisitos.

   Importante

   O upload de aplicativo personalizado está disponível na Nuvem da Comunidade Governamental (GCC) e não tem suporte no GCC High, DoD e Teams operados pela 21Vianet.

   Dica

   Verifique se há problemas antes de carregar um aplicativo personalizado, usando a ferramenta de validação de aplicativo. Esta ferramenta está incluída no kit de ferramentas. Corrija os erros para carregar o aplicativo.

Implantar seu primeiro aplicativo do Teams

Você aprendeu a criar, criar e executar aplicativos do Teams com a funcionalidade Bot. A etapa final é implantar seu aplicativo no Azure.

Vamos implantar o primeiro aplicativo com capacidade de Bot no Azure usando o Kit de Ferramentas de Agentes.

Entrar na sua conta do Azure

Use essa conta para acessar o portal do Azure Microsoft e provisionar novos recursos de nuvem para dar suporte ao seu aplicativo.

Visual Studio Code

1. Abra o Visual Studio Code.

2. Abra a pasta do projeto na qual você criou o aplicativo de bot.

3. Selecione o ícone do Kit de Ferramentas para Agentes do Microsoft 365 na barra lateral.

4. Selecione Entrar no Azure usando suas credenciais.

   Dica

   Se você tiver a extensão CONTA DO AZURE instalada e estiver usando a mesma conta, ignore esta etapa. Use a mesma conta que você está usando em outras extensões.

   Seu navegador padrão da Web será aberto para permitir que você entre na conta.

5. Feche o navegador quando solicitado e retorne ao Visual Studio Code.

   A seção CONTAS da barra lateral mostra as duas contas separadamente. Ele também lista o número de assinaturas do Azure utilizáveis disponíveis para você. Certifique-se de ter pelo menos uma assinatura do Azure utilizável disponível. Caso contrário, saia e use outra conta.

Parabéns, você criou um aplicativo Teams! Agora vamos aprender como implantar um dos aplicativos no Azure usando o Kit de Ferramentas de Agentes.

Linha de comando

1. Entre no Microsoft 365 com a CLI do Agents Toolkit:

atk account login m365

Seu navegador padrão da Web será aberto para permitir que você entre na conta. Entre na sua conta do Azure usando suas credenciais. Feche o navegador quando for solicitado.

2. Entrar no Azure com a CLI do Kit de Ferramentas de Agentes:

atk account login azure

Seu navegador padrão da Web será aberto para permitir que você entre na conta. Entre na sua conta do Azure usando suas credenciais. Feche o navegador quando for solicitado.

Os logons de conta são compartilhados entre o Visual Studio Code e a CLI do Agents Toolkit.

Parabéns, você entrou na sua conta do Azure! Agora vamos aprender como implantar um dos aplicativos no Azure usando o Kit de Ferramentas de Agentes.

Provisionar e implantar seu aplicativo no Azure

A implantação consiste em duas etapas. Primeiro, o Azure cria os recursos de nuvem necessários (também conhecidos como provisionamento). Em seguida, o Azure copia o código do aplicativo para os recursos de nuvem criados. Para este tutorial, você implantará o aplicativo de bot.

Qual é a diferença entre Provisionar e Implantar?

A etapa Provisionar cria recursos no Azure e no Microsoft 365 para seu aplicativo, mas não copia código (HTML, CSS ou JavaScript) para os recursos. A etapa Implantar copia o código do seu aplicativo para os recursos que você criou durante a etapa de provisionamento. É comum implantar várias vezes sem provisionar novos recursos. Como a etapa de provisionamento pode levar algum tempo para ser concluída, ela é separada da etapa de implantação.

Visual Studio Code

Selecione o ícone do Microsoft 365 Agents Toolkit na barra lateral do Visual Studio Code.

1. Selecione Provisionar.

   

2. Selecione uma assinatura a ser usada para os recursos do Azure.

   

   Seu aplicativo está hospedado usando recursos do Azure.

   Uma caixa de diálogo avisa que os custos podem ser incorridos ao executar recursos no Azure.

3. Selecione Provisionar.

   

   O processo de provisionamento cria recursos na nuvem do Azure. Pode levar algum tempo. Você pode monitorar o progresso assistindo às caixas de diálogo no canto inferior direito. Após alguns minutos, você verá o seguinte aviso:

   

   Se desejar, você pode exibir os recursos provisionados. Para este tutorial, você não precisa exibir recursos.

   O recurso provisionado aparece na seção AMBIENTE .

   

4. Selecione Implantar no painel LIFECYCLE após a conclusão do provisionamento.

   

   Assim como no provisionamento, a implantação leva algum tempo. Você pode monitorar o processo assistindo às caixas de diálogo no canto inferior direito. Depois de alguns minutos, você verá um aviso de conclusão.

Agora, você pode usar o mesmo processo para implantar seus aplicativos de Bot e Extensão de Mensagem no Azure.

Linha de Comando

Na janela do seu terminal:

1. Executar atk provision.

   atk provision
   

   Quando solicitado, selecione uma assinatura Azure para usar Azure recursos.

   Seu aplicativo está hospedado usando recursos do Azure.

2. Executar atk deploy.

   atk deploy
   

Executar o aplicativo implantado

Quando as etapas de provisionamento e implantação forem concluídas:

1. Abra o painel de depuração (Ctrl+Shift+D / ⌘⇧-D ou Exibir > Execução) no Visual Studio Code.

2. Selecione Iniciar remoto (Edge) na lista suspensa Configuração de inicialização.

3. Selecione Iniciar depuração (F5). Você será solicitado a carregar o aplicativo de bot personalizado no Teams.

   

4. Selecione Adicionar.

   

5. Selecione Abrir para abrir o aplicativo no escopo pessoal.

   Como alternativa, você pode pesquisar e selecionar o escopo necessário ou selecionar um canal, chat ou reunião na lista e passar pela caixa de diálogo para selecionar Ir.

   

   Você adicionou com sucesso seu aplicativo bot ao cliente do Teams.

   

Saiba o que acontece quando você implanta seu aplicativo no Azure

Antes da implantação, o aplicativo estava sendo executado localmente:

• O back-end é executado usando as Ferramentas Principais do Azure Functions.
• O ponto de extremidade HTTP do aplicativo, em que o Microsoft Teams carrega o aplicativo, é executado localmente.

A implantação é um processo de duas etapas. Você provisiona os recursos em uma assinatura ativa do Azure e, em seguida, implanta ou carrega o código de back-end e front-end do aplicativo no Azure.

• O back-end, se configurado, usa vários serviços do Azure, incluindo o Serviço de Aplicativo do Azure e o Armazenamento do Azure.
• O aplicativo de front-end é implantado em uma conta de Armazenamento do Azure configurada para hospedagem na Web estática.

Parabéns!

Você conseguiu!

Você criou um aplicativo de bot.

Agora que você aprendeu a criar um aplicativo básico, pode passar para a criação de aplicativos mais complexos. Você concluiu o tutorial para criar um bot com JavaScript.

Tutoriais

Depure seu chat bot de IA usando o Microsoft 365 Agents Playground

Inicie o desenvolvimento de aplicativos do Microsoft Teams com seu aplicativo bot de chat de IA do Teams e depure-o com o Microsoft 365 Agents Playground (anteriormente conhecido como Ferramenta de Teste de Aplicativo do Teams). O Agents Playground facilita a depuração de aplicativos baseados em bot. Você não precisa de uma conta de desenvolvedor do Microsoft 365, túnel ou registro de aplicativo e bot do Teams para usar o Agents Playground.

Tutorial: Depurar seu chat bot de IA

Pré-requisitos

Você pode conversar com seu bot e exibir as mensagens e os Cartões Adaptáveis conforme eles aparecem no Teams. Você também pode simular uma atividade no Agents Playground usando gatilhos de atividade.

Observação

• O Agents Playground está disponível somente na v5.4.0 do Microsoft 365 Agents Toolkit (anteriormente conhecido como Teams Toolkit).
• O Agents Playground é compatível apenas com clientes da Web e da área de trabalho.

Este guia passo a passo ajuda você a criar um chat bot de IA usando o Kit de Ferramentas de Agentes e depurar com a Ferramenta de Teste. Você verá a seguinte saída depois de concluir este guia, onde o usuário poderá acessar e usar o bot de chat de IA:

Instalar	Para usar...
Visual Studio Code ou Visual Studio	Ambientes de compilação JavaScript, TypeScript ou C#. Use a versão mais recente.
Microsoft 365 Agents Toolkit	Extensão do Microsoft Visual Studio Code que cria um scaffolding de projeto para seu aplicativo. Use o Agents Toolkit v5.4.0. Para obter mais informações, consulte instalar o Agents Toolkit.
Node.js	Ambiente de tempo de execução JavaScript de back-end. Para obter mais informações, consulte Node.js tabela de compatibilidade de versão para o tipo de projeto.
OpenAI ou OpenAI do Azure	Primeiro, crie sua chave de API OpenAI para usar o GPT da OpenAI. Se você quiser hospedar seu aplicativo ou acessar recursos no Azure, deverá criar um serviço OpenAI do Azure.
Microsoft Edge (recomendado) ou Google Chrome	Um navegador com ferramentas de desenvolvedor.

Criar espaço de trabalho do projeto para seu aplicativo de bot de chat com IA

A funcionalidade de bot de um aplicativo do Teams cria um chatbot ou um bot de conversa. Ele se comunica com um serviço da web, facilitando o uso de seus serviços. O bot pode executar tarefas simples e automatizadas, como fornecer atendimento ao cliente. Você pode obter previsão do tempo, fazer reservas ou qualquer outro serviço oferecido usando um bot de conversação.

Como você já se preparou para criar esses aplicativos, pode configurar um novo projeto do Teams para criar o aplicativo de bot de chat com IA.

Criar seu espaço de trabalho de projeto de bot

Se os pré-requisitos estiverem prontos, vamos começar!

1. Abra o Visual Studio Code.

2. Selecione o ícone do Microsoft 365 Agents Toolkit na barra de atividades do Visual Studio Code.

3. Selecione Criar um novo agente/aplicativo.

   

4. Selecionar Agentes para o TeamsAzure>OpenAI> inserir uma entrada na entrada Chave do serviço de API do Azure agora

   

5. Selecione Agentes básicos para o Teams. Se você precisar de uma funcionalidade diferente para o bot, selecione a opção necessária.

   

6. Selecione a linguagem de programação como JavaScript.

   

7. Selecione a pasta padrão.

   

   Para alterar o local padrão, siga estas etapas:

   1. Selecione Procurar.

      

   2. Selecione o local para o espaço de trabalho do projeto.

   3. Selecione Selecionar Pasta.

      

8. Insira um nome adequado para seu aplicativo e selecione a tecla Enter .

   

   Uma caixa de diálogo é exibida, onde você precisa escolher sim ou não para confiar nos autores dos arquivos nesta pasta.

   

Agora, você criou com sucesso seu espaço de trabalho do projeto AI Chat bot.

Faça um tour pelo código-fonte do aplicativo de bot

Depois de concluir o scaffolding, explore os diretórios e arquivos do projeto na seção EXPLORER do Visual Studio Code.

Nome de pasta ou arquivo	Sumário
env/.env.playground	O arquivo de configuração com variáveis de ambiente que podem ser confirmadas no Git.
env/.env.playground.user	O arquivo de configuração com variáveis de ambiente, incluindo credenciais, que não estão comprometidas com o Git por padrão.
appPackage	Arquivos de modelo de manifesto do aplicativo e ícones de aplicativo (color.png e outline.png).
appPackage/manifest.json	Manifesto do aplicativo para executar o aplicativo em ambiente local e remoto.
src/app.js	Lida com a lógica de negócios do chat bot de IA.
m365agents.yml	Este é o arquivo de projeto principal do Kit de Ferramentas de Agentes. O arquivo de projeto define duas coisas principais: propriedades e definições de configuração e preparação.
m365agents.local.yml	Isso substitui m365agents.yml por ações que permitem a execução e a depuração locais.
m365agents.playground.yml	Isso substitui m365agents.yml por ações que permitem a execução local e a depuração na Ferramenta de Teste.

Crie e execute seu aplicativo de bot de chat com IA

Crie uma chave e um ponto de extremidade do OpenAI para seu chat bot de IA

1. Acesse o portal do Azure.

2. Selecione Criar um recurso e pesquise por OpenAI do Azure.

3. Selecione OpenAI do Azure e selecione Criar.

   

4. Preencha os detalhes necessários e selecione Avançar.

   

5. Selecione Todas as redes, incluindo a Internet, podem acessar este recurso e, em seguida, selecione Avançar.

   

6. Preencha os detalhes necessários e selecione Avançar.

   

7. Selecione Criar.

   

Você criou com sucesso a chave e o ponto de extremidade para seu chat bot de IA.

Observação

Você também pode obter a chave de API OpenAI para depurar seu bot de bate-papo AI.

Obtenha chaves e ponto de extremidade do OpenAI do Azure

1. Selecione Ir para recursos.

   

2. Selecione Chaves e Ponto de Extremidade no painel esquerdo e copie a CHAVE e o Ponto de Extremidade. Você pode copiar a CHAVE 1 ou a CHAVE 2.

   

   Salve a KEY e o Endpoint para uso posterior.

3. Selecione Implantações de modelo no painel esquerdo e selecione Gerenciar implantações.

   

   A janela do OpenAI Studio do Azure é exibida.

4. Selecione Implantações no painel esquerdo e selecione + Criar nova implantação.

   

5. Selecione os seguintes detalhes:

   1. Selecione gpt-35-turbo na lista suspensa Selecione um modelo .

      Observação

      Apenas o modelo gpt-35-turbo é compatível com o chat bot de IA.

   2. Selecione 0301 (Padrão) na lista suspensa Versão do modelo .

   3. Insira o Nome da implantação e selecione Criar.

      

   4. Copie e salve o nome da Implantação para uso posterior.

      

Atualizar a chave e os pontos de extremidade do OpenAI do Azure

1. Abra seu projeto no Visual Studio Code.

2. Em EXPLORER, acesse env.env.playground.user> file.

3. Insira seu SECRET_AZURE_OPENAI_API_KEY e SECRET_AZURE_OPENAI_ENDPOINT.

   ...
   SECRET_AZURE_OPENAI_API_KEY=<azure-openai-api-key>
   SECRET_AZURE_OPENAI_ENDPOINT=<azure-openai-endpoint>
   

4. Acesse o arquivo src>app.js .

5. Comente o código e remova a OpenAI marca de comentário do Azure OpenAI código.

6. Insira o nome da implantação do OpenAI do Azure no azureDefaultDeploymentarquivo .

   
   // Use OpenAI
   // apiKey: config.openAIKey,
   // defaultModel: "gpt-3.5-turbo",
   
   azureApiKey: config.azureOpenAIKey,
   azureDefaultDeployment: "gpt-35-turbo",
   azureEndpoint: config.azureOpenAIEndpoint,
   
   

Depurar e executar seu aplicativo de bot de chat com IA

1. No painel esquerdo, selecione EXECUTAR e DEPURAR (Ctrl+Shift+D) e, em seguida, selecione Depurar no Agents Playground na lista suspensa.

   

2. O Agents Playground abre seu bot de chat de IA em uma página da Web.

   

Gatilhos de atividade

Existem dois tipos de gatilhos de atividade:

Gatilhos de atividade predefinidos

O Agents Playground fornece gatilhos de atividade predefinidos para testar as funcionalidades do seu bot.

Categoria	Atividade	Manipulador
Disparar atividade de atualização da instalação	Instalar bot Desinstalar bot	onInstallationUpdate onInstallationUpdateAdded onInstallationUpdate onInstallationUpdateRemove
Disparar atividade de atualização de conversa	Adicionar usuário Adicionar bot Adicionar canal	onMembersAdded onTeamsMembersAddedEvent onMembersAdded onTeamsMembersAddedEvent onTeamsChannelCreatedEvent
	Remover usuário Remover bot Remover canal Remover equipe	onMembersRemoved onTeamsMembersRemovedEvent onMembersRemoved onTeamsMembersRemovedEvent onTeamsChannelDeletedEvent onTeamsTeamDeletedEvent
	Renomear canal Renomear equipe	onTeamsChannelRenamedEvent onTeamsTeamRenamedEvent

Observação

Todos os tipos de atividades não estão disponíveis em todos os escopos. Por exemplo, você não pode adicionar ou remover um canal em um chat pessoal ou em grupo.

Os gatilhos de atividade predefinidos estão disponíveis no menu Simular uma atividade no Agents Playground.

Para simular Adicionar atividade do usuário , siga estas etapas:

1. No Agents Playground, vá para Simular uma atividade>Adicionar usuário.

   

   Uma caixa de diálogo é exibida para visualizar o manipulador de atividade.

2. Selecione Enviar atividade.

   

   O bot envia a seguinte resposta:

   

Gatilhos de atividade personalizados

Você pode usar a atividade personalizada para personalizar gatilhos de atividade, por exemplo, reactionsAdded para atender aos requisitos do seu aplicativo de bot. O Agents Playground preenche automaticamente as propriedades necessárias da atividade. Você também pode modificar o tipo de atividade e adicionar mais propriedades.

1. Selecione Simular uma atividade>personalizada.

   

2. Adicione messageReaction para personalizar a atividade na type propriedade:

   {
       "type": "messageReaction",
       "reactionsAdded": [
       {
           "type": "like"
       }
       ],
       "replyToId": "d60fd1cb-3e8f-44ef-849c-404806ba1b47"
   }
   

3. Selecione Enviar atividade.

   

   O bot envia um onReactionsAdded manipulador em resposta.

   

Conclua o desafio

Você criou um resultado como este?

Parabéns! Você criou com sucesso um aplicativo de bot de chat com IA. Agora, você aprendeu a depurar seu aplicativo AI Chat bot no Agents Playground.

Playground de agentes do Microsoft 365

Voltar para o início

Enviar mensagens proativas

Uma mensagem proativa é uma mensagem enviada por um bot em resposta a comandos simples enviados no chat de um usuário.

Tutorial: Enviar mensagens proativas

A resposta da mensagem pode estar em um dos seguintes formatos:

• Mensagens de boas-vindas
• Mensagens agendadas
• Notificações

Este guia passo a passo ajuda você a enviar uma mensagem proativa de um bot. Você verá a seguinte saída:

Pré-requisitos

Certifique-se de instalar as ferramentas a seguir para criar e implantar seus aplicativos.

	Instalar	Para usar
	Microsoft Visual Studio Code	JavaScript ou TypeScript, ambientes de build. Use a versão mais recente.
	Microsoft 365 Agents Toolkit (anteriormente conhecido como Teams Toolkit)	Extensão do Visual Studio Code que cria um scaffolding de projeto para seu aplicativo. Use a versão mais recente.
	Node.js	Ambiente de tempo de execução JavaScript de back-end. Para obter mais informações, consulte Node.js tabela de compatibilidade de versão para o tipo de projeto.
	Microsoft Teams	Teams para colaborar com todos com quem você trabalha por meio de aplicativos para chat, reuniões, chamadas e tudo em um só lugar.
	Microsoft Edge (recomendado) ou Google Chrome	Um navegador com ferramentas de desenvolvedor.
	Conta de desenvolvedor do Microsoft 365	Acesso à conta do Teams com as permissões apropriadas para instalar um aplicativo.

Preparar o ambiente de desenvolvimento

Depois de instalar as ferramentas necessárias, configure o ambiente de desenvolvimento.

Instalar o Kit de Ferramentas de Agentes do Microsoft 365

O Microsoft 365 Agents Toolkit (anteriormente conhecido como Teams Toolkit) ajuda a simplificar o processo de desenvolvimento com ferramentas para provisionar e implantar recursos de nuvem para seu aplicativo e publicar na Teams Store.

Você pode usar o Agents Toolkit com o Visual Studio Code ou uma interface de linha de comando chamada CLI do Microsoft 365 Agents Toolkit (anteriormente conhecida como CLI do TeamsFx).

Visual Studio Code

1. Abra o Visual Studio Code e selecione Extensões (Ctrl+Shift+X ou Exibir>Extensões).

2. Na caixa de pesquisa, insira Kit de Ferramentas para Agentes do Microsoft 365.

3. Selecione Instalar.

   

   O ícone do Microsoft 365 Agents Toolkit aparece na barra de atividades do Visual Studio Code.

Você também pode instalar o Agents Toolkit do Visual Studio Code Marketplace.

Linha de Comando

Para instalar a CLI do Agents Toolkit, use o npm gerenciador de pacotes e insira o seguinte comando no prompt de comando:

npm install -g @microsoft/m365agentstoolkit-cli

Dependendo da sua configuração, talvez seja necessário usar sudo para instalar a CLI:

sudo npm install -g --unsafe-perm @microsoft/m365agentstoolkit-cli

Essa condição é mais comum em sistemas Linux e macOS.

Certifique-se de adicionar o cache global npm ao seu PATH. Essa etapa normalmente é feita como parte do instalador do Node.js.

Você pode usar a CLI com o atk comando. Verifique se o comando está funcionando em execuçãoatk -h.

Cuidado

Antes de executar o TeamsFx em terminais do PowerShell, você deve habilitar a política de execução assinada remota para o PowerShell.

Configurar seu locatário de desenvolvimento do Teams

Um locatário é um espaço ou um contêiner para sua organização no Teams, onde você conversa, compartilha arquivos e realiza reuniões. Este espaço também é onde você carrega e testa seu aplicativo. Vamos verificar se você está pronto para desenvolver com o locatário.

Verificar se há opção de carregar um aplicativo

Depois de criar seu aplicativo personalizado, você deve carregar seu aplicativo no Teams com a opção Carregar um aplicativo personalizado . Entre em sua conta do Microsoft 365 para marcar se esta opção está habilitada.

As etapas a seguir ajudam a verificar se você pode carregar aplicativos no Teams:

1. No cliente do Teams, selecione o ícone Aplicativos .

2. Selecione Gerenciar seus aplicativos.

3. Selecione Carregar um aplicativo.

4. Procure a opção para carregar um aplicativo personalizado. Se a opção estiver visível, você poderá carregar aplicativos personalizados.

   

   Observação

   Se você não encontrar a opção para carregar um aplicativo personalizado, entre em contato com o administrador do Teams.

Criar um locatário de desenvolvedor do Teams gratuito (opcional)

Se você não tiver uma conta de desenvolvedor do Teams, ingresse no programa de desenvolvedor do Microsoft 365.

1. Vá para o programa de desenvolvedor do Microsoft 365.

2. Selecione Ingressar Agora e siga as instruções na tela.

3. Na tela de boas-vindas, selecione Configurar assinatura E5.

4. Configure sua conta de administrador. Depois de concluir, a seguinte tela será exibida:

   

5. Entre no Teams usando a conta de administrador que você acabou de configurar. Verifique se você tem a opção Carregar um aplicativo personalizado no Teams.

Criar bot de Mensagem Proativa

Para criar um bot de mensagem proativo usando o Visual Studio Code, siga estas etapas:

1. Abra o Visual Studio Code.

2. Selecione o ícone do Microsoft 365 Agents Toolkit na barra de atividades do Visual Studio Code.

3. No painel esquerdo, selecione Exibir Exemplos.

   

4. Na lista de exemplos, selecione Mensagens Proativas. Um exemplo pré-criado que está pronto para depuração é aberto.

   

5. Selecione Criar.

   

6. Selecione a pasta padrão para armazenar a pasta raiz do projeto no local padrão.

   

   Se você quiser alterar o local padrão, execute as seguintes etapas:

   1. Selecione Procurar.

      

   2. Selecione o local para o espaço de trabalho do projeto.

   3. Selecione Selecionar Pasta.

      

   O bot de mensagem proativa é criado em poucos segundos e exibe a caixa de diálogo de êxito do bot de mensagem proativa no canto inferior direito com a opção de depurar:

   :::

7. Selecione o ícone Executar e Depurar no canto superior esquerdo.

8. Selecione Depurar (Edge) ou Depurar (Chrome) na lista suspensa.

   

   Quando a depuração for bem-sucedida, você será solicitado a carregar o bot de mensagem proativo no Teams em seu computador local.

9. Selecione Adicionar.

   

10. Pesquise e selecione o escopo necessário ou selecione um canal, chat ou reunião na lista e mova a caixa de diálogo para selecionar Ir.

    

    O aplicativo bot de mensagem proativo é carregado no cliente do Teams e a mensagem a seguir aparece em resposta à mensagem enviada.

    

11. Copie e cole a URL ou navegue até a URL no navegador. Uma mensagem de olá proativa é disparada e compartilhada no chat.

    

12. Vá para o Teams. Você receberá uma mensagem de olá proativa do bot.

    

Faça um tour pelo código-fonte

O Agents Toolkit fornece componentes para a criação de um aplicativo. Depois de criar o projeto, você pode exibir as pastas e arquivos do projeto na área EXPLORER do Visual Studio Code.

A nova pasta do projeto contém o seguinte conteúdo:

Pasta / Arquivo	Sumário
.vscode/	Arquivos do Visual Studio Code para depuração.
appManifest/	Modelos para o manifesto do aplicativo (anteriormente chamado de manifesto do aplicativo do Teams).
env/	Os pares nome/valor são armazenados em arquivos de ambiente e usados para m365agents.yml personalizar as regras de provisionamento e implantação.
manifest.json	O manifesto do aplicativo para publicação por meio do Portal do desenvolvedor do Teams está armazenado em Properties/manifest.json.
m365agents.yml	O arquivo de projeto principal descreve a configuração do aplicativo e define o conjunto de ações a serem executadas em cada estágio do ciclo de vida.
m365agents.local.yml	Isso substitui m365agents.yml por ações que permitem a execução e a depuração locais.

Implantar seu bot de mensagens Proativo

Você aprendeu a criar e executar o aplicativo do Teams com a funcionalidade bot de mensagem proativa. Vamos implantar o primeiro aplicativo com a funcionalidade bot de mensagem proativa no Azure usando o Kit de Ferramentas de Agentes.

Entrar na sua conta do Azure

Use sua conta para acessar o portal do Azure Microsoft e provisionar novos recursos de nuvem para dar suporte ao seu aplicativo.

1. Abra o Visual Studio Code.

2. Abra a pasta do projeto em que você criou o aplicativo bot de mensagem proativo.

3. Selecione o ícone do Microsoft 365 Agents Toolkit na barra de atividades do Visual Studio Code.

4. Selecione Entrar no Azure usando suas credenciais.

   Dica

   Se você tiver a extensão CONTA DO AZURE instalada e estiver usando a mesma conta, ignore esta etapa.

   Seu navegador padrão da Web será aberto para permitir que você entre na conta.

5. Feche o navegador quando solicitado e retorne ao Visual Studio Code.

A seção CONTAS da barra lateral mostra as duas contas separadamente. Ele também lista o número de assinaturas do Azure utilizáveis disponíveis para você. Certifique-se de ter pelo menos uma assinatura do Azure utilizável disponível. Caso contrário, saia e use outra conta.

Implantar seu aplicativo no Azure

A implantação consiste em duas etapas. Primeiro, os recursos de nuvem necessários são criados (também conhecido como provisionamento). Em seguida, o código do aplicativo é copiado para os recursos de nuvem criados. Para este tutorial, você implantará o aplicativo de bot.

Qual é a diferença entre provisionar e implantar?

O aprovisionamento cria recursos no Azure e no Microsoft 365 para a sua aplicação, mas nenhum código (HTML, CSS e JavaScript) é copiado para os recursos.
Implantar Copia o código do seu aplicativo para os recursos criados durante o provisionamento. É comum implementar múltiplas vezes sem aprovisionar novos recursos. Como o provisionamento pode levar algum tempo para ser concluído, ele é separado da implantação.

Visual Studio Code

1. Selecione o ícone do Microsoft 365 Agents Toolkit na Visual Studio Code Barra de Atividade.

2. Selecione Provisão em CICLO de VIDA.

   

3. Selecione uma das subscrições existentes.

   

4. Selecione um grupo de recursos existente ou crie um novo grupo de recursos. Para obter mais informações, consulte Criar grupo de recursos.

   

   Observação

   É apresentada uma caixa de diálogo a mencionar que poderão ocorrer custos ao executar recursos no Azure.

5. Selecione Provisionar.

   

   O processo de aprovisionamento cria recursos na Azure nuvem. Pode monitorizar o progresso nas caixas de diálogo que são apresentadas no canto inferior direito. Após alguns minutos, é apresentada a seguinte caixa de diálogo:

   

6. Selecione Implementar em CICLO de VIDA.

   

7. Selecione Implantar.

   

   A implementação demora algum tempo. Pode monitorizar o progresso nas caixas de diálogo que são apresentadas no canto inferior direito. Após alguns minutos, é apresentada a seguinte caixa de diálogo.

   

8. Abra o painel de depuração (Ctrl+Shift+D / ⌘⇧-D ou View>Run) a partir do Visual Studio Code.

9. Selecione Launch Remote (Edge) na lista suspensa de configuração de inicialização.

   

   Quando a depuração for concluída com êxito, ser-lhe-á pedido que carregue a aplicação bot de mensagem proativa para o Teams.

10. Selecione Adicionar.

    

11. Procure e selecione o âmbito pretendido ou selecione um canal, chat ou reunião a partir da lista e percorra a caixa de diálogo para selecionar Ir.

    

    A aplicação bot de mensagens proativas é carregada para o cliente do Teams e a seguinte mensagem é apresentada em resposta à mensagem enviada.

    

12. Copie e cole o URL ou navegue para o URL no browser. Uma mensagem de saudação proativa é acionada e partilhada no chat.

    

13. Aceda ao Teams. Receberá uma mensagem de saudação proativa do bot.

    

linha de comandos

Na janela do terminal:

1. Execute atk new para criar um novo projeto.

atk new

1. Execute atk provision para criar o recurso do Azure.

atk provision

1. Execute atk deploy para implantar o aplicativo.

atk deploy

1. Execute atk preview para executar a aplicação.

atk preview

Completar desafio

Você inventou algo assim?

Concluiu o cenário.

• Pode enviar notificações diariamente ou pedir feedback aos utilizadores periodicamente.
• Pode lidar com limites de limitação para evitar múltiplas notificações.

Enviar mensagens proativas

Voltar para o início

Criar uma extensão de mensagem baseada em API

As extensões de mensagem criadas com recurso a uma API (baseada em API) melhoram significativamente a funcionalidade das suas aplicações do Teams, permitindo-lhes interagir com serviços externos. As extensões de mensagem baseadas em API podem ajudar a simplificar os fluxos de trabalho, reduzindo a necessidade de alternar entre diferentes aplicativos.

Tutorial: Criar uma extensão de mensagem baseada em API

Observação

As extensões de mensagem baseadas em API suportam apenas comandos de pesquisa.

Você pode usar extensões de mensagem baseadas em API para integrar serviços externos que são comumente usados no fluxo de trabalho de negócios. Por exemplo, uma empresa que utilize frequentemente um sistema CRM para a gestão de clientes pode utilizar uma extensão de mensagem para obter e apresentar dados de clientes diretamente no Teams. Esta aplicação ajuda a poupar tempo e melhora a eficiência, reduzindo a necessidade de alternar entre diferentes aplicações. Esta funcionalidade é suportada em todas as plataformas em que o Teams está disponível, incluindo ambiente de trabalho, Web e dispositivos móveis.

Pré-requisitos para criar uma extensão de mensagem

Eis uma lista das ferramentas de que precisa para criar e implementar as suas aplicações.

Instalar	Para usar...
Microsoft Teams	O Microsoft Teams para colaborar com todos com quem trabalha através de aplicações para conversas, reuniões ou chamadas, tudo num único local.
Microsoft Edge (recomendado) ou Google Chrome	Um browser com ferramentas de programador.
Visual Studio Code	Ambientes de compilação JavaScript, TypeScript ou Estrutura do SharePoint (SPFx). Utilize a versão 1.55 ou posterior.
Conta de programador do Microsoft 365	Acesso a uma conta do Teams com as permissões adequadas para instalar uma aplicação.
Azure conta	Acesso a recursos Azure.
Documento de Descrição OpenAPI (OAD)	Um documento que descreve os recursos da sua API. Para obter mais informações, consulte Descrição do OpenAPI.

Configurar o inquilino de desenvolvimento do Teams

Um inquilino é como um espaço ou contentor para a sua organização no Teams, onde pode conversar por chat, partilhar ficheiros e organizar reuniões. Este espaço é também o local onde carrega e testa a aplicação personalizada. Vamos verificar se está pronto para desenvolver com o inquilino.

Opção Verificar carregamento de aplicações personalizadas

Após criar a aplicação, tem de carregar a aplicação no Teams sem a distribuir. Este processo é conhecido como carregamento de aplicações personalizadas. Inicie sessão na sua conta Microsoft 365 para ver esta opção.

Observação

O carregamento personalizado da aplicação é necessário para pré-visualizar e testar aplicações no ambiente local do Teams. Se não estiver ativado, não poderá pré-visualizar e testar a sua aplicação no ambiente local do Teams.

Você já tem um locatário e tem acesso de administrador? Vamos marcar se você realmente faz!

Verifique se você pode carregar um aplicativo personalizado no Teams:

1. No cliente do Teams, selecione o ícone Aplicativos .

2. Selecione Gerenciar seus aplicativos.

3. Selecione Carregar um aplicativo.

4. Procure a opção para carregar um aplicativo personalizado. Se você vir a opção, o carregamento de aplicativo personalizado será habilitado.

   

Observação

Entre em contato com o administrador do Teams se você não encontrar a opção para carregar um aplicativo personalizado.

Criar um locatário de desenvolvedor do Teams gratuito (opcional)

Se você não tiver uma conta de desenvolvedor do Teams, poderá obtê-la gratuitamente. Participe do programa de desenvolvedores do Microsoft 365!

1. Vá para o programa de desenvolvedor do Microsoft 365.

2. Selecione Ingressar Agora e siga as instruções na tela.

3. Na tela de boas-vindas, selecione Configurar assinatura E5.

4. Configure sua conta de administrador. Depois de concluir, a tela a seguir será exibida.

   

5. Entre no Teams usando a conta de administrador que você acabou de configurar. Verifique se você tem a opção Carregar um aplicativo personalizado no Teams.

Obter uma conta gratuita do Azure

Se você quiser hospedar seu aplicativo ou acessar recursos no Azure, deverá ter uma assinatura do Azure. Crie uma conta gratuita antes de começar.

Você tem todas as ferramentas para configurar sua conta. Em seguida, vamos configurar seu ambiente de desenvolvimento e começar a criar! Selecione o aplicativo que você deseja compilar primeiro.

Criar documento de descrição do OpenAPI

A Descrição da OpenAPI (OAD) é a especificação padrão do setor que descreve como os arquivos OpenAPI são estruturados e delineados. É um formato independente de linguagem e legível para descrever APIs. É fácil para humanos e máquinas ler e escrever. O esquema é legível por máquina e representado em YAML ou JSON.

Para interagir com as APIs, é necessário um documento de descrição do OpenAPI. O documento de descrição do OpenAPI deve atender aos seguintes critérios:

• A auth propriedade não deve ser especificada.

• JSON e YAML são os formatos com suporte.

• As versões 2.0 e 3.0.x do OpenAPI são suportadas.

• O Teams não dá suporte às construções oneOf, anyOf, allOf e not (swagger.io).

• Não há suporte para a construção de matrizes para a solicitação, no entanto, há suporte para objetos aninhados em um corpo de solicitação JSON.

• O corpo da solicitação, se presente, deve ser application/Json para garantir a compatibilidade com uma ampla variedade de APIs.

• Defina uma URL do servidor de protocolo HTTPS para a servers.url propriedade.

• Há suporte apenas para a pesquisa de parâmetro único.

• Somente um parâmetro necessário sem um valor padrão é permitido.

• Há suporte apenas para os métodos POST e GET HTTP.

• O documento de descrição do OpenAPI deve ter um operationIdarquivo .

• A operação não deve exigir parâmetros Header ou Cookie sem valores padrão.

• Um comando deve ter exatamente um parâmetro.

• Certifique-se de que não haja referências remotas no documento Descrição do OpenAPI.

• Um parâmetro necessário com um valor padrão é considerado opcional.

  Usamos a seguinte descrição do OpenAPI como exemplo para este tutorial:

  Descrição da OpenAPI

      openapi: 3.0.1
      info:
      title: OpenTools Plugin
      description: A plugin that allows the user to find the most appropriate AI tools for their use cases, with their pricing information.
      version: 'v1'
      servers:
          - url: https://gptplugin.opentools.ai
      paths:
      /tools:
      get:
      operationId: searchTools
      summary: Search for AI Tools
          parameters:
          - in: query
            name: search
            required: true
            schema:
            type: string
            description: Used to search for AI tools by their category based on the keywords. For example, a search for "tool to create music" provides a list of tools that can create music.
          responses:
          "200":
            description: OK
            content:
            application/json:
              schema:
              $ref: '#/components/schemas/searchToolsResponse'
          "400":
            description: Search Error
            content:
            application/json:
              schema:
              ref: '#/components/schemas/searchToolsError'
          components:
          schemas:
          searchToolsResponse:
          required:
          - search
          type: object
          properties:
          tools:
          type: array
          items:
          type: object
          properties:
          name:
          type: string
          description: The name of the tool.
          opentools_url:
          type: string
          description: The URL to access the tool.
          main_summary:
          type: string
          description: A summary of what the tool is.
          pricing_summary:
          type: string
          description: A summary of the pricing of the tool.
          categories:
          type: array
          items:
          type: string
          description: The categories assigned to the tool.
          platforms:
          type: array
          items:
          type: string
          description: The platforms that this tool is available on.
          description: The list of AI tools.
          searchToolsError:
          type: object
          properties:
          message:
          type: string
          description: Message of the error.
  
  

  Observação

  Verifique se a required: true propriedade está disponível para apenas um parâmetro. Se houver mais de um parâmetro obrigatório, você poderá atualizar a propriedade necessária para required: false os outros parâmetros.

Você pode validar se o documento de descrição do OpenAPI é válido. Para verificar, siga estas etapas:

1. Vá para o validador do Swagger ou OpenAPI e valide o documento Descrição do OpenAPI.

2. Salve o documento Descrição da OpenAPI.

3. Vá para o Editor do Swagger.

4. No painel esquerdo, cole a descrição do OpenAPI no editor.

5. No painel direito, selecione GET.

6. Selecione Experimentar.

7. Insira os valores para o parâmetro de pesquisa como Ferramenta para criar música.

8. Selecione Executar. O editor do Swagger exibe uma resposta com uma lista de produtos.

   

9. Vá para ocorpo da resposta>do servidor.

10. Em products, copie o primeiro produto da lista e salve-o para referência futura.

    

Criar modelo de renderização de resposta

Um documento de descrição do OpenAPI requer um modelo de renderização de resposta para que o aplicativo responda às solicitações GET ou POST. O modelo de renderização de resposta consiste em um modelo de Cartão Adaptável, um modelo de card de visualização e metadados.

Modelo de Cartão Adaptável

Para criar um modelo de Cartão Adaptável, siga estas etapas:

1. Acesse o ChatGPT e faça a seguinte consulta na área de redação de mensagens:

   
   Create an Adaptive Card Template that binds to the following response:
       "categories": [
           "Music Generation",
           "AI Detection"
       ],
       "chatbot_short_url": "https://goto.opentools.ai/c/ai-music-generator",
       "main_summary": "AI Music Generator is an AI-powered music composing tool that allows users to create original and personalized music for various purposes. It can generate melodies, harmonies, and rhythms tailored to specific needs and preferences, with customization options such as genre, mood, length, and instrumentation. The tool is designed for creative individuals, from beginners to professionals, and can produce high-quality music in seconds. Every generated piece of music is royalty-free and can be used instantly, with no limitations on beat creation. With advanced AI technology, AI Music Generator makes music production accessible to everyone.",
       "name": "AI Music Generator",
       "opentools_url": "https://goto.opentools.ai/ai-music-generator",
       "platforms": [
           "Web",
           "App",
           "API"
       ]
   

2. Selecione Enviar mensagem.

3. O ChatGPT gera uma resposta com um modelo de Cartão Adaptável que se associa aos dados de exemplo. Salve o modelo de Cartão Adaptável para referência futura.

   A seguir está um exemplo do modelo de Cartão Adaptável:

   Modelo de Cartão Adaptável

   
   {
   "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
   "type": "AdaptiveCard",
   "version": "1.4",
   "body": [
       {
       "type": "TextBlock",
       "text": "AI Music Generator",
       "weight": "Bolder",
       "size": "Large"
       },
       {
       "type": "TextBlock",
       "text": "Categories",
       "size": "Medium"
       },
       {
       "type": "TextBlock",
        "text": "Music Generation, AI Detection",
        "wrap": true
       },
       {
       "type": "TextBlock",
       "text": "Description",
       "size": "Medium"
       },
       {
       "type": "TextBlock",
       "text": "AI Music Generator is an AI-powered music composing tool that allows users to create original and personalized music for various purposes. It can generate melodies, harmonies, and rhythms tailored to specific needs and preferences, with customization options such as genre, mood, length, and instrumentation. The tool is designed for creative individuals, from beginners to professionals, and can produce high-quality music in seconds. Every generated piece of music is royalty-free and can be used instantly, with no limitations on beat creation. AI Music Generator is powered by advanced AI technology, and it makes music production accessible to everyone.",
       "wrap": true
       },
       {
       "type": "TextBlock",
       "text": "Platform",
       "size": "Medium"
       },
       {
       "type": "TextBlock",
       "text": "Web, App, API",
       "wrap": true
       }
   ],
   "actions": [
       {
       "type": "Action.OpenUrl",
       "title": "Learn More",
       "url": "https://goto.opentools.ai/ai-music-generator"
       },
       {
       "type": "Action.OpenUrl",
       "title": "Try It",
       "url": "https://goto.opentools.ai/c/ai-music-generator"
       }
   ]
   }
   
   

4. Para verificar se o Cartão Adaptável gerado se associa aos dados de exemplo, siga estas etapas:

   1. Vá para a Designer do Cartão Adaptável.

   2. Vá para Selecionar aplicativo host e, em seguida, selecione Microsoft Teams na lista suspensa.

   3. Acesse EDITOR DE CONTEÚDO DE CARTÃO e cole o código do modelo de Cartão Adaptável.

   4. Acesse EDITOR DE DADOS DE EXEMPLO e cole a resposta GET API que você salvou anteriormente.

      

   5. Selecione o Modo de visualização. O designer do Cartão Adaptável exibe um Cartão Adaptável com os dados que associam a resposta ao modelo.

      

Criar um modelo de card de visualização

O modelo de card de visualização pode conter um title, subtitle, e image propriedades. Se a resposta da API não tiver uma imagem, você poderá remover a propriedade image.

A seguir está um exemplo de um modelo de card de visualização:

Visualizar modelo de card

   "previewCardTemplate": {
        "title": "${if(name, name, 'N/A')}",
        "subtitle": "$${if(price, price, 'N/A')}"
    } 

Crie uma condição if para o title e subtitle, em que:

• Se o nome existir, o bot usará o nome.
• Se o nome não existir, o bot usará NA.

Por exemplo, "title": "Name: ${if(name, name, 'N/A')}". Salve o modelo de card de visualização para referência futura.

Modelo de renderização de resposta

O modelo de renderização de resposta deve estar em conformidade com o esquema hospedado em https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json.

Para criar um modelo de renderização de resposta, siga estas etapas:

1. Crie um arquivo JSON e adicione o seguinte código ao arquivo:

   { 
     "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json", 
     "version": "1.0", 
     "jsonPath": "", 
     "responseLayout": "", 
     "responseCardTemplate": { 
    },
    "previewCardTemplate": {
        }
    }
   

2. Atualize as propriedades no modelo de renderização de resposta da seguinte maneira:

   #	Nome da propriedade	Valor
   1.	"$schema"	"https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json"
   2.	"version"	"1.0" version é a versão do modelo de renderização a ser usada.
   3.	"jsonPath"	"tools" jsonPath é o caminho para um ou mais resultados na resposta JSON de resposta. Adicione os jsonPath dados/matrizes relevantes da lista de produtos na resposta da API. Nesse caso, as jsonPath ferramentas são. Para obter mais informações sobre como determinar o caminho JSON, consulte Consultando JSON com caminho JSON.
   4.	"responseLayout"	"list" responseLayout Especifica o layout dos anexos. Usado para respostas do tipo resultado. Os tipos com suporte são lista e grade. Se o corpo da resposta contiver um objeto com vários elementos, como texto, título e imagem, o layout de resposta deverá ser definido como list. Se a resposta da API contiver apenas imagens ou miniaturas, o layout de resposta deverá ser definido como grid.
   5.	"responseCardTemplate"	Cole o código do modelo de Cartão Adaptável que você salvou anteriormente. responseCardTemplate é um modelo de Cartão Adaptável para mapear a resposta JSON para um Cartão Adaptável.
   6.	"previewCardTemplate"	Cole o código do modelo de card de visualização que você salvou anteriormente. previewCardTemplateé um modelo de card de visualização é usado para mostrar uma visualização dos resultados no submenu de extensão de mensagem.

3. Salve o modelo de renderização de resposta na mesma pasta em que você salvou o documento Descrição do OpenAPI.

O código a seguir é um exemplo de um modelo de renderização de resposta:

Modelo de renderização de resposta

{
    "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json",
    "version": "1.0",
    "jsonPath": "tools",
    "responseLayout": "list",
    "responseCardTemplate": {
        "type": "AdaptiveCard",
        "version": "1.4",
        "body": [
            {
            "type": "TextBlock",
            "text": "AI Music Generator",
            "weight": "Bolder",
            "size": "Large"
            },
            {
            "type": "TextBlock",
            "text": "Categories",
            "size": "Medium"
            },
            {
            "type": "TextBlock",
            "text": "Music Generation, AI Detection",
            "wrap": true
            },
            {
            "type": "TextBlock",
            "text": "Description",
            "size": "Medium"
            },
            {
            "type": "TextBlock",
            "text": "AI Music Generator is an AI-powered music composing tool that allows users to create original and personalized music for various purposes. It can generate melodies, harmonies, and rhythms tailored to specific needs and preferences, with customization options such as genre, mood, length, and instrumentation. The tool is designed for creative individuals, from beginners to professionals, and can produce high-quality music in seconds. Every generated piece of music is royalty-free and can be used instantly, with no limitations on beat creation. With advanced AI technology, AI Music Generator makes music production accessible to everyone.",
            "wrap": true
            },
            {
            "type": "TextBlock",
            "text": "Platform",
            "size": "Medium"
            },
            {
            "type": "TextBlock",
            "text": "Web, App, API",
            "wrap": true
            }
        ],
        "actions": [
            {
            "type": "Action.OpenUrl",
            "title": "Learn More",
            "url": "https://goto.opentools.ai/ai-music-generator"
            },
            {
            "type": "Action.OpenUrl",
            "title": "Try It",
            "url": "https://goto.opentools.ai/c/ai-music-generator"
            }
        ]
    },
    "previewCardTemplate": {
        "title": "${if(name, name, 'N/A')}",
        "subtitle": "$${if(price, price, 'N/A')}"
    } 
}

Criar manifesto do aplicativo

Agora, você precisa criar um manifesto do aplicativo (anteriormente chamado de manifesto do aplicativo do Teams). O manifesto do aplicativo descreve como seu aplicativo se integra ao produto Microsoft Teams.

Criar um manifesto de aplicativo do Teams

Para criar o manifesto, siga estas etapas:

1. Crie um novo arquivo JSON. O manifesto do aplicativo deve estar em conformidade com a versão 1.20 do esquema definido no esquema do manifesto do aplicativo.

2. Adicione o seguinte código ao arquivo JSON:

   Manifesto do aplicativo

   {
    "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.schema.json",
    "manifestVersion": "1.20",
    "version": "1.0.3",
    "id": "<<YOUR-MICROSOFT-APP-ID>>",
    "packageName": "com.microsoft.teams.extension",
    "developer": {
        "name": "Teams App, Inc.",
        "websiteUrl": "https://www.example.com",
        "privacyUrl": "https://www.example.com/termofuse",
        "termsOfUseUrl": "https://www.example.com/privacy"
    },
    "icons": {
        "color": "color.png",
        "outline": "outline.png"
    },
    "name": {
        "short": "Search ME API",
        "full": "Search ME API full"
    },
    "description": {
        "short": "product app for testing API Message Extensions",
        "full": "product app for testing API Message Extensions"
    },
    "accentColor": "#FFFFFF",
    "composeExtensions": [
        {
            "composeExtensionType": "",
            "apiSpecificationFile": "",
            "commands": [
                {
                    "context": [
                        "compose"
                    ],
                    "type": "query",
                    "title": "API for fetching Klarna.",
                    "id": "",
                    "parameters": [
                        {
                            "name": "",
                            "title": "",
                            "description": ""
                        }
                    ],
                    "description": "",
                    "apiResponseRenderingTemplateFile": ""
                }
            ]
        }
    ],
    "permissions": [
        "identity",
        "messageTeamMembers"
    ],
    "validDomains": []
   }
   

3. Atualize as propriedades do manifesto do aplicativo da seguinte maneira:

   • Substitua <<YOUR-MICROSOFT-APP-ID>> pela ID do Aplicativo Microsoft do bot.
   • Atualize o valor de composeExtensionType para apiBased.
   • Atualize o valor para apiSpecificationFile o caminho do arquivo de descrição do OpenAPI.
   • Atualize o valor de commands.id para searchTools.
   • Atualize o valor de commands.title para Search for AI Tools.
   • Atualize o valor de commands.description para Search for AI Tools.
   • Atualize o valor de parameters.name para search. Se não houver parâmetros, os valores deverão ser parâmetros de consulta ou properties.name se estiver fazendo referência a uma propriedade no esquema do corpo da solicitação.
   • Atualize o apiResponseRenderingTemplateFile para o caminho do arquivo de modelo de renderização de resposta.
   • Atualize o valor para validDomains o service URL ponto de extremidade definido no arquivo de descrição do OpenAPI.

4. Salve o manifesto do aplicativo Teams na mesma pasta em que você salvou o documento Descrição da OpenAPI e o modelo de renderização de resposta.

   • Você precisa de uma imagem colorida e uma imagem de contorno. Essas imagens devem ser incluídas na pasta e referenciadas no manifesto do aplicativo do Teams.

   • Compacte o conteúdo da pasta. O arquivo zip deve incluir os seguintes arquivos:

     • Documento de descrição da OpenAPI
     • Modelo de renderização de resposta
     • Manifesto do aplicativo
     • Ícone de cor
     • ícone de Estrutura de tópicos

Carregar um aplicativo personalizado no Teams

Entre no ambiente de teste do Teams para testar seu aplicativo no Teams. Para carregar um aplicativo personalizado no Teams, siga estas etapas:

1. Vá para o Microsoft Teams e entre usando suas credenciais de locatário de teste.

2. Acessar Aplicativos>Gerenciar seu aplicativo>Carregar um aplicativo.

3. Selecione Carregar um aplicativo personalizado.

4. Selecione o arquivo zip criado e selecione Abrir.

5. Selecione Adicionar.

   

6. Escolha Abrir.

   

7. Vá para um chat, selecione + na área de redação de mensagem e pesquise seu aplicativo.

8. Selecione o aplicativo e faça uma consulta de pesquisa.

   

9. O aplicativo responde com um Cartão Adaptável na janela de chat.

10. Selecione Enviar.

    

Parabéns! Você conseguiu! Você aprendeu a criar uma extensão de mensagem baseada em API usando o documento Descrição do OpenAPI.

Criar uma extensão de mensagem baseada em API

Voltar para o início

Criar extensão de mensagem baseada em ação

A extensão de mensagem baseada em ação do Teams permite que os usuários interajam com serviços Web no cliente Microsoft Teams. As extensões de mensagem ajudam a iniciar ações em um sistema externo a partir da área de redação de mensagem, da caixa de comando ou diretamente de uma mensagem.

Tutorial: Criar extensão de mensagem baseada em ação

Principais recursos da extensão de mensagem baseada em ação:

• Apresenta ao usuário um pop-up modal para coletar ou exibir informações.
• Dispara os comandos de ação da área de redação de mensagem, da caixa de comando ou de uma mensagem.

Este guia passo a passo ajuda você a criar a extensão de mensagem baseada em ação do Teams para iniciar ações a partir da área de redação de mensagem e mensagem. Ao final deste tutorial, você poderá obter a seguinte saída:

Pré-requisitos

Certifique-se de instalar as seguintes ferramentas e configurar seu ambiente de desenvolvimento:

	Instalar	Para usar...
	Microsoft Teams	Microsoft Teams para colaborar com todos com quem você trabalha por meio de aplicativos para chat, reuniões e chamadas, tudo em um só lugar.
	Visual Studio 2022	Você pode instalar a versão enterprise no Visual Studio 2022 e instalar as cargas de trabalho de desenvolvimento ASP.NET e Web. Use a versão mais recente.
	SDK do .NET Core	Associações personalizadas para depuração local e implantações de aplicativos do Azure Functions. Se você não instalou a versão mais recente, instale a versão portátil.
	Túnel de desenvolvimento	Os recursos do aplicativo Teams (bots de conversa, extensões de mensagem e webhooks de entrada) precisam de conexões de entrada. Um túnel conecta seu sistema de desenvolvimento ao Teams. O Túnel de desenvolvimento é uma ferramenta poderosa para abrir com segurança seu host local para a Internet e controlar quem tem acesso. O túnel de desenvolvimento está disponível no Visual Studio 2022 versão 17.7.0 ou posterior. ou Você também pode usar o ngrok como um túnel para conectar seu sistema de desenvolvimento ao Teams. Não é necessário para aplicativos que incluem apenas guias. Este pacote é instalado no diretório do projeto (usando npm devDependencies).

Observação

Depois de baixar o ngrok, inscreva-se e instale o authtoken.

Configurar o ambiente local

1. Abra Microsoft-Teams-Samples.

2. Selecione Código.

3. No menu suspenso, selecione Abrir com GitHub Desktop.

   

4. Selecione Clonar.

Registrar o aplicativo Microsoft Entra

As etapas a seguir ajudam você a criar e registrar seu bot no portal do Azure:

• Crie e registre seu aplicativo do Azure.
• Crie um segredo do cliente para habilitar a autenticação SSO do bot.
• Adicione o canal do Teams para implantar o bot.
• Crie um túnel para os pontos de extremidade do servidor Web usando o dev tunnel (recomendado) ou o ngrok.
• Adicione um ponto de extremidade de mensagens ao túnel de desenvolvimento que você criou.

Adicionar registro de aplicativo

1. Acesse o portal do Azure.

2. Selecione Registros de aplicativo.

   

3. Selecione + Novo registro.

   

4. Insira o nome do seu aplicativo.

5. Selecione Contas em qualquer diretório organizacional (Qualquer locatário do Microsoft Entra ID - Multilocatário).

6. Selecione Registrar.

   

   Seu aplicativo está registrado no Microsoft Entra ID. A página de visão geral do aplicativo é exibida.

   

   Observação

   Salve a ID do aplicativo da ID do aplicativo (cliente) e da ID do diretório (locatário) para uso posterior.

Criar um túnel

Siga um dos dois métodos a seguir para criar um túnel.

Túnel de desenvolvimento

1. Abra o Visual Studio.

2. Selecione Criar um novo projeto.

   

3. Na caixa de pesquisa, digite ASP.NET. Nos resultados da pesquisa, selecione Aplicativo Web do ASP.NET Core.

4. Selecione Avançar.

   

5. Insira o Nome do projeto e selecione Avançar.

   

6. Selecione Criar.

   

   Uma janela de visão geral é exibida.

   

7. Na lista suspensa de depuração, selecione Dev Tunnels (sem túnel ativo)>Criar um túnel....

   

   Uma janela pop-up é exibida.

8. Atualize os seguintes detalhes na janela pop-up:

   1. Conta: insira uma conta Microsoft ou GitHub.
   2. Nome: Insira um nome para o túnel.
   3. Tipo de túnel: na lista suspensa, selecione Temporário.
   4. Acesso: na lista suspensa, selecione Público.

9. Selecione OK.

   

   Uma janela pop-up é exibida mostrando que o túnel de desenvolvimento foi criado com êxito.

10. Selecione OK.

    

    Você pode encontrar o túnel criado na lista suspensa de depuração da seguinte maneira:

    

11. Selecione F5 para executar o aplicativo no modo de depuração.

12. Se uma caixa de diálogo de Aviso de Segurança for exibida, selecione Sim.

    

    Uma janela pop-up é exibida.

13. Clique em Continuar.

    

    A página inicial do túnel de desenvolvimento é aberta em uma nova janela do navegador e o túnel de desenvolvimento agora está ativo.

    

14. Vá para o Visual Studio, selecione Exibir > Saída.

15. No menu suspenso do console de saída , selecione Dev Tunnels.

    O console de saída mostra a URL do túnel de desenvolvimento.

    

ngrok

Use o ngrok ou o Prompt de Comando para criar um túnel para os pontos de extremidade HTTPS disponíveis publicamente do servidor Web que está sendo executado localmente. Execute o seguinte comando no ngrok:

ngrok http --host-header=localhost 3978

Dica

Se você encontrar ERR_NGROK_4018, siga as etapas fornecidas no Prompt de Comando para se inscrever e autenticar o ngrok. Em seguida, execute o ngrok http --host-header=localhost 3978 comando.

A janela mostra a URL HTTPS.

Adicionar autenticação da Web

1. No painel esquerdo, em Gerenciar, selecione Autenticação.

2. Selecione Adicionar uma plataforma>Web.

   

3. Insira o URI de redirecionamento do seu aplicativo anexando-o ao nome de auth-end domínio totalmente qualificado. Por exemplo, https://your-devtunnel-domain/auth-end ou https://your-ngrok-domain/auth-end.

4. Em Concessão implícita e fluxos híbridos, marque as caixas de seleção Tokens de acesso e Tokens de ID .

5. Selecione Configurar.

   

6. Em Web, selecione Adicionar URI.

7. Insira https://token.botframework.com/.auth/web/redirect.

8. Selecione Salvar.

   

Criar um segredo do cliente

Observação

Se você encontrar o erro, os segredos do cliente são bloqueados pela política em todo o locatário. Entre em contato com o administrador de locatários para obter mais informações., em vez disso, você pode criar um certificado. Para obter instruções passo a passo, consulte Criar um certificado para registro de aplicativo.

1. No painel esquerdo, em Gerenciar, selecione Certificados & segredos.

2. Em Segredos do cliente, selecione + Novo segredo do cliente.

   

   A janela Adicionar um segredo do cliente é exibida.

3. Insira a descrição.

4. Selecione Adicionar.

   

5. Em Valor, selecione Copiar para a área de transferência para salvar o valor do segredo do cliente para uso posterior.

   

Adicionar permissões de API

1. No painel esquerdo, selecione Permissões de API.

2. Selecione + Adicionar uma permissão.

   

3. Selecione Microsoft Graph.

4. Selecione Permissões delegadas.

5. Selecione User>User.Read.

6. Selecione Adicionar permissões.

   

   Observação

   • Se um aplicativo não receber consentimento de administrador de TI, os usuários deverão declará-lo na primeira vez que usarem um aplicativo.
   • Os usuários precisarão consentir com as permissões de API somente se o aplicativo Microsoft Entra estiver registrado em um locatário diferente.

Adicionar URI da ID do aplicativo

1. No painel esquerdo, em Gerenciar, selecione Expor uma API.

2. Ao lado do URI da ID do aplicativo, selecione Adicionar.

   

3. Atualize o URI da ID doapi://botid-{AppID} aplicativo no formato e selecione Salvar.

   

Adicionar um escopo

1. No painel esquerdo, em Gerenciar, selecione Expor uma API.

2. Selecione + Adicionar um escopo.

   

3. Insira access_as_user como o nome do Escopo.

4. Em Quem pode consentir?, selecione Administradores e usuários.

5. Atualize os valores para o restante dos campos da seguinte forma:

   • Insira Teams pode acessar o perfil do usuário como nome de exibição de consentimento do Administrador.

   • Enter Permite que o Teams chame as APIs Web do aplicativo como o usuário atual como a descrição do consentimento do Administrador.

   • Enter Teams pode acessar o perfil do usuário e fazer solicitações em nome do usuário como nome de exibição do consentimento do usuário.

   • Enter Permitir que o Teams chame as APIs deste aplicativo com os mesmos direitos que o usuário como Descrição doconsentimento do usuário.

6. Verifique se o Estado está definido como Habilitado.

7. Selecione Adicionar escopo.

   A imagem a seguir mostra os campos e os valores:

   

   Observação

   O nome do escopo deve corresponder ao URI da ID do aplicativo com /access_as_user acrescentado no final.

   

Adicionar aplicativo cliente

1. No painel esquerdo, em Gerenciar, selecione Expor uma API.

   Em Aplicativos cliente autorizados, identifique os aplicativos que deseja autorizar para o aplicativo Web do seu aplicativo.

2. Selecione + Adicionar um aplicativo cliente.

   

3. Adicione o Teams móvel ou desktop e o aplicativo Web do Teams.

   1. Para dispositivos móveis ou desktop do Teams: Insira a ID do cliente como 1fec8e78-bce4-4aaf-ab1b-5451cc387264.

      

   2. Para o Teams na Web: Insira a ID do cliente como 5e3ce6c0-2b1f-4285-8d4b-75ee78787346.

      

4. Marque a caixa de seleção Escopos autorizados .

5. Selecione Adicionar aplicativo.

   

   A imagem a seguir exibe a ID do cliente:

   

Criar seu bot

Criar um recurso de bot do Azure

Observação

Se você já estiver testando seu bot no Teams, saia deste aplicativo e do Teams. Para ver essa alteração, entre novamente.

1. Go to Home.

2. Selecione + Criar um recurso.

3. Na caixa de pesquisa, insira Bot do Azure.

4. Selecione Enter.

5. Selecione Bot do Azure.

6. Selecione Criar.

   

7. Insira o nome do bot no identificador do bot.

8. Selecione sua assinatura na lista suspensa.

9. Selecione seu Grupo de recursos na lista suspensa.

   

   Se não tiver um grupo de recursos existente, você poderá criar um novo grupo de recursos. Para criar um novo grupo de recursos, siga estas etapas:

   1. Selecione Criar novo.
   2. Insira o nome do recurso e selecione OK.
   3. Selecione um local na lista suspensa de localizações do novo grupo de recursos .

   

10. Em Preços, selecione Alterar plano.

    

11. Selecione FO Free>Select.

    

12. Em ID do aplicativo da Microsoft, selecione Tipo de aplicativo como multilocatário.

13. No Tipo de criação, selecione Usar registro de aplicativo existente.

14. Insira a ID do aplicativo.

    Observação

    Você não pode criar mais de um bot com a mesma ID de Aplicativo da Microsoft.

15. Selecione Examinar + criar.

    

16. Após a validação, selecione Criar.

    O bot leva alguns minutos para ser provisionado.

17. Selecione Ir para o recurso.

    

    Você criou seu bot do Azure com êxito.

    

Adicionar um canal do Teams

1. No painel esquerdo, selecione Canais.

2. Em Canais Disponíveis, selecione Microsoft Teams.

   

3. Marque a caixa de seleção para aceitar os Termos de Serviço.

4. Selecione Concordo.

   

5. Selecione Aplicar.

   

Adicionar um ponto de extremidade de mensagens

Use uma das seguintes maneiras para adicionar um ponto de extremidade de mensagens:

Túnel de desenvolvimento

1. Use a URL do túnel de desenvolvimento no console de saída como o ponto de extremidade de mensagens.

   

2. No painel esquerdo, em Configurações, selecione Configuração.

3. Atualize o ponto de extremidade de mensagens no formato https://your-devtunnel-domain/api/messages.

   

4. Selecione Aplicar.

   Você configurou com sucesso um bot no serviço Bot do Azure.

   Observação

   Se a chave de Instrumentação do Application Insights mostrar um erro, atualize com a ID do Aplicativo.

ngrok

1. No ngrok, copie a URL HTTPS.

   

   Observação

   A URL HTTPS em seu ngrok é um nome de domínio totalmente qualificado. É WebAppDomain um nome de domínio totalmente qualificado que não está incluído https:// nele.

2. No painel esquerdo, em Configurações, selecione Configuração.

3. Atualize o ponto de extremidade de mensagens no formato https://your-ngrok-domain/api/messages.

   

4. Selecione Aplicar.

   Você configurou com sucesso um bot no serviço Bot do Azure.

   Observação

   Se a chave de Instrumentação do Application Insights mostrar um erro, atualize com a ID do Aplicativo.

Definir configurações de aplicativo e arquivos de manifesto

1. Acesse o arquivo appsettings.json no repositório clonado.

   

2. Abra o arquivo appsettings.json e atualize as seguintes informações:

   • Defina "MicrosoftAppId" como a ID do Aplicativo Microsoft do bot.
   • Defina "MicrosoftAppPassword" como o valor da ID do segredo do cliente do bot.
   • Defina ConnectionName como nome da conexão OAuth.
   • Definido "MicrosoftAppType" como Multilocatário.
   • Definido "MicrosoftAppTenantId" como comum.

   

3. Acesse o arquivo manifest.json no repositório clonado.

   

4. Abra o arquivo manifest.json e atualize as seguintes alterações:

   • Substitua todas as ocorrências de pela ID do "{TODO: MicrosoftAppId}"Aplicativo Microsoft.
   • Defina "<<domain-name>>" como seu domínio ngrok ou dev tunnel.

   

Compilar e executar o serviço

Para compilar e executar o serviço, use o Visual Studio ou a Linha de Comando.

Visual Studio

1. Abra o Visual Studio.

2. Vá para Arquivo>Abrir>Projeto / Solução .....

   

3. Na pasta csharp , selecione o arquivo TeamsMessagingExtensionsAction.csproj .

   

4. Pressione F5 para executar o projeto.

5. Selecione Sim se a seguinte caixa de diálogo for exibida:

   

   Uma página da Web é exibida com uma mensagem Seu bot está pronto!.

   

Linha de comando

Vá para samples>msgext-action>csharp na janela do prompt de comando e digite o seguinte comando:

    dotnet run

Adicionar o aplicativo Extensão de Mensagem de Ação ao Teams

1. No repositório clonado, vá para samples>msgext-action>csharp>TeamsAppManifest.

2. Crie um .zip com os seguintes arquivos presentes na pasta Manifesto :

   • manifest.json
   • icon-outline.png
   • icon-color.png

   

3. No cliente do Teams, selecione o ícone Aplicativos .

4. Selecione Gerenciar seus aplicativos.

5. Selecione Carregar um aplicativo.

6. Procure a opção para carregar um aplicativo personalizado. Se você vir a opção, o carregamento de aplicativo personalizado será habilitado.

   

   Observação

   Entre em contato com o administrador do Teams se você não encontrar a opção de carregar um aplicativo personalizado.

7. Selecione Abrir para carregar o arquivo messaging.zip que você criou na pasta TeamsAppManifest.

   

8. Selecione Adicionar.

   

9. Selecione Abrir para abrir o aplicativo no escopo pessoal.

   Como alternativa, você pode pesquisar e selecionar o escopo necessário ou selecionar um canal, chat ou reunião na lista e passar pela caixa de diálogo para selecionar Ir.

   

Interagir com o aplicativo no Teams

1. Selecione o comando Criar Cartão na lista de comandos da caixa de composição.

   

2. Insira suas informações na janela pop-up modal.

   

3. Selecione Enviar.

   

4. Selecione Mais opções (...) no menu flutuante.

5. Selecione Mais ações>Compartilhar Mensagem.

   

6. Se você quiser incluir uma imagem, marque a caixa de seleção Incluir imagem no Cartão de Herói e selecione Enviar.

   

Conclua o desafio

Você inventou algo assim?

Você concluiu o tutorial para começar a usar um aplicativo de Extensão de Mensagem de Ação !

Comandos de ação

Voltar para o início

Criar um bot com autenticação SSO

Os bots de conversa no Microsoft Teams executam tarefas automatizadas repetitivas iniciadas pelos usuários, como atendimento ao cliente. O usuário precisa entrar várias vezes sem autenticação de logon único (SSO). Com os métodos de autenticação SSO, os usuários não precisam entrar no bot várias vezes.

Tutorial: Criar um bot com autenticação SSO

Um bot se comporta de maneira diferente dependendo da conversa em que está envolvido:

• Os bots em conversas de canal e chat em grupo exigem que os usuários usem o @mention bot.
• Bots em uma conversa individual não exigem um @mention Todas as mensagens enviadas pelo usuário são roteadas para o bot.

Este guia passo a passo ajuda você a criar um bot com autenticação SSO. Você verá a seguinte saída:

Pré-requisitos para a criação de um bot

Certifique-se de instalar as seguintes ferramentas e configurar seu ambiente de desenvolvimento:

Instalar	Para usar...
Microsoft Teams	Microsoft Teams para colaborar com todos com quem você trabalha por meio de aplicativos para chat, reuniões e chamadas, tudo em um só lugar.
Visual Studio 2022	Você pode instalar a versão enterprise no Visual Studio 2022 e instalar as cargas de trabalho de desenvolvimento ASP.NET e Web. Use a versão mais recente.
Conta de desenvolvedor do Microsoft 365	Acesso à conta do Teams com as permissões apropriadas para instalar um aplicativo.
Túnel de desenvolvimento	Os recursos do aplicativo Teams (bots de conversa, extensões de mensagem e webhooks de entrada) precisam de conexões de entrada. Um túnel conecta seu sistema de desenvolvimento ao Teams. O Túnel de desenvolvimento é uma ferramenta poderosa para abrir com segurança seu host local para a Internet e controlar quem tem acesso. O túnel de desenvolvimento está disponível no Visual Studio 2022 versão 17.7.0 ou posterior. ou Você também pode usar o ngrok como um túnel para conectar seu sistema de desenvolvimento ao Teams. Não é necessário para aplicativos que incluem apenas guias. Este pacote é instalado no diretório do projeto (usando npm devDependencies).

Observação

Depois de baixar o ngrok, inscreva-se e instale o authtoken.

Configurar o locatário de desenvolvimento do Teams

Um locatário é como um espaço ou um contêiner onde você conversa, compartilha arquivos e executa reuniões para sua organização no Teams. Você também pode carregar e testar o aplicativo personalizado.

Verificar se há uma opção de upload de aplicativo personalizada

Depois de criar o aplicativo, você deve carregá-lo no Teams sem distribuí-lo. Esse processo é conhecido como upload de aplicativo personalizado. Entre na sua conta do Microsoft 365 para ver essa opção.

Observação

O upload de aplicativo personalizado é necessário para visualizar e testar aplicativos no ambiente local do Teams. Habilite o upload do aplicativo para visualizar e testar seu aplicativo no Teams localmente.

Você já tem um locatário e tem acesso de administrador? Vamos marcar se você realmente faz!

Para verificar aplicativos de carregamento personalizados no Teams:

1. No cliente do Teams, selecione o ícone Aplicativos .

2. Selecione Gerenciar seus aplicativos.

3. Selecione Carregar um aplicativo

4. Procure a opção Carregar um aplicativo personalizado. Se você vir a opção, o carregamento de aplicativo personalizado será habilitado.

   

Observação

Entre em contato com o administrador do Teams, se você não tiver a opção de carregar um aplicativo personalizado.

Criar um locatário de desenvolvedor gratuito do Teams

Se você não tiver uma conta de desenvolvedor do Teams, poderá obtê-la gratuitamente. Participe do programa de desenvolvedores do Microsoft 365!

1. Vá para o programa de desenvolvedor do Microsoft 365.

2. Selecione Ingressar Agora e siga as instruções na tela.

3. Na tela de boas-vindas, selecione Configurar assinatura E5.

4. Configure uma conta de administrador. Depois de concluir, a tela a seguir será exibida.

   

5. Entre no Teams usando a nova conta de administrador que você acabou de configurar. Verifique se você tem a opção Carregar um aplicativo personalizado no Teams.

Configurar o ambiente local

Siga estas etapas para clonar o repositório:

1. Abra Microsoft-Teams-Samples.

2. Selecione Código.

3. No menu suspenso, selecione Abrir com GitHub Desktop.

   

4. Selecione Clonar.

Registrar o aplicativo Microsoft Entra

As etapas a seguir ajudam você a criar e registrar seu bot no portal do Azure:

• Crie e registre seu aplicativo do Azure.
• Crie um segredo do cliente para habilitar a autenticação SSO do bot.
• Adicione o canal do Teams para implantar o bot.
• Crie um túnel para os pontos de extremidade do servidor Web usando o dev tunnel (recomendado) ou o ngrok.
• Adicione um ponto de extremidade de mensagens ao túnel de desenvolvimento que você criou.

Adicionar registro de aplicativo

1. Acesse o portal do Azure.

2. Selecione Registros de aplicativo.

   

3. Selecione + Novo registro.

   

4. Introduza o nome da sua aplicação.

5. Selecione a opção de inquilino, conforme necessário.

6. Selecione Registrar.

   

   A aplicação está registada no Microsoft Entra ID. É apresentada a página de descrição geral da aplicação.

   

   Observação

   Guarde o ID da aplicação a partir do ID da Aplicação (cliente) e ID do Diretório (inquilino) para utilização posterior.

Criar um túnel

Siga um dos dois métodos a seguir para criar um túnel.

Túnel de desenvolvimento

1. Abra o Visual Studio.

2. Selecione Criar um novo projeto.

   

3. Na caixa de pesquisa, introduza ASP.NET. Nos resultados da pesquisa, selecione ASP.NET Core Web App.

4. Selecione Avançar.

   

5. Introduza o nome do projeto e selecione Seguinte.

   

6. Selecione Criar.

   

   É apresentada uma janela de descrição geral.

   

7. Na lista suspensa de depuração, selecione Dev Tunnels (no active tunnel)>Create a Tunnel....

   

   É apresentada uma janela de pop-up.

8. Atualize os seguintes detalhes na janela pop-up:

   1. Conta: introduza uma conta Microsoft ou GitHub.
   2. Nome: Insira um nome para o seu túnel.
   3. Tipo de túnel: Na lista suspensa, selecione Temporário.
   4. Acesso: na lista suspensa, selecione Público.

9. Selecione OK.

   

   Uma janela pop-up aparece mostrando que o túnel de desenvolvimento foi criado com êxito.

10. Selecione OK.

    

    Pode encontrar o túnel que criou na lista pendente de depuração da seguinte forma:

    

11. Selecione F5 para executar a aplicação no modo de depuração.

12. Se for apresentada uma caixa de diálogo de Aviso , selecione Sim.

    

    É apresentada uma janela de pop-up.

13. Clique em Continuar.

    

    A home page do túnel de desenvolvimento é aberta em uma nova janela do navegador e o túnel de desenvolvimento agora está ativo.

    

14. Vá para Visual Studio, selecione Exibir > saída.

15. No menu suspenso do console de saída , selecione Dev Tunnels.

    O console de saída mostra a URL do túnel de desenvolvimento.

    

ngrok

Use ngrok ou Prompt de Comando para criar um túnel para os pontos de extremidade HTTPS publicamente disponíveis do seu servidor Web em execução local. Execute o seguinte comando no ngrok:

ngrok http --host-header=localhost 3978

Dica

Se você encontrar ERR_NGROK_4018, siga as etapas fornecidas no prompt de comando para se inscrever e autenticar ngrok. Em seguida, execute o ngrok http --host-header=localhost 3978 comando.

A janela mostra o URL HTTPS.

Adicionar autenticação Web

1. No painel esquerdo, em Gerir, selecione Autenticação.

2. Selecione Adicionar uma plataforma>Web.

   

3. Introduza o URI de redirecionamento da sua aplicação ao acrescentar auth-end ao nome de domínio completamente qualificado. Por exemplo, https://your-devtunnel-domain/auth-end ou https://your-ngrok-domain/auth-end.

4. Em Concessão implícita e fluxos híbridos, selecione as caixas de seleção Tokens de acesso e tokens de ID .

5. Selecione Configurar.

   

6. Em Web, selecione Adicionar URI.

7. Digite https://token.botframework.com/.auth/web/redirect.

8. Selecione Salvar.

   

Criar segredo de um cliente

Observação

Se encontrar o erro , os segredos de cliente são bloqueados pela política de todos os inquilinos. Contacte o seu administrador inquilino para obter mais informações. Em alternativa, pode criar um certificado. Para obter instruções passo a passo, consulte Criar um certificado para registro de aplicativo.

1. No painel esquerdo, em Gerir, selecione Certificados & segredos.

2. Em Segredos do cliente, selecione + Novo segredo do cliente.

   

   A janela Adicionar um cliente secreto é exibida.

3. Insira a Descrição.

4. Selecione Adicionar.

   

5. Em Valor, selecione Copiar para a área de transferência para guardar o valor secreto do cliente para utilização posterior.

   

Adicionar permissões de API

1. No painel esquerdo, selecione permissões de API.

2. Selecione + Adicionar uma permissão.

   

3. Selecione Microsoft Graph.

4. Selecione Permissões delegadas.

5. SelecioneUserUser.Read>.

6. Selecione Adicionar permissões.

   

   Observação

   • Se não for concedido consentimento de administrador de TI a uma aplicação, os utilizadores têm de dá-la na primeira vez que utilizarem uma aplicação.
   • Os utilizadores só precisam de consentir as permissões da API se a aplicação Microsoft Entra estiver registada num inquilino diferente.

Adicionar URI de ID da aplicação

1. No painel esquerdo, em Gerir, selecione Expor uma API.

2. Ao lado do URI da ID do aplicativo, selecione Adicionar.

   

3. Atualize o URI da ID doapi://botid-{AppID} aplicativo no formato e selecione Salvar.

   

Adicionar um escopo

1. No painel esquerdo, em Gerenciar, selecione Expor uma API.

2. Selecione + Adicionar um escopo.

   

3. Insira access_as_user como o nome do Escopo.

4. Em Quem pode consentir?, selecione Administradores e usuários.

5. Atualize os valores para o restante dos campos da seguinte forma:

   1. Insira Teams pode acessar o perfil do usuário como nome de exibição de consentimento do Administrador.

   2. Enter Permite que o Teams chame as APIs Web do aplicativo como o usuário atual como a descrição do consentimento do Administrador.

   3. Enter Teams pode acessar o perfil do usuário e fazer solicitações em nome do usuário como nome de exibição do consentimento do usuário.

   4. Enter Permitir que o Teams chame as APIs deste aplicativo com os mesmos direitos que o usuário como Descrição doconsentimento do usuário.

6. Verifique se o Estado está definido como Habilitado.

7. Selecione Adicionar escopo.

   A imagem a seguir mostra os campos e os valores:

   

   Observação

   O nome do escopo deve corresponder ao URI da ID do aplicativo com /access_as_user acrescentado no final.

   

Adicionar aplicativo cliente

1. No painel esquerdo, em Gerenciar, selecione Expor uma API.

   Em Aplicativos cliente autorizados, identifique os aplicativos que deseja autorizar para o aplicativo Web do seu aplicativo.

2. Selecione + Adicionar um aplicativo cliente.

   

3. Adicione o Teams móvel ou desktop e o aplicativo Web do Teams.

   1. Para dispositivos móveis ou desktop do Teams: Insira a ID do cliente como 1fec8e78-bce4-4aaf-ab1b-5451cc387264.

      

   2. Para o Teams na Web: Insira a ID do cliente como 5e3ce6c0-2b1f-4285-8d4b-75ee78787346.

      

4. Marque a caixa de seleção Escopos autorizados .

5. Selecione Adicionar aplicativo.

   

   A imagem a seguir exibe a ID do cliente:

   

Atualizar o manifesto

1. No painel esquerdo, selecione Manifesto.

2. Defina o valor para 2 e requestedAccessTokenVersion selecione Salvar.

   

Criar seu bot

Criar um recurso de bot do Azure

Observação

Se você já estiver testando seu bot no Teams, saia deste aplicativo e do Teams. Para ver essa alteração, entre novamente.

1. Go to Home.

2. Selecione + Criar um recurso.

3. Na caixa de pesquisa, insira Bot do Azure.

4. Selecione Enter.

5. Selecione Bot do Azure.

6. Selecione Criar.

   

7. Insira o nome do bot no identificador do bot.

8. Selecione sua assinatura na lista suspensa.

9. Selecione seu Grupo de recursos na lista suspensa.

   

   Se não tiver um grupo de recursos existente, você poderá criar um novo grupo de recursos. Para criar um novo grupo de recursos, siga estas etapas:

   1. Selecione Criar novo.
   2. Insira o nome do recurso e selecione OK.
   3. Selecione um local na lista suspensa de localizações do novo grupo de recursos .

   

10. Em Preços, selecione Alterar plano.

    

11. Selecione FO Free>Select.

    

12. Em ID do aplicativo da Microsoft, selecione Tipo de aplicativo como multilocatário.

13. No Tipo de criação, selecione Usar registro de aplicativo existente.

14. Insira a ID do aplicativo.

    Observação

    Você não pode criar mais de um bot com a mesma ID de Aplicativo da Microsoft.

15. Selecione Examinar + criar.

    

16. Após a validação, selecione Criar.

    O bot leva alguns minutos para ser provisionado.

17. Selecione Ir para o recurso.

    

    Você criou seu bot do Azure com êxito.

    

Adicionar um canal do Teams

1. No painel esquerdo, selecione Canais.

2. Em Canais Disponíveis, selecione Microsoft Teams.

   

3. Marque a caixa de seleção para aceitar os Termos de Serviço.

4. Selecione Concordo.

   

5. Selecione Aplicar.

   

Adicionar um ponto de extremidade de mensagens

Use uma das seguintes maneiras para adicionar um ponto de extremidade de mensagens:

Túnel de desenvolvimento

1. Use a URL do túnel de desenvolvimento no console de saída como o ponto de extremidade de mensagens.

   

2. No painel esquerdo, em Configurações, selecione Configuração.

3. Atualize o ponto de extremidade de mensagens no formato https://your-devtunnel-domain/api/messages.

   

4. Selecione Aplicar.

   Você configurou com sucesso um bot no serviço Bot do Azure.

   Observação

   Se a chave de Instrumentação do Application Insights mostrar um erro, atualize com a ID do Aplicativo.

ngrok

1. No ngrok, copie a URL HTTPS.

   

   Observação

   A URL HTTPS em seu ngrok é um nome de domínio totalmente qualificado. É WebAppDomain um nome de domínio totalmente qualificado que não está incluído https:// nele.

2. No painel esquerdo, em Configurações, selecione Configuração.

3. Atualize o ponto de extremidade de mensagens no formato https://your-ngrok-domain/api/messages.

   

4. Selecione Aplicar.

   Você configurou com sucesso um bot no serviço Bot do Azure.

   Observação

   Se a chave de Instrumentação do Application Insights mostrar um erro, atualize com a ID do Aplicativo.

Adicionar uma configuração de conexão OAuth

1. No painel esquerdo, selecione Configuração.

2. Selecione Adicionar configurações de conexão OAuth.

3. Em Nova Configuração de Conexão, atualize os seguintes detalhes:

   • Nome: insira um nome para sua nova configuração de conexão. Você pode usar o nome nas configurações do código do serviço de bot.
   • Provedor de Serviços: na lista suspensa, selecione Azure Active Directory v2.
   • ID do cliente: atualize a ID do aplicativo da Microsoft.
   • Segredo do cliente: Atualize o valor de segredos do cliente.
   • URL de troca de token: Atualize o URI da ID do aplicativo.
   • ID do locatário: Insira comum.
   • Escopos: Insira User.Read.

4. Selecione Salvar.

   

Definir configurações de aplicativo e arquivos de manifesto

1. Acesse o arquivo appsettings.json no repositório clonado.

   

2. Abra o arquivo appsettings.json e atualize as seguintes informações:

   • Defina "MicrosoftAppId" como a ID do Aplicativo Microsoft do bot.
   • Defina "MicrosoftAppPassword" como o valor da ID do segredo do cliente do bot.
   • Defina ConnectionName como nome da conexão OAuth.
   • Definido "MicrosoftAppType" como Multilocatário.
   • Definido "MicrosoftAppTenantId" como comum.

   

3. Acesse o arquivo manifest.json no repositório clonado.

   

4. Abra o arquivo manifest.json e atualize as seguintes alterações:

   • Substitua todas as ocorrências de pela ID do "{TODO: MicrosoftAppId}"Aplicativo Microsoft.
   • Defina "<<domain-name>>" como seu domínio ngrok ou dev tunnel.

   

Compilar e executar o serviço

1. Abra o Visual Studio.

2. Vá para Arquivo>Abrir>Projeto/Solução....

   

3. De bot-conversation-sso-quickstart>csharp_dotnetcore pasta e selecione BotConversationSsoQuickstart.sln arquivo.

   

4. Selecione F5 para executar o projeto.

5. Se uma caixa de diálogo de Aviso de Segurança for exibida, selecione Sim.

   

   Uma página da Web é aberta com uma mensagem Seu bot está pronto!.

   Observação

   Esta página aparece somente quando você navega até a URL do host local.

   

   Solução de problemas

   Se você receber o erro Não é possível encontrar o pacote , siga estas etapas:

   1. Vá para Ferramentas>NuGet Gerenciador> de PacotesConfigurações do Gerenciador de Pacotes.
   2. Na janela Opções exibida, selecione Fontes de Pacote do Gerenciador de>Pacotes NuGet.
   3. Selecione Adicionar.
   4. Em Nome, insira nuget.org e em Origem, insira https://api.nuget.org/v3/index.json.
   5. Selecione Atualizar e OK.
   6. Reconstrua seu projeto.

Carregar o bot no Teams

1. No repositório clonado, acesse Microsoft-Teams-Samples>samples bot-conversation-sso-quickstart>csharp_dotnetcore>appPackage do TeamsApp>.>

2. Crie um arquivo .zip com os seguintes arquivos presentes na pasta appPackage :

   • manifest.json
   • outline.png
   • color.png

   

3. Vá para o Microsoft Teams.

   1. No cliente do Teams, selecione Aplicativos.
   2. Selecione Gerenciar seus aplicativos.
   3. Selecione Carregar um aplicativo.
   4. Procure a opção para carregar um aplicativo personalizado.

   

4. Selecione Abrir para carregar o arquivo de .zip que você criou na pasta Manifesto .

   

5. Selecione Adicionar para adicionar o bot ao chat.

   

6. Escolha Abrir.

   

   Você pode interagir com o bot enviando-lhe uma mensagem. O bot troca um token SSO e chama a API do Graph em seu nome. Ela mantém você conectado, a menos que você envie uma mensagem para sair.

7. Envie uma mensagem para o bot. O bot de conversa pede consentimento pela primeira vez.

8. Para área de trabalho: Selecione Continuar para conceder permissões ao cliente do Teams para acessar o bot.

   

   Observação

   Agora você configurou o SSO com seu aplicativo de bot e é a única vez que você terá que dar consentimento.

9. Para dispositivos móveis: Selecione Aceitar.

   Observação

   Agora você configurou o SSO com seu aplicativo de bot em dispositivos móveis e é a única vez que você terá que dar consentimento.

   

Você inventou algo assim?

Você concluiu o tutorial para começar a criar um bot com autenticação SSO.

Ativar o SSO para o seu bot

Voltar para o início

Crie seu primeiro aplicativo de extensão de mensagem usando JavaScript

Inicie o desenvolvimento de aplicações do Microsoft Teams com a sua primeira aplicação Teams em JavaScript.

Neste tutorial, aprenderá:

• Como configurar um novo projeto com o Microsoft 365 Agents Toolkit (anteriormente conhecido como Teams Toolkit).
• Como criar uma aplicação de extensão de mensagem.
• Como implantar seu aplicativo.

Tutorial: Criar seu primeiro aplicativo de extensão de mensagem usando JavaScript

Este guia passo a passo ajuda-o a criar uma extensão de mensagem da aplicação Teams com o Toolkit de Agentes no Visual Studio Code. Você verá a seguinte saída depois de concluir este guia:

Pré-requisitos

Certifique-se de instalar as seguintes ferramentas para criar e implantar seus aplicativos.

	Instalar	Para usar...
Obrigatório
	Visual Studio Code	Ambientes de compilação JavaScript ou TypeScript. Utilize a versão mais recente.
	Kit de Ferramentas de Agentes do Microsoft 365	Microsoft Visual Studio Code extensão que cria um andaime de projeto para a sua aplicação. Utilize a versão mais recente.
	Node.js	Ambiente de tempo de execução JavaScript de back-end. Para obter mais informações, consulte Node.js tabela de compatibilidade de versões.
	Microsoft Teams	Colabore com pessoas com quem trabalha através de aplicações para conversas, reuniões e chamadas num único local.
	Microsoft Edge (recomendado) ou Google Chrome	Um browser com ferramentas de programador essenciais para depuração e testes.
	Conta de programador do Microsoft 365	Acesso a uma conta do Teams com as permissões adequadas para instalar uma aplicação personalizada.
Opcional
	Azure Tools for Visual Studio Code e CLI do Azure	Azure ferramentas para aceder a dados armazenados ou para implementar um back-end baseado na nuvem para a sua aplicação Teams no Azure.
	React Ferramentas de Programador para o Chrome ou React Ferramentas de Programador para o Microsoft Edge	Uma extensão DevTools do browser para a biblioteca JavaScript React open source.

Preparar o ambiente de desenvolvimento

Depois de instalar as ferramentas necessárias, configure o ambiente de desenvolvimento.

Instalar o Microsoft 365 Agents Toolkit

O Toolkit de Agentes do Microsoft 365 (anteriormente conhecido como Toolkit do Teams) ajuda a simplificar o processo de desenvolvimento com ferramentas para aprovisionar e implementar recursos na cloud para a sua aplicação e publicar na Loja Teams.

Você pode usar o Agents Toolkit com Visual Studio Code ou uma interface de linha de comando chamada Microsoft 365 Agents Toolkit CLI (anteriormente conhecida como TeamsFx CLI).

Visual Studio Code

1. Abra Visual Studio Code e selecione Extensões (Ctrl+Shift+X ou Ver>Extensões).

2. Na caixa de pesquisa, introduza Microsoft 365 Agents Toolkit.

3. Selecione Instalar.

   

   O ícone do Microsoft 365 Agents Toolkit aparece na Visual Studio Code Barra de Atividade.

Também pode instalar o Agents Toolkit a partir do Visual Studio Code Marketplace.

linha de comandos

Para instalar a CLI do Agents Toolkit, use o gerenciador de npm pacotes e insira o seguinte comando no prompt de comando:

npm install -g @microsoft/m365agentstoolkit-cli

Dependendo da configuração, talvez seja necessário usar sudo a CLI para instalar a CLI:

sudo npm install -g --unsafe-perm @microsoft/m365agentstoolkit-cli

Esta condição é mais comum nos sistemas Linux e macOS.

Certifique-se de adicionar o cache global npm ao seu PATH. Este passo é normalmente realizado como parte do instalador Node.js.

Você pode usar a CLI com o atk comando. Verifique se o comando está funcionando executandoatk -h.

Cuidado

Antes de poder executar o TeamsFx em terminais do PowerShell, você deve habilitar a política de execução assinada remotamente para o PowerShell.

Configurar o inquilino de desenvolvimento do Teams

Um inquilino é um espaço ou um contentor para a sua organização no Teams, onde pode conversar, partilhar ficheiros e organizar reuniões. Este espaço é também o local onde pode carregar e testar a aplicação. Vamos verificar se está pronto para desenvolver com o inquilino.

Opção Verificar se existe o carregamento de uma aplicação

Depois de criar a sua aplicação personalizada, tem de carregar a sua aplicação para o Teams com a opção Carregar uma aplicação personalizada . Inicie sessão na sua conta Microsoft 365 para marcar se esta opção estiver ativada.

Os passos seguintes ajudam-no a verificar se pode carregar aplicações no Teams:

1. No cliente do Teams, selecione o ícone Aplicações .

2. Selecione Gerir as suas aplicações.

3. Selecione Carregar uma aplicação.

4. Procure a opção para Carregar uma aplicação personalizada. Se a opção estiver visível, pode carregar aplicações personalizadas.

   

   Observação

   Se não encontrar a opção para carregar uma aplicação personalizada, contacte o seu administrador do Teams.

Criar um inquilino programador do Teams gratuito (opcional)

Se não tiver uma conta de programador do Teams, adira ao programa para programadores do Microsoft 365.

1. Aceda ao programa de programadores do Microsoft 365.

2. Selecione Aderir agora e siga as instruções no ecrã.

3. No ecrã de boas-vindas, selecione Configurar subscrição do E5.

4. Configure a sua conta de administrador. Depois de terminar, é apresentado o seguinte ecrã:

   

5. Inicie sessão no Teams com a conta de administrador que acabou de configurar. Verifique se tem a opção Carregar uma aplicação personalizada no Teams.

Obtenha uma conta Azure gratuita

Se quiser alojar a sua aplicação ou aceder a recursos no Azure, tem de ter uma subscrição Azure. Crie uma conta gratuita antes de começar.

Criar espaço de trabalho de projeto para seu aplicativo de extensão de mensagem

Agora, vamos criar a sua primeira aplicação de extensão de mensagem.

A capacidade de extensão de mensagem permite-lhe interagir com um serviço Web através de botões e formulários. Utilize a área de composição de mensagens, a caixa de comandos ou uma mensagem diretamente no cliente do Teams para procurar e iniciar ações num sistema externo. As extensões de mensagem dependem de bots para fornecer um diálogo entre o usuário e seu código.

Existem dois tipos de extensões de mensagem do Teams:

• Comandos de pesquisa: Pode pesquisar em sistemas externos e inserir os resultados numa mensagem sob a forma de card.
• Comandos de ação: você pode apresentar aos usuários um pop-up modal para coletar ou exibir informações. Em seguida, pode processar a interação e enviar a informação para o Teams.

Vamos criar uma aplicação de extensão de mensagem com um comando de pesquisa. Primeiro, configure um novo projeto do Teams para criar a aplicação de extensão de mensagem.

Neste tutorial, você aprenderá a:

1. Como configurar um novo projeto de extensão de mensagem com o Kit de Ferramentas de Agentes.
2. Sobre a estrutura de diretórios do seu projeto de aplicativo.

Criar seu espaço de trabalho de projeto de extensão de mensagem

Se os pré-requisitos estiverem prontos, vamos começar!

Observação

A interface do usuário do Visual Studio Code mostrada pode ser diferente para você, dependendo do sistema operacional, da versão do Kit de Ferramentas, do tema e do ambiente.

Visual Studio Code

1. Abra o Visual Studio Code.

2. Selecione o ícone do Microsoft 365 Agents Toolkit na barra de atividades do Visual Studio Code.

3. Selecione Criar um novo agente/aplicativo>do aplicativo do Teams.

   

4. Selecione a Extensão de Mensagem.

   

5. Selecione os resultados da pesquisa personalizados.

   

6. Selecione Iniciar com um Bot.

   

7. Selecione JavaScript.

   

8. Selecione a pasta padrão para armazenar a pasta raiz do projeto no local padrão.

   

   Você também pode alterar o local padrão pelas seguintes etapas:

   1. Selecione Procurar.

      

   2. Selecione o local para o espaço de trabalho do projeto.

   3. Selecione Selecionar Pasta.

      

9. Insira um nome adequado para seu aplicativo. Selecione Enter.

   

   O Agents Toolkit cria o aplicativo em poucos segundos.

   

   Depois que seu aplicativo é criado, o Agents Toolkit exibe a seguinte mensagem:

   

Linha de Comando

Use a CLI "atk" para criar seu primeiro projeto.

1. Vá para a pasta onde deseja criar a pasta do projeto e abra o Prompt de Comando.

2. Insira o seguinte comando para criar um novo aplicativo do Teams:

   atk new
   

3. A CLI oferece uma série de opções para você escolher. Use as teclas de direção para selecionar uma opção. Depois de fazer a escolha, selecione Enter para confirmar.

   1. Selecione a extensão de mensagem para o novo projeto.
   2. Selecione resultados de pesquisa personalizados para recursos do aplicativo usando uma extensão de mensagem.
   3. Selecione Iniciar com um Bot para a arquitetura da Extensão de Mensagem Baseada em Pesquisa.
   4. Selecione JavaScript para linguagem de programação.
   5. Selecione Enter para selecionar a pasta de workspace padrão para seu aplicativo.
   6. Insira um nome adequado para seu aplicativo. O nome do aplicativo deve consistir apenas em caracteres alfanuméricos.

A CLI cria o projeto depois que você responde a todas as perguntas.

Faça um tour pelo código-fonte do aplicativo de extensão de mensagem

Uma extensão de mensagem usa o Bot Framework para interagir com seu serviço por meio de uma conversa. Após o andaime, visualize os diretórios e arquivos do projeto em EXPLORER.

Pasta / Arquivo	Sumário
m365agents.yml	O arquivo de projeto principal descreve a configuração do aplicativo e define o conjunto de ações a serem executadas em cada estágio do ciclo de vida.
m365agents.local.yml	Substitui m365agents.yml por ações que permitem a execução e a depuração locais.
.vscode/	Arquivos do Visual Studio Code para depuração local.
appPackage/	Modelos para o manifesto do aplicativo Teams.
infra/	Modelos para provisionamento de recursos do Azure.
index.js	Ponto de entrada e express manipulador do aplicativo.

Dica

Familiarize-se com bots e extensão de mensagem fora do Teams antes de integrar seu aplicativo no Teams.

Compilar e executar seu primeiro aplicativo de extensão de mensagem

Depois de configurar o espaço de trabalho do projeto com o Kit de Ferramentas de Agentes, é hora de criar seu projeto. Você precisa entrar em sua conta do Microsoft 365.

Entrar na sua conta do Microsoft 365

Entre com a conta de administrador que você criou ao ingressar no programa de desenvolvedor do Microsoft 365.

Visual Studio Code

1. Abra o Visual Studio Code.

2. Selecione o ícone do Microsoft 365 Agents Toolkit na barra de atividades.

3. Selecione Entrar no Microsoft 365 usando suas credenciais. O navegador padrão da Web é aberto para permitir que você entre.

   

4. Feche o navegador depois de entrar usando suas credenciais.

5. Retorne ao Kit de Ferramentas de Agentes no Visual Studio Code.

A seção CONTAS da barra lateral mostra o nome da sua conta do Microsoft 365. Se o upload de aplicativo personalizado estiver habilitado para sua conta do Microsoft 365, o Agents Toolkit exibirá Upload de aplicativo personalizado habilitado.

Agora você está pronto para compilar o aplicativo e executá-lo localmente!

Linha de Comando

1. Vá para a pasta do projeto do aplicativo de extensão de mensagem e abra o Prompt de Comando.

2. Entrar no Microsoft 365 com o comando CLI do Kit de Ferramentas de Agentes do Microsoft 365 (anteriormente conhecido como CLI TeamsFx):

   atk account login m365
   

O navegador padrão da Web é aberto para permitir que você entre. Entre na sua conta do Azure usando suas credenciais. Feche o navegador quando for solicitado.

Compile e execute seu aplicativo no ambiente local

Agora você pode criar e depurar seu primeiro aplicativo de extensão de mensagem do Teams localmente.

Compilar e executar seu aplicativo localmente

1. Selecione a tecla F5 no Visual Studio Code para executar o aplicativo no modo de depuração.

   Observação

   Se o Agents Toolkit não conseguir verificar um pré-requisito específico, ele solicitará que você marque.

   
   
   Saiba o que acontece quando você executa seu aplicativo localmente no depurador.

   Quando você seleciona F5, o Agents Toolkit executa as seguintes funções:

   1. Verifica os seguintes pré-requisitos:

      1. Você está conectado com uma conta do Microsoft 365.
      2. O upload de aplicativo personalizado está habilitado para sua conta do Microsoft 365.
      3. Com suporte Node.js versão estiver instalada.
      4. A porta exigida pelo aplicativo de bot está disponível.

   2. Instala pacotes npm

   3. Inicia o Túnel de Desenvolvimento para criar um túnel HTTP.

   4. Regista a aplicação no Microsoft Entra ID e configura a aplicação.

   5. Registra o aplicativo bot no Bot Framework e configura o aplicativo.

   6. Regista a aplicação no Portal do Programador do Teams e configura a aplicação.

   7. Inicia a aplicação de extensão de mensagem alojada localmente.

   8. Inicia o Teams num browser e carrega a aplicação Teams.

   

   Quando depurar a aplicação pela primeira vez, o Teams transfere as dependências e cria a aplicação. Este processo pode demorar entre 3 a 5 minutos a ser concluído.

2. O Teams é aberto numa janela do browser quando a compilação estiver concluída. Se lhe for pedido, inicie sessão com a sua conta Microsoft 365.

3. É aberta uma caixa de diálogo que permite adicionar a aplicação de extensão de mensagem ao Teams. Selecione Adicionar.

   

   O Teams carrega a aplicação de extensão de mensagens.

   

   Como os aplicativos de extensão de mensagem dependem de bots para habilitar a comunicação entre o usuário e o serviço Web, seu aplicativo é carregado em um recurso de bate-papo de um bot.

   • Se criou uma aplicação bot antes de criar a aplicação de extensão de mensagem, o Teams carrega a extensão de mensagem na aplicação bot que criou. As mensagens de bate-papo anteriores do aplicativo bot são visíveis.
   • Se tiver criado uma extensão de mensagem primeiro, o Teams carrega a sua aplicação na conversa mais recente aberta no Teams.

Testar a aplicação

Quando a aplicação é carregada pela primeira vez, a aplicação de extensão de mensagem estará aberta para que possa testá-la. Este aplicativo de exemplo permite pesquisar pacotes npm de código aberto no registro de software.

Como executar uma consulta de pesquisa

Extensão de Mensagem

1. Digite o nome de um pacote npm de código aberto na caixa de pesquisa da extensão de mensagem, como cli. A extensão da mensagem exibe uma lista dos itens correspondentes.

   

2. Selecione um dos itens da lista. A aplicação cria um Cartão Adaptável com o item na área de composição da mensagem para que possa enviá-lo numa conversa ou canal.

   

3. Selecione Enter. A aplicação de extensão de mensagem envia o Cartão Adaptável com o item no chat ou canal.

   

Caixa de Comando

1. Introduza / seguido do nome da aplicação de extensão de mensagem na caixa de comandos.

   

   A aplicação de extensão de mensagem é aberta na caixa de comandos.

2. Insira um nome de um pacote npm de código aberto e selecione um dos resultados da pesquisa.

   

   A extensão de mensagem apresenta o resultado da pesquisa como um Cartão Adaptável na caixa de comandos.

   

3. Copie o Cartão Adaptável para colá-lo na área de composição da mensagem.

   

4. Selecione Enter. A aplicação de extensão de mensagem envia o Cartão Adaptável com o resultado da pesquisa na conversa mais recente.

   

Como abrir a aplicação de extensão de mensagem

Testou a funcionalidade de pesquisa da aplicação de extensão de mensagens no passo anterior. Agora, aprenda as diferentes maneiras de abrir o aplicativo de extensão de mensagem.

Abrir a aplicação a partir da caixa de comandos

1. Introduza / seguido do nome da aplicação de extensão de mensagem na caixa de comandos.

   

   A aplicação é aberta na caixa de comandos e pode utilizá-la para executar uma consulta.

   Observação

   • Utilizar / para abrir a sua aplicação de extensão de mensagem a partir da caixa de comando só funciona no novo cliente do Teams.
   • Utilize @ para abrir a sua aplicação de extensão de mensagem a partir da caixa de comando no cliente clássico do Teams.

Abrir a aplicação a partir da área de composição de mensagens

1. Selecione os três pontos na parte inferior da área de composição de mensagens.

2. Selecione a sua aplicação de extensão de mensagem.

   

   A aplicação de extensão de mensagem carrega com as opções para executar uma pesquisa.

Abrir a aplicação a partir de aplicações personalizadas carregadas

1. Selecione Aplicações>Faça a gestão das suas aplicações.

2. Selecione a lista pendente para a sua aplicação a partir da lista de aplicações e selecione Aplicação pessoal.

   

3. É apresentada uma caixa de diálogo que sugere que experimente a sua aplicação. Se selecionar Compreendido, a caixa de diálogo desaparece. Selecione Experimentar.

   

4. É exibida uma lista das suas aplicações de extensão de mensagens na sua conversa mais recente do Teams. Selecione a sua aplicação de extensão de mensagem na lista.

Saiba como resolver problemas se a sua aplicação não for executada localmente

Para executar a sua aplicação no Teams, tem de ter uma conta de desenvolvimento do Microsoft 365 que permita o carregamento personalizado da aplicação. Pode saber mais sobre o carregamento de aplicações personalizadas na secção Pré-requisitos.

Implementar a sua primeira aplicação Teams

Vamos implementar a sua primeira aplicação de extensão de mensagem no Azure com o Agents Toolkit.

Inicia sessão na tua conta Azure

Inicie sessão na sua conta Azure para aceder à portal do Azure Microsoft e aprovisionar novos recursos na nuvem para suportar a sua aplicação.

Visual Studio Code

1. Abra Visual Studio Code.

2. Abra a pasta do projeto na qual você criou o aplicativo de extensão de mensagem.

3. Selecione o ícone do Microsoft 365 Agents Toolkit na barra de atividade.

4. Selecione Iniciar sessão em Azure com as suas credenciais. O seu browser predefinido abre-se para que possa iniciar sessão.

   Dica

   Se tiver a extensão CONTA do AZURE instalada e estiver a utilizar a mesma conta, pode ignorar este passo.

5. Quando lhe for pedido, feche o browser e regresse ao Visual Studio Code.

A secção CONTAS da barra lateral indica o número de subscrições de Azure utilizáveis disponíveis para si. Certifique-se de que tem, pelo menos, uma subscrição Azure utilizável disponível. Caso contrário, termine sessão e utilize uma conta diferente.

linha de comandos

1. Aceda à pasta do projeto da sua aplicação de extensão de mensagem e abra a Linha de Comandos.

2. Inicie sessão no Azure com o comando da CLI do Agents Toolkit:

   atk account login azure
   

3. O seu browser predefinido abre-se para que possa iniciar sessão. Inicie sessão na sua conta Azure com as suas credenciais. Quando lhe for pedido, feche o browser.

Agora, vamos aprender como implantar o aplicativo em Azure usando o Agents Toolkit.

Implementar a sua aplicação no Azure

A implantação consiste em duas etapas. Primeiro, os recursos de nuvem necessários são criados (também conhecido como provisionamento). Em seguida, o código do aplicativo é copiado para os recursos de nuvem criados. Você implanta o aplicativo de extensão de mensagem neste tutorial.

Qual é a diferença entre Provisionar e Implantar?

A etapa Provisionar cria recursos no Azure e no Microsoft 365 para seu aplicativo, mas nenhum código (como HTML, CSS ou JavaScript) é copiado para os recursos. A etapa Implantar copia o código do seu aplicativo para os recursos que você criou durante a etapa de provisionamento. É comum implantar várias vezes sem provisionar novos recursos. Como a etapa de provisionamento leva algum tempo para ser concluída, ela é separada da etapa de implantação.

Visual Studio Code

Selecione o ícone do Microsoft 365 Agents Toolkit na barra de atividades do Visual Studio Code.

1. Selecione Provisionar.

   

2. Selecione uma assinatura.

   

3. Selecione um grupo de recursos.

   

   Se não tiver um grupo de recursos para selecionar, você poderá criar um novo grupo de recursos com as seguintes etapas:

   1. Selecione + Novo grupo de recursos.

      

   2. Selecione o nome padrão ou insira um nome adequado para seu grupo de recursos.

      

   3. Selecione o local para o seu grupo de recursos.

      

4. Uma caixa de diálogo avisa que custos podem ser incorridos ao executar recursos no Azure. Selecione Provisionar.

   

   O processo de provisionamento cria recursos na nuvem do Azure. Pode levar algum tempo. Após alguns minutos, você verá a seguinte mensagem:

   

   Se desejar, você pode exibir os recursos provisionados. Para este tutorial, você não precisa exibir recursos.

   O recurso provisionado aparece em AMBIENTE.

   

5. Em CICLO DE VIDA, selecione Implantar.

   

6. É exibida uma caixa de diálogo perguntando se você deseja implantar recursos no ambiente de desenvolvimento. Selecione Implantar.

   

   Assim como no provisionamento, a implantação leva algum tempo. Depois de alguns minutos, você verá uma mensagem de conclusão.

Linha de Comando

1. Vá para a pasta em que você criou seu aplicativo de extensão de mensagem e abra o Prompt de Comando.

2. Executar atk provision.

   atk provision
   

   Quando solicitado, selecione uma assinatura do Azure e um grupo de recursos para usar os recursos do Azure. Seu aplicativo está hospedado usando recursos do Azure.

3. Executar atk deploy.

   atk deploy
   

   Seu aplicativo de extensão de mensagem foi implantado.

Executar o aplicativo implantado

Depois que as etapas de provisionamento e implantação forem concluídas, vá para Executar e Depurar (Ctrl+Shift+D ou Exibir > Executar) no Kit de Ferramentas de Agentes.

1. Selecione o menu suspenso EXECUTAR E DEPURAR .

2. Selecione Iniciar remoto no Teams (Edge).

3. Selecione o botão ▷ .

   

4. Uma caixa de diálogo é aberta para instalar o aplicativo implantado no Teams. Selecione Adicionar.

   

   O Teams abre o aplicativo de extensão de mensagem no chat mais recente.

   

Saiba o que acontece quando você implanta seu aplicativo no Azure

Antes da implantação, o aplicativo é executado localmente.

• O back-end é executado usando as Ferramentas Principais do Azure Functions.
• O ponto de extremidade HTTP do aplicativo, em que o Microsoft Teams carrega o aplicativo, é executado localmente.

A implantação é um processo de duas etapas. Você provisiona os recursos em uma assinatura ativa do Azure e, em seguida, implanta ou carrega o código de back-end e front-end do aplicativo no Azure.

• O back-end, se configurado, usa vários serviços do Azure, incluindo o Serviço de Aplicativo do Azure e o Armazenamento do Azure.
• O aplicativo de front-end é implantado em uma conta de Armazenamento do Azure configurada para hospedagem na Web estática.

Parabéns

Você concluiu o tutorial para criar um aplicativo de extensão de mensagem com JavaScript!

Você inventou algo assim?

Criar um aplicativo de extensão de mensagem

Voltar para o início

Crie seu primeiro aplicativo de guia usando Dó nítido

Inicie o desenvolvimento de aplicativos do Microsoft Teams criando seu primeiro aplicativo do Teams com um recurso de guia.

Neste tutorial, você aprenderá a:

• Como configurar um novo projeto.
• Como criar aplicativos com funcionalidade de guia usando C# e Microsoft Visual Studio 2022.

Tutorial: Criar seu primeiro aplicativo de guia usando C#

Este guia passo a passo ajuda você a criar uma guia com o Microsoft 365 Agents Toolkit (anteriormente conhecido como Teams Toolkit). Você verá a seguinte saída depois de concluir este guia:

Pré-requisitos para criar seu aplicativo

Aqui está uma lista de ferramentas necessárias para instalar a criação e implantação de um aplicativo do Teams.

Instalar	Para usar...
Microsoft Teams	Microsoft Teams para colaborar com todos com quem você trabalha por meio de aplicativos para chat, reuniões e chamadas, tudo em um só lugar.
Visual Studio 2022	Você pode instalar a versão enterprise no Visual Studio 2022 e instalar as cargas de trabalho de desenvolvimento ASP.NET e Web. Use a versão mais recente.
Microsoft 365 Agents Toolkit	Uma extensão do Visual Studio que cria uma estrutura de projeto para seu aplicativo. Use a versão mais recente.

Instalar Kit de Ferramentas de Agentes

O Agents Toolkit ajuda a simplificar o processo de desenvolvimento com ferramentas para criar um scaffolding de projeto para seu aplicativo. Ele cria a estrutura de diretório necessária para todos os recursos selecionados com os arquivos necessários no local, prontos para compilar o projeto.

Você pode baixar o instalador mais recente do Visual Studio. O Agents Toolkit está disponível como uma extensão no Visual Studio.

Depois de abrir o instalador do Visual Studio na janela pop-up de cargas de trabalho:

1. Selecione ASP.NET e desenvolvimento na Web.

2. Em detalhes> da instalaçãoOpcional, selecione Ferramentas de desenvolvimento do Microsoft Teams.

3. Selecione Instalar.

   

4. Selecione Iniciar. A janela do aplicativo Visual Studio 2022 é exibida.

   

5. Vá para Extensões>,Gerenciar Extensões.

   

   A janela Gerenciar Extensão é exibida:

   

6. No painel esquerdo, selecione Instalado. A extensão Microsoft 365 Agents Toolkit está disponível.

   

Configurar seu locatário de desenvolvimento do Teams

Um locatário é como um espaço ou um contêiner para sua organização no Teams, onde você conversa, compartilha arquivos e realiza reuniões. Este espaço também é onde você carrega e testa seu aplicativo personalizado. Vamos verificar se você está pronto para desenvolver com o locatário.

Verificar a opção de upload de aplicativo personalizado

Depois de criar o aplicativo, você deve carregá-lo no Teams sem distribuí-lo. Esse processo é conhecido como upload de aplicativo personalizado. Entre na sua conta do Microsoft 365 para ver essa opção.

Observação

O upload de aplicativo personalizado é necessário para visualizar e testar aplicativos no ambiente local do Teams. Se ele não estiver habilitado, você não poderá visualizar e testar seu aplicativo no ambiente local do Teams.

Você já tem um locatário e acesso de administrador? Vamos marcar se você fizer isso!

Verifique se você pode carregar aplicativos personalizados no Teams:

1. Abra o Microsoft Teams, selecione o ícone Aplicativos .

2. Selecione Gerenciar seus aplicativos.

3. Selecione Carregar um aplicativo.

4. Procure a opção Carregar um aplicativo personalizado . Se você vir a opção, o carregamento de aplicativo personalizado será habilitado.

   

Observação

Se você não encontrar a opção para carregar um aplicativo personalizado, entre em contato com o administrador do Teams.

Criar um locatário de desenvolvedor do Teams gratuito (opcional)

Se você não tiver uma conta do Teams, poderá obtê-la gratuitamente. Participe do programa de desenvolvedores do Microsoft 365!

1. Vá para o programa de desenvolvedor do Microsoft 365.

2. Selecione Ingressar Agora e siga as instruções na tela.

3. Na tela de boas-vindas, selecione Configurar assinatura E5.

4. Configure sua conta de administrador. Depois de concluir, a seguinte tela será exibida:

   

5. Entre no Teams usando a conta de administrador que você configurou. Verifique se você tem a opção Carregar um aplicativo personalizado no Teams.

Obter uma conta gratuita do Azure

Se você deseja hospedar seu aplicativo ou acessar recursos no Azure, deve ter uma assinatura do Azure. Crie uma conta gratuita antes de começar.

Agora você tem todas as ferramentas para configurar sua conta. Em seguida, vamos configurar seu ambiente de desenvolvimento e começar a criar! Selecione o aplicativo que você deseja criar primeiro.

Criar espaço de trabalho de projeto para seu aplicativo de guia usando Dó nítido

Inicie o desenvolvimento de aplicativos Microsoft Teams criando seu primeiro aplicativo. Este aplicativo usa o recurso de guia. Se os pré-requisitos estiverem prontos, vamos começar!

As etapas a seguir ajudam você a criar um espaço de trabalho de projeto para seu aplicativo de guia no Visual Studio:

1. Abra o Visual Studio.

2. Selecione Novo Projeto.

   

3. Na caixa de pesquisa, insira Teams.

4. Selecioneos agentes >do Microsoft 365em seguida.

   

5. Insira os detalhes a seguir para configurar seu novo projeto.

6. Insira o nome do projeto necessário em Nome do projeto.

7. Selecione o local necessário para salvar arquivos e pastas do projeto.

8. Selecione Criar.

   

9. Selecione Criar Guia>.

   

O aplicativo da guia Teams é criado em poucos segundos.

Crie e execute seu primeiro aplicativo de guia usando C sharp

Depois de configurar o espaço de trabalho do projeto com o Kit de Ferramentas de Agentes, crie seu aplicativo de guia.

Entrar na sua conta do Microsoft 365

Use sua conta do Microsoft 365 para entrar no Teams. Se você estiver usando um locatário do programa de desenvolvedor do Microsoft 365, a conta de administrador configurada durante o registro será sua conta do Microsoft 365.

1. No Gerenciador de Soluções, em Solução MyTeamsApp, clique com o botão direito do mouse em MyTeamsApp.

2. Selecione o kit de ferramentas de agentes do> Microsoft 365Selecione a conta do Microsoft 365.

   

3. SelecioneContinuar conta >do Microsoft 365.

   

Compile e execute seu aplicativo localmente no Visual Studio

Para compilar e executar seu aplicativo localmente:

1. Selecione Depurar>,Iniciar Depuração ou selecione F5.

   

   O Visual Studio inicia o processo de depuração e abre o cliente web do Teams em um navegador. Se solicitado, entre com sua conta do Microsoft 365.

2. Selecione Adicionar.

   

3. Selecione Abrir para abrir o aplicativo no escopo pessoal.

Como alternativa, você pode pesquisar e selecionar o escopo necessário ou selecionar um canal ou chat na lista e percorrer a caixa de diálogo para selecionar Ir.

Parabéns, seu primeiro aplicativo de guia está em execução no Teams!

Saiba como solucionar problemas se o aplicativo não for executado localmente.

Para executar seu aplicativo no Teams com êxito, certifique-se de ter habilitado o upload de aplicativo personalizado em sua conta do Teams. Você pode saber mais sobre o upload de aplicativo personalizado na seção de pré-requisitos .

Você criou com êxito um aplicativo de guia usando C#. O Agents Toolkit adicionou o scaffolding necessário à estrutura de diretórios do seu aplicativo. O tutorial agora está completo.

Criar uma guia

Criar um novo projeto do Teams usando o Microsoft 365 Agents Toolkit

Voltar para o início

Adicionar SSO ao aplicativo de extensão de guia e mensagem

O SSO (logon único) do Microsoft Entra permite a autenticação contínua do usuário no Teams.

Principais aspectos do SSO do Microsoft Entra:

• Permite que o usuário entre automaticamente após o primeiro login.
• Permite que o usuário entre em outros dispositivos sem inserir credenciais novamente.
• Obtém o token para o usuário conectado.

Tutorial: Adicionar SSO à guia e ao aplicativo de extensão de mensagem

Este guia passo a passo ajuda você a criar guias e extensões de mensagem que permitem a autenticação SSO do Microsoft Entra. Você verá a seguinte saída:

Pré-requisitos para adicionar SSO a aplicativos

Certifique-se de instalar as seguintes ferramentas e configurar seu ambiente de desenvolvimento:

#	Instalar	Para usar...
1.	Microsoft Teams	Microsoft Teams para colaborar com todos com quem você trabalha por meio de aplicativos para chat, reuniões e chamadas, tudo em um só lugar.
2.	Conta de desenvolvedor do Microsoft 365	Acesso à conta do Teams com as permissões apropriadas para instalar um aplicativo.
3.	SDK do .NET Core	Associações personalizadas para depuração local e implantações de aplicativos do Azure Functions. Se você não instalou a versão mais recente, instale a versão portátil.
4.	Visual Studio 2022	Você pode instalar a versão enterprise no Visual Studio 2022 e instalar as cargas de trabalho de desenvolvimento ASP.NET e Web. Use a versão mais recente.
5.	Túnel de desenvolvimento	Os recursos do aplicativo Teams (bots de conversa, extensões de mensagem e webhooks de entrada) precisam de conexões de entrada. Um túnel conecta seu sistema de desenvolvimento ao Teams. O Túnel de desenvolvimento é uma ferramenta poderosa para abrir com segurança seu host local para a Internet e controlar quem tem acesso. O túnel de desenvolvimento está disponível no Visual Studio 2022 versão 17.7.0 ou posterior. ou Você também pode usar o ngrok como um túnel para conectar seu sistema de desenvolvimento ao Teams. Não é necessário para aplicativos que incluem apenas guias. Este pacote é instalado no diretório do projeto (usando npm devDependencies).

Observação

Depois de baixar o ngrok, inscreva-se e instale o authtoken.

Configurar o ambiente local

1. Abra Microsoft-Teams-Samples.

2. Selecione Código.

3. No menu suspenso, selecione Abrir com GitHub Desktop.

   

4. Selecione Clonar.

Registrar o aplicativo Microsoft Entra

As etapas a seguir ajudam você a criar e registrar seu bot no portal do Azure:

• Crie e registre seu aplicativo do Azure.
• Crie um segredo do cliente para habilitar a autenticação SSO do bot.
• Adicione o canal do Teams para implantar o bot.
• Crie um túnel para os pontos de extremidade do servidor Web usando o dev tunnel (recomendado) ou o ngrok.
• Adicione um ponto de extremidade de mensagens ao túnel de desenvolvimento que você criou.

Adicionar registro de aplicativo

1. Acesse o portal do Azure.

2. Selecione Registros de aplicativo.

   

3. Selecione + Novo registro.

   

4. Insira o nome do seu aplicativo.

5. Selecione Contas em qualquer diretório organizacional (Qualquer locatário do Microsoft Entra ID - Multilocatário).

6. Selecione Registrar.

   

   Seu aplicativo está registrado no Microsoft Entra ID. A página de visão geral do aplicativo é exibida.

   

   Observação

   Salve a ID do aplicativo da ID do aplicativo (cliente) e da ID do diretório (locatário) para uso posterior.

Criar um túnel

Selecione uma das seguintes maneiras de criar um túnel:

Túnel de desenvolvimento

1. Abra o Visual Studio.

2. Selecione Criar um novo projeto.

   

3. Na caixa de pesquisa, digite ASP.NET. Nos resultados da pesquisa, selecione Aplicativo Web do ASP.NET Core.

4. Selecione Avançar.

   

5. Insira o Nome do projeto e selecione Avançar.

   

6. Selecione Criar.

   

   Uma janela de visão geral é exibida.

   

7. Na lista suspensa de depuração, selecione Dev Tunnels (sem túnel ativo)>Criar um túnel....

   

   Uma janela pop-up é exibida.

8. Atualize os seguintes detalhes na janela pop-up:

   1. Conta: insira uma conta Microsoft ou GitHub.
   2. Nome: Insira um nome para o túnel.
   3. Tipo de túnel: na lista suspensa, selecione Temporário.
   4. Acesso: na lista suspensa, selecione Público.

9. Selecione OK.

   

   Uma janela pop-up é exibida mostrando que o túnel de desenvolvimento foi criado com êxito.

10. Selecione OK.

    

    Você pode encontrar o túnel criado na lista suspensa de depuração da seguinte maneira:

    

11. Selecione F5 para executar o aplicativo no modo de depuração.

12. Se uma caixa de diálogo de Aviso de Segurança for exibida, selecione Sim.

    

    Uma janela pop-up é exibida.

13. Clique em Continuar.

    

    A página inicial do túnel de desenvolvimento é aberta em uma nova janela do navegador e o túnel de desenvolvimento agora está ativo.

    

14. Vá para o Visual Studio e selecione Exibir > Saída.

15. No menu suspenso do console de saída , selecione Dev Tunnels.

    O console de saída mostra a URL do túnel de desenvolvimento.

    

ngrok

Use o ngrok ou o Prompt de Comando para criar um túnel para os pontos de extremidade HTTPS disponíveis publicamente do servidor Web que está sendo executado localmente. Execute o seguinte comando no ngrok:

ngrok http --host-header=localhost xxxx

Dica

Se você encontrar ERR_NGROK_4018, siga as etapas fornecidas no Prompt de Comando para se inscrever e autenticar o ngrok. Em seguida, execute o ngrok http --host-header=localhost xxxx comando.

A janela mostra a URL HTTPS.

Adicionar uma autenticação Web

1. No painel esquerdo, em Gerenciar, selecione Autenticação.

2. Selecione Adicionar uma plataforma>Web.

   

3. Insira o URI de redirecionamento do seu aplicativo anexando-o ao nome de auth-end domínio totalmente qualificado. Por exemplo, https://your-devtunnel-domain/auth-end ou https://your-ngrok-domain/auth-end.

4. Em Concessão implícita e fluxos híbridos, marque as caixas de seleção Tokens de acesso e Tokens de ID .

5. Selecione Configurar.

   

6. Em Web, selecione Adicionar URI.

7. Insira https://token.botframework.com/.auth/web/redirect.

8. Selecione Salvar.

   

Criar um segredo do cliente

Observação

Se você encontrar o erro, os segredos do cliente são bloqueados pela política em todo o locatário. Entre em contato com o administrador de locatários para obter mais informações., em vez disso, você pode criar um certificado. Para obter instruções passo a passo, consulte Criar um certificado para registro de aplicativo.

1. No painel esquerdo, em Gerenciar, selecione Certificados & segredos.

2. Em Segredos do cliente, selecione + Novo segredo do cliente.

   

   A janela Adicionar um segredo do cliente é exibida.

3. Insira a descrição.

4. Selecione Adicionar.

   

5. Em Valor, selecione Copiar para a área de transferência para salvar o valor do segredo do cliente para uso posterior.

   

Adicionar permissões de API

1. No painel esquerdo, selecione Permissões de API.

2. Selecione + Adicionar uma permissão.

   

3. Selecione Microsoft Graph.

4. Selecione Permissões delegadas.

5. Selecione User>User.Read.

6. Selecione Adicionar permissões.

   

   Observação

   • Se um aplicativo não receber consentimento de administrador de TI, os usuários deverão declará-lo na primeira vez que usarem um aplicativo.
   • Os usuários precisarão consentir com as permissões de API somente se o aplicativo Microsoft Entra estiver registrado em um locatário diferente.

Adicionar URI da ID do Aplicativo

1. No painel esquerdo, em Gerenciar, selecione Expor uma API.

2. Ao lado do URI da ID do aplicativo, selecione Adicionar.

   

3. Atualize o api://your-devtunnel-domain/botid-{AppID}URI da ID do aplicativo no formato ou api://your-ngrok-domain/botid-{AppID} e selecione Salvar.

   

   A imagem a seguir mostra o nome do domínio:

   

Adicionar um escopo

1. No painel esquerdo, em Gerenciar, selecione Expor uma API.

2. Selecione + Adicionar um escopo.

   

3. Insira access_as_user como o nome do Escopo.

4. Em Quem pode consentir?, selecione Administradores e usuários.

5. Atualize os valores para o restante dos campos da seguinte forma:

   • Insira Teams pode acessar o perfil do usuário como nome de exibição de consentimento do Administrador.

   • Enter Permite que o Teams chame as APIs Web do aplicativo como o usuário atual como a descrição do consentimento do Administrador.

   • Enter Teams pode acessar o perfil do usuário e fazer solicitações em nome do usuário como nome de exibição do consentimento do usuário.

   • Enter Permitir que o Teams chame as APIs deste aplicativo com os mesmos direitos que o usuário como Descrição doconsentimento do usuário.

6. Verifique se o Estado está definido como Habilitado.

7. Selecione Adicionar escopo.

   A imagem a seguir mostra os campos e os valores:

   

   Observação

   O nome do escopo deve corresponder ao URI da ID do aplicativo com /access_as_user acrescentado no final.

   

Adicionar aplicativo cliente

1. No painel esquerdo, em Gerenciar, selecione Expor uma API.

   Em Aplicativos cliente autorizados, identifique os aplicativos que deseja autorizar para o aplicativo Web do seu aplicativo.

2. Selecione + Adicionar um aplicativo cliente.

   

3. Adicione o Teams móvel ou desktop e o aplicativo Web do Teams.

   1. Para dispositivos móveis ou desktop do Teams: Insira a ID do cliente como 1fec8e78-bce4-4aaf-ab1b-5451cc387264.

      

   2. Para o Teams na Web: Insira a ID do cliente como 5e3ce6c0-2b1f-4285-8d4b-75ee78787346.

      

4. Marque a caixa de seleção Escopos autorizados .

5. Selecione Adicionar aplicativo.

   

   A imagem a seguir exibe a ID do cliente:

   

Atualizar o manifesto

1. No painel esquerdo, selecione Manifesto.

2. Defina o valor para 2 e requestedAccessTokenVersion selecione Salvar.

   

Criar um bot

Criar um recurso de bot do Azure

Observação

Se você já estiver testando seu bot no Teams, saia deste aplicativo e do Teams. Para ver essa alteração, entre novamente.

1. Go to Home.

2. Selecione + Criar um recurso.

3. Na caixa de pesquisa, insira Bot do Azure.

4. Selecione Enter.

5. Selecione Bot do Azure.

6. Selecione Criar.

   

7. Insira o nome do bot no identificador do bot.

8. Selecione sua assinatura na lista suspensa.

9. Selecione seu Grupo de recursos na lista suspensa.

   

   Se não tiver um grupo de recursos existente, você poderá criar um novo grupo de recursos. Para criar um novo grupo de recursos, siga estas etapas:

   1. Selecione Criar novo.
   2. Insira o nome do recurso e selecione OK.
   3. Selecione um local na lista suspensa de localizações do novo grupo de recursos .

   

10. Em Preços, selecione Alterar plano.

    

11. Selecione FO Free>Select.

    

12. Em ID do aplicativo da Microsoft, selecione Tipo de aplicativo como multilocatário.

13. No Tipo de criação, selecione Usar registro de aplicativo existente.

14. Insira a ID do aplicativo.

    Observação

    Você não pode criar mais de um bot com a mesma ID de Aplicativo da Microsoft.

15. Selecione Examinar + criar.

    

16. Após a validação, selecione Criar.

    O bot leva alguns minutos para ser provisionado.

17. Selecione Ir para o recurso.

    

    Você criou seu bot do Azure com êxito.

    

Adicionar um canal do Teams

1. No painel esquerdo, selecione Canais.

2. Em Canais Disponíveis, selecione Microsoft Teams.

   

3. Marque a caixa de seleção para aceitar os Termos de Serviço.

4. Selecione Concordo.

   

5. Selecione Aplicar.

   

Para adicionar um ponto de extremidade de mensagens

Túnel de desenvolvimento

1. Use a URL do túnel de desenvolvimento no console de saída como o ponto de extremidade de mensagens.

   

2. No painel esquerdo, em Configurações, selecione Configuração.

3. Atualize o ponto de extremidade de mensagens no formato https://your-devtunnel-domain/api/messages.

   

4. Selecione Aplicar.

   Você configurou com sucesso um bot no serviço Bot do Azure.

   Observação

   Se a chave de Instrumentação do Application Insights mostrar um erro, atualize com a ID do Aplicativo.

ngrok

1. No ngrok, copie a URL HTTPS.

   

   Observação

   A URL HTTPS em seu ngrok é um nome de domínio totalmente qualificado. É WebAppDomain um nome de domínio totalmente qualificado que não está incluído https:// nele.

2. No painel esquerdo, em Configurações, selecione Configuração.

3. Atualize o ponto de extremidade de mensagens no formato https://your-ngrok-domain/api/messages.

   

4. Selecione Aplicar.

   Você configurou com sucesso um bot no serviço Bot do Azure.

   Observação

   Se a chave de Instrumentação do Application Insights mostrar um erro, atualize com a ID do Aplicativo.

Adicionar uma configuração de conexão OAuth

1. No painel esquerdo, selecione Configuração.

2. Selecione Adicionar configurações de conexão OAuth.

3. Em Nova Configuração de Conexão, atualize os seguintes detalhes:

   • Nome: insira um nome para sua nova configuração de conexão. Você pode usar o nome nas configurações do código do serviço de bot.
   • Provedor de Serviços: na lista suspensa, selecione Azure Active Directory v2.
   • ID do cliente: atualize a ID do aplicativo da Microsoft.
   • Segredo do cliente: Atualize o valor de segredos do cliente.
   • URL de troca de token: Atualize o URI da ID do aplicativo.
   • ID do locatário: Insira comum.
   • Escopos: Insira User.Read.

4. Selecione Salvar.

   

Definir configurações do aplicativo

1. Acesse o arquivo appsettings.json no repositório clonado.

   

2. Abra o arquivo appsettings.json no Visual Studio.

3. Atualize as seguintes informações:

   • Substitua "MicrosoftAppId" para a ID do Aplicativo Microsoft do bot.
   • Substituir "MicrosoftAppPassword" para os segredos do cliente do bot Value.
   • Substitua "SiteUrl" para a URL do ngrok.
   • Substitua "ConnectionName" pelo nome da configuração de conexão OAuth.
   • Substitua "TenantId" para a ID do locatário onde o aplicativo é usado.
   • Substitua "ClientId" para a ID do Aplicativo Microsoft do bot.
   • Substituir "AppSecret" para os segredos do cliente do bot Value.
   • Substitua "ApplicationIdURI" na forma de api://*******.ngrok.io/botid-{AppID}.

   

Configurar arquivo de manifesto

1. Acesse o arquivo manifest.json no repositório clonado.

   

2. Abra o arquivo manifest.json no Visual Studio e faça as seguintes alterações:

   • Substitua DOMAIN-NAME pela URL do ngrok.

   • Substitua YOUR-MICROSOFT-APP-ID pela ID do Aplicativo Microsoft do seu bot.

     Observação

     Dependendo do cenário [YOUR-MICROSOFT-APP-ID] , pode [DOMAIN-NAME] ocorrer várias vezes.

   • Substituir resource como api://*******.ngrok.io/botid-{AppID}.
     

     

Compilar e executar o serviço

Para compilar e executar o serviço, use o Visual Studio ou a Linha de Comando.

Visual Studio

1. Abra o Visual Studio.

2. Selecionar arquivo>Abrir> *Projeto/Solução...

   

3. Na pasta csharp , selecione o arquivo App SSO Sample.csproj .

   

4. Pressione F5 para executar o projeto.

5. Selecione Sim se a seguinte caixa de diálogo for exibida:

   

Uma página da Web é exibida com uma mensagem Seu bot está pronto!

Linha de comando

Vá para a pasta csharp em uma janela do Prompt de Comando e digite o seguinte comando:

dotnet run

Carregar o aplicativo SSO no Teams

1. No repositório clonado, acesse oTeamsAppManifestde exemplo> de SSO do aplicativo csharp>.

2. Crie um arquivo .zip com os seguintes arquivos presentes na pasta Manifesto :

   • manifest.json
   • icon-outline.png
   • icon-color.png

   

3. No cliente do Teams, selecione o ícone Aplicativos .

4. Selecione Gerenciar seus aplicativos.

5. Selecione Carregar um aplicativo.

6. Procure a opção para carregar um aplicativo personalizado. Se você vir a opção, o carregamento de aplicativo personalizado será habilitado.

   

   Observação

   Entre em contato com o administrador do Teams se você não encontrar a opção de carregar um aplicativo personalizado.

7. Selecione Abrir para carregar o arquivo de .zip que você criou na pasta Manifesto .

   

8. Selecione Adicionar.

   

9. Selecione Abrir e envie uma mensagem ao bot.

   

10. O bot executa SSO e exibe o card de perfil junto com o prompt de opção para exibir o token.

    

11. Selecione Sim para exibir o token ou Não para continuar com o chat.

    

12. Se o SSO não for executado, o bot executará o método de autenticação padrão para sua guia.

    

13. Para entrar, se o SSO não for executado:

    1. No painel esquerdo do Teams, selecione Mais aplicativos adicionados (●●●).

    2. Selecione seu novo aplicativo de SSO.

       

    3. Selecione Entrar.

       

    4. Insira suas credenciais na janela Entrar e selecione Avançar.

       

    5. Selecione Aceitar.

       

    6. Selecione seu perfil na caixa de pesquisa. Você verá a seguinte saída:

       

14. Envie https://profile.botframework.com para o aplicativo para obter um profile card.

    

Você criou um resultado como este?

Você concluiu o tutorial para começar a usar o SSO para o aplicativo de extensão de guia e mensagem.

Habilitar o SSO para o aplicativo de guias

Habilitar o SSO para seu aplicativo

Voltar para o início