Pré-requisitos

  • Artigo

Certifique-se de aderir aos seguintes pré-requisitos ao criar sua guia pessoal e de canal ou grupo do Teams:

  • Habilite a descoberta de suas páginas de guia em um iFrame utilizando cabeçalhos de resposta HTTP X-Frame-Options e Content-Security-Policy .

  • Verifique se todas as páginas de aplicativo do Teams estão hospedadas em pontos de extremidade HTTPS.

  • Defina cabeçalhos da Política de Segurança de Conteúdo para permitir o Teams e quaisquer outros aplicativos host do seu aplicativo:

    Aviso

    Os serviços de nuvem da Microsoft, incluindo versões web do Teams (teams.microsoft.com), outlook (outlook.com) e domínios do Microsoft 365 (microsoft365.com) estão migrando para o domínio cloud.microsoft . Execute as seguintes etapas antes de junho de 2024 para garantir que seu aplicativo continue a renderizar no cliente Web do Teams:

    1. Atualize o SDK do TeamsJS para v.2.19.0 ou superior. Para obter mais informações sobre a versão mais recente do SDK do TeamsJS, consulte Biblioteca de clientes JavaScript do Microsoft Teams.

    2. Atualize os cabeçalhos da Política de Segurança de Conteúdo em seu aplicativo do Teams para permitir que seu aplicativo acesse o domínio teams.cloud.microsoft . Se o aplicativo do Teams se estender pelo Outlook e pelo Microsoft 365, verifique se você permitirá que seu aplicativo acesse teams.cloud.microsoft, outlook.cloud.microsoft e domínios m365.cloud.microsoft .

    Host de aplicativo do Microsoft 365 permissão de ancestral de quadro
    Teams teams.microsoft.com, *.teams.microsoft.com, teams.cloud.microsoft
    Aplicativo Microsoft 365 *.microsoft365.com, *.office.com, m365.cloud.microsoft
    Outlook outlook.live.com, outlook.office.com, outlook.office365.com, outlook-sdf.office.com, outlook-sdf.office365.com, outlook.cloud.microsoft

    Observação

    Para hospedar os outros aplicativos do Teams ou do Microsoft 365 em seu aplicativo, atualize seu aplicativo para um ambiente do Microsoft 365. Se você gerenciar o aplicativo em execução no quadro aninhado, poderá atualizar seu código para inicializar o SDK especificando seu domínio. Isso permite que seu quadro aninhado atue como um proxy para o Teams.

  • Para compatibilidade com o Internet Explorer 11, defina X-Content-Security-Policy. Alternativamente, defina o cabeçalho X-Frame-Options: ALLOW-FROM https://teams.microsoft.com/. Esse cabeçalho está preterido, mas a maioria dos navegadores ainda aceita.

  • As páginas de entrada não são renderizadas em iFrames como uma proteção contra o roubo de cliques. Sua lógica de autenticação precisa usar um método diferente de redirecionamento. Por exemplo, utilize a autenticação baseada em token ou em cookie.

    Observação

    É recomendável que você defina o uso pretendido para seus cookies em vez de confiar no comportamento padrão do navegador. Para obter mais informações, confira Atributos do cookie SameSite.

  • A restrição da política de mesma origem dos navegadores impede que as páginas da Web façam solicitações para domínios diferentes da página da Web atendida. Assim, você pode redirecionar a página de configuração ou conteúdo para outro domínio ou subdomínio. Sua lógica de navegação entre domínios precisa permitir que o cliente do Teams valide a origem em relação a uma lista estática validDomains no manifesto do aplicativo ao carregar ou se comunicar com a guia.

  • Estilize suas guias com base no tema, design e intenção do cliente do Teams. As guias funcionam melhor quando criadas para atender a uma necessidade específica e se concentram em um pequeno conjunto de tarefas ou em um subconjunto de dados relevantes para o local do canal da guia.

  • Em sua página de conteúdo, adicione uma referência à biblioteca de clientes JavaScript do Microsoft Teams usando marcas de script. Depois que sua página for carregada, faça uma chamada para app.initialize(), ou então sua página não será exibida.

  • Para que a autenticação funcione em clientes móveis, você deve atualizar para o TeamsJS versão 1.4.1 ou posterior.

  • Se você optar por fazer com que seu canal ou guia de grupo apareça no cliente móvel do Teams, a configuração de setConfig() deve ter um valor para a propriedade websiteUrl.

  • A guia Microsoft Teams não dá suporte à capacidade de carregar sites de intranet que usam certificados autoassinados.

Observação

Este tópico reflete a versão 2.0.x da biblioteca de clientes JavaScript do Microsoft Teams (TeamsJS). Se você estiver usando uma versão anterior, consulte a visão geral da biblioteca do TeamsJS para obter diretrizes sobre as diferenças entre o TeamsJS mais recente e as versões anteriores.

Ferramentas para criar guias

  Instalar Para usar...
Required    
  Node.js Ambiente de runtime do JavaScript de back-end. Use a versão mais recente do V16 LTS.
  Microsoft Edge (recomendado) ou Google Chrome Um navegador com ferramentas de desenvolvedor.
  Visual Studio Code Ambientes de compilação JavaScript, TypeScript ou Estrutura do SharePoint (SPFx).
  Carga de trabalho de desenvolvimento web do Visual Studio 2022, ASP.NET e web .NET. Você pode instalar a edição gratuita da comunidade do Visual Studio 2022.
  Git Git para usar o repositório de aplicativos de exemplo do GitHub.
  Microsoft Teams O Microsoft Teams para colaborar com todos com quem você trabalha por meio de aplicativos para chats, reuniões, chamadas - tudo em um só lugar.
  ngrok Ngrok é uma ferramenta de software de proxy reverso. A Ngrok cria um túnel para os pontos de extremidade HTTPS disponíveis publicamente do seu servidor Web em execução local. Os pontos de extremidade da Web do seu servidor estão disponíveis durante a sessão atual no seu computador. Quando você desligar ou colocar seu dispositivo para dormir, o serviço não está mais disponível.
  Portal do Desenvolvedor do Teams Portal baseado na Web para configurar, gerenciar e distribuir seu aplicativo do Teams, inclusive para sua organização ou para a Microsoft Teams Store.

Criar sua guia do Teams

Agora vamos criar sua guia. Mas primeiro selecione sua escolha de guia para compilar:

Construir uma guia pessoal

Criar uma guia de grupo ou canal

Confira também