Estender uma guia pessoal do Teams Microsoft 365

Artigo
11/17/2023

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 essa visualização, as guias pessoais também podem se iluminar em outros aplicativos do Microsoft 365. Este tutorial demonstra o processo de usar uma guia pessoal do Teams existente e atualizá-la para ser executada no aplicativo Outlook e microsoft 365 (experiências da área de trabalho e da Web) e no aplicativo Microsoft 365 para Android também.

Atualizar seu aplicativo pessoal do Teams para ser executado em outros aplicativos do Microsoft 365 envolve estas etapas:

Atualize o manifesto do aplicativo (anteriormente chamado de manifesto do aplicativo teams).
Atualize suas referências de TeamsJS (biblioteca de clientes JavaScript) do Microsoft Teams.
Altere os cabeçalhos da Política de Segurança de Conteúdo.
Atualize seu Microsoft Entra Registro de Aplicativo para SSO (Sign-On Único).
Carregue seu aplicativo personalizado atualizado no Teams.

O restante deste guia orienta você nestas etapas e mostra como visualizar sua guia pessoal em outros aplicativos do Microsoft 365.

Pré-requisitos

Para concluir este tutorial, você precisa:

Um locatário de área restrita do Programa para Desenvolvedores do Microsoft 365.
Um computador com aplicativos do Microsoft 365 instalados do canal Microsoft 365 Apps Atual.
(Opcional) Seu locatário de área restrita registrado em Versões Direcionadas do Microsoft 365.
(Opcional) Um dispositivo Android ou emulador com o aplicativo Microsoft 365 para Android instalado.
(Opcional) A extensão do Teams Toolkit para Microsoft Visual Studio Code para ajudar a atualizar seu código.

Instalar pré-requisitos

Preparar sua guia pessoal para a atualização

Se você tiver um aplicativo de guia pessoal existente, faça uma cópia ou um branch do projeto de produção para testar e atualizar sua ID do aplicativo no manifesto do aplicativo para usar um novo identificador (diferente da ID do Aplicativo de produção, para teste).

Se você quiser usar o código de exemplo em vez de seu próprio código de produção, poderá usar o exemplo Toda List. Você pode seguir as etapas de configuração no repositório GitHub de Exemplo de Lista Inteira ou usar a extensão do Teams Toolkit para criar um novo aplicativo do Teams (selecione Iniciar em umalista de exemplos todo com back-end no Azure).> Depois de criar uma guia pessoal, retorne a este artigo para este artigo para estendê-la no Microsoft 365.

Como alternativa, você pode usar um aplicativo sSO (logon único) básico que já está habilitado para o aplicativo Microsoft 365, conforme mostrado na seção início rápido a seguir e, em seguida, ignorar para carregar seu aplicativo personalizado no Teams.

Início rápido

Use a extensão do Teams Toolkit para Visual Studio Code para começar com uma guia pessoal habilitada para execução no Teams, Outlook e Microsoft 365.

Abra o Visual Studio Code.
Selecione o ícone Kit de Ferramentas do Teams na barra de atividades.
Selecione Criar um Novo Aplicativo.
Selecione Guia.
Selecione Guia Básica.
Selecione uma linguagem de programação preferencial.
Selecione um local no computador local para a pasta workspace e insira o nome do aplicativo.
Depois que seu aplicativo for criado, dentro da extensão do Teams Toolkit, verifique se você está conectado ao locatário de área restrita do Microsoft 365 Developer Program e à conta do Azure. Essas opções estão disponíveis na seção ACCOUNTS da extensão.
Selecione Paleta de Comandos... na opção Exibir ou Ctrl+Shift+P.
Insira o Teams: provisionar para criar os recursos do aplicativo teams, como Serviço de Aplicativo do Azure, Serviço de Aplicativo plano, Bot do Azure e Identidade Gerenciada em sua conta do Azure. Como alternativa, você pode selecionar Provisionar na seção LIFECYCLE da extensão.
Selecione uma assinatura e um grupo de recursos. Se você optar por criar um novo grupo de recursos, precisará especificar o local.
Selecione Provisionar.
Selecione Paleta de Comandos... na opção Exibir ou Ctrl+Shift+P.
Insira Teams: implante para implantar o código de exemplo nos recursos provisionados no Azure e inicie o aplicativo. Como alternativa, você pode selecionar Implantar na seção LIFECYCLE da extensão.

A partir daqui, você pode ignorar para carregar seu aplicativo personalizado no Teams e visualizar seu aplicativo no Outlook e no aplicativo Microsoft 365. O manifesto do aplicativo e as chamadas de API do TeamsJS já estão atualizados para o aplicativo Microsoft 365.

aplicativos Estrutura do SharePoint (SPFx)

