Extender una Teams personal a través de Microsoft 365

Nota

La extensión de una Teams personal en Microsoft 365 está disponible actualmente solo en la versión preliminar del desarrollador público. Es posible que las características incluidas en la versión preliminar no estén completas y que se someten a cambios antes de estar disponibles en la versión pública. Solo se proporcionan con fines de prueba y exploración. No deben usarse en aplicaciones de producción.

Las pestañas personales proporcionan una excelente forma de mejorar la Microsoft Teams experiencia. Con las pestañas personales, puede proporcionar a un usuario acceso a su aplicación directamente dentro de Teams, sin que el usuario tenga que dejar la experiencia o volver a iniciar sesión. Con esta vista previa, las pestañas personales pueden iluminarse dentro de otras Microsoft 365 aplicaciones. En este tutorial se muestra el proceso de tomar una pestaña personal de Teams existente y actualizarla para que se ejecute en experiencias de escritorio y web de Outlook, y también Microsoft Office inicio (office.com).

Actualizar la aplicación personal para que se ejecute en Outlook y Office Inicio implica estos pasos:

  • Actualizar el manifiesto de la aplicación
  • Actualizar las referencias del SDK de TeamsJS
  • Modificar los encabezados de la directiva de seguridad de contenido
  • Actualizar el registro AAD aplicación para inicio de sesión único (SSO)

La prueba de la aplicación requerirá los siguientes pasos:

  • Inscribir el inquilino M365 en Office 365 versiones dirigidas
  • Configurar tu cuenta para tener acceso a las versiones preliminares de Outlook y Office aplicaciones
  • Descargar localmente la aplicación actualizada en Teams

Después de estos pasos, la aplicación debe aparecer en las versiones preliminares de Outlook y Office aplicaciones.

Requisitos previos

Para completar este tutorial, necesitará:

  • Inquilino Microsoft 365 espacio aislado del Programa para desarrolladores
  • El inquilino de espacio aislado inscrito en Office 365 versiones dirigidas
  • Una máquina con Office aplicaciones instaladas desde el canal Aplicaciones Microsoft 365 beta
  • (Opcional) Teams Toolkit extensión de Visual Studio Code para ayudar a actualizar el código

Preparar la pestaña personal para la actualización

Si tienes una aplicación de pestaña personal existente, haz una copia o una rama del proyecto de producción para probar y actualizar tu id. de aplicación en el manifiesto de la aplicación para usar un nuevo identificador (distinto del id. de aplicación de producción).

Si quieres usar código de ejemplo para completar este tutorial, sigue los pasos de configuración de Introducción a Todo List Sample para crear una aplicación de pestaña personal con la extensión Teams Toolkit para Visual Studio Code. O bien, puede empezar con el mismo ejemplo de lista todo actualizado para TeamsJS SDK v2 Preview y continuar con La vista previa de la pestaña personal en otras Microsoft 365 experiencias. El ejemplo actualizado también está disponible en Teams Toolkit extensión: Ejemplos de vista de desarrollo Lista de todo (Funciona en > > Teams, Outlook y Office).

{alt-text}

Actualizar el manifiesto de la aplicación

Tendrás que usar el esquema de manifiesto de vista previa del desarrollador de Teams y la versión del manifiesto para permitir que la pestaña personal de Teams se ejecute en Office y m365DevPreview Outlook.

Puedes usar Teams Toolkit para actualizar el manifiesto de la aplicación o aplicar los cambios manualmente:

  1. Abra la paleta Comandos: Ctrl+Shift+P
  2. Ejecute el Teams: Upgrade Teams manifest to support Outlook and Office apps comando y seleccione el archivo de manifiesto de la aplicación. Los cambios se realizarán en su lugar.

Si usó Teams Toolkit para crear su aplicación personal, también puede usarla para validar los cambios en el archivo de manifiesto e identificar los errores. Abra la paleta de comandos y busque Teams: validar el archivo de manifiesto o seleccione la opción en el menú Implementación del Teams Toolkit (busque el icono Teams a la izquierda de Ctrl+Shift+P Visual Studio Code).

Teams Toolkit "Validar archivo de manifiesto" en el menú "Implementación"

