Criar Separador com Cartões Ajustáveis

Os separadores cartões ajustáveis no Teams fornecem um método exclusivo para apresentar informações. Em vez de incorporar conteúdo Web num iFrame, pode compor Cartões Ajustáveis num separador. Enquanto o front-end é composto com Cartões Ajustáveis, o back-end é alimentado por um bot. O bot processa a aceitação de pedidos e a resposta adequada com o Cartão Ajustável que é composto.

Pode criar os seus separadores com blocos modulares de interface de utilizador (IU) relevantes, nativos do ambiente de trabalho, web e dispositivos móveis.

Este artigo ajuda-o a compreender:

• É necessário fazer alterações ao manifesto da aplicação.
• Identifica como os pedidos de atividade de invocação e envia informações no separador com os Cartões Ajustáveis.
• Efeitos na caixa de diálogo (referido como módulo de tarefas no fluxo de trabalho do TeamsJS v1.x).

Este guia passo a passo ajuda-o a criar separadores com Cartões Ajustáveis no ambiente de trabalho e em dispositivos móveis. Verá o seguinte resultado:

Pré-requisitos

• 15 minutos restantes

Certifique-se de que instala as seguintes ferramentas e configura o seu ambiente de desenvolvimento:

Configurar o ambiente local

• 14 minutos restantes

1. Abra Microsoft-Teams-Samples.

2. Selecione Código.

3. No menu pendente, selecione Abrir com o GitHub Desktop.

   

4. Selecione Clonar.

Registar a aplicação Microsoft Entra

• 13 minutos restantes

Para criar e registar o bot no Microsoft Entra ID, execute os seguintes passos:

1. Crie um túnel ngrok para os pontos finais do servidor Web.
2. Crie um recurso do Bot do Azure para registar o bot no serviço Azure Bot.
3. Crie o segredo do cliente que permite a autenticação de início de sessão único (SSO) do bot.
4. Adicione o canal do Teams para implementar o bot.
5. Adicione o ponto final de mensagens ao túnel ngrok ou dev que criou.

Adicionar Registo de aplicações

1. Acesse o portal do Azure.

2. Selecione Registros de aplicativos.

   

3. Selecione + Novo registo.

   

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

5. Selecione Contas em qualquer diretório organizacional (Qualquer inquilino do Microsoft Entra ID – Multi-inquilino).

6. Selecione Registrar.

   

   A sua 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 do ID da Aplicação (cliente) e do ID do Diretório (inquilino) para utilização adicional.

Criar um túnel

ngrok http --host-header=localhost 3978

Adicionar uma autenticação Web

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

2. Selecione Adicionar uma Web de plataforma>.

   

3. Introduza o URI de redirecionamento para a 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 verificaçã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 um segredo do cliente

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

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

   

   É apresentada a janela Adicionar um segredo do cliente .

3. Introduza Descrição.

4. Selecione Adicionar.

   

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

   

Adicionar Permissão de API

1. No painel esquerdo, em Gerir, selecione Permissões da API.

2. Selecione + Adicionar uma permissão.

   

3. Selecione Microsoft Graph.

4. Selecione Permissões delegadas.

5. Selecione Permissão User.Read in.

6. Selecione Adicionar permissões.

   

   Observação

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

Adicionar URI do ID da Aplicação

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

2. Junto a URI do ID da Aplicação, selecione Adicionar.

   

3. Atualize o URI do ID da Aplicação no api://your-devtunnel-domain/botid-{AppID} formato ou api://your-ngrok-domain/botid-{AppID} e selecione Guardar.

   

   A imagem seguinte mostra o nome de domínio:

   

Adicionar um âmbito

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

2. Selecione + Adicionar um âmbito.

   

3. Introduza access_as_user como o Nome do âmbito.

4. Em Quem pode consentir?, selecione Administradores e utilizadores.

