Estender uma guia pessoal do Teams Microsoft 365

Artigo
06/14/2024

As guias pessoais fornecem uma ótima maneira de aprimorar a experiência do Microsoft Teams. Usando guias pessoais, você pode fornecer a um usuário acesso ao aplicativo diretamente no Teams, sem que o usuário precise sair da experiência ou entrar novamente. Com esta pré-visualização, os separadores pessoais também podem acender-se noutras aplicações do Microsoft 365. Este tutorial demonstra o processo de pegar num separador pessoal existente do Teams e atualizá-lo para ser executado na aplicação Outlook e Microsoft 365 (experiências de ambiente de trabalho e web) e na aplicação Microsoft 365 para Android também.

Atualizar a sua aplicação pessoal do Teams para ser executada noutras aplicações do Microsoft 365 envolve estes passos:

Atualize o manifesto da sua aplicação (anteriormente denominado manifesto de aplicação do Teams).
Atualize as referências da biblioteca de cliente JavaScript (TeamsJS) do Microsoft Teams.
Altere os cabeçalhos da Política de Segurança de Conteúdo.
Atualize o Registo da Aplicação Microsoft Entra para Sign-On Único (SSO).
Carregue a sua aplicação personalizada atualizada no Teams.

O resto deste guia orienta-o ao longo destes passos e mostra-lhe como pré-visualizar o seu separador pessoal noutras aplicações do Microsoft 365.

Pré-requisitos

Para concluir este tutorial, precisa de:

Um locatário de área restrita do Programa para Desenvolvedores do Microsoft 365.
Um computador com aplicações do Microsoft 365 instaladas a partir do Canal Atual do Microsoft 365 Apps.
(Opcional) O inquilino do sandbox inscrito nas Versões Direcionadas do Microsoft 365.
(Opcional) Um dispositivo Android ou emulador com a aplicação Microsoft 365 para Android instalada.
(Opcional) Extensão Do Teams Toolkit para o Microsoft Visual Studio Code para ajudar a atualizar o seu código.

Instalar pré-requisitos

Preparar sua guia pessoal para a atualização

Se tiver uma aplicação de separador pessoal existente, faça uma cópia ou um ramo do projeto de produção para testar e atualizar o ID da Aplicação no manifesto da aplicação para utilizar um novo identificador (diferente do ID da Aplicação de produção, para teste).

Se quiser utilizar código de exemplo em vez do seu próprio código de produção, pode utilizar o exemplo Lista de Tarefas. Pode seguir os passos de configuração no repositório do GitHub De Exemplo de Lista de Tarefas ou utilizar a extensão Teams Toolkit para criar uma nova aplicação do Teams (selecione Iniciar a partir de uma Lista deTarefas de exemplo >com back-end no Azure). Depois de criar um separador pessoal, regresse a este artigo para o expandir pelo Microsoft 365.

Em alternativa, pode utilizar uma aplicação básica de início de sessão único (SSO) hello world que já tenha a aplicação Microsoft 365 ativada, conforme mostrado na secção Início Rápido seguinte, e, em seguida, ignorar para carregar a sua aplicação personalizada no Teams.

Início rápido

Utilize a extensão Teams Toolkit para Visual Studio Code para começar com um separador pessoal que esteja ativado para ser executado no Teams, Outlook e Microsoft 365.

Abra o Visual Studio Code.
Selecione o ícone Do Teams Toolkit na barra de atividade.
Selecione Criar uma Nova Aplicação.
Selecione Tabulação.
Selecione Separador Básico.
Selecione uma linguagem de programação preferencial.
Selecione uma localização no seu computador local para a pasta da área de trabalho e introduza o nome da aplicação.
Assim que a sua aplicação for criada, na extensão do Teams Toolkit, certifique-se de que tem sessão iniciada no inquilino do Programa de Programador do Microsoft 365 adequado e na conta do Azure. Estas opções estão disponíveis na secção CONTAS da extensão.
Selecione Paleta de Comandos... na opção Ver ou Ctrl+Shift+P.
Introduza Teams: aprovisione para criar os recursos da aplicação Teams, como o Serviço de Aplicações do Azure, o plano do Serviço de Aplicações, o Bot do Azure e a Identidade Gerida na sua conta do Azure. Em alternativa, pode selecionar Aprovisionar na secção CICLO DE VIDA da extensão.
Selecione uma subscrição e um grupo de recursos. Se optar por criar um novo grupo de recursos, terá de especificar a localização.
Selecione Aprovisionar.
Selecione Paleta de Comandos... na opção Ver ou Ctrl+Shift+P.
Introduza Teams: implemente para implementar o código de exemplo nos recursos aprovisionados no Azure e inicie a aplicação. Em alternativa, pode selecionar Implementar na secção CICLO DE VIDA da extensão.

