Ampliar una pestaña personal de Teams en Microsoft 365

Artículo
02/07/2024

Las pestañas personales proporcionan una excelente manera de mejorar la experiencia de Microsoft Teams. Con las pestañas personales, puede proporcionar a un usuario acceso a su aplicación directamente en Teams, sin que el usuario tenga que salir de la experiencia ni volver a iniciar sesión. Con esta versión preliminar, las pestañas personales también se pueden iluminar dentro de otras aplicaciones de Microsoft 365. En este tutorial se muestra el proceso de tomar una pestaña personal de Teams existente y actualizarla para que se ejecute en outlook y en la aplicación de Microsoft 365 (experiencias de escritorio y web) y también en la aplicación de Microsoft 365 para Android.

La actualización de la aplicación personal de Teams para que se ejecute en otras aplicaciones de Microsoft 365 implica estos pasos:

Actualice el manifiesto de la aplicación (anteriormente denominado manifiesto de aplicación de Teams).
Actualice las referencias de la biblioteca cliente JavaScript (TeamsJS) de Microsoft Teams.
Modifique los encabezados de la directiva de seguridad de contenido.
Actualice el registro de aplicaciones de Microsoft Entra para Sign-On único (SSO).
Cargue la aplicación personalizada actualizada en Teams.

El resto de esta guía le guiará por estos pasos y le mostrará cómo obtener una vista previa de la pestaña personal en otras aplicaciones de Microsoft 365.

Requisitos previos

Para completar este tutorial, necesita:

Una cuenta empresarial de espacio aislado del Programa de desarrolladores de Microsoft 365
Una máquina con aplicaciones de Microsoft 365 instaladas desde el canal actual de Aplicaciones Microsoft 365.
(Opcional) El inquilino del espacio aislado inscrito en las versiones dirigidas de Microsoft 365.
(Opcional) Un dispositivo Android o emulador con la aplicación de Microsoft 365 para Android instalada.
(Opcional) La extensión del kit de herramientas de Teams para Microsoft Visual Studio Code para ayudar a actualizar el código.

Requisitos previos para la instalación

Preparar la pestaña personal para la actualización

Si tiene una aplicación de pestaña personal existente, realice una copia o una rama del proyecto de producción para probar y actualice el identificador de aplicación en el manifiesto de la aplicación para usar un nuevo identificador (distinto del identificador de aplicación de producción, para las pruebas).

Si desea usar código de ejemplo en lugar de su propio código de producción, puede usar el ejemplo Lista de tareas pendientes. Puede seguir los pasos de configuración en el repositorio de GitHub De ejemplo de lista completa o usar la extensión Kit de herramientas de Teams para crear una nueva aplicación de Teams (seleccione Iniciar desde unalista de tareas pendientes de ejemplo > con back-end en Azure). Después de crear una pestaña personal, vuelva a este artículo para ampliarla en Microsoft 365.

Como alternativa, puede usar una aplicación básica de inicio de sesión único (SSO) hello world que ya esté habilitada para la aplicación microsoft 365, como se muestra en la siguiente sección de inicio rápido y, a continuación, pasar a cargar la aplicación personalizada en Teams.

Inicio rápido

Use la extensión Kit de herramientas de Teams para Visual Studio Code para empezar con una pestaña personal habilitada para ejecutarse en Teams, Outlook y Microsoft 365.

