Criar guia com cartões adaptáveis

Você pode criar guias de Cartão Adaptável no Teams. Em vez de inserir conteúdo da Web em um iFrame, você pode renderizar Cartões Adaptáveis em uma guia. Enquanto o front-end é renderizado com Cartões Adaptáveis, 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.

Aviso

As guias cartão adaptável serão preteridas no novo Microsoft Teams. Espera-se que os aplicativos estejam disponíveis no novo Microsoft Teams até junho de 2023. Se o aplicativo estiver usando guias de Cartão Adaptável, é recomendável recompilar a guia como uma guia baseada na Web. Para obter mais informações, confira Guias de compilação para o Teams.

Você pode criar suas guias com blocos de construção de interface do usuário (interface do usuário) relevantes, que são nativos da área de trabalho, web e móvel.

Este artigo ajuda você a entender:

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 os Cartões Adaptáveis.
Efeitos no fluxo de trabalho do módulo de tarefa.

Este guia passo a passo ajuda você a criar guias com os Cartões Adaptáveis na área de trabalho e no celular. Você verá a seguinte saída:

Captura de tela da saída do Cartão Adaptável de Guia depois de concluir com êxito o guia passo a passo.

Pré-requisitos

13 minutos restantes

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

	Instalar	Para usar...
	Microsoft Teams	O Microsoft Teams para colaborar com todos com quem você trabalha por meio de aplicativos para chat, reuniões e chamadas em um só lugar.
	Visual Studio 2022	Você pode instalar a versão corporativa no Visual Studio 2022 e instalar as cargas de trabalho ASP.NET e desenvolvimento da Web. Use a versão mais recente.
	SDK do .NET Core	Associações personalizadas para implantações de aplicativo de depuração local e Azure Functions. Use a versão mais recente ou instale a versão portátil.
	ngrok	Os recursos do aplicativo Teams (bots de conversa, extensões de mensagem e webhooks de entrada) exigem conexões de entrada. Um túnel conecta seu sistema de desenvolvimento ao Teams. Não é necessário para aplicativos que incluem apenas guias. Esse pacote é instalado no diretório do projeto (usando npm `devDependencies`).
	Conta de desenvolvedor do Microsoft 365	Acesso à conta do Teams com as permissões apropriadas para instalar um aplicativo.

Criar e registrar seu bot

12 minutos restantes

Registre seu bot no serviço bot do Azure quando você o desenvolver e hospedá-lo no Azure. Execute as etapas a seguir:

Crie um túnel ngrok para os pontos de extremidade do servidor Web.
Crie o recurso do Bot do Azure para registrar o bot no serviço do Bot do Azure.
Crie o segredo do cliente que habilita a autenticação de SSO (logon único) 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.

Para criar o recurso do Azure Bot

Acesse o portal do Azure.
Selecione Criar um recurso.
Pesquise o Bot do Azure na caixa de pesquisa.
Selecione Bot do Azure.
Selecione Criar.
Na janela Criar um Bot do Azure que aparece, insira o nome do identificador de bot necessário no 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 novo> nome > de recurso de inserção, selecione OK. Selecione o local necessário na lista suspensa Local do novo grupo de recursos .
Na seção ID do Aplicativo Microsoft , por padrão, Criar nova ID do Aplicativo Microsoft está selecionado.

Você também pode selecionar Usar o registro de aplicativo existente e inserir ID do aplicativo, ID do locatário do aplicativo e ID do recurso MSI.

Observação

Você não pode criar mais de um bot com a mesma ID do Aplicativo Microsoft.
Selecione Tipo de Aplicativo como Vários Locatários.
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.

Seu bot do Azure é criado.

Para criar o segredo do cliente

Execute as seguintes etapas se você tiver criado uma nova ID do Aplicativo Microsoft:

No painel esquerdo, selecione Configuração.
Ao lado da ID do Aplicativo Microsoft, selecione Gerenciar Senha.

Dica

Salve a ID do Aplicativo microsoft ou a ID do cliente para referência futura.
Na seção Segredos do cliente , selecione Novo segredo do cliente.

