Entrainement
Module
Build tabs for Microsoft Teams - Training
Learn how to build tabs that provide embedded web experiences within Microsoft Teams.
Ce navigateur n’est plus pris en charge.
Effectuez une mise à niveau vers Microsoft Edge pour tirer parti des dernières fonctionnalités, des mises à jour de sécurité et du support technique.
Votre onglet nécessite des informations contextuelles pour afficher le contenu pertinent :
page.id
et page.subPageId
qui identifient ce qui se trouve dans cet onglet (appelé entityId
et subEntityId
avant TeamsJS v2.0.0).Le contexte de l’utilisateur, de l’équipe ou de l’entreprise peut être particulièrement utile dans les cas suivants :
Pour plus d’informations, consultez Authentifier un utilisateur dans votre Microsoft Teams.
Important
Bien que ces informations utilisateur puissent aider à fournir une expérience utilisateur fluide, vous ne devez pas les utiliser comme preuve d’identité. Par exemple, un attaquant peut charger votre page dans un navigateur et afficher des informations ou des demandes dangereuses.
Vous pouvez accéder aux informations de contexte de deux façons :
Utilisez des espaces réservés dans vos URL de configuration ou de contenu. Microsoft Teams remplace les espaces réservés par les valeurs appropriées lorsqu’il détermine l’URL de configuration ou de contenu. Les espaces réservés disponibles incluent tous les champs de l’objet de contexte . Les espaces réservés courants incluent les propriétés suivantes :
{entityId}
avant TeamsJS v2.0.0).{subEntityId}
avant TeamsJS v2.0.0).{loginHint}
avant TeamsJS v2.0.0).{userPrincipalName}
avant TeamsJS v2.0.0).{userObjectId}
avant TeamsJS v2.0.0).default
, dark
ou contrast
. (Appelé {theme}
avant TeamsJS v2.0.0).{groupId}
avant TeamsJS v2.0.0){tid}
avant TeamsJS v2.0.0).en-us
. (Appelé {locale}
avant TeamsJS v2.0.0).Notes
{upn}
précédent est désormais supprimé. Pour la compatibilité descendante, il s’agit d’un synonyme de {user.loginHint}
.Par exemple, dans le manifeste de votre application, si vous définissez l’attribut "https://www.contoso.com/config?name={user.loginHint}&tenant={user.tenant.id}&group={team.groupId}&theme={app.theme}"
configurationUrl de l’onglet sur et que l’utilisateur connecté a les attributs suivants :
Teams appelle l’URL suivante lors de la configuration de l’onglet :
https://www.contoso.com/config?name=user@example.com&tenant=e2653c-etc&group=00209384-etc&theme=dark
Vous pouvez également récupérer les informations de contexte à l’aide de la bibliothèque de client JavaScript Microsoft Teams.
Les informations peuvent être récupérées en appelant microsoftTeams.app.getContext().then((context) => {/*...*/});
.
Le code suivant fournit un exemple de variable de contexte :
{
"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 | 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": {
"domain": "The domain of the root SharePoint site associated with the team",
"path": "The relative path to the SharePoint site associated with the team",
"url": "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" }
}
import { app, Context } from "@microsoft/teams-js";
app.getContext().then((context: Context) => {
/*...*/
});
Modèle équivalent async/await
:
import { app, Context } from "@microsoft/teams-js";
async function example() {
const context: Context = await app.getContext();
/*...*/
}
import { app, Context } from "@microsoft/teams-js";
app.getContext().then((context) => {
/*...*/
});
Modèle équivalent async/await
:
import { app, Context } from "@microsoft/teams-js";
async function example() {
const context = await app.getContext();
/*...*/
}
Le tableau suivant répertorie les propriétés de contexte couramment utilisées de l’objet de contexte :
Nom de TeamsJS v2 | Nom de TeamsJS v1 |
---|---|
team.internalId | teamId |
team.displayName | teamName |
channel.id | channelId |
channel.displayName | channelName |
chat.id | chatId |
app.locale | local |
page.id | entityId |
page.subPageId | subEntityId |
user.loginHint | loginHint |
user.userPrincipalName | upn |
user.id | userObjectId |
user.tenant.id | Tid |
team.groupId | groupId |
app.theme | thème |
page.isFullScreen | IsFullScreen |
team.type | teamType |
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 | meetingId |
channel.defaultOneNoteSectionId | defaultOneNoteSectionId |
page.isMultiWindow | isMultiWindow |
Pour plus d’informations, consultez Mises à jour à l’interface de contexte et la référence de l’API de l’interface de contexte.
Notes
Les canaux privés sont en préversion de développeur privé uniquement.
Lorsque votre page de contenu est chargée dans un canal privé, les données que vous recevez de l’appel getContext
sont masquées pour protéger la confidentialité du canal.
Les champs suivants sont modifiés lorsque votre page de contenu se trouve dans un canal privé :
team.groupId
: Non défini pour les canaux privésteam.internalId
: défini sur le threadId du canal privéteam.displayName
: définissez sur le nom du canal privésharepointSite.url
: Définir sur l’URL d’un site SharePoint distinct et unique pour le canal privésharepointSite.path
: Définir sur le chemin d’un site SharePoint distinct et unique pour le canal privésharepointSite.domain
: Définir sur le domaine d’un domaine de site SharePoint distinct et unique pour le canal privéchannel.ownerGroupId
: Défini sur l’id de groupe de l’équipe hôte du canal privéSi votre page utilise l’une de ces valeurs, la valeur de channel.membershipType
field doit être Private
de déterminer si votre page est chargée dans un canal privé et peut répondre de manière appropriée.
Notes
teamSiteUrl
fonctionne également bien pour les canaux standard. Si votre page utilise l’une de ces valeurs, la valeur de channelType
champ doit être Shared
de déterminer si votre page est chargée dans un canal partagé et peut répondre de manière appropriée.
Lorsque l’expérience utilisateur du contenu est chargée dans un canal partagé, utilisez les données reçues de l’appel pour les modifications de getContext
canal partagé. Si tab utilise l’une des valeurs suivantes, vous devez remplir le channelType
champ pour déterminer si l’onglet est chargé dans un canal partagé et répondre de manière appropriée.
Pour les canaux partagés, la groupId
valeur est null
, car le groupId de l’équipe hôte ne reflète pas avec précision l’appartenance réelle du canal partagé. Pour résoudre ce problème, les hostTeamGroupID
propriétés et hostTenantID
sont récemment ajoutées et utiles pour effectuer des appels microsoft API Graph pour récupérer l’appartenance.
hostTeam
fait référence à l’équipe qui a créé le canal partagé.
currentTeam
fait référence à l’équipe à partir de laquelle l’utilisateur actuel accède au canal partagé.
Pour plus d’informations sur ces concepts et les canaux partagés, consultez Canaux partagés.
Utilisez les propriétés suivantes getContext
dans les canaux partagés :
Propriété | Description |
---|---|
channelId |
La propriété est définie sur l’ID de thread des canaux partagés. |
channelType |
La propriété est définie sur sharedChannel pour les canaux partagés. |
groupId |
La propriété est null pour les canaux partagés. |
hostTenantId |
La propriété vient d’être ajoutée et décrit l’ID de locataire de l’hôte, utile pour la comparaison avec la propriété ID de locataire de tid l’utilisateur actuel. |
hostTeamGroupId |
La propriété vient d’être ajoutée et décrit l’ID de groupe Microsoft Entra de l’équipe hôte, utile pour effectuer des appels Microsoft API Graph pour récupérer l’appartenance au canal partagé. |
teamId |
La propriété vient d’être ajoutée et définie sur l’ID de thread de l’équipe partagée actuelle. |
teamName |
La propriété est définie sur l’équipe partagée actuelle.teamName |
teamType |
La propriété est définie sur l’équipe partagée actuelle.teamType |
teamSiteUrl |
La propriété décrit le du canal channelSiteUrl partagé. |
teamSitePath |
La propriété décrit le du canal channelSitePath partagé. |
teamSiteDomain |
La propriété décrit le du canal channelSiteDomain partagé. |
tenantSKU |
La propriété décrit le de tenantSKU l’équipe hôte. |
tid |
La propriété décrit l’ID de locataire de l’utilisateur actuel. |
userObjectId |
La propriété décrit l’ID de l’utilisateur actuel. |
userPrincipalName |
La propriété décrit l’UPN de l’utilisateur actuel. |
Pour plus d’informations sur les canaux partagés, consultez Canaux partagés.
Important
app.theme
getContext retourne la valeur, le default
client Teams est en thème clair.Vous pouvez inscrire votre application pour être informé si le thème change en appelant microsoftTeams.app.registerOnThemeChangeHandler(function(theme) { /* ... */ })
.
L’argument theme
dans la fonction est une chaîne avec la valeur default
, dark
ou contrast
.
L’image suivante montre l’option de thème par défaut dans Teams :
Exemple de nom | Description | JavaScript |
---|---|---|
Contexte du canal d’onglet | Cet exemple montre comment utiliser le contenu de l’objet de contexte tab dans un canal privé et partagé. | View |
Commentaires sur Platform Docs
Platform Docs est un projet open source. Sélectionnez un lien pour fournir des commentaires :
Entrainement
Module
Build tabs for Microsoft Teams - Training
Learn how to build tabs that provide embedded web experiences within Microsoft Teams.