Abra Visual Studio Code.
Seleccione el icono kit de herramientas de Teams en la barra de actividad.
Seleccione Crear una nueva aplicación.
Seleccione Pestaña.
Seleccione la pestaña Básico.
Seleccione un lenguaje de programación preferido.
Seleccione una ubicación en la máquina local para la carpeta del área de trabajo y escriba el nombre de la aplicación.
Una vez creada la aplicación, en la extensión Kit de herramientas de Teams, asegúrese de que ha iniciado sesión en el inquilino de espacio aislado del Programa para desarrolladores de Microsoft 365 adecuado y en la cuenta de Azure. Estas opciones están disponibles en la sección CUENTAS de la extensión.
Seleccione Paleta de comandos... en la opción Ver o Ctrl+Mayús+P.
Escriba Teams: Aprovisionar para crear los recursos de la aplicación de Teams, como Azure App Service, App Service plan, Azure Bot e Identidad administrada en su cuenta de Azure. Como alternativa, puede seleccionar Aprovisionar en la sección CICLO DE VIDA de la extensión.
Seleccione una suscripción y un grupo de recursos. Si decide crear un nuevo grupo de recursos, debe especificar la ubicación.
Seleccione Aprovisionar.
Seleccione Paleta de comandos... en la opción Ver o Ctrl+Mayús+P.
Escriba Teams: Deploy (Equipos: Implementación ) para implementar el código de ejemplo en los recursos aprovisionados en Azure e iniciar la aplicación. Como alternativa, puede seleccionar Implementar en la sección CICLO DE VIDA de la extensión.

Desde aquí, puede ir directamente a cargar la aplicación personalizada en Teams y obtener una vista previa de la aplicación en Outlook y la aplicación de Microsoft 365. El manifiesto de la aplicación y las llamadas api de TeamsJS ya están actualizadas para la aplicación de Microsoft 365.

aplicaciones de SharePoint Framework (SPFx)

A partir de la versión 1.16 de SharePoint Framework (SPFx), las pestañas personales de Teams compiladas y hospedadas con SPFx también se admiten en outlook y aplicaciones de Microsoft 365. Para actualizar una aplicación de pestaña personal de SPFx Teams, siga estos pasos:

Asegúrese de que tiene la versión más reciente de SPFx.

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

Actualice el manifiesto de la aplicación.
Actualice las referencias de TeamsJS.

Después de actualizar las referencias de TeamsJS, cargue la aplicación en Teams para obtener una vista previa de la aplicación de pestaña personal de SPFx que se ejecuta en Outlook y la aplicación de Microsoft 365. Para obtener más información, consulte Extensión de outlook y la aplicación de Microsoft 365 con el SharePoint Framework.

Actualización del manifiesto de la aplicación

Debe usar la versión 1.13 del esquema del manifiesto de la aplicación (o posterior) para permitir que la pestaña personal de Teams se ejecute en Outlook y la aplicación de Microsoft 365. Para obtener más información sobre la versión del esquema, consulte manifiesto de aplicación.

Tienes dos opciones para actualizar el manifiesto de la aplicación:

Kit de herramientas de Teams
Pasos manuales

Abra la paleta de comandos: Ctrl+Shift+P.
Ejecute el comando Teams: Upgrade Teams manifest y seleccione el archivo de manifiesto de la aplicación. Los cambios se realizan en su lugar.

Abra el $schema manifiesto de la aplicación y actualice y manifestVersion manualmente con la versión adecuada. Consulte el manifiesto para desarrolladores de Teams para obtener información sobre la versión:

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

Si usó Teams Toolkit para crear la aplicación personal, también puede usarla para validar los cambios en el archivo de manifiesto de la aplicación e identificar los errores. Abra la paleta de comandos (Ctrl+Shift+P) y busque Teams: Validar archivo de manifiesto.

Actualización de referencias de TeamsJS

La aplicación debe hacer referencia al paquete @microsoft/teams-js@2.19.0 npm (o posterior) para ejecutarse en Outlook y Microsoft 365. Las versiones anteriores de TeamsJS siguen funcionando en las aplicaciones de Outlook y Microsoft 365, pero se registran advertencias de desuso. La compatibilidad con las versiones anteriores finalmente se interrumpe en Outlook y Microsoft 365. Para determinar la versión más reciente de TeamsJS, consulte Repositorio de GitHub de TeamsJS.

Puede usar Teams Toolkit para ayudar a identificar y automatizar los cambios de código necesarios para actualizar de las versiones 1.x TeamsJS a TeamsJS 2.x.x. Como alternativa, puede realizar los mismos pasos manualmente; Consulte la biblioteca TeamsJS para obtener más información.