A partir daqui, pode avançar para carregar a sua aplicação personalizada no Teams e pré-visualizar a sua aplicação no Outlook e na aplicação Microsoft 365. O manifesto da aplicação e as chamadas à API do TeamsJS já estão atualizados para a aplicação Microsoft 365.

Aplicações do SharePoint Framework (SPFx)

A partir da versão 1.16 do SharePoint Framework (SPFx), os separadores pessoais do Teams criados e alojados com SPFx também são suportados no Outlook e na aplicação Microsoft 365. Para atualizar uma aplicação de separador pessoal do SPFx Teams, siga estes passos:

Certifique-se de que tem a versão mais recente do SPFx.

npm install @microsoft/generator-sharepoint@latest --global

Atualize o manifesto da aplicação.
Atualize as referências do TeamsJS.

Depois de atualizar as referências do TeamsJS, carregue a sua aplicação no Teams para pré-visualizar a sua aplicação de separador pessoal SPFx em execução no Outlook e na aplicação Microsoft 365. Para obter mais informações, consulte Expandir a aplicação Outlook e Microsoft 365 com o SharePoint Framework.

Atualizar o manifesto do aplicativo

Tem de utilizar a versão 1.13 do esquema do manifesto da aplicação (ou posterior) para permitir que o separador pessoal do Teams seja executado no Outlook e na aplicação Microsoft 365. Para obter mais informações sobre a versão do esquema, veja o manifesto da aplicação.

Você tem duas opções para atualizar o manifesto do aplicativo:

Kit de ferramentas do Teams
Etapas manuais

Abra a paleta de comandos: Ctrl+Shift+P.
Execute o Teams: Upgrade Teams manifest e selecione o arquivo de manifesto do aplicativo. As alterações são efetuadas no local.

Abra o manifesto da aplicação e atualize o $schema e manifestVersion manualmente com a versão adequada. Consulte o manifesto do programador do Teams para obter informações sobre a versão:

{
    "$schema" : "https://developer.microsoft.com/json-schemas/teams/v1.14/MicrosoftTeams.schema.json",
    "manifestVersion" : "1.16"
}

Se utilizou o Teams Toolkit para criar a sua aplicação pessoal, também pode utilizá-la para validar as alterações ao ficheiro de manifesto da aplicação e identificar quaisquer erros. Abra a paleta de comandos (Ctrl+Shift+P) e localize Teams: Validar ficheiro de manifesto.

Atualizar referências do TeamsJS

A sua aplicação tem de fazer referência ao pacote @microsoft/teams-js@2.19.0 npm (ou posterior) para ser executado no Outlook e no Microsoft 365. As versões anteriores do TeamsJS ainda estão funcionais nas aplicações Outlook e Microsoft 365, mas são registados avisos de preterição. O suporte para as versões anteriores acaba por ser descontinuado no Outlook e no Microsoft 365. Para determinar a versão mais recente do TeamsJS, veja Repositório do GitHub do TeamsJS.

Pode utilizar o Teams Toolkit para ajudar a identificar e automatizar as alterações de código necessárias para atualizar das versões 1.x do TeamsJS para as versões do TeamsJS 2.x.x. Em alternativa, pode executar os mesmos passos manualmente; consulte a biblioteca do TeamsJS para obter detalhes.

Abra a Paleta de comandos: Ctrl+Shift+P.
Execute o comando Teams: Upgrade Teams JS SDK and code references.

Após a conclusão, as referências @microsoft/teams-js@2.0.0 de ficheiro package.json (ou posterior) e os ficheiros *.js/.ts e *.jsx/.tsx são atualizados com:

Instruções de importação para teams-js@2.x.x
Chamadas de Função, Enumeração e Interface para teams-js@2.x.x
TODOlembretes de comentários a sinalizar áreas que podem ser afetadas pelas alterações da interface de contexto
TODO lembretes de comentário para converter funções de retorno de chamada em promessas

Importante

O código dentro .html ficheiros não é suportado pelas ferramentas de atualização e requer alterações manuais.

Configurar cabeçalhos de Política de Segurança de Conteúdo

