Compartilhar via


Estender uma guia pessoal do Teams Microsoft 365

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:

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.

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.

  1. Abra o Visual Studio Code.

  2. Selecione o ícone Do Teams Toolkit na barra de atividade.

  3. Selecione Criar uma Nova Aplicação.

  4. Selecione Tabulação.

  5. Selecione Separador Básico.

    Captura de ecrã a mostrar a opção Separador Básico realçada para criar uma nova funcionalidade de aplicação com um separador.

  6. Selecione uma linguagem de programação preferencial.

  7. Selecione uma localização no seu computador local para a pasta da área de trabalho e introduza o nome da aplicação.

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

  9. Selecione Paleta de Comandos... na opção Ver ou Ctrl+Shift+P.

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

  11. Selecione uma subscrição e um grupo de recursos. Se optar por criar um novo grupo de recursos, terá de especificar a localização.

  12. Selecione Aprovisionar.

  13. Selecione Paleta de Comandos... na opção Ver ou Ctrl+Shift+P.

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

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

    npm install @microsoft/generator-sharepoint@latest --global
    
  2. Atualize o manifesto da aplicação.

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

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

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.

  1. Abra a Paleta de comandos: Ctrl+Shift+P.
  2. 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:

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
https://*.cloud.microsoft https://teams.microsoft.com https://*.teams.microsoft.com https://*.microsoft365.com https://*.office.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 domínio cloud.microsoft . 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 superior. Para obter mais informações sobre a versão mais recente do TeamsJS, consulte Biblioteca de cliente JavaScript do Microsoft Teams.

  2. Atualize a diretiva frame-ancestors do cabeçalho da Política de Segurança de Conteúdos da sua aplicação do Teams para permitir que a sua aplicação seja alojada pelo domínio *.cloud.microsoft. Isto 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.

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.

  1. Entre no portal do Microsoft Azure com sua conta de locatário da área restrita.

  2. Abra Registros de aplicativo.

  3. Selecione o nome do aplicativo de guia pessoal para abrir o registro do aplicativo.

  4. Selecione Expor uma API (em Gerir).

    Captura de ecrã a mostrar os IDs de cliente autorizados dos registos de aplicações no portal do Azure.

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

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

    Captura de ecrã a mostrar a opção Pacote de Aplicações do Teams zip na extensão do Teams Toolkit para Visual Studio Code.

  2. Aceda ao Microsoft Teams e inicie sessão com a sua conta de inquilino do sandbox.

  3. Selecione Aplicativos para abrir o painelGerenciar seus aplicativos. Em seguida, selecione Carregar uma aplicação.

    Captura de ecrã a mostrar a opção Carregar uma aplicação em Gerir as suas aplicações.

  4. Selecione a opção Carregar uma aplicação personalizada e selecione o seu pacote de aplicação.

    Captura de ecrã a mostrar a opção para carregar uma aplicação no Teams.

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:

  1. Inicie o Outlook e entre usando sua conta de locatário de desenvolvimento.

  2. Na barra lateral, selecione Mais aplicações. O título da aplicação personalizada carregada é apresentado entre as aplicações instaladas.

  3. Selecione o ícone da sua aplicação para iniciar a sua aplicação no Outlook.

    Captura de ecrã a mostrar a opção Mais aplicações na barra lateral do cliente de ambiente de trabalho do Outlook para ver a sua aplicação de separador instalada.

Outlook na Web

Para exibir seu aplicativo no Outlook na Web:

  1. Aceda ao Outlook na Web e inicie sessão com a sua conta de inquilino dev.

  2. Na barra lateral, selecione Aplicações. O título da aplicação personalizada carregada é apresentado entre as aplicações instaladas.

  3. Selecione o ícone da sua aplicação para iniciar e pré-visualizar a sua aplicação em execução no Outlook na Web.

    Captura de ecrã a mostrar a opção Aplicações na barra lateral do outlook.com para ver a sua aplicação de separador instalada.

Aplicação Outlook para Android

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

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

  2. Selecione o ícone Aplicações . A aplicação personalizada carregada é apresentada entre as aplicações instaladas.

  3. Selecione o ícone da sua aplicação para abrir a sua aplicação no Outlook para Android.

    Captura de ecrã a mostrar a opção Aplicações da aplicação Outlook no Android.

Aplicação Outlook para iOS

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

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

  2. Selecione o ícone Mais . A aplicação personalizada carregada é apresentada entre as aplicações instaladas.

  3. Selecione o ícone da sua aplicação para abrir a sua aplicação na aplicação Outlook.

    Captura de ecrã a mostrar a opção Mais da aplicação Outlook no iOS.

Microsoft 365 no Windows

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

  1. Inicie o Microsoft 365 e inicie sessão com a sua conta de inquilino dev.

  2. Selecione o ícone Aplicações na barra lateral. O título da aplicação personalizada carregada é apresentado entre as aplicações instaladas.

  3. Selecione o ícone da sua aplicação para iniciar a sua aplicação no Microsoft 365.

    Captura de ecrã a mostrar a opção Aplicações na barra lateral do cliente de ambiente de trabalho do Microsoft 365 para ver a sua aplicação de separador instalada.

Microsoft 365 na Web

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

  1. Inicie sessão no microsoft365.com com credenciais de inquilino de teste.

  2. Selecione o ícone Aplicações na barra lateral. O título da aplicação personalizada carregada é apresentado entre as aplicações instaladas.

  3. Selecione o ícone da aplicação para iniciar a sua aplicação no Microsoft 365 na Web.

    Captura de ecrã a mostrar a opção Aplicações na barra lateral do microsoft365.com para ver a sua aplicação de separador instalada.

Aplicação Microsoft 365 para Android

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

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

  2. Selecione o ícone Aplicações . A aplicação personalizada carregada é apresentada entre as aplicações instaladas.

  3. Selecione o ícone da sua aplicação para iniciar a sua aplicação na aplicação Microsoft 365.

    Captura de ecrã a mostrar a opção Aplicações na barra lateral da aplicação Microsoft 365 para ver os separadores pessoais instalados na aplicação Microsoft 365 para Android.

Microsoft 365 para iOS

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

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

  2. Selecione o ícone Aplicações . A aplicação personalizada carregada é apresentada entre as aplicações instaladas.

  3. Selecione o ícone da sua aplicação para iniciar a sua aplicação na aplicação Microsoft 365.

    Captura de ecrã a mostrar a opção Aplicações na barra lateral da aplicação Microsoft 365 para ver os separadores pessoais instalados no Microsoft 365 para iOS.

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:

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

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

  3. Localize o com o Microsoft Teams Tab URL do separador e selecione inspecionar para começar a depurar a sua aplicação com DevTools.

    Captura de ecrã a mostrar a lista de webviews em DevTools.

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

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

  2. Inicie a aplicação Microsoft 365 a partir do seu dispositivo Android.

  3. Abra o seu perfil Definições > Me > Permitir depuração e ative a opção Ativar depuração remota.

    Captura de ecrã a mostrar a opção Ativar depuração remota.

  4. Deixe as Definições.

  5. Deixe o ecrã do seu perfil.

  6. Selecione Aplicações e inicie a aplicação personalizada carregada para ser executada na aplicação Microsoft 365.

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

  8. Localize o com o Microsoft Teams Tab URL do separador e selecione inspecionar para começar a depurar a sua aplicação com DevTools.

    Captura de ecrã a mostrar a lista de webviews em DevTools.

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

Confira também