Abra la paleta Comandos: Ctrl+Shift+P.
Ejecute el comando Teams: Upgrade Teams JS SDK and code references.

Al finalizar, las referencias@microsoft/teams-js@2.0.0 de archivo de package.json (o posterior) y *.js/.ts los archivos y *.jsx/.tsx se actualizan con:

Instrucciones de importación para teams-js@2.x.x
Llamadas a Function, Enum e Interface para teams-js@2.x.x
TODOrecordatorios de comentarios que marcan las áreas que podrían verse afectadas por los cambios en la interfaz de contexto
TODO recordatorios de comentario para convertir las funciones de devolución de llamada a promesas

Importante

El código dentro de.html archivos no es compatible con las herramientas de actualización y requiere cambios manuales.

Configurar encabezados de directiva de seguridad de contenido

Al igual que en Microsoft Teams, las aplicaciones de tabulación se hospedan dentro de elementos iframe en la aplicación de Microsoft 365 y los clientes web de Outlook.

Si la aplicación usa encabezados de directiva de seguridad de contenido (CSP), asegúrese de permitir todos los siguientes antecesores de marco en los encabezados de CSP:

Advertencia

Los servicios en la nube de Microsoft, incluidas las versiones web de los dominios de Teams (teams.microsoft.com), Outlook (outlook.com) y Microsoft 365 (microsoft365.com) se migran al dominio cloud.microsoft . Realice los pasos siguientes antes de junio de 2024 para asegurarse de que la aplicación continúa representándose en el cliente web de Teams:

Actualice el SDK de TeamsJS a la versión 2.19.0 o posterior. Para obtener más información sobre la versión más reciente del SDK de TeamsJS, consulte Biblioteca cliente JavaScript de Microsoft Teams.
Actualice los encabezados de la directiva de seguridad de contenido en la aplicación de Teams para permitir que la aplicación acceda al dominio teams.cloud.microsoft . Si la aplicación de Teams se extiende a través de Outlook y Microsoft 365, asegúrese de permitir que la aplicación acceda a los dominios teams.cloud.microsoft, outlook.cloud.microsoft y m365.cloud.microsoft .