Tal como no Microsoft Teams, as aplicações de separador estão alojadas em elementos iframe na aplicação Microsoft 365 e em clientes Web do Outlook.

Se a sua aplicação utilizar cabeçalhos de Política de Segurança de Conteúdo (CSP), certifique-se de que permite todos os seguintes predecessores de frame nos cabeçalhos CSP:

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:

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

Atualizar o registo da aplicação Microsoft Entra para SSO

O início de sessão único (SSO) do Microsoft Entra para separadores pessoais funciona da mesma forma na aplicação Microsoft 365 e no Outlook como no Teams. No entanto, tem de adicionar vários identificadores de aplicação cliente ao registo da aplicação Microsoft Entra da sua aplicação de separador no portal de Registos de aplicações do inquilino.

Entre no portal do Microsoft Azure com sua conta de locatário da área restrita.
Abra Registros de aplicativo.
Selecione o nome do aplicativo de guia pessoal para abrir o registro do aplicativo.
Selecione Expor uma API (em Gerir).

Na seção Aplicativos do cliente autorizados, verifique se todos os valores a seguir Client Id foram adicionados:

Microsoft 365 aplicativo cliente	ID do cliente
Área de trabalho do Teams, celular	1fec8e78-bce4-4aaf-ab1b-5451cc387264
Web do Teams	5e3ce6c0-2b1f-4285-8d4b-75ee78787346
Microsoft 365 Web	4765445b-32c6-49b0-83e6-1d93765276ca
Microsoft 365 para ambiente de trabalho	0ec893e0-5785-4de6-99da-4ed124e5296c
Microsoft 365 mobile	d3590ed6-52b3-4102-aeff-aad2292ab01c
Outlook para área de trabalho	d3590ed6-52b3-4102-aeff-aad2292ab01c
Outlook Web	bc59ab01-8403-45c6-8796-ac3ef710b3e3
Outlook Mobile	27922004-5251-4030-b22d-91ecd9a37ea4

Observação

Algumas aplicações cliente do Microsoft 365 partilham IDs de Cliente.

Carregar a sua aplicação personalizada no Teams

O último passo para executar a sua aplicação no Microsoft 365 e no Outlook é carregar o seu pacote de aplicação de separador pessoal atualizado no Microsoft Teams.

Empacote o seu (manifesto de aplicação e ícones de aplicação) num ficheiro zip. Se utilizou o Teams Toolkit para criar a sua aplicação, pode fazê-lo facilmente com a opção Zip Teams App Package na secção UTILITY do Teams Toolkit. Selecione o manifest.json ficheiro para a sua aplicação e o ambiente adequado.
Aceda ao Microsoft Teams e inicie sessão com a sua conta de inquilino do sandbox.
Selecione Aplicativos para abrir o painelGerenciar seus aplicativos. Em seguida, selecione Carregar uma aplicação.
Selecione a opção Carregar uma aplicação personalizada e selecione o seu pacote de aplicação.

Depois de ser carregado para o Teams, o seu separador pessoal está disponível no Outlook e na aplicação Microsoft 365. Tem de iniciar sessão com as mesmas credenciais que utilizou para carregar a sua aplicação para o Teams. Ao executar a aplicação Microsoft 365 para Android, tem de reiniciar a aplicação para utilizar a sua aplicação de separador pessoal a partir da aplicação Microsoft 365.

Você pode fixar o aplicativo para acesso rápido ou encontrar seu aplicativo nas reticências (...) entre aplicativos recentes na barra lateral à esquerda. Tenha em atenção que afixar uma aplicação no Teams não a afixa como uma aplicação na aplicação Microsoft 365 ou no Outlook.

Visualizar sua guia pessoal em outras Microsoft 365 experiências

Eis como pré-visualizar a sua aplicação em execução no Microsoft 365 e clientes de ambiente de trabalho do Outlook, Web e Windows.

Observação

Se utilizar a aplicação de exemplo Do Teams Toolkit e a desinstalar do Teams, esta será removida dos catálogos Mais Aplicações no Outlook e na aplicação Microsoft 365.

Outlook no Windows

Para exibir seu aplicativo em execução no Outlook na área de trabalho do Windows:

Inicie o Outlook e entre usando sua conta de locatário de desenvolvimento.
Na barra lateral, selecione Mais aplicações. O título da aplicação personalizada carregada é apresentado entre as aplicações instaladas.
Selecione o ícone da sua aplicação para iniciar a sua aplicação no Outlook.

Outlook na Web

