Requisitos de tabulaçãoTab requirements

As guias do Teams devem seguir os seguintes requisitos:Teams tabs must adhere to the following requirements:

  • Você deve permitir que suas páginas de tabulação sejam atendidas em um iFrame, por meio de cabeçalhos de resposta HTTP X-Frame-Options e/ou Content-Security-Policy.You must allow your tab pages to be served in an iFrame, via X-Frame-Options and/or Content-Security-Policy HTTP response headers.
    • Definir o header: Content-Security-Policy: frame-ancestors teams.microsoft.com *.teams.microsoft.com *.skype.comSet header: Content-Security-Policy: frame-ancestors teams.microsoft.com *.teams.microsoft.com *.skype.com
    • Para compatibilidade com o Internet Explorer 11, de definir X-Content-Security-Policy também.For Internet Explorer 11 compatibility, set X-Content-Security-Policy as well.
    • Como alternativa, de definir o header X-Frame-Options: ALLOW-FROM https://teams.microsoft.com/ .Alternatively, set header X-Frame-Options: ALLOW-FROM https://teams.microsoft.com/. Esse header é preterido, mas ainda é respeitado pela maioria dos navegadores.This header is deprecated but still respected by most browsers.
  • Normalmente, como uma proteção contra o uso de cliques, as páginas de logon não são renderizações em iFrames.Typically, as a safeguard against click-jacking, login pages don't render in iFrames. Portanto, sua lógica de autenticação precisa usar um método diferente de redirecionamento (por exemplo, usar autenticação baseada em token ou baseada em cookie).Therefore, your authentication logic needs to use a method other than redirect (e.g., use token-based or cookie-based authentication).

Observação

O Chrome 80, agendado para lançamento no início de 2020, introduz novos valores de cookie e impõe políticas de cookie por padrão.Chrome 80, scheduled for release in early 2020, introduces new cookie values and imposes cookie policies by default. É recomendável definir o uso pretendido para seus cookies em vez de depender do comportamento padrão do navegador.It's recommended that you set the intended use for your cookies rather than rely on default browser behavior. Consulte o atributo cookie SameSite (atualização 2020).See SameSite cookie attribute (2020 update).

  • Os navegadores aderem a uma restrição de política de mesma origem que impede uma página da Web de fazer solicitações para um domínio diferente do que aquele que atendeu a uma página da Web.Browsers adhere to a same-origin policy restriction that prevents a webpage from making requests to a different domain than the one that served a web page. No entanto, talvez seja necessário redirecionar a página de configuração ou conteúdo para outro domínio ou subdomínio.However, you may need to redirect the configuration or content page to a another domain or subdomain. Sua lógica de navegação entre domínios deve permitir que o cliente do Teams valide a origem em relação a uma lista validDomains estática no manifesto do aplicativo ao carregar ou se comunicar com a guia.Your cross-domain navigation logic should allow the Teams client to validate the origin against a static validDomains list in the app manifest when loading or communicating with the tab.

  • Para criar uma experiência perfeita, você deve projetar suas guias com base no tema, design e intenção do cliente teams.To create a seamless experience, you should style your tabs based on the Teams client's theme, design, and intent. Normalmente, as guias funcionam melhor quando são criadas para atender a uma necessidade específica e se concentrar em um pequeno conjunto de tarefas ou em um subconjunto de dados relevante para o local do canal da guia.Typically, tabs work best when they're built to address a specific need and focus on a small set of tasks or a subset of data that is relevant to the tab's channel location.

  • Em sua página de conteúdo, adicione uma referência ao SDK do cliente JavaScript do Microsoft Teams usando marcas de script.Within your content page, add a reference to Microsoft Teams JavaScript client SDK using script tags. Após o carregamento da página, faça uma chamada para microsoftTeams.initialize() .Following your page load, make a call to microsoftTeams.initialize(). Sua página não será exibida se você não o fizer.Your page will not be displayed if you do not.

  • Para que a autenticação funcione em clientes móveis, você deve atualizar o SDK JavaScript do Teams para pelo menos a versão 1.4.1.For authentication to work on mobile clients, you must upgrade you Teams JavaScript SDK to at least version 1.4.1.

  • Se você optar por que seu canal ou guia de grupo apareça em clientes móveis do Teams, a configuração deve ter um setSettings() valor para a websiteUrl propriedade.If you choose to have your channel or group tab appear on Teams mobile clients, the setSettings() configuration must have a value for the websiteUrl property.