Actualizar referencias de SDK

Para ejecutar en Outlook y Office, la aplicación tendrá que depender del paquete npm @microsoft/teams-js@2.0.0-beta.1 o superior. Si bien el código con versiones de nivel inferior de se admite en Outlook y Office, las advertencias de desuso se registrarán y la compatibilidad con las versiones de nivel inferior de Outlook y @microsoft/teams-js @microsoft/teams-js Office terminarán.

Puede usar Teams Toolkit para automatizar algunos de los cambios de código para adoptar la siguiente versión de , pero si desea realizar los pasos manualmente, consulte @microsoft/teams-js Microsoft Teams JavaScript client SDK Preview para obtener más información.

  1. Abra la paleta Comandos: Ctrl+Shift+P
  2. Ejecutar el comando Teams: Upgrade Teams JS SDK references to support Outlook and Office apps

Una vez completada, la utilidad habrá actualizado el archivo con la dependencia Vista previa del SDK de TeamsJS ( ) y los archivos y se package.json @microsoft/teams-js@2.0.0-beta.1 *.js/.ts *.jsx/.tsx actualizarán con:

  • package.json referencias a TeamsJS SDK Preview
  • Instrucciones Import para TeamsJS SDK Preview
  • Llamadas de función, enumeración e interfaz a TeamsJS SDK Preview
  • TODO avisos de comentarios para revisar las áreas que podrían estar afectadas por los cambios en la interfaz de contexto
  • TODO avisos de comentarios para asegurarse de que la conversión a funciones de promesas de funciones de estilo de devolución de llamada ha ido bien en cada sitio de llamada que encontró la herramienta

Importante

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

Nota

Si desea actualizar manualmente el código, consulte Microsoft Teams Versión preliminar del SDK de cliente de JavaScript para obtener información sobre los cambios necesarios.

Configurar encabezados de directiva de seguridad de contenido

Al igual que en Microsoft Teams,las aplicaciones de tabulación se hospedan en (elementos iframe) en Office y Outlook web.

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

Microsoft 365 host permiso frame-ancestor
Teams teams.microsoft.com
Oficina *.office.com
Outlook outlook.office.com, outlook.office365.com

Actualizar AAD de aplicaciones para SSO

Azure Active Directory Inicio de sesión único (SSO) para pestañas personales funciona de la misma manera en Office y Outlook que en Teams, sin embargo, deberá agregar varios identificadores de aplicación cliente al registro de aplicación de AAD de la aplicación de pestaña en el portal de registros de aplicaciones del inquilino.

  1. Inicie sesión en Azure Portal con su cuenta de espacio aislado.
  2. Abra la hoja Registros de aplicaciones.
  3. Selecciona el nombre de la aplicación de pestaña personal para abrir el registro de la aplicación.
  4. Seleccione Exponer una API (en Administrar).

Autorizar identificadores de cliente desde la hoja *Registros de aplicaciones* en Azure Portal

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

Microsoft 365 cliente Id. de cliente
Teams escritorio, móvil 1fec8e78-bce4-4aaf-ab1b-5451cc387264
Teams web 5e3ce6c0-2b1f-4285-8d4b-75ee78787346
Office.com 4345a7b9-9a63-4910-a426-35363201d503
Office.com 4765445b-32c6-49b0-83e6-1d93765276ca
Office escritorio 0ec893e0-5785-4de6-99da-4ed124e5296c
Versión de escritorio de Outlook d3590ed6-52b3-4102-aeff-aad2292ab01c
Outlook Web Access 00000002-0000-0ff1-ce00-000000000000
Outlook Web Access bc59ab01-8403-45c6-8796-ac3ef710b3e3

Descarga local de la aplicación en Teams