5. Atualize os valores dos restantes campos da seguinte forma:

   • Introduza O Teams pode aceder ao perfil do utilizador como Nome a apresentar do consentimento do administrador.

   • Introduza Permite que o Teams chame as APIs Web da aplicação como o utilizador atual como Descrição do consentimento do administrador.

   • Introduza O Teams pode aceder ao perfil de utilizador e fazer pedidos em nome do utilizador como Nome a apresentar do consentimento do utilizador.

   • Introduza Ativar o Teams para chamar as APIs desta aplicação com os mesmos direitos que o utilizador que aDescrição do consentimento do utilizador.

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

7. Selecione Adicionar escopo.

   A imagem seguinte mostra os campos e os valores:

   

   Observação

   O Nome do âmbito tem de corresponder ao URI do ID da Aplicação com /access_as_user acrescentado no final.

   

Adicionar aplicação cliente

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

   Em Aplicações cliente autorizadas, identifique as aplicações que pretende autorizar para a aplicação Web da sua aplicação.

2. Selecione + Adicionar uma aplicação cliente.

   

3. Adicione o Teams para dispositivos móveis ou de ambiente de trabalho e a aplicação Web do Teams.

   1. Para dispositivos móveis ou de ambiente de trabalho do Teams: introduza o ID de Cliente como 1fec8e78-bce4-4aaf-ab1b-5451cc387264.

      

   2. Para a Web do Teams: introduza o ID de Cliente como 5e3ce6c0-2b1f-4285-8d4b-75ee78787346.

      

4. Selecione a caixa de verificação Âmbitos autorizados .

5. Selecione Adicionar aplicativo.

   

   A imagem seguinte apresenta o ID de Cliente:

   

Criar o bot

• 8 minutos restantes

Para garantir que o serviço de bot permite que os utilizadores iniciem sessão e acedam ao bot, tem de configurar o Sign-On Único (SSO) para o bot. Execute os seguintes passos para configurar:

1. Adicione o URI de Redirecionamento ao recurso do Bot do Azure.
2. Adicione as permissões de API necessárias para chamadas a jusante.
3. Ative a concessão implícita e os fluxos híbridos.
4. Atualize o manifesto da aplicação.
5. Configurar a ligação do serviço de bot.

Criar um recurso de bot do Azure

1. Vá para a Página Inicial.

2. Selecione + Criar um recurso.

3. Na caixa de pesquisa, introduza Azure Bot.

4. Selecione Enter.

5. Selecione Bot do Azure.

6. Selecione Criar.

   

7. Introduza 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, pode criar um novo grupo de recursos. Para criar um novo grupo de recursos, siga estes passos:

   1. Selecione Criar novo.
   2. Introduza o nome do recurso e selecione OK.
   3. Selecione uma localização na lista pendente Nova localização do grupo de recursos .

   

10. Em Preços, selecione Alterar plano.

    

11. Selecione Fo Gratuito>Selecionar.

    

12. Em ID da Aplicação Microsoft, selecione Tipo de Aplicação como Multi-Inquilino.

13. No Tipo de criação, selecione Utilizar registo de aplicações existente.

14. Introduza o ID da Aplicação.

    Observação

    Não pode criar mais do que um bot com o mesmo ID da Aplicação Microsoft.

15. Selecione Rever + criar.

    

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

    O bot demora alguns minutos a aprovisionar.

17. Selecione Vá para o recurso.

    

    Criou com êxito o bot do Azure.

    

Adicionar um canal do Teams

1. No painel esquerdo, selecione Canais.

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

   

3. Selecione a caixa de verificação para aceitar os Termos de Serviço.

4. Selecione Concordar.

   

5. Selecione Aplicar.

   

Para adicionar um ponto final de mensagens

Atualizar ficheiro de manifesto

1. Selecione Manifesto no painel esquerdo.

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

   

   Observação

   Se já estiver a testar o bot no Teams, termine sessão nesta aplicação e termine sessão no Teams. Para ver esta alteração, inicie sessão novamente.

Para configurar a ligação do Bot Service

1. Aceda à página Configuração.

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