A partir da versão 1.16 do Estrutura do SharePoint (SPFx), as guias pessoais do Teams criadas e hospedadas com SPFx também têm suporte no Outlook e no aplicativo Microsoft 365. Para atualizar um aplicativo de guia pessoal do SPFx Teams, siga estas etapas:

Verifique se você tem a versão mais recente do SPFx.

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

Atualize o manifesto do aplicativo.
Atualize as referências do TeamsJS.

Depois de atualizar as referências do TeamsJS, carregue seu aplicativo no Teams para visualizar seu aplicativo de guia pessoal SPFx em execução no Outlook e no aplicativo Microsoft 365. Para obter mais informações, consulte Estender o Outlook e o aplicativo Microsoft 365 com o Estrutura do SharePoint.

Atualizar o manifesto do aplicativo

Você precisa usar a versão 1.13 do esquema de manifesto do aplicativo (ou posterior) para permitir que sua guia pessoal do Teams seja executada no Outlook e no aplicativo Microsoft 365. Para obter mais informações sobre a versão do esquema, consulte manifesto do aplicativo.

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. Alterações são feitas em vigor.

Abra o manifesto do aplicativo e atualize o $schema e manifestVersion manualmente com a versão apropriada. Consulte o manifesto do desenvolvedor do Teams para obter informações de versão:

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

Se você usou o Teams Toolkit para criar seu aplicativo pessoal, também poderá usá-lo para validar as alterações no arquivo de manifesto do aplicativo e identificar quaisquer erros. Abra a paleta de comandos (Ctrl+Shift+P) e localize o Teams: validar o arquivo de manifesto.

Atualizar referências do TeamsJS

Seu aplicativo deve se referir 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 nos aplicativos Outlook e Microsoft 365, mas os avisos de depreciação são registrados. O suporte para as versões anteriores eventualmente é descontinuado no Outlook e no Microsoft 365. Para determinar a versão mais recente do TeamsJS, consulte Repositório GitHub do TeamsJS.

Você pode usar o Teams Toolkit para ajudar a identificar e automatizar as alterações de código necessárias para atualizar de versões do TeamsJS 1.x para versões do TeamsJS 2.x.x. Como alternativa, você pode executar as mesmas etapas 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, suas referências @microsoft/teams-js@2.0.0de arquivo package.json (ou posterior) e seus *.js/.ts arquivos e *.jsx/.tsx são atualizados com:

Importar instruções para teams-js@2.x.x
Chamadas de função, Enum e Interface para teams-js@2.x.x
TODOlembretes de comentário sinalizando áreas que podem ser afetadas por alterações de interface de contexto
TODO lembretes de comentário para converter funções de retorno de chamada em promessas

Importante

O código dentro .html arquivos não tem suporte pelas ferramentas de atualização e exige alterações manuais.

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

Assim como no Microsoft Teams, os aplicativos de guia são hospedados dentro dos elementos iframe no aplicativo Microsoft 365 e nos clientes Web do Outlook.

Se o aplicativo usar cabeçalhos CSP ( Content Security Policy ), certifique-se de permitir todos os seguintes ancestrais de quadro em seus cabeçalhos CSP:

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:

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

Atualizar Microsoft Entra registro de aplicativo para SSO

Microsoft Entra SSO (logon único) para guias pessoais funciona da mesma maneira no aplicativo Microsoft 365 e no Outlook como no Teams. No entanto, você precisa adicionar vários identificadores de aplicativo cliente ao Microsoft Entra registro de aplicativo do aplicativo de guia no portal de Registros de aplicativo do locatário.

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

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
Área de trabalho do Microsoft 365	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

Alguns aplicativos cliente do Microsoft 365 compartilham IDs do cliente.

Carregar seu aplicativo personalizado no Teams

A etapa final para executar seu aplicativo no Microsoft 365 e no Outlook é carregar seu pacote de aplicativo de guia pessoal atualizado no Microsoft Teams.

Empacotar seu (manifesto de aplicativo e ícones de aplicativo) em um arquivo zip. Se você usou o Teams Toolkit para criar seu aplicativo, poderá fazer isso facilmente usando a opção Pacote de Aplicativos zip teams na seção UTILITÁRIO do Teams Toolkit. Selecione o manifest.json arquivo para seu aplicativo e o ambiente apropriado.
Acesse o Microsoft Teams e entre usando sua conta de locatário de área restrita.
Selecione Aplicativos para abrir o painelGerenciar seus aplicativos. Em seguida, selecione Carregar um aplicativo.
Escolha a opção Carregar um aplicativo personalizado e selecione seu pacote de aplicativos.