A janela Adicionar um segredo do cliente é exibida.
Insira Descrição para o segredo do cliente,
Selecione Adicionar.
Na coluna Valor , selecione Copiar para área de transferência.

Para adicionar o canal do Microsoft Teams

Selecione Início.
Selecione o bot nos recursos recentes.
Selecione Canais no painel esquerdo e selecione Microsoft Teams.
Selecione a caixa de seleção para aceitar os Termos de Serviço.
Selecione Concordar.
Selecione Aplicar.

Para criar um túnel ngrok

Use o ngrok para criar um túnel para os pontos de extremidade HTTPS disponíveis publicamente do servidor Web localmente. Execute o seguinte comando no ngrok:

ngrok http --host-header=localhost 3978

Dica

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

Para adicionar ponto de extremidade de mensagens

No ngrok, copie a URL HTTPS.
Acesse o bot do Azure que você criou no portal do Azure. No painel esquerdo, em Configurações, selecione Configuração.
No ponto de extremidade de mensagens, adicione a URL HTTPS do ngrok e, no final da URL, adicione /api/messages.
Selecione Aplicar.

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

Configurar a conexão do serviço de bot

10 minutos restantes

Para garantir que o serviço de bot permita que os usuários entrem e acessem o bot, você deve configurar o SSO para o bot. Execute as seguintes etapas para configurar:

Adicione URI de redirecionamento ao recurso do Bot do Azure.
Adicione todas as permissões de API necessárias para chamadas downstream.
Habilite a concessão implícita e os fluxos híbridos.
Atualizar manifesto.
Configurar a conexão do serviço de bot.

Para adicionar o URI de redirecionamento ao recurso do Bot do Azure

Acesse o Portal do Azure.
Selecione Azure Active Directory.
No painel esquerdo, selecione Registros de aplicativo.
Selecione seu bot.
Em Gerenciar, selecione Autenticação para definir um URI de redirecionamento.
Selecione Adicionar uma Web de plataforma>.
Insira as URIs de Redirecionamento como https://token.botframework.com/.auth/web/redirect.
Selecione o seguinte para habilitar a concessão implícita e os fluxos híbridos:
- Tokens de ID
- Tokens de acesso
Selecione Configurar.

O URI de redirecionamento é adicionado ao recurso de bot do Azure.
No painel esquerdo, selecione Selecionar Expor uma API.
Selecione Adicionar.
Use o api://your ngrok/botid-{AppID} formato para o URI da ID do Aplicativo.
Atualize o URI da ID do Aplicativo e selecione Salvar.
Selecione Adicionar um escopo.
Insira access_as_user como o nome escopo.
Definir Quem pode consentir? aos Administradores e usuários.
Para configurar os prompts de consentimento do administrador e do usuário com valores apropriados para access_as_user escopo, forneça as seguintes informações nos campos:
- O Enter Teams pode acessar o perfil do usuário como Administração nome de exibição de consentimento.
- Insira Permitir que o Teams chame as APIs Web do aplicativo como o usuário atual como Administração descrição de consentimento.
- O Enter Teams pode acessar o perfil do usuário e fazer solicitações em nome do usuário como nome de exibição de consentimento do usuário.
- Insira Habilitar o Teams para chamar as APIs deste aplicativo com os mesmos direitos que o usuário que adescrição do consentimento do usuário.
Verifique se o Estado está definido como Habilitado.
Selecione Adicionar escopo para salvar.

A imagem a seguir mostra os campos e os valores:

Na seção Aplicativos cliente autorizados, identifique os aplicativos que você deseja autorizar para o aplicativo Web do seu aplicativo.
Selecione Adicionar um aplicativo cliente.
Insira ID do cliente: 1fec8e78-bce4-4aaf-ab1b-5451cc387264 para o aplicativo móvel ou de área de trabalho do Teams.

Insira ID do cliente: 5e3ce6c0-2b1f-4285-8d4b-75ee78787346 para o aplicativo Web do Teams.
Selecione Escopos autorizados.

