Guia Criar com Cartões Adaptáveis
As guias do Cartão Adaptável são uma nova maneira de criar guias no Teams. Em vez de incorporar conteúdo da Web em um IFrame, você pode renderizar Cartões Adaptáveis em uma guia. Enquanto o front-end é renderizado com Adaptive Cards, o back-end é alimentado por um bot. O bot é responsável por aceitar solicitações e responder adequadamente com o Cartão Adaptável renderizado.
Você pode criar suas guias com blocos de construção relevantes da interface do usuário (IU) nativos na área de trabalho, na Web e em dispositivos móveis.
Este artigo ajuda você a entender:
- As alterações necessárias para serem feitas no manifesto do aplicativo.
- Identifica como a atividade de invocação solicita e envia informações na guia com Cartões Adaptáveis.
- Efeito no fluxo de trabalho do módulo de tarefa.
Este guia passo a passo ajuda você a criar guias com Cartões Adaptáveis na área de trabalho e em dispositivos móveis. Você verá a seguinte saída:
Pré-requisitos
Instale as seguintes ferramentas e configure seu ambiente de desenvolvimento:
- Microsoft Teams com uma conta (não uma conta de convidado)
- Visual Studio Code
- SDK do .NET Core versão 3.1
- ngrok ou Tunnel Relay
- Conta de desenvolvedor do Microsoft 365 ou acesso à conta do Teams com as permissões apropriadas para instalar um aplicativo.
Criar um registro de bot no Microsoft portal do Azure
As guias de Cartão Adaptável exigiriam que o Azure Serviço de Bot criar guias nas equipes. Registre o bot no Azure Serviço de Bot ao desenvolver e hospedá-lo no Azure. Execute o seguinte:
- Use o ngrok para criar um túnel para os pontos de extremidade do servidor Web.
- Crie um recurso de Bot do Azure para registrar o bot no Azure Serviço de Bot.
- Crie um segredo do cliente que habilite a autenticação de SSO do bot.
- Adicione o canal do Microsoft Teams para implantar o bot em um canal do Teams.
- Adicione o ponto de extremidade de mensagens ao túnel ngrok que você criou.
Use o ngrok para criar um túnel para os pontos de extremidade HTTPS disponíveis publicamente do servidor Web em execução localmente. Execute o seguinte comando no ngrok:
ngrok http -host-header=rewrite 3978
Para criar um recurso de Bot do Azure
Abra portal do Azure.
Selecione Criar um recurso.
Pesquise o bot do Azure na caixa de pesquisa.
Selecione o Bot do Azure.
Selecionar Criar.
Digite o nome do identificador do bot no campo Identificador do bot.
Selecione sua Assinatura na lista suspensa.
Selecione seu Grupo de recursos na lista suspensa.
Para criar um novo grupo de recursos, selecione Criar, insira o nome do recurso, selecione OK e selecione o local necessário na lista suspensa Novo local do grupo de recursos.
Selecione o Tipo de Aplicativo Multilocatário para a ID de Aplicativo da Microsoft.
Observação
Na seção Tipo de Criação da ID do Aplicativo da Microsoft, Criar nova ID de Aplicativo da Microsoft já está selecionado para criar um novo bot. Você também pode selecionar Usar registro de aplicativo existente, se já tiver registrado um bot. Insira a ID do Aplicativo da Microsoft no campo ID do aplicativo existente e insira o valor no campo Senha do aplicativo existente.
Selecione Rever + criar.
Se a validação for aprovada, selecione Criar.
Levará alguns minutos para o serviço de bot ser provisionado.
Selecione Vá para o recurso. O bot e os respectivos recursos estão listados no grupo de recursos.
Agora seu bot do Azure foi criado.
Para criar o segredo do cliente
Em Configurações, selecione Configurar. Salve a ID de Aplicativo da Microsoft (ID do cliente) para referência futura.
Observação
Verifique se o MultiTenant está selecionado em Tipo de Bot.
Ao lado da ID de Aplicativo da Microsoft, selecione Gerenciar.
Na seção Segredos do cliente, selecione Novo segredo do cliente. A janela Adicionar um segredo do cliente irá aparecer.
Digite uma Descrição e selecione Adicionar.
Na coluna Valor, selecione Copiar para a área de transferência e salve a ID do segredo do cliente para referência futura.
Para adicionar o canal do Microsoft Teams
Vá para a Página Inicial.
Abra o bot, que está listado na seção Recursos recentes.
Selecione Canais no painel esquerdo e selecione Teams
.
Marque a caixa de seleção para aceitar os termos de serviço e selecione Concordar.
Selecione Salvar.
Para adicionar o ponto de extremidade de mensagens
Vá para a Home page e selecione Configuração em Configurações no painel esquerdo.
Vá para ngrok.
Copie a URL HTTPS (https para io), conforme mostrado na imagem a seguir:
No ponto de extremidade mensagens, adicione a URL HTTPS gerada do ngrok e, no final da URL, adicione /api/messages.
Selecione Aplicar.
Você configurou com êxito um bot no Azure Serviço de Bot e agora precisa configurar a conexão de serviço de bot.
Configurar a conexão de serviço de bot
Para garantir que o Serviço de Bot permita que o usuário entre e acesse o bot, você deve configurar o SSO para o bot. Para fazer isso, execute o seguinte:
- Adicione o URI de Redirecionamento ao recurso de bot do Azure.
- Expor o ponto de extremidade da API.
- Autorizar aplicativos cliente.
- Adicione as permissões de API necessárias para chamadas downstream.
- Habilitar concessão implícita.
- Atualizar manifesto.
- Configure a Serviço de Bot conexão.
Para adicionar o URI de redirecionamento ao recurso de bot do Azure
Selecione Gerenciar ao lado da ID do Aplicativo da Microsoft.
Selecione Autenticação no painel esquerdo do recurso de bot.
Em Configurações da plataforma, selecione Adicionar uma plataforma.
Selecione Web.
Insira URIs de Redirecionamento como
https://token.botframework.com/.auth/web/redirecte selecione Configurar.
O URI de redirecionamento é adicionado ao recurso de bot do Azure.
Para expor o ponto de extremidade da API
Selecione Expor uma API no painel esquerdo.
Selecione Definir para o URI da ID do Aplicativo.
Use a URL
api://https://da ID do Aplicativo mostrada e acrescente em vez de na URL do ngrok e adicione no início da URL da ID do Aplicativo.
Selecione Salvar.
Selecione Adicionar um escopo.
No nome do escopo, insira access_as_user.
Em Quem pode consentir?, alterne para Administradores e usuários.
Insira os seguintes valores nas caixas:
Campo Valor Administração de exibição de consentimento O Teams pode acessar o perfil do usuário Administração de consentimento Permite que o Teams chame as APIs Web do aplicativo como o usuário atual. Nome de exibição de consentimento do usuário O Teams pode acessar seu perfil de usuário e fazer solicitações em seu nome Descrição de consentimento do usuário Habilite o Teams para chamar as APIs deste aplicativo com os mesmos direitos que você tem. Verifique se o Estado está definido como Habilitado.
Selecione Adicionar escopo. O nome do escopo corresponde automaticamente ao URI da ID do aplicativo, com /access_as_user adicionado ao final.
Para autorizar aplicativos cliente
Adicione as IDs a seguir como aplicativos cliente autorizados, marque a caixa de seleção para escopos autorizados e selecione Adicionar aplicativo.
1fec8e78-bce4-4aaf-ab1b-5451cc387264 (aplicativo móvel ou desktop do Teams)
5e3ce6c0-2b1f-4285-8d4b-75ee78787346 (aplicativo Web do Teams)
Para adicionar as permissões de API necessárias para chamadas downstream
Selecione Permissões de API no painel esquerdo.
Selecione Adicionar uma permissão. A janela Solicitar permissões de API é exibida.
Selecione as API da Microsoft. Em seguida, selecione Microsoft Graph e permissões delegadas.
Adicione todas as permissões delegadas do usuário que seu aplicativo requer para APIs downstream, por exemplo, User.Read.
Para habilitar a concessão implícita
Selecione Autenticação no painel esquerdo.
Marque as caixas de seleção tokens de acesso e tokens de ID .
Selecione Salvar para salvar as alterações.
Para atualizar o manifesto
Selecione Manifesto no painel esquerdo.
Verifique se o item de configuração está definido como "accessTokenAcceptedVersion": 2. Caso contrário, altere seu valor para 2 e selecione Salvar.
Observação
Se você já estiver testando seu bot no Teams, deverá sair desse aplicativo e sair do Teams. Em seguida, entre novamente para ver essa alteração.
Para configurar uma Serviço de Bot conexão
Vá para a Home page e selecione Configuração em Configurações no painel esquerdo.
Selecione Adicionar configurações de conexão OAuth.
Em Nova Configuração de Conexão, insira os seguintes detalhes:
Campo Valor ou descrição Nome Insira o nome da nova configuração de conexão. Você pode usar o nome nas configurações do código do serviço de bot. Service Provider Selecione O Azure Active Directory V2. ID do cliente Salvo anteriormente como sua ID de Aplicativo da Microsoft. Segredo do cliente Salvo anteriormente como Valor da ID do segredo do cliente. URL do Exchange de Tokens Use a URL da ID do Aplicativo obtida anteriormente ao expor o ponto de extremidade da API. ID do locatário Insira comum. Scopes Insira User.Read e também adicione todos os Escopos necessários ao especificar permissões para APIs downstream. 
Selecione Salvar.
Configurar o bot
Configure o exemplo de bot para entender como autenticar o bot de conversa no Microsoft Teams.
Para configurar e executar o exemplo de bot
Vá para o repositório https://github.com/OfficeDev/Microsoft-Teams-Samples.git.
Selecione Código e selecione a lista suspensa.
Selecione Baixar ZIP.
Observe o caminho do repositório baixado.
No Explorador de Arquivos, selecione o projeto.
Vá para Microsoft-Teams-Samples > exemplos > tab-adaptive-cards > csharp > pasta TabWithAdpativeCardFlow .
Abra o arquivo appsettings.json no Visual Studio Code.
Atualize a configuração de appsettings.json para o bot
MicrosoftAppIdusar o ,MicrosoftAppPassworde adicione seu URI ngrok comoApplicationBaseUrl.Use o nome da conexão OAuth como o Nome da Conexão.
Observação
Você pode obter a partir
MicrosoftAppIdda página configuração do bot. OMicrosoftAppPasswordvalor da ID de segredo do cliente que você salvou anteriormente.
Selecione Salvar.
Configurar e carregar o aplicativo no Teams
A maneira mais abrangente de testar seu bot é criando um pacote de aplicativos e carregando-o no Teams. Esse método é a única maneira de testar a funcionalidade completa disponível para o bot, em todos os escopos. Você pode configurar e executar o aplicativo Teams carregando o manifest.zip arquivo.
Para executar o aplicativo Teams carregando o arquivo manifest.zip aplicativo
No Explorador de Arquivos, vá para exemplos de > microsoft-teams-samples > tab-adaptive-cards > csharp > TabWithAdpativeCardFlow > AppPackage para abrir a pasta.
Abra o
manifest.jsonarquivo em Visual Studio Code.No arquivo
manifest.json, localize {contentBotId} e adicione sua ID do Aplicativo Microsoft e salve.
No Explorador de Arquivos, vá para a pasta AppPackage.
Compacte o conteúdo da pasta AppPackage a ser criada
manifest.zip.Observação
Ele
manifest.zipnão deve conter pastas adicionais. Ele deve ter o arquivo de origem json do manifesto, o ícone de cor e o ícone de estrutura de tópicos dentro da pasta zip.Vá para o Teams.
Para carregar
manifest.zip, selecione Armazenar > Gerenciar seus aplicativos > Carregar um aplicativo personalizado e abrirmanifest.zip.Selecione Adicionar para adicionar a guia ao chat.
Você pode interagir com essa guia entrando.
Envie uma mensagem para a guia.
Interagindo com a guia no Teams
As guias permitem que você acesse serviços e conteúdo em um espaço dedicado dentro de um canal ou em um chat.
Siga as etapas para usar a guia:
No painel esquerdo do Teams, selecione as reticências e escolha seu aplicativo na lista.
Guia mostrando o cartão adaptável com controles de ação.
Selecione Entrar e escolha uma conta para acessar a guia.
Selecione Mostrar Módulo de Tarefa na home page.
Tab/fetch é a primeira solicitação de invocação que seu bot recebe quando um usuário abre uma guia Cartão Adaptável. Quando o bot recebe a solicitação, ele envia uma resposta de continuação de tabulação ou uma resposta de autenticação de tabulação.
Enviar função do Cartão Adaptável a solicitação de tarefa/envio é disparada para o bot com os dados correspondentes por meio da Ação.
Tab mantém você conectado, a menos que você selecione Sair.
Atualize para entrar novamente.
Desafio completo
Você conseguiu algo assim?
Parabéns!
Você concluiu o tutorial para começar a usar cartões adaptáveis para o Microsoft Teams usando o Bot Framework.
Tem algum problema com essa seção? Se tiver, envie seus comentários para que possamos melhorar esta seção.