Depois de carregar no Teams, sua guia pessoal estará disponível no Outlook e no aplicativo Microsoft 365. Você deve entrar com as mesmas credenciais usadas para carregar seu aplicativo no Teams. Ao executar o aplicativo Microsoft 365 para Android, você precisa reiniciar o aplicativo para usar seu aplicativo de guia pessoal do aplicativo 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. Lembre-se de que fixar um aplicativo no Teams não o fixa como um aplicativo no aplicativo Microsoft 365 ou no Outlook.

Visualizar sua guia pessoal em outras Microsoft 365 experiências

Veja como visualizar seu aplicativo em execução nos clientes da área de trabalho do Microsoft 365 e outlook, Web e Windows.

Observação

Se você usar o aplicativo de exemplo do Teams Toolkit e desinstalá-lo do Teams, ele será removido dos catálogos do More Apps no Outlook e no aplicativo 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 aplicativos. O título do aplicativo personalizado carregado aparece entre seus aplicativos instalados.
Selecione o ícone do aplicativo para iniciar seu aplicativo no Outlook.

Outlook na Web

Para exibir seu aplicativo no Outlook na Web:

Vá para Outlook na Web e entre usando sua conta de locatário de desenvolvimento.
Na barra lateral, selecione Aplicativos. O título do aplicativo personalizado carregado aparece entre seus aplicativos instalados.
Selecione o ícone do aplicativo para iniciar e visualizar seu aplicativo em execução em Outlook na Web.

Aplicativo Outlook para Android

Para exibir seu aplicativo em execução no aplicativo Outlook para Android:

Abra o aplicativo do Outlook em seu dispositivo Android e entre usando sua conta de locatário do desenvolvedor. Se o aplicativo Outlook para Android já estivesse em execução antes de carregar seu aplicativo personalizado, reinicie o aplicativo do Outlook para vê-lo na seção de aplicativos instalados.
Selecione o ícone Aplicativos . Seu aplicativo personalizado carregado aparece entre os aplicativos instalados.
Selecione o ícone do aplicativo para abrir seu aplicativo no Outlook para Android.

Aplicativo do Outlook para iOS

Para exibir seu aplicativo em execução no aplicativo Outlook para iOS:

Abra o aplicativo do Outlook em seu dispositivo e entre usando sua conta de locatário do desenvolvedor. Se o aplicativo outlook já estivesse em execução antes de carregar seu aplicativo personalizado no Teams, reinicie o Outlook para vê-lo na seção de aplicativos instalados.
Selecione o ícone Mais . Seu aplicativo personalizado carregado aparece entre os aplicativos instalados.
Selecione o ícone do aplicativo para abrir seu aplicativo no aplicativo do Outlook.

Microsoft 365 no Windows

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

Inicie o Microsoft 365 e entre usando sua conta de locatário de desenvolvimento.
Selecione o ícone Aplicativos na barra lateral. O título do aplicativo personalizado carregado aparece entre seus aplicativos instalados.
Selecione o ícone do aplicativo para iniciar seu aplicativo no Microsoft 365.

Microsoft 365 na Web

Para visualizar seu aplicativo em execução no Microsoft 365 na Web:

Faça logon em microsoft365.com com credenciais de locatário de teste.
Selecione o ícone Aplicativos na barra lateral. O título do aplicativo personalizado carregado aparece entre seus aplicativos instalados.
Selecione o ícone do aplicativo para iniciar seu aplicativo no Microsoft 365 na Web.

Microsoft 365 para aplicativo Android

Para exibir seu aplicativo em execução no aplicativo Microsoft 365 para Android:

Inicie o aplicativo Microsoft 365 em seu dispositivo e entre usando sua conta de locatário do desenvolvedor. Se o aplicativo Microsoft 365 já estava em execução antes de carregar seu aplicativo personalizado no Teams, você precisará reiniciar o Teams para vê-lo em seus aplicativos instalados.
Selecione o ícone Aplicativos . Seu aplicativo personalizado carregado aparece entre os aplicativos instalados.
Selecione o ícone do aplicativo para iniciar seu aplicativo no aplicativo Microsoft 365.

Microsoft 365 para iOS

Para exibir seu aplicativo em execução no Microsoft 365 para iOS:

Inicie o aplicativo Microsoft 365 em seu dispositivo e entre usando sua conta de locatário do desenvolvedor. Se o aplicativo Microsoft 365 já estava em execução antes de carregar seu aplicativo personalizado no Teams, você precisará reiniciar o Teams para vê-lo em seus aplicativos instalados.
Selecione o ícone Aplicativos . Seu aplicativo personalizado carregado aparece entre os aplicativos instalados.
Selecione o ícone do aplicativo para iniciar seu aplicativo no aplicativo Microsoft 365.

Solução de problemas