El último paso es cargar localmente la pestaña personal actualizada (paquete dela aplicación ) en Microsoft Teams. Una vez completada, la aplicación estará disponible para ejecutarse en Office y Outlook, además de Teams.

  1. Empaqueta la Teams (iconos de manifiesto e aplicación)en un archivo zip. Si usó Teams Toolkit para crear la aplicación, puede hacerlo fácilmente con la opción paquete de metadatos Zip Teams en el menú Implementación de Teams Toolkit o en la paleta de comandos de Ctrl+Shift+P Visual Studio Code:

    Opción "Paquete Teams metadatos zip" en Teams Toolkit extensión para Visual Studio Code

  2. Inicie sesión en Teams con su cuenta de espacio aislado de espacio aislado y asegúrese de que está en public Developer Preview. Puede comprobar que está en vista previa en el cliente de Teams haciendo clic en el menú de puntos suspensivos (...) del perfil de usuario y abriendo Acerca de comprobar que la opción Vista previa del programador está activa.

    En Teams de puntos suspensivos, abra "Acerca" y compruebe que la opción "Vista previa del programador" esté activada.

  3. Abra el panel Aplicaciones y haga clic Upload una aplicación personalizada y, a continuación, Upload para mí o mis equipos.

    Botón "Upload una aplicación personalizada" en el panel Teams "Aplicaciones"

  4. Selecciona el paquete de la aplicación y haz clic en Abrir.

Una vez que se haya Teams, la pestaña personal estará disponible en Outlook y Office. Asegúrese de iniciar sesión con las mismas credenciales que usó para realizar la instalación local de la aplicación en Teams.

Puedes anclar la aplicación para obtener acceso rápido o puedes encontrar la aplicación en los puntos suspensivos (...) que se encuentran en la barra lateral de la izquierda.

Nota

Anclar una aplicación en Teams anclará como una aplicación en Office.com o Outlook.

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

Al actualizar la pestaña personal Teams y cargarla localmente en Teams, también se ejecutará en clientes de escritorio y web Outlook y en Microsoft Office Inicio (office.com). Este es el modo de obtener una vista previa de estas Microsoft 365 experiencias.

Outlook

Para ver la aplicación que se ejecuta en Outlook en Windows escritorio, inicie Outlook e inicie sesión con su cuenta de inquilino de desarrollo. Haga clic en los puntos suspensivos (...) de la barra lateral. El título de la aplicación de instalación local aparecerá entre las aplicaciones instaladas.

Haga clic en la opción puntos suspensivos ('Más aplicaciones') de la barra lateral para ver las pestañas personales instaladas

Haz clic en 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, visita https://outlook.office.com e inicia sesión con tu cuenta de inquilino de desarrollo. Haga clic en los puntos suspensivos (...) de la barra lateral. El título de la aplicación de instalación local aparecerá entre las aplicaciones instaladas.

Haz clic en 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.

Microsoft Office inicio

Para obtener una vista previa de la aplicación que se ejecuta en Microsoft Office inicio, inicie sesión office.com con las credenciales de inquilino de prueba. Haga clic en los puntos suspensivos (...) de la barra lateral. El título de la aplicación de instalación local aparecerá entre las aplicaciones instaladas.

Haz clic en el icono de la aplicación para iniciar la aplicación en Office inicio.

Pasos siguientes

Outlook pestañas personales habilitadas Office están en versión preliminar y no se admiten para el uso de producción. Aquí te explicamos cómo distribuir tu aplicación de pestaña personal para obtener una vista previa de audiencias con fines de prueba.

Distribución de un solo inquilino

Outlook y Office pestañas personales habilitadas para la vista previa se pueden distribuir a una audiencia de vista previa en un inquilino de prueba (o producción) de tres maneras:

Teams cliente

En el menú Aplicaciones, selecciona Administrar tus aplicaciones Enviar una aplicación a tu > organización. Esto requiere la aprobación del administrador de TI.

Microsoft Teams de administración

Como administrador Teams, puede cargar e instalar previamente el paquete de la aplicación para el inquilino de la organización desde https://admin.teams.microsoft.com/ . Consulta Upload aplicaciones personalizadas en el Centro Microsoft Teams administración para obtener más información.

Centro de administración de Microsoft

Como administrador global, puedes cargar e instalar previamente el paquete de la aplicación desde https://admin.microsoft.com/ . Consulta Probar e implementar Aplicaciones Microsoft 365 asociados en el portal de aplicaciones integradas para obtener más información.

Distribución multiinquilino

La distribución a Microsoft AppSource no se admite durante esta versión preliminar para desarrolladores de Outlook y Office pestañas personales habilitadas Teams de microsoft.