Partage via

Configuration requise

  • Article

Veillez à respecter les conditions préalables suivantes lors de la création de votre onglet de groupe ou de canal et Teams personnel :

  • Activez la découverte de vos pages d’onglet dans un iFrame en utilisant les en-têtes de réponse HTTP X-Frame-Options et Content-Security-Policy .

  • Vérifiez que toutes les pages d’application Teams sont hébergées sur des points de terminaison HTTPS.

  • Définissez les en-têtes de stratégie de sécurité du contenu pour autoriser Teams et toutes les autres applications hôtes de votre application :

    Hôte d’application Microsoft 365 autorisation frame-ancestor
    Tous les hôtes (nouveau) *.cloud.microsoft
    Teams teams.microsoft.com, *.teams.microsoft.com
    Application Microsoft 365 *.microsoft365.com, *.office.com,
    Outlook outlook.office.com, outlook.office365.com, outlook-sdf.office.com, outlook-sdf.office365.com

    Avertissement

    Les services cloud de Microsoft, y compris les versions web des domaines Teams, Outlook et Microsoft 365, migrent vers le *.cloud.microsoft domaine. Effectuez les étapes suivantes avant septembre 2024 pour vous assurer que votre application continue à s’afficher sur les hôtes clients web Microsoft 365 pris en charge :

    1. Mettez à jour la bibliothèque TeamsJS vers la version 2.19.0 ou ultérieure. Pour plus d’informations sur la dernière version de TeamsJS, consultez Bibliothèque de client JavaScript Microsoft Teams.

    2. Si vous avez défini des en-têtes de stratégie de sécurité de contenu (CSP) pour votre application, mettez à jour la directive frame-ancestors pour inclure le *.cloud.microsoft domaine. Pour garantir la compatibilité descendante pendant la migration, conservez les valeurs existantes frame-ancestors dans vos en-têtes CSP. Cette approche garantit que votre application continue de fonctionner sur les applications hôtes Microsoft 365 existantes et futures et réduit le besoin de modifications ultérieures.

    Mettez à jour le domaine suivant dans la frame-ancestors directive des en-têtes CSP de votre application :

    https://*.cloud.microsoft

    Remarque

    Pour héberger les autres applications Teams ou Microsoft 365 au sein de votre application, mettez à niveau votre application vers un environnement Microsoft 365. Si vous gérez l’application en cours d’exécution dans le cadre imbriqué, vous pouvez mettre à jour son code pour initialiser le Kit de développement logiciel (SDK) en spécifiant votre domaine. Cela permet à votre frame imbriqué d’agir en tant que proxy pour Teams.

  • Pour la compatibilité d’Internet Explorer 11, définissez X-Content-Security-Policy. Vous pouvez également définir l’en-tête X-Frame-Options: ALLOW-FROM https://teams.microsoft.com/. Cet en-tête est déconseillé, mais la plupart des navigateurs l’acceptent toujours.

  • Les pages de connexion ne s’affichent pas dans les iFrames comme protection contre le détournement de clics. Votre logique d’authentification doit utiliser une méthode autre que la redirection. Par exemple, utilisez l’authentification basée sur les jetons ou sur les cookies.

    Remarque

    Il est recommandé de définir l’utilisation prévue pour vos cookies plutôt que de vous appuyer sur le comportement du navigateur par défaut. Pour plus d’informations, consultez Attribut de cookie SameSite.

  • La même restriction de stratégie d’origine des navigateurs empêche les pages web d’effectuer des requêtes vers des domaines autres que ceux de la page web servie. Vous pouvez donc rediriger la page de configuration ou de contenu vers un autre domaine ou sous-domaine. Votre logique de navigation inter-domaines doit permettre au client Teams de valider l’origine par rapport à une liste statique validDomains dans le manifeste de l’application lors du chargement ou de la communication avec l’onglet.

  • Stylisez vos onglets en fonction du thème, de la conception et de l’intention du client Teams. Les onglets fonctionnent mieux lorsqu’ils sont conçus pour répondre à un besoin spécifique et se concentrent sur un petit ensemble de tâches ou un sous-ensemble de données pertinents pour l’emplacement du canal de l’onglet.

  • Dans votre page de contenu, ajoutez une référence à la bibliothèque de client JavaScript Microsoft Teams à l’aide de balises de script. Une fois votre page chargée, appelez app.initialize(), sinon votre page n’est pas affichée.

  • Pour que l’authentification fonctionne sur les clients mobiles, vous devez effectuer une mise à niveau vers TeamsJS version 1.4.1 ou ultérieure.

  • Si vous choisissez d’afficher l’onglet de votre canal ou de votre groupe sur un client mobile Teams, la configuration setConfig() doit avoir une valeur pour la propriété websiteUrl.

  • L’onglet Microsoft Teams ne prend pas en charge la possibilité de charger des sites web intranet qui utilisent des certificats auto-signés.

Remarque

Cette rubrique reflète la version 2.0.x de la bibliothèque de client JavaScript Microsoft Teams (TeamsJS). Si vous utilisez une version antérieure, reportez-vous à la vue d’ensemble de la bibliothèque TeamsJS pour obtenir des conseils sur les différences entre la dernière version de TeamsJS et les versions antérieures.

Outils pour créer des onglets

  Installer Pour l’utilisation...
Obligatoire    
  Node.js Environnement runtime JavaScript principal. Utilisez la dernière version v16 LTS.
  Microsoft Edge (recommandé) ou Google Chrome Un navigateur avec des outils de développement.
  Visual Studio Code Environnements de build JavaScript, TypeScript ou SharePoint Framework (SPFx).
  Visual Studio 2022, charge de travail de développement ASP.NET et web .NET. Vous pouvez installer l’édition community gratuite de Visual Studio 2022.
  Git Git pour utiliser le référentiel d’exemples d’applications de GitHub.
  Microsoft Teams Microsoft Teams pour collaborer avec toutes les personnes avec lesquelles vous travaillez via les applications pour les conversations, les réunions, les appels, le tout au même endroit.
  ngrok Ngrok est un outil logiciel de proxy inverse. Ngrok crée un tunnel vers les points de terminaison HTTPS disponibles publiquement de votre serveur web local en cours d’exécution. Les points de terminaison web de votre serveur sont disponibles pendant la session active sur votre ordinateur. Lorsque vous arrêtez ou mettez votre appareil en veille, le service n’est plus disponible.
  Documentation pour les développeurs Portail web pour configurer, gérer et distribuer votre application Teams, y compris à votre organisation ou au Microsoft Teams Store.

Créer votre onglet Teams

Nous allons maintenant créer votre onglet. Toutefois, sélectionnez d’abord votre choix d’onglet à créer :

Créer un onglet personnel

Créer un onglet de canal ou de groupe

Voir aussi