Apenas um subconjunto de tipos e recursos de aplicativos do Teams tem suporte em clientes do Outlook e do Microsoft 365. Para obter mais informações para marcar suporte ao host para vários recursos do TeamsJS, confira Suporte ao aplicativo Microsoft 365.

Para obter um resumo geral do suporte de host e plataforma do Microsoft 365 para aplicativos do Teams, consulte Estender aplicativos do Teams no Microsoft 365.

Você pode marcar para o suporte de host de uma determinada funcionalidade no runtime chamando a isSupported() função nesse recurso (namespace) e ajustando o comportamento do aplicativo conforme apropriado. Essa ação permite que seu aplicativo ilumine a interface do usuário e a funcionalidade em hosts que dão suporte a ele e forneçam uma experiência de fallback graciosa em hosts que não o fazem. Para obter mais informações, confira Diferenciar sua experiência de aplicativo.

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

Depuração

Você pode depurar seu aplicativo de guia em execução no Teams, aplicativo Microsoft 365 e Outlook com o Teams Toolkit em Visual Studio Code.

A captura de tela mostra o menu suspenso de depuração no Teams Toolkit.

Escolha o método de depuração desejado e selecione a chave F5 . Após a primeira execução da depuração local, o Teams Toolkit solicita que você entre em sua conta de locatário do Microsoft 365.

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

Depuração móvel

Depurando o Outlook para Android

Para depurar seu aplicativo no Outlook para Android:

Selecione o ícone Mais no cliente móvel do Teams e abra seu aplicativo personalizado carregado para ser executado no aplicativo Outlook.
Verifique se o dispositivo Android está conectado ao computador de desenvolvimento. No computador de desenvolvimento, abra o navegador até a página de inspeção DevTools. Por exemplo, acesse no Microsoft Edge para exibir uma lista de WebViews android habilitados para edge://inspect/#devices depuração.
Localize a Microsoft Teams Tab URL com sua guia e selecione inspecionar para começar a depurar seu aplicativo com DevTools.
Depure seu aplicativo de guia no Android WebView da mesma forma que você depura remotamente um site regular em um dispositivo Android.

Depurando o Microsoft 365 para Android

O Teams Toolkit (F5) não dá suporte à depuração de aplicativos Android no Microsoft 365. Veja como depurar remotamente seu aplicativo em execução no aplicativo Microsoft 365 para Android:

Se você depurar usando um dispositivo Android físico, conecte-o ao computador de desenvolvimento e habilite a opção de depuração USB. Essa opção está habilitada por padrão com o emulador android.
Inicie o aplicativo Microsoft 365 do seu dispositivo Android.
Abra o perfil Me > Settings > Permitir depuração e alterne na opção Habilitar depuração remota.
Deixe Configurações.
Deixe sua tela de perfil.
Selecione Aplicativos e inicie seu aplicativo personalizado carregado para ser executado no aplicativo Microsoft 365.
Verifique se o dispositivo Android está conectado ao computador de desenvolvimento. No computador de desenvolvimento, abra o navegador até a página de inspeção DevTools. Por exemplo, acesse no Microsoft Edge para exibir uma lista de WebViews android habilitados para edge://inspect/#devices depuração.
Localize a Microsoft Teams Tab URL com sua guia e selecione inspecionar para começar a depurar seu aplicativo com DevTools.
Depure seu aplicativo de guia no Android WebView da mesma forma que você depura remotamente um site regular em um dispositivo Android.

Exemplo de código

Nome de exemplo	Descrição	Node.js
Lista Todo	Lista de todos editáveis com SSO criado com React e Azure Functions. Funciona apenas no Teams (use este aplicativo de exemplo para tentar o processo de atualização descrito neste tutorial).	View
Lista Todo (Microsoft 365)	Lista de todos editáveis com SSO criado com React e Azure Functions. Funciona no Teams, Outlook, aplicativo do Microsoft 365.	View
Editor de Imagens (aplicativo microsoft 365)	Criar, editar, abrir e salvar imagens usando o Microsoft API do Graph. Funciona no Teams, Outlook, aplicativo do Microsoft 365.	View
Guia estática de exemplo (aplicativo Microsoft 365)	Demonstra a autenticação do SSO e os recursos da biblioteca do TeamsJS como disponíveis em hosts diferentes. Funciona no Teams, Outlook, aplicativo do Microsoft 365.	View
Aplicativo Northwind Orders	Demonstra como usar a biblioteca do TeamsJS v.2 para estender o aplicativo teams para outros aplicativos host do Microsoft 365. Funciona no Teams, Outlook, aplicativo do Microsoft 365. Otimizado para dispositivos móveis.	View

Próxima etapa

Publique seu aplicativo para ser detectável no Teams, Outlook e aplicativo do Microsoft 365:

Publicar aplicativos do Teams para Outlook e Office