Requisitos previos

  • Artículo

Asegúrese de cumplir los siguientes requisitos previos al crear la pestaña personal y de canal o grupo de Teams:

  • Habilite la detección de las páginas de pestaña en un iFrame mediante los encabezados de respuesta HTTP X-Frame-Options y Content-Security-Policy .

  • Asegúrese de que todas las páginas de aplicaciones de Teams están hospedadas en puntos de conexión HTTPS.

  • Establezca encabezados de directiva de seguridad de contenido para permitir Teams y cualquier otra aplicación host de la aplicación:

    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:

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

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

    Nota:

    Para hospedar las demás aplicaciones de Teams o Microsoft 365 dentro de la aplicación, actualice la aplicación a un entorno de Microsoft 365. Si administra la aplicación que se ejecuta en el marco anidado, puede actualizar su código para inicializar el SDK especificando el dominio. Esto permite que el marco anidado actúe como proxy para Teams.

  • Para obtener compatibilidad con Internet Explorer 11, establezca X-Content-Security-Policy. Como alternativa, establezca el encabezado X-Frame-Options: ALLOW-FROM https://teams.microsoft.com/. Este encabezado está en desuso, pero la mayoría de los exploradores lo siguen aceptando.

  • Las páginas de inicio de sesión no se representan en iFrames como medida de seguridad contra el secuestro de clics. La lógica de autenticación debe usar un método distinto del redireccionamiento. Por ejemplo, use la autenticación basada en tokens o en cookies.

    Nota:

    Se recomienda establecer el uso previsto para las cookies en lugar de basarse en el comportamiento predeterminado del explorador. Para más información, vea Atributo de cookie SameSite.

  • La restricción de directiva del mismo origen de los exploradores impide que las páginas web realicen solicitudes a dominios diferentes de la página web atendida. Por lo tanto, puede redirigir la página de configuración o contenido a otro dominio o subdominio. La lógica de navegación entre dominios debe permitir que el cliente de Teams valide el origen con una lista estática validDomains en el manifiesto de la aplicación al cargar o comunicarse con la pestaña.

  • Aplique estilo a las pestañas en función del tema, el diseño y la intención del cliente de Teams. Las pestañas funcionan mejor cuando se compilan para abordar una necesidad específica y centrarse en un pequeño conjunto de tareas o un subconjunto de datos que es relevante para la ubicación del canal de la pestaña.

  • En la página de contenido, agregue una referencia a la biblioteca cliente JavaScript de Microsoft Teams mediante etiquetas de script. Una vez que se cargue la página, realice una llamada a app.initialize()o, de lo contrario, no se mostrará la página.

  • Para que la autenticación funcione en clientes móviles, debe actualizar a TeamsJS versión 1.4.1 o posterior.

  • Si decide que la pestaña de canal o grupo aparezca en el cliente móvil de Teams, la configuración de setConfig() debe tener un valor para la propiedad websiteUrl.

  • La pestaña Microsoft Teams no admite la capacidad de cargar sitios web de intranet que usan certificados autofirmados.

Nota:

En este tema se refleja la versión 2.0.x de la biblioteca cliente JavaScript de Microsoft Teams (TeamsJS). Si usa una versión anterior, consulte la introducción a la biblioteca TeamsJS para obtener instrucciones sobre las diferencias entre la versión más reciente de TeamsJS y las versiones anteriores.

Herramientas para crear pestañas

  Instalar Para usar...
Required    
  Node.js Entorno de tiempo de ejecución de JavaScript de back-end. Use la versión v16 LTS más reciente.
  Microsoft Edge (recomendado) o Google Chrome Un explorador con herramientas de desarrollo.
  Visual Studio Code Entornos de compilación de JavaScript, TypeScript o SharePoint Framework (SPFx).
  Visual Studio 2022, ASP.NET y la carga de trabajo de desarrollo web .NET. Puede instalar la edición de comunidad gratuita de Visual Studio 2022.
  Git Git para usar el repositorio de aplicaciones de ejemplo de GitHub.
  Microsoft Teams Microsoft Teams para colaborar con todos los usuarios con los que trabaja a través de aplicaciones de chat, reuniones, llamadas, todo en un solo lugar.
  ngrok Ngrok es una herramienta de software de proxy inverso. Ngrok crea un túnel a los puntos de conexión HTTPS disponibles públicamente del servidor web en ejecución local. Los puntos de conexión web del servidor están disponibles durante la sesión actual en el equipo. Al apagar o poner el dispositivo en suspensión, el servicio ya no está disponible.
  Portal para desarrolladores de Teams Portal basado en web para configurar, administrar y distribuir la aplicación de Teams, incluidos su organización o Microsoft Teams Store.

Crear la pestaña de Teams

Ahora vamos a crear la pestaña. Pero primero seleccione la pestaña que prefiera crear:

Crear una pestaña personal

Crear una pestaña de grupo o canal personalizado

Consulte también