Para exibir seu aplicativo no Outlook na Web:

Aceda ao Outlook na Web e inicie sessão com a sua conta de inquilino dev.
Na barra lateral, selecione Aplicações. O título da aplicação personalizada carregada é apresentado entre as aplicações instaladas.
Selecione o ícone da sua aplicação para iniciar e pré-visualizar a sua aplicação em execução no Outlook na Web.

Aplicação Outlook para Android

Para ver a sua aplicação em execução na aplicação Outlook para Android:

Abra a aplicação Outlook no seu dispositivo Android e inicie sessão com a sua conta de inquilino do programador. Se a aplicação Outlook para Android já estava em execução antes de carregar a sua aplicação personalizada, reinicie a aplicação Outlook para a ver na secção aplicações instaladas.
Selecione o ícone Aplicações . A aplicação personalizada carregada é apresentada entre as aplicações instaladas.
Selecione o ícone da sua aplicação para abrir a sua aplicação no Outlook para Android.

Aplicação Outlook para iOS

Para ver a sua aplicação em execução na aplicação Outlook para iOS:

Abra a aplicação Outlook no seu dispositivo e inicie sessão com a sua conta de inquilino do programador. Se a aplicação Outlook já estava em execução antes de carregar a sua aplicação personalizada no Teams, reinicie o Outlook para vê-la na secção aplicações instaladas.
Selecione o ícone Mais . A aplicação personalizada carregada é apresentada entre as aplicações instaladas.
Selecione o ícone da sua aplicação para abrir a sua aplicação na aplicação Outlook.

Microsoft 365 no Windows

Para ver a sua aplicação em execução no Microsoft 365 no ambiente de trabalho do Windows:

Inicie o Microsoft 365 e inicie sessão com a sua conta de inquilino dev.
Selecione o ícone Aplicações na barra lateral. O título da aplicação personalizada carregada é apresentado entre as aplicações instaladas.
Selecione o ícone da sua aplicação para iniciar a sua aplicação no Microsoft 365.

Microsoft 365 na Web

Para pré-visualizar a sua aplicação em execução no Microsoft 365 na Web:

Inicie sessão no microsoft365.com com credenciais de inquilino de teste.
Selecione o ícone Aplicações na barra lateral. O título da aplicação personalizada carregada é apresentado entre as aplicações instaladas.
Selecione o ícone da aplicação para iniciar a sua aplicação no Microsoft 365 na Web.

Aplicação Microsoft 365 para Android

Para ver a sua aplicação em execução na aplicação Microsoft 365 para Android:

Inicie a aplicação Microsoft 365 no seu dispositivo e inicie sessão com a sua conta de inquilino do programador. Se a aplicação Microsoft 365 já estava em execução antes de carregar a sua aplicação personalizada no Teams, terá de reiniciar o Teams para a ver nas suas aplicações instaladas.
Selecione o ícone Aplicações . A aplicação personalizada carregada é apresentada entre as aplicações instaladas.
Selecione o ícone da sua aplicação para iniciar a sua aplicação na aplicação Microsoft 365.

Microsoft 365 para iOS

Para ver a sua aplicação em execução no Microsoft 365 para iOS:

Inicie a aplicação Microsoft 365 no seu dispositivo e inicie sessão com a sua conta de inquilino do programador. Se a aplicação Microsoft 365 já estava em execução antes de carregar a sua aplicação personalizada no Teams, terá de reiniciar o Teams para a ver nas suas aplicações instaladas.
Selecione o ícone Aplicações . A aplicação personalizada carregada é apresentada entre as aplicações instaladas.
Selecione o ícone da sua aplicação para iniciar a sua aplicação na aplicação Microsoft 365.

Solução de problemas

Apenas um subconjunto de tipos e capacidades de aplicações do Teams é suportado no Outlook e nos clientes do Microsoft 365. Para obter mais informações sobre como verificar o suporte do anfitrião para várias capacidades do TeamsJS, consulte Suporte de aplicações do Microsoft 365.

Para obter um resumo geral do suporte de anfitrião e plataforma do Microsoft 365 para aplicações do Teams, consulte Expandir aplicações do Teams no Microsoft 365.

Pode verificar o suporte do anfitrião de uma determinada capacidade no runtime ao chamar a isSupported() função nessa capacidade (espaço de nomes) e ajustar o comportamento da aplicação conforme adequado. Esta ação permite à sua aplicação iluminar a IU e a funcionalidade nos anfitriões que a suportam e proporcionar uma experiência de contingência correta em anfitriões que não o suportam. Para obter mais informações, veja Diferenciar a sua experiência de aplicação.