3. Em Nova Definição de Ligação, introduza os seguintes detalhes:

   • Nome: introduza o nome da nova definição de ligação. Pode utilizar o nome nas definições do código do serviço de bot.
   • Fornecedor de Serviços: selecione Azure Active Directory v2.
   • ID de Cliente: atualize o ID da Aplicação Microsoft.
   • Segredo do cliente: atualize o valor do ID do segredo do cliente.
   • URL do Exchange de Tokens: utilize o URI do ID da Aplicação.
   • ID do Inquilino: introduza comum.
   • Âmbitos: introduza User.Read.

4. Selecione Salvar.

   

Configurar definições da aplicação e ficheiros de manifesto

• 6 minutos restantes

1. Aceda ao ficheiro appsettings.json no repositório clonado.

   

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

   • Substitua "MicrosoftAppId" pelo ID da Aplicação Microsoft do bot.

   • Substitua pelo "MicrosoftAppPassword"Valor do segredo do cliente do bot.

   • Substitua pelo "ConnectionName" Nome do bot.

   • Substitua "ApplicationBaseUrl" pelo nome de domínio do túnel ngrok ou dev.

     

3. Aceda ao ficheiro manifest.json no repositório clonado.

   

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

5. Substitua todas as ocorrências de {contentBotId} e {Microsoft App ID} pelo ID da Aplicação Microsoft do bot.

   

Criar e executar o serviço

• 5 minutos restantes

Para criar e executar o serviço, utilize o Visual Studio:

1. Abra o Visual Studio.

2. Aceda a Ficheiro>Abrir>Projeto/Solução...

   

3. Selecione o ficheiro TabWithAdpativeCardFlow.csproj na pasta csharp>TabWithAdpativeCardFlow .

   

4. Pressione F5 para executar o projeto. Pode executar o projeto com o Visual Studio ou .NET na pasta adequada.

   É apresentada uma página Web com uma mensagem, O bot está pronto!

   

Configurar e carregar a aplicação no Teams

• 4 minutos restantes

1. No seu repositório clonado, aceda a csharp>TabWithAdpativeCardFlow>AppManifest.

2. Crie um ficheiro .zip com os seguintes ficheiros que estão presentes na pasta AppManifest :

   • manifest.json

   • outline.png

   • color.png

     

     Observação

     O manifest.zip não pode conter pastas adicionais. Tem de ter um ficheiro de origem json de manifesto , um ícone de cor e um ícone de destaque dentro da pasta zip.

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

4. Selecione Gerenciar seus aplicativos.

5. Selecione Carregar uma aplicação.

6. Procure a opção Carregar uma aplicação personalizada. Se vir a opção, o carregamento de aplicações personalizadas está ativado.

   

7. Selecione o ficheiro .zip que criou na pasta TeamsAppManifest e selecione Abrir.

8. Selecione Adicionar.

   

   Pode interagir com este separador ao iniciar sessão.

9. Envie uma mensagem para o separador.

   

Interagir com o Separador no Teams

• 2 minutos restantes

Os separadores permitem-lhe aceder a serviços e conteúdos num espaço dedicado num canal ou numa conversa.

Execute os seguintes passos para utilizar o separador:

1. No painel esquerdo do Teams, selecione Mais aplicações adicionadas (●●●).

2. Selecione o aplicativo na lista. O separador apresenta o Cartão Ajustável com controlos de ação.

3. Selecione Iniciar Sessão e escolha uma conta para aceder ao separador.

   

4. No separador Base , selecione Mostrar Módulo de Tarefa.

   

5. Selecione Fechar.

   

   

6. A tecla de tabulação mantém a sessão iniciada, a menos que selecione Terminar sessão.

   

7. Atualize para Iniciar Sessão novamente.

   

Desafio completo

• 1 minutos restantes

Encontrou algo assim?

Parabéns!

• 100% concluído!

Concluiu o tutorial para começar a utilizar os Cartões Ajustáveis para o Microsoft Teams com o Bot Framework.