A imagem a seguir exibe as IDs do cliente:
No painel esquerdo, selecione permissões de API.

Observação

Os usuários precisam consentir com as permissões de API somente se o aplicativo do Azure Active Directory estiver registrado em um locatário diferente.
Selecione Adicionar uma permissão.
Selecione Microsoft Graph.
Selecione Permissões delegadas.
Adicione permissão User.Read in.
Selecione Adicionar permissões.

Para atualizar manifesto

Selecione Manifesto no painel esquerdo.

Defina o item de configuração "accessTokenAcceptedVersion":2. Se não estiver definido, altere seu valor para 2 e selecione Salvar.

Observação

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

Para configurar Serviço de Bot conexão

Vá para a página Configuração.
Selecione Adicionar configurações de conexão OAuth.
Em Nova Configuração de Conexão, insira os seguintes detalhes:
- Nome insira 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 selecione Azure Active Directory V2.
- A ID do cliente atualiza sua ID do Aplicativo Microsoft.
- O segredo do cliente atualiza o valor da ID do segredo do cliente**.
- A URL do Token Exchange usa o URI da ID do Aplicativo.
- A ID do locatário inserecomum.
- Escopos inseremUser.Read.
Selecione Salvar.

Configurar o bot

5 minutos restantes

Configure o exemplo de bot para entender como autenticar o bot de conversa no Teams.

Para configurar e executar seu exemplo de bot

Abra Exemplos do Microsoft-Teams.
Selecione Código.
No menu suspenso, selecione Abrir com o GitHub Desktop.
Selecione Clonar.

Observação

Verifique se você observa o caminho do repositório que você baixou.
Acesse o arquivo appsettings.json no repositório clonado.
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 secreta do cliente do bot.
- Defina "ConnectionName" como o Nome do bot.
- Defina "ApplicationBaseUrl" como o nome de domínio ngrok totalmente qualificado.

Configurar e carregar o aplicativo no Teams

4 minutos restantes

A maneira mais abrangente de testar seu bot é criando um pacote de aplicativos e carregando-o no Teams. Esse método é 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 configurar o arquivo de manifesto

Acesse o arquivo manifest.json no repositório clonado.
Abra o arquivo manifest.json e atualize as seguintes alterações:
Substitua todas as ocorrências de {contentBotId} e {Microsoft App ID} pela ID do aplicativo Microsoft do bot.

Adicionar bot de carregamento de arquivo no Teams

No repositório clonado, acesse Exemplos de exemplos do Microsoft-Teams-Samples>>tab-adaptive-cards>csharp>TabWithAdpativeCardFlow>AppPackage.
Crie um arquivo .zip com os seguintes arquivos presentes na pasta AppPackage :
- manifest.json
- outline.png
- color.png
Observação

O manifest.zip não deve conter pastas adicionais nele. Ele deve ter o arquivo de origem json de manifesto , o ícone de cor e o ícone de contorno dentro da pasta zip.
No cliente do Teams, selecione o ícone Aplicativos .
Selecione Gerenciar seus aplicativos.
Selecione Carregar um aplicativo
Procure a opção para Carregar um aplicativo personalizado. Se você vir a opção, os aplicativos de sideload estarão habilitados.
Selecione o arquivo .zip que você criou na pasta TeamsAppManifest e selecione Abrir.
Selecione Adicionar.

Você pode interagir com essa guia entrando.
Envie uma mensagem para a guia.

Interagindo com a Guia no Teams

2 minutos restantes

As guias permitem acessar serviços e conteúdo em um espaço dedicado dentro de um canal ou em um chat.

Execute as seguintes etapas para usar a guia:

No painel esquerdo do Teams, selecione Mais aplicativos adicionados (●●●).
Selecione o aplicativo na lista. A guia exibe o Cartão Adaptável com controles de ação.
Selecione Entrar e escolha uma conta para acessar a guia.
Na guia Página Inicial , selecione Mostrar Módulo de Tarefa.
Selecione Fechar.
Tab mantém você conectado, a menos que você selecione Sair.
Atualizar para Entrar novamente.