Requisitos previos

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:

  Host de aplicaciones de Microsoft 365	permiso de antecesor de marco
  Todos los hosts (nuevo)	*.cloud.microsoft
  Teams	teams.microsoft.com, *.teams.microsoft.com
  Aplicación de Microsoft 365	*.microsoft365.com, *.office.com,
  Outlook	outlook.office.com, outlook.office365.com, outlook-sdf.office.com, outlook-sdf.office365.com

  Advertencia

  Los servicios en la nube de Microsoft, incluidas las versiones web de los dominios de Teams, Outlook y Microsoft 365, se migran al *.cloud.microsoft dominio. Realice los pasos siguientes antes de septiembre de 2024 para asegurarse de que la aplicación sigue representándose en los hosts de cliente web de Microsoft 365 admitidos:

  1. Actualice la biblioteca TeamsJS a v.2.19.0 o posterior. Para obtener más información sobre la versión más reciente de TeamsJS, consulte Biblioteca cliente JavaScript de Microsoft Teams.

  2. Si ha definido encabezados de directiva de seguridad de contenido (CSP) para la aplicación, actualice la directiva frame-ancestors para incluir el *.cloud.microsoft dominio. Para garantizar la compatibilidad con versiones anteriores durante la migración, conserve los valores existentes frame-ancestors en los encabezados de CSP. Este enfoque garantiza que la aplicación sigue funcionando en aplicaciones host de Microsoft 365 existentes y futuras y minimiza la necesidad de cambios posteriores.

  Actualice el dominio siguiente en la frame-ancestors directiva de los encabezados de CSP de la aplicación:

  https://*.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 publicar 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

• Pestañas de compilación para Teams
• Cree su primera aplicación de pestaña con JavaScript
• Registrar la aplicación de pestaña en Microsoft Entra ID
• Pestañas en dispositivos móviles
• Concesión del permiso de dispositivo de pestaña en Teams
• Directiva de seguridad de contenido