Compartilhar via

Pré-requisitos

  • Artigo

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

  • Ative a deteção das suas páginas de separador num iFrame ao utilizar os cabeçalhos de resposta HTTP X-Frame-Options e Content-Security-Policy HTTP .

  • Certifique-se de que todas as páginas de aplicações do Teams estão alojadas em pontos finais HTTPS.

  • Defina os cabeçalhos da Política de Segurança de Conteúdo para permitir que o Teams e quaisquer outras aplicações anfitriãs da sua aplicação:

    Anfitrião de aplicações do Microsoft 365 permissão de ancestral de quadro
    Todos os anfitriões (Novo) *.cloud.microsoft
    Teams teams.microsoft.com, *.teams.microsoft.com
    Aplicativo Microsoft 365 *.microsoft365.com, *.office.com,
    Outlook outlook.office.com, outlook.office365.com, outlook-sdf.office.com, outlook-sdf.office365.com

    Aviso

    Os serviços cloud da Microsoft, incluindo versões Web do Teams, Outlook e domínios do Microsoft 365, estão a migrar para o *.cloud.microsoft domínio. Execute os seguintes passos antes de setembro de 2024 para garantir que a sua aplicação continua a ser composta em anfitriões cliente Web do Microsoft 365 suportados:

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

    2. Se tiver definido cabeçalhos de Política de Segurança de Conteúdo (CSP) para a sua aplicação, atualize a diretiva frame-predecessors para incluir o *.cloud.microsoft domínio. Para garantir a retrocompatibilidade durante a migração, mantenha os valores existentes frame-ancestors nos cabeçalhos do CSP. Esta abordagem garante que a sua aplicação continua a funcionar em aplicações anfitriãs existentes e futuras do Microsoft 365 e minimiza a necessidade de alterações subsequentes.

    Atualize o seguinte domínio na frame-ancestors diretiva dos cabeçalhos CSP da sua aplicação:

    https://*.cloud.microsoft

    Observação

    Para alojar as outras aplicações do Teams ou do Microsoft 365 na sua aplicação, atualize a sua aplicação para um ambiente do Microsoft 365. Se gerir a aplicação em execução na moldura aninhada, pode atualizar o respetivo código para inicializar o SDK ao especificar o seu domínio. Isto permite que a sua moldura aninhada 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/. Este cabeçalho foi preterido, mas a maioria dos browsers ainda o aceita.

  • As páginas de início de sessão não são compostas em iFrames como uma proteção contra o clickjacking. 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. A lógica de navegação entre domínios tem de permitir que o cliente do Teams valide a origem numa lista estática validDomains no manifesto da aplicação ao carregar ou comunicar com o separador.

  • Estilize suas guias com base no tema, design e intenção do cliente do Teams. Os separadores funcionam melhor quando criados para responder a uma necessidade específica e concentrarem-se num pequeno conjunto de tarefas ou num subconjunto de dados que é relevante para a localização do canal do separador.

  • Na sua página de conteúdo, adicione uma referência à biblioteca de cliente JavaScript do Microsoft Teams com etiquetas de script. Depois de carregar a página, faça uma chamada para app.initialize(), caso contrário, a sua página não será apresentada.

  • Para que a autenticação funcione em clientes móveis, tem de atualizar para a versão 1.4.1 ou posterior do TeamsJS.

  • 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.

  • O separador Microsoft Teams não suporta a capacidade de carregar sites da intranet que utilizam certificados autoassinados.

Observação

Este tópico reflete a versão 2.0.x da biblioteca de cliente JavaScript do Microsoft Teams (TeamsJS). Se estiver a utilizar uma versão anterior, consulte a descrição geral da biblioteca do TeamsJS para obter orientações sobre as diferenças entre as versões mais recentes do TeamsJS e versões anteriores.

Ferramentas para criar guias

  Instalar Para usar...
Required    
  Node.js Ambiente de runtime do JavaScript de back-end. Utilize 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).
  Visual Studio 2022, ASP.NET e carga de trabalho de desenvolvimento Web .NET. Pode instalar a edição de comunidade gratuita 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 encerra ou coloca o dispositivo em modo de suspensão, o serviço deixa de estar disponível.
  Portal do Desenvolvedor do Teams Portal baseado na Web para configurar, gerir e distribuir a sua aplicação Teams, incluindo para a 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