Use os canais daComunidade de desenvolvedores do Microsoft Teams para relatar problemas e fornecer comentários.

Depuração

Pode depurar a sua aplicação de separador em execução no Teams, na aplicação Microsoft 365 e no Outlook com o Teams Toolkit no Visual Studio Code.

Captura de ecrã a mostrar o menu pendente de depuração no Teams Toolkit.

Escolha o método de depuração pretendido e selecione a chave F5 . Após a primeira execução da depuração local, o Teams Toolkit pede-lhe para iniciar sessão na sua conta de inquilino do Microsoft 365.

Forneça feedback e comunique quaisquer problemas com a experiência de depuração do Teams Toolkit no Microsoft Teams Framework (TeamsFx).

Depuração móvel

Depurar o Outlook para Android

Para depurar a sua aplicação no Outlook para Android:

Selecione o ícone Mais no cliente móvel do Teams e abra a sua aplicação personalizada carregada para ser executada na aplicação Outlook.
Certifique-se de que o seu dispositivo Android está ligado ao seu computador de programador. A partir do seu computador de programador, abra o browser para a respetiva página de inspeção de DevTools. Por exemplo, aceda a edge://inspect/#devices no Microsoft Edge para apresentar uma lista de WebViews do Android com depuração ativada.
Localize o com o Microsoft Teams Tab URL do separador e selecione inspecionar para começar a depurar a sua aplicação com DevTools.
Depure a sua aplicação de separador no Android WebView da mesma forma que depura remotamente um site normal num dispositivo Android.

Depurar o Microsoft 365 para Android

O Teams Toolkit (F5) não suporta a depuração de aplicações Android no Microsoft 365. Eis como depurar remotamente a sua aplicação em execução na aplicação Microsoft 365 para Android:

Se depurar com um dispositivo Android físico, ligue-o ao seu computador dev e ative a opção de depuração USB. Esta opção está ativada por predefinição com o emulador android.
Inicie a aplicação Microsoft 365 a partir do seu dispositivo Android.
Abra o seu perfil Definições > Me > Permitir depuração e ative a opção Ativar depuração remota.
Deixe as Definições.
Deixe o ecrã do seu perfil.
Selecione Aplicações e inicie a aplicação personalizada carregada para ser executada na aplicação Microsoft 365.
Certifique-se de que o seu dispositivo Android está ligado ao seu computador de programador. A partir do seu computador de programador, abra o browser para a respetiva página de inspeção de DevTools. Por exemplo, aceda a edge://inspect/#devices no Microsoft Edge para apresentar uma lista de WebViews do Android com depuração ativada.
Localize o com o Microsoft Teams Tab URL do separador e selecione inspecionar para começar a depurar a sua aplicação com DevTools.
Depure a sua aplicação de separador no Android WebView da mesma forma que depura remotamente um site normal num dispositivo Android.

Exemplo de código

Nome de exemplo	Descrição	Node.js
Lista de Tarefas	Lista de tarefas editáveis com o SSO criado com o React e as Funções do Azure. Funciona apenas no Teams (utilize esta aplicação de exemplo para experimentar o processo de atualização descrito neste tutorial).	View
Lista de Tarefas (Microsoft 365)	Lista de tarefas editáveis com o SSO criado com o React e as Funções do Azure. Funciona na aplicação Teams, Outlook e Microsoft 365.	View
Editor de Imagens (aplicação Microsoft 365)	Crie, edite, abra e guarde imagens com a Microsoft Graph API. Funciona na aplicação Teams, Outlook e Microsoft 365.	View
Separador estático de exemplo (aplicação Microsoft 365)	Demonstra a autenticação SSO e as capacidades de biblioteca do TeamsJS como disponíveis em diferentes anfitriões. Funciona na aplicação Teams, Outlook e Microsoft 365.	View
Aplicação Encomendas northwind	Demonstra como utilizar a biblioteca do TeamsJS v.2 para expandir a aplicação teams para outras aplicações anfitriãs do Microsoft 365. Funciona na aplicação Teams, Outlook e Microsoft 365. Otimizado para dispositivos móveis.	View

Próxima etapa

Publique a sua aplicação para ser detetável na aplicação Teams, Outlook e Microsoft 365:

Publicar aplicativos do Teams para Outlook e Office

Compartilhar via