Obtención del contexto de Teams para la pestaña

La pestaña requiere información contextual para mostrar contenido relevante:

  • Información básica sobre el usuario, el equipo o la empresa.
  • Información de configuración regional y tema.
  • Los page.id y page.subPageId que identifican lo que está en esta pestaña (conocida como subEntityIdentityId y antes de TeamsJS v2.0.0).

Contexto del usuario

El contexto sobre el usuario, el equipo o la empresa puede ser especialmente útil cuando:

  • Cree o asocie recursos en la aplicación con el usuario o equipo especificado.
  • Inicia un flujo de autenticación desde Microsoft Entra ID u otro proveedor de identidad, y no necesita que el usuario vuelva a escribir su nombre de usuario.

Para obtener más información, consulte Autenticar un usuario en Microsoft Teams.

Importante

Aunque esta información de usuario puede ayudar a proporcionar una experiencia de usuario fluida, no debe usarla como prueba de identidad. Por ejemplo, un atacante puede cargar la página en un explorador y representar información o solicitudes dañinas.

Acceder a la información de contexto

Puede acceder a la información contextual de dos formas:

Obtener contexto insertando valores de marcador de posición de dirección URL

Use marcadores de posición en la configuración o en las direcciones URL de contenido. Microsoft Teams reemplaza los marcadores de posición por valores pertinentes al determinar la configuración o la dirección URL real del contenido. Los marcadores de posición disponibles incluyen todos los campos del objeto de contexto . Los marcadores de posición comunes incluyen las siguientes propiedades:

  • {page.id}: el identificador único definido por el desarrollador para la página, definido al configurar la página por primera vez. (conocido como {entityId} antes, TeamsJS v2.0.0).
  • {page.subPageId}: el identificador único definido por el desarrollador para la subpágina que este contenido señala definido al generar un vínculo profundo para un elemento específico dentro de la página. (conocido como {subEntityId} antes, TeamsJS v2.0.0).
  • {user.loginHint}: un valor adecuado como sugerencia de inicio de sesión para Microsoft Entra ID. Suele ser el nombre de inicio de sesión del usuario actual en su espacio empresarial principal. (conocido como {loginHint} antes, TeamsJS v2.0.0).
  • {user.userPrincipalName}: el nombre principal del usuario actual en el inquilino actual. (conocido como {userPrincipalName} antes, TeamsJS v2.0.0).
  • {user.id}: el identificador de objeto Microsoft Entra del usuario actual en el inquilino actual. (conocido como {userObjectId} antes, TeamsJS v2.0.0).
  • {app.theme}: el tema actual de la interfaz de usuario (UI) como default, dark, o glass, contrast. (conocido como {theme} antes, TeamsJS v2.0.0).
  • {team.groupId}: el identificador del grupo de Microsoft 365 en el que reside la pestaña. (conocido como {groupId} antes, TeamsJS v2.0.0)
  • {user.tenant.id}: el identificador de inquilino de Microsoft Entra del usuario actual. (conocido como {tid} antes, TeamsJS v2.0.0).
  • {app.locale}: la configuración regional actual del usuario con formato languageId-countryId, por ejemplo en-us. (conocido como {locale} antes, TeamsJS v2.0.0).

Nota:

  • El marcador de posición {upn} anterior está en desuso. Por motivos de compatibilidad con versiones anteriores, es sinónimo {user.loginHint}de .
  • Las versiones móviles (Android e iOS) de Microsoft Teams solo admiten marcadores de posición v1.x.x de TeamsJS.

Por ejemplo, en el manifiesto de la aplicación, si establece el atributo configurationUrl de "https://www.contoso.com/config?name={user.loginHint}&tenant={user.tenant.id}&group={team.groupId}&theme={app.theme}" la pestaña y el usuario que ha iniciado sesión tiene los siguientes atributos:

  • Su nombre de usuario es user@example.com.
  • El identificador de inquilino de su empresa es e2653c-etc.
  • Es miembro del grupo de Microsoft 365 con id. 00209384-etc.
  • El usuario ha establecido el tema de Teams en oscuro.

Teams llama a la siguiente dirección URL al configurar la pestaña:

https://www.contoso.com/config?name=user@example.com&tenant=e2653c-etc&group=00209384-etc&theme=dark

Obtenga contexto mediante la biblioteca JavaScript de Microsoft Teams

También puede recuperar la información de contexto mediante la biblioteca cliente JavaScript de Microsoft Teams.

La información se puede recuperar llamando a microsoftTeams.app.getContext().then((context) => {/*...*/});.

El código siguiente proporciona un ejemplo de variable de contexto:

{
 "app": {
   "host": {
     "clientType": "The type of host client. Possible values are android, ios, web, desktop, surfaceHub, teamsRoomsAndroid, teamsPhones, teamsDisplays rigel (deprecated, use teamsRoomsWindows instead)",
     "name": "",
     "ringId": "The current ring ID",
     "sessionId": "The unique ID for the current Teams session for use in correlating telemetry data"    },
   "iconPositionVertical": "",
   "locale": "The current locale of the user formatted as languageId-countryId (for example, en-us)",
   "osLocaleInfo": "",
   "parentMessageId": "The parent message ID from which this dialog is launched",
   "sessionId": "The unique ID for the current session used for correlating telemetry data",
   "theme": "The current UI theme: default | dark | glass | contrast",
   "userClickTime": "",
   "userFileOpenPreference": ""  },
 "channel": {
   "defaultOneNoteSectionId": "The OneNote section ID that is linked to the channel",
   "displayName": "The name of the current channel",
   "id": "The channel ID in the format 19:[id]@thread.skype",
   "membershipType": "",
   "ownerGroupId": "",
   "ownerTenantId": "",
   "relativeUrl": "The relative path to the SharePoint folder associated with the channel"  },
 "chat": { "id": "The chat ID in the format 19:[id]@thread.skype" },
 "meeting": {
   "id": "The meeting ID used by tab when running in meeting context"  },
 "page": {
   "frameContext": "The context where tab URL is loaded (for example, content, task, setting, remove, sidePanel)",
   "id": "The developer-defined unique ID for the entity this content points to",
   "isFullScreen": "Indicates if the tab is in full-screen",
   "isMultiWindow": "The indication whether the tab is in a pop out window",
   "sourceOrigin": "",
   "subPageId": "The developer-defined unique ID for the sub-entity this content points to"  },
 "sharepoint": "The SharePoint context is available only when hosted in SharePoint",
 "sharepointSite": {
   "teamSiteDomain": "The domain of the root SharePoint site associated with the team",
   "teamSitePath": "The relative path to the SharePoint site associated with the team",
   "teamSiteUrl": "The root SharePoint site associated with the team"  },
 "team": {
   "displayName": "The name of the current team",
   "groupId": "Guid identifying the current Office 365 Group ID",
   "internalId": "The Microsoft Teams ID in the format 19:[id]@thread.skype",
   "isArchived": "Indicates if team is archived",
   "templateId": "",
   "type": "The type of team",
   "userRole": "The user's role in the team"  },
 "user": {
   "displayName": "",
   "id": "The Azure AD object id of the current user, in the current tenant",
   "isCallingAllowed": "Indicates if calling is allowed for the current logged in user",
   "isPSTNCallingAllowed": "Indicates if PSTN calling is allowed for the current logged in user",
   "licenseType": "The license type for the current user. Possible values are E1, E3, and E5 enterprise plans",
   "loginHint": "A value suitable as a login hint for Azure AD. This is usually the login name of the current user, in their home tenant",
   "tenant": {
     "id": "The Azure AD tenant ID of the current user",
     "teamsSku": "The license type for the current user tenant. Possible values are enterprise, free, edu, unknown"    },
   "userPrincipalName": "The principal name of the current user, in the current tenant"  }
}

TypeScript

import { app, Context } from "@microsoft/teams-js";

app.getContext().then((context: Context) => {
    /*...*/
});

Patrón equivalente async/await :

import { app, Context } from "@microsoft/teams-js";

async function example() {
  const context: Context = await app.getContext();
  /*...*/
}

JavaScript

import { app, Context } from "@microsoft/teams-js";

app.getContext().then((context) => {
    /*...*/
});

Patrón equivalente async/await :

import { app, Context } from "@microsoft/teams-js";

async function example() {
  const context = await app.getContext();
  /*...*/
}

En la tabla siguiente se enumeran las propiedades de contexto utilizadas habitualmente del objeto de contexto :

Nombre de TeamsJS v2 Nombre de TeamsJS v1
team.internalId teamId
team.displayName teamName
channel.id channelId
channel.displayName channelName
chat.id chatId
app.locale configuración regional
page.id entityId
page.subPageId subEntityId
user.loginHint loginHint
user.userPrincipalName UPN
user.id userObjectId
user.tenant.id tid
team.groupId groupId
app.theme theme
page.isFullScreen IsFullScreen
team.type tipo de equipo
sharepointSite.teamSiteUrl teamSiteUrl
sharepointSite.teamSiteDomain teamSiteDomain
sharepointSite.teamSitePath teamSitePath
channel.relativeUrl channelRelativeUrl
app.host.sessionId sessionId
team.userRole userTeamRole
team.isArchived isTeamArchived
app.host.clientType hostClientType
page.frameContext frameContext
sharepoint sharepoint
user.tenant.teamsSku tenantSKU
user.licenseType userLicenseType
app.parentMessageId parentMessageId
app.host.ringId ringId
app.sessionId appSessionId
user.isCallingAllowed isCallingAllowed
user.isPSTNCallingAllowed isPSTNCallingAllowed
meeting.id Id. de la reunión
channel.defaultOneNoteSectionId defaultOneNoteSectionId
page.isMultiWindow isMultiWindow

Para obtener más información, consulte las novedades de la interfaz de contexto y la referencia de la API de la interfaz de contexto.

Recuperar contexto en canales privados

Nota:

Los canales privados solo están en versión preliminar para desarrolladores privados.

Cuando la página de contenido se carga en un canal privado, los datos que recibe de la getContext llamada se ofuscan para proteger la privacidad del canal.

Los siguientes campos se cambian cuando la página de contenido está en un canal privado:

  • team.groupId: Sin definir para canales privados
  • team.internalId: Establecer en el threadId del canal privado
  • team.displayName: Establecer en el nombre del canal privado
  • sharepointSite.teamSiteUrl: Establecer la dirección URL de un sitio de SharePoint distinto y único para el canal privado
  • sharepointSite.teamSitePath: establecido en la ruta de acceso de un sitio de SharePoint distinto y único para el canal privado
  • sharepointSite.teamSiteDomain: Establecer en el dominio de un dominio de sitio de SharePoint distinto y único para el canal privado
  • channel.ownerGroupId: Establecer en el groupId del equipo host del canal privado

Si su página hace uso de alguno de estos valores, el valor de channel.membershipType campo debe ser Private para determinar si su página está cargada en un canal privado y puede responder adecuadamente.

Nota:

teamSiteUrl también funciona bien para canales estándar. Si la página usa alguno de estos valores, el valor de channelType campo debe ser Shared para determinar si la página se carga en un canal compartido y puede responder correctamente.

Obtener contexto en canales compartidos

Cuando la experiencia de usuario del contenido se carga en un canal compartido, use los datos recibidos de la llamada para los cambios de getContext canal compartido. Si la pestaña usa alguno de los siguientes valores, debe rellenar el channelType campo para determinar si la pestaña se carga en un canal compartido y responder correctamente. Para los canales compartidos, el groupId valor es null, ya que el groupId del equipo host no refleja con precisión la verdadera pertenencia del canal compartido. Para solucionar este problema, las propiedades and hostTenantID se han agregado recientemente y son útiles para realizar llamadas a la hostTeamGroupID Microsoft Graph API para recuperar la pertenencia. hostTeam hace referencia al equipo que creó el canal compartido. currentTeam hace referencia al equipo desde el que el usuario actual obtiene acceso al canal compartido.

Para obtener más información sobre estos conceptos y canales compartidos, consulte canales compartidos.

Use las siguientes getContext propiedades en canales compartidos:

Propiedad Description
channelId La propiedad se establece en el identificador de subproceso de canales compartidos.
channelType La propiedad está establecida en sharedChannel para canales compartidos.
groupId La propiedad es null para canales compartidos.
hostTenantId La propiedad se acaba de agregar y describe el id. del inquilino del host, útil para comparar con la propiedad del id. del tid inquilino del usuario actual.
hostTeamGroupId La propiedad se acaba de agregar y describe el identificador de grupo de Microsoft Entra del equipo anfitrión, útil para realizar llamadas a la Graph API de Microsoft Graph para recuperar la pertenencia a un canal compartido.
teamId La propiedad se acaba de agregar y se establece en el identificador de subproceso del equipo compartido actual.
teamName La propiedad se establece en el archivo del equipo teamNamecompartido actual.
teamType La propiedad se establece en el archivo del equipo teamTypecompartido actual.
teamSiteUrl La propiedad describe el archivo channelSiteUrl.
teamSitePath La propiedad describe el archivo channelSitePath.
teamSiteDomain La propiedad describe el archivo channelSiteDomain.
tenantSKU La propiedad describe el .tenantSKU
tid La propiedad describe el ID. del inquilino del usuario actual.
userObjectId La propiedad describe el identificador del usuario actual.
userPrincipalName La propiedad describe el UPN del usuario actual.

Para más información sobre los canales compartidos, consulte Canales compartidos.

Controlar el cambio de tema

Importante

  • De forma predeterminada, el nuevo cliente de Teams admite un tema claro para las aplicaciones en las reuniones de Teams. Cuando la app.theme propiedad de getContext API devuelve el valor, el cliente de Teams está en el default tema claro.
  • Los clientes de Teams de la versión anterior solo admiten el tema oscuro y de contraste para las aplicaciones en las reuniones de Teams.

Puede registrar la aplicación para recibir información si el tema cambia llamando a microsoftTeams.app.registerOnThemeChangeHandler(function(theme) { /* ... */ }).

El theme argumento de la función es una cadena con un valor de default, dark, glass, o contrast. La propiedad AppInfo de getContext API admite el glass tema para Teams que se ejecuta en dispositivos Apple Vision Pro.

La siguiente imagen muestra la opción de tema predeterminada en Teams:

La captura de pantalla muestra el tema predeterminado en el cliente de escritorio de Teams.

Ejemplo de código

Ejemplo de nombre Descripción JavaScript
Contexto del canal de pestañas Este ejemplo muestra las capacidades de una aplicación de pestañas que muestra el objeto de contexto de pestañas específicamente para canales privados y compartidos en Microsoft Teams. Los usuarios pueden expandir y copiar segmentos JSON del objeto de contexto, lo que proporciona información valiosa en función del tipo de canal. Ver

Consulte también