Host de aplicaciones de Microsoft 365	permiso de antecesor de marco
Teams	`teams.microsoft.com`, `*.teams.microsoft.com`, `teams.cloud.microsoft`
Aplicación de 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`

Actualización del registro de aplicaciones de Microsoft Entra para sso

Microsoft Entra inicio de sesión único (SSO) para pestañas personales funciona de la misma manera en la aplicación de Microsoft 365 y Outlook que en Teams. Sin embargo, debe agregar varios identificadores de aplicación cliente al registro de la aplicación de Microsoft Entra de la aplicación de pestaña en el portal de Registros de aplicaciones del inquilino.

Inicie sesión en Microsoft Azure Portal con su cuenta empresarial de espacio aislado.
Abra Registros de aplicaciones.
Seleccione el nombre de la aplicación para abrir el registro de la aplicación.
Seleccione Exponer una API (en Administrar).

En la sección Aplicaciones cliente autorizadas asegúrese de que aparecen todos los siguientes valores Client Id:

Microsoft 365 aplicación cliente	Id. de cliente
Escritorio de Teams, móvil	1fec8e78-bli4-4aaf-ab1b-5451cc387264
Web de Teams	5e3ce6c0-2b1f-4285-8d4b-75ee78787346
Web de Microsoft 365	4765445b-32c6-49b0-83e6-1d93765276ca
Escritorio de Microsoft 365	0ec893e0-5785-4de6-99da-4ed124e5296c
Microsoft 365 mobile	d3590ed6-52b3-4102-aeff-aad2292ab01c
Versión de escritorio de Outlook	d3590ed6-52b3-4102-aeff-aad2292ab01c
Outlook web	bc59ab01-8403-45c6-8796-ac3ef710b3e3
Outlook para dispositivos móviles	27922004-5251-4030-b22d-91ecd9a37ea4

Nota:

Algunas aplicaciones cliente de Microsoft 365 comparten identificadores de cliente.

Carga de la aplicación personalizada en Teams

El último paso para ejecutar la aplicación en Microsoft 365 y Outlook es cargar el paquete de aplicación de pestaña personal actualizado en Microsoft Teams.

Empaquete el archivo (manifiesto de aplicación e iconos de aplicación) en un archivo ZIP. Si usó El kit de herramientas de Teams para crear la aplicación, puede hacerlo fácilmente mediante la opción Zip Teams App Package de la sección UTILIDAD del kit de herramientas de Teams. Seleccione el archivo de la manifest.json aplicación y el entorno adecuado.
Vaya a Microsoft Teams e inicie sesión con su cuenta de inquilino de espacio aislado.
Seleccione Aplicaciones para abrir el panel Administrar aplicaciones. A continuación, seleccione Cargar una aplicación.
Elija la opción Cargar una aplicación personalizada y seleccione el paquete de la aplicación.

Una vez cargado en Teams, la pestaña personal está disponible en Outlook y la aplicación de Microsoft 365. Debe iniciar sesión con las mismas credenciales que usó para cargar la aplicación en Teams. Al ejecutar la aplicación Microsoft 365 para Android, debe reiniciar la aplicación para usar la aplicación de pestaña personal desde la aplicación de Microsoft 365.

Puedes anclar la aplicación para obtener acceso rápido o encontrarla en los puntos suspensivos (...) entre las aplicaciones recientes en la barra lateral de la izquierda. Tenga en cuenta que anclar una aplicación en Teams no la ancla como una aplicación en La aplicación de Microsoft 365 o Outlook.

Obtener una vista previa de su pestaña personal en otras experiencias de Microsoft 365

A continuación se muestra cómo obtener una vista previa de la aplicación que se ejecuta en Microsoft 365 y en los clientes de escritorio de Outlook, web y Windows.

Nota:

Si usa la aplicación de ejemplo Kit de herramientas de Teams y la desinstala de Teams, se quita de los catálogos Más aplicaciones en Outlook y la aplicación de Microsoft 365.

Outlook en Windows

Para obtener una vista previa de la aplicación ejecutándose en Outlook en el escritorio de Windows:

Inicie Outlook e inicie sesión con su cuenta de inquilino de desarrollo.
En la barra lateral, seleccione Más aplicaciones. El título de la aplicación personalizada cargada aparece entre las aplicaciones instaladas.
Seleccione el icono de la aplicación para iniciar la aplicación en Outlook.

Outlook en la Web

Para ver la aplicación en Outlook en la Web:

Vaya a Outlook en la Web e inicie sesión con su cuenta de inquilino de desarrollo.
En la barra lateral, seleccione Aplicaciones. El título de la aplicación personalizada cargada aparece entre las aplicaciones instaladas.
Seleccione el icono de la aplicación para iniciar y obtener una vista previa de la aplicación que se ejecuta en Outlook en la Web.

Aplicación de Outlook para Android

Para ver la aplicación que se ejecuta en Outlook para android:

Abra la aplicación outlook en el dispositivo Android e inicie sesión con su cuenta de inquilino de desarrollador. Si la aplicación de Outlook para Android ya se estaba ejecutando antes de cargar la aplicación personalizada, reinicie la aplicación de Outlook para verla en la sección aplicaciones instaladas.
Seleccione el icono Aplicaciones . La aplicación personalizada cargada aparece entre las aplicaciones instaladas.
Seleccione el icono de la aplicación para abrir la aplicación en Outlook para Android.

Aplicación de Outlook para iOS

Para ver la aplicación que se ejecuta en la aplicación de Outlook para iOS:

Abra la aplicación outlook en el dispositivo e inicie sesión con su cuenta de inquilino de desarrollador. Si la aplicación de Outlook ya se estaba ejecutando antes de cargar la aplicación personalizada en Teams, reinicie Outlook para verla en la sección aplicaciones instaladas.
Seleccione el icono Más . La aplicación personalizada cargada aparece entre las aplicaciones instaladas.
Seleccione el icono de la aplicación para abrir la aplicación en la aplicación de Outlook.

Microsoft 365 en Windows

Para ver la aplicación que se ejecuta en Microsoft 365 en el escritorio de Windows:

Inicie Microsoft 365 e inicie sesión con su cuenta de inquilino de desarrollo.
Seleccione el icono Aplicaciones en la barra lateral. El título de la aplicación personalizada cargada aparece entre las aplicaciones instaladas.
Seleccione el icono de la aplicación para iniciar la aplicación en Microsoft 365.

Microsoft 365 en la web

Para obtener una vista previa de la aplicación que se ejecuta en Microsoft 365 en la web:

Inicie sesión en microsoft365.com con credenciales de inquilino de prueba.
Seleccione el icono Aplicaciones en la barra lateral. El título de la aplicación personalizada cargada aparece entre las aplicaciones instaladas.
Seleccione el icono de la aplicación para iniciar la aplicación en Microsoft 365 en la web.

Aplicación de Microsoft 365 para Android

Para ver la aplicación que se ejecuta en La aplicación de Microsoft 365 para Android:

Inicie la aplicación de Microsoft 365 en el dispositivo e inicie sesión con su cuenta de inquilino de desarrollador. Si la aplicación de Microsoft 365 ya se estaba ejecutando antes de cargar la aplicación personalizada en Teams, debe reiniciar Teams para verla en las aplicaciones instaladas.
Seleccione el icono Aplicaciones . La aplicación personalizada cargada aparece entre las aplicaciones instaladas.
Seleccione el icono de la aplicación para iniciar la aplicación en la aplicación de Microsoft 365.

Microsoft 365 para iOS

Para ver la aplicación que se ejecuta en Microsoft 365 para iOS:

Inicie la aplicación de Microsoft 365 en el dispositivo e inicie sesión con su cuenta de inquilino de desarrollador. Si la aplicación de Microsoft 365 ya se estaba ejecutando antes de cargar la aplicación personalizada en Teams, debe reiniciar Teams para verla en las aplicaciones instaladas.
Seleccione el icono Aplicaciones . La aplicación personalizada cargada aparece entre las aplicaciones instaladas.
Seleccione el icono de la aplicación para iniciar la aplicación en la aplicación de Microsoft 365.

Solución de problemas

Solo se admite un subconjunto de tipos de aplicaciones y funcionalidades de Teams en los clientes de Outlook y Microsoft 365. Para obtener más información para comprobar la compatibilidad del host con varias funcionalidades de TeamsJS, consulte Compatibilidad con aplicaciones de Microsoft 365.

Para obtener un resumen general de la compatibilidad del host y la plataforma de Microsoft 365 con las aplicaciones de Teams, consulte Extensión de aplicaciones de Teams en Microsoft 365.

Puede comprobar la compatibilidad del host de una funcionalidad determinada en tiempo de ejecución llamando a la isSupported() función en esa funcionalidad (espacio de nombres) y ajustando el comportamiento de la aplicación según corresponda. Esta acción permite a la aplicación iluminar la interfaz de usuario y la funcionalidad en los hosts que la admiten y proporcionar una experiencia de reserva correcta en los hosts que no lo hacen. Para obtener más información, consulta Diferenciar la experiencia de la aplicación.

Use los canales de la comunidad de desarrolladores de Microsoft Teams para notificar problemas y enviar comentarios.

Depuración

Puede depurar la aplicación de pestaña que se ejecuta en Teams, la aplicación de Microsoft 365 y Outlook con teams Toolkit en Visual Studio Code.

Captura de pantalla que muestra el menú desplegable de depuración en Teams Toolkit.

Elija el método de depuración deseado y seleccione la tecla F5 . Tras la primera ejecución de la depuración local, Teams Toolkit le pide que inicie sesión en su cuenta de inquilino de Microsoft 365.

Proporcione comentarios e informe de cualquier problema con la experiencia de depuración del kit de herramientas de Teams en Microsoft Teams Framework (TeamsFx).

Depuración móvil

Depuración de Outlook para Android

Para depurar la aplicación en Outlook para Android:

Seleccione el icono Más en el cliente móvil de Teams y abra la aplicación personalizada cargada para que se ejecute en la aplicación de Outlook.
Asegúrese de que el dispositivo Android está conectado a la máquina de desarrollo. Desde la máquina de desarrollo, abra el explorador en su página de inspección de DevTools. Por ejemplo, vaya a edge://inspect/#devices en Microsoft Edge para mostrar una lista de WebView de Android habilitado para depuración.
Busque con la dirección URL de la pestaña y seleccione Inspeccionar para iniciar la Microsoft Teams Tab depuración de la aplicación con DevTools.
Depure la aplicación de pestaña dentro de Android WebView de la misma manera que depura de forma remota un sitio web normal en un dispositivo Android.

Depuración de Microsoft 365 para Android

Teams Toolkit (F5) no admite la depuración de aplicaciones Android en Microsoft 365. A continuación se muestra cómo depurar de forma remota la aplicación que se ejecuta en La aplicación de Microsoft 365 para Android:

Si depura mediante un dispositivo Android físico, conéctelo a la máquina de desarrollo y habilite la opción para la depuración USB. Esta opción está habilitada de forma predeterminada con el emulador de Android.
Inicie la aplicación de Microsoft 365 desde el dispositivo Android.
Abra el perfil Me > Settings Allow debugging (Permitir > depuración) y active la opción Habilitar depuración remota.
Deje Configuración.
Deje la pantalla del perfil.
Seleccione Aplicaciones e inicie la aplicación personalizada cargada para ejecutarla en la aplicación de Microsoft 365.
Asegúrese de que el dispositivo Android está conectado a la máquina de desarrollo. Desde la máquina de desarrollo, abra el explorador en su página de inspección de DevTools. Por ejemplo, vaya a edge://inspect/#devices en Microsoft Edge para mostrar una lista de WebView de Android habilitado para depuración.
Busque con la dirección URL de la pestaña y seleccione Inspeccionar para iniciar la Microsoft Teams Tab depuración de la aplicación con DevTools.
Depure la aplicación de pestaña dentro de Android WebView de la misma manera que depura de forma remota un sitio web normal en un dispositivo Android.

Ejemplo de código

Nombre de ejemplo	Descripción	Node.js
Lista de tareas pendientes	Lista de tareas pendientes editable con sso creado con React y Azure Functions. Solo funciona en Teams (use esta aplicación de ejemplo para probar el proceso de actualización descrito en este tutorial).	View
Lista de tareas pendientes (Microsoft 365)	Lista de tareas pendientes editable con sso creado con React y Azure Functions. Funciona en la aplicación Teams, Outlook y Microsoft 365.	View
Editor de imágenes (aplicación de Microsoft 365)	Cree, edite, abra y guarde imágenes mediante Microsoft Graph API. Funciona en la aplicación Teams, Outlook y Microsoft 365.	View
Pestaña Estática de ejemplo (aplicación de Microsoft 365)	Muestra la autenticación de SSO y las funcionalidades de biblioteca de TeamsJS como disponibles en distintos hosts. Funciona en la aplicación Teams, Outlook y Microsoft 365.	View
Aplicación Northwind Orders	Muestra cómo usar la biblioteca TeamsJS v.2 para ampliar la aplicación teams a otras aplicaciones host de Microsoft 365. Funciona en la aplicación Teams, Outlook y Microsoft 365. Optimizado para dispositivos móviles.	View

Paso siguiente

Publique la aplicación para que se pueda detectar en teams, Outlook y aplicaciones de Microsoft 365:

Publicar aplicaciones de Teams para Outlook y Office