Didacticiels

Dans cet article, découvrez-en davantage sur le développement des fonctionnalités de l’application Teams. Voici une liste des guides pas à pas disponibles pour les fonctionnalités de la plateforme Teams.

#	Fonctionnalité	Guide pas à pas
1.	Bot (en anglais)	- Déboguez votre chatbot IA à l’aide de Microsoft 365 Agents Playground - Envoyer des messages proactifs
2.	Extension de message	- Extension de message basée sur l’API Build - Générer une extension de message basée sur l’action - Créer votre première application d’extension de message à l’aide de JavaScript
3.	Onglet	Créer votre première application onglet à l’aide du do dièse
4.	Authentification unique	- Créer un bot avec authentification SSO - Ajouter l’authentification unique à l’application d’extension d’onglet et de message

Créer votre première application bot

Démarrez le développement d’applications Microsoft Teams avec votre première application Teams. Vous pouvez créer une application bot avec Teams à l’aide de Javascript.

Build your first bot

Votre application a une capacité qui dispose de sa propre interface utilisateur et de sa propre expérience utilisateur :

Le diagramme montre que cette application a trois fonctionnalités.

Dans ce tutoriel, vous allez découvrir :

Comment configurer un nouveau projet avec Microsoft 365 Agents Toolkit (anciennement Teams Toolkit).
Comment créer une application de robot.
Comment déployer votre application.

Configuration requise

Veillez à installer les outils suivants pour créer et déployer vos applications.

	Installer	Pour utiliser...
Requis
	Microsoft 365 Agents Toolkit	Extension de Microsoft Visual Studio Code qui crée une génération de modèles automatique de projet pour votre application. Utilisez la dernière version.
	Microsoft Teams	Microsoft Teams pour collaborer avec toutes les personnes avec lesquelles vous travaillez via des applications pour le chat, les réunions et les appels au même endroit.
	Node.js	Environnement d’exécution JavaScript back-end. Pour plus d’informations, consultez Node.js tableau de compatibilité des versions pour le type de projet.
	Microsoft Edge (recommandé) ou Google Chrome	Navigateur avec outils de développement.
	Visual Studio Code	environnements de construction JavaScript, TypeScript ou SharePoint Framework (SPFx). Utilisez la dernière version.
Facultatif
	Outils Azure pour Visual Studio Code et Azure CLI	Outils Azure permettant d’accéder aux données stockées ou de déployer un backend cloud pour votre application Teams dans Azure.
	Outils de développement React pour Chrome OU Outils de développement React pour Microsoft Edge	Une extension DevTools du navigateur pour la bibliothèque JavaScript open source React.
	Microsoft Graph Explorer	Microsoft Graph Explorer, un outil basé sur un navigateur qui vous permet d’exécuter une requête à partir de données Microsoft Graph.
	Portail Développeur pour Teams	Portail web pour configurer, gérer et publier votre application Teams, y compris dans votre organisation ou dans le Microsoft Teams Store.

Conseil

Si vous utilisez des données Microsoft Graph, vous devez vous renseigner sur les Explorer Microsoft Graph et les ajouter à vos favoris. Cet outil basé sur un navigateur vous permet d’interroger Microsoft Graph en dehors d’une application.

Configurer les prérequis

Après avoir installé les outils requis, configurez l’environnement de développement.

Installer Microsoft 365 Agents Toolkit

Microsoft 365 Agents Toolkit (anciennement Teams Toolkit) simplifie le processus de développement grâce à des outils permettant de provisionner et de déployer des ressources cloud pour votre application et de les publier dans Teams Store.

Vous pouvez utiliser Agents Toolkit avec Visual Studio Code ou une interface de ligne de commande appelée Microsoft 365 Agents Toolkit CLI (anciennement TeamsFx CLI).

Visual Studio Code
Ligne de commande

Ouvrez Visual Studio Code et sélectionnez Extensions (Ctrl+Maj+X ou Afficher>les extensions).
Dans la zone de recherche, entrez Microsoft 365 Agents Toolkit.
Sélectionnez Installer.

L’icône Microsoft 365 Agents Toolkit s’affiche dans la barre d’activité de Visual Studio Code.

Vous pouvez également installer Agents Toolkit depuis la Place de marché de Visual Studio Code.

Pour installer l’interface de ligne de commande Agents Toolkit, utilisez le gestionnaire de npm package et entrez la commande suivante dans l’invite de commandes :

npm install -g @microsoft/m365agentstoolkit-cli

Selon votre configuration, vous devrez peut-être utiliser sudo pour installer l’interface de ligne de commande :

sudo npm install -g --unsafe-perm @microsoft/m365agentstoolkit-cli

Cette condition est plus fréquente sur les systèmes Linux et macOS.

Assurez-vous d’ajouter le cache global npm à votre PATH. Cette étape est normalement effectuée dans le cadre du programme d’installation Node.js.

Vous pouvez utiliser l’interface de ligne de commande avec la atk commande. Vérifiez que la commande fonctionne en cours d’exécutionatk -h.

Attention

Avant de pouvoir exécuter TeamsFx dans des terminaux PowerShell, vous devez activer la stratégie d’exécution signée à distance pour PowerShell.

Configurer votre client de développement Teams

Un client est un espace ou un conteneur pour votre organisation dans Teams, où vous pouvez converser, partager des fichiers et organiser des réunions. Cet espace est également l’endroit où vous chargez et testez votre application. Vérifions si vous êtes prêt à développer avec le client.

Rechercher l’option Charger une application

Après avoir créé votre application personnalisée, vous devez charger votre application dans Teams avec l’option Charger une application personnalisée . Connectez-vous à votre compte Microsoft 365 pour case activée si cette option est activée.

Les étapes suivantes vous aident à vérifier si vous pouvez charger des applications dans Teams :

Dans le client Teams, sélectionnez l’icône Applications .
Sélectionnez Gérer vos applications.
Sélectionnez Charger une application.
Recherchez l’option permettant de charger une application personnalisée. Si l’option est visible, vous pouvez télécharger des applications personnalisées.

Remarque

Si vous ne trouvez pas l’option permettant de charger une application personnalisée, contactez votre administrateur Teams.

Créer un locataire développeur Teams gratuit

Si vous n’avez pas de compte de développeur Teams, rejoignez le programme pour développeurs Microsoft 365. Cette étape est facultative.

Accédez au programme pour développeurs Microsoft 365.
Sélectionnez Rejoindre maintenant , puis suivez les instructions à l’écran.
Dans l’écran d’accueil, sélectionnez Configurer l’abonnement E5.
Configurez votre compte d’administrateur. Une fois que vous avez terminé, l’écran suivant s’affiche :
Connectez-vous à Teams à l’aide du compte d’administrateur que vous venez de configurer. Vérifiez que vous disposez de l’option Charger une application personnalisée dans Teams.

Obtenir un compte Azure gratuit

Si vous souhaitez héberger votre application ou accéder à des ressources dans Azure, vous devez avoir un abonnement Azure. Créez un compte gratuit avant de commencer.

Vous disposez maintenant de tous les outils pour configurer votre compte. Ensuite, configurons votre environnement de développement et commençons à créer ! Sélectionnez d’abord l’application que vous souhaitez créer.

Créer un espace de travail de projet pour votre application bot

Créons votre première application de robot.

La fonctionnalité bot d’une application Teams crée un chatbot ou un bot conversationnel. Vous l’utilisez pour exécuter des tâches simples et automatisées, comme fournir un service client. Un bot communique avec un service web et vous aide à utiliser ses offres. Vous pouvez obtenir les prévisions météorologiques, effectuer des réservations ou tout autre service proposé à l’aide d’un robot conversationnel.

Le diagramme montrant que cette application a trois fonctionnalités. Le bot est mis en surbrillance.

Comme vous vous êtes déjà préparé à la création de ces applications, vous pouvez configurer un nouveau projet Teams pour créer l’application robot.

Dans ce tutoriel, vous allez apprendre :

Comment configurer un nouveau projet de bot avec Agents Toolkit.
À propos de la structure de répertoire de votre projet d’application.

Important

Les bots sont disponibles dans Government Community Cloud (GCC), GCC High, Department of Defense (DoD) et Teams gérés par les environnements 21Vianet .

Créer votre espace de travail de projet de bot

Si les conditions préalables sont réunies, commençons !

Remarque

L’interface utilisateur de Visual Studio Code affichée provient de Mac. Il peut varier en fonction de votre système d’exploitation, de la version d’Agents Toolkit et de votre environnement.

Visual Studio Code
Ligne de commande

Ouvrez Visual Studio Code.
Sélectionnez l’icône Microsoft 365 Agents Toolkit dans la barre d’activité Visual Studio Code.
Sélectionnez Créer une nouvelle application Teams d’agent/d’application>.
Sélectionnez Bot pour créer un projet de bot.
Assurez-vous que Basic Bot est sélectionné en tant que fonctionnalité d’application que vous souhaitez créer dans votre application.
Sélectionnez JavaScript comme langage de programmation.
Sélectionnez le dossier par défaut pour stocker votre dossier racine de projet dans l’emplacement par défaut.

Vous pouvez également modifier l’emplacement par défaut en procédant comme suit :
1. Sélectionnez Parcourir.
2. Sélectionnez l’emplacement de l’espace de travail du projet.
3. Sélectionnez le dossier Sélectionné.
Entrez un nom approprié pour votre application, puis sélectionnez Entrée.

Une boîte de dialogue apparaît, où vous devrez choisir oui ou non pour faire confiance aux auteurs des fichiers de ce dossier.

La capture d’écran montre la boîte de dialogue permettant d’approuver ou non les auteurs des fichiers de ce dossier.

Votre application Teams avec une fonctionnalité de bot est créée en quelques secondes.

La capture d’écran montre l’application créée.

Une fois votre application créée, Agents Toolkit affiche le message suivant :

Capture d’écran montrant le message indiquant que la fonctionnalité a été créée avec succès.

Sélectionnez Débogage local pour afficher un aperçu de votre projet.

Récapitulatif rapide de la création d’une application Teams.

Regardez ce bref récapitulatif de la création d’une application Teams.

Créer une application Teams

Utilisez l’interface de ligne de commande « atk » pour créer votre premier projet. Commencez à partir du dossier dans lequel vous souhaitez créer le dossier du projet.

atk new

Vous pouvez utiliser l’interface de ligne de commande pour créer une application Teams. L’interface de ligne de commande vous guide à travers une série de questions. Chaque question comprend une instruction sur la façon d’y répondre.

Par exemple, utilisez les touches fléchées pour sélectionner une option. Après avoir fait le choix, sélectionnez Entrée pour le confirmer.

Sélectionnez Créer une application Teams.
Sélectionnez Bot et désélectionnez Tab.
Sélectionnez JavaScript comme langage de programmation.
Sélectionnez Entrée pour sélectionner le dossier de l’espace de travail par défaut.
Entrez un nom approprié pour votre application, par exemple HelloBot. Le nom de l’application doit être composé uniquement de caractères alphanumériques.

Une fois que vous avez répondu à toutes les questions, votre projet est créé.

Visite guidée du code source de l’application bot

Une fois la génération de modèles automatique terminée, affichez les répertoires et les fichiers du projet dans l’Explorateur dans le Visual Studio Code.

La capture d’écran montre la structure des dossiers.

Dossier/Fichier	Sommaire
`m365agents.yml`	Fichier de projet principal
`m365agents.local.yml`	Cela est remplacé par des `m365agents.yml` actions qui permettent l’exécution et le débogage locaux.
`.vscode/`	Fichiers VSCode pour le débogage local.
`appPackage/`	Modèles pour le manifeste de l’application Teams.
`adaptiveCards/`	Cartes adaptatives renvoyées par le bot.
`infra/`	Modèles d’approvisionnement des ressources Azure.
`index.js`	le point d’entrée et `express` le gestionnaire de l’application.
`teamsBot.js`	Gestionnaire d’activités Teams.

Conseil

Familiarisez-vous avec les robots en dehors de Teams avant d’intégrer votre premier robot dans Teams.

Créer et exécuter votre première application bot

Après avoir configuré votre espace de travail de projet avec Agents Toolkit, générez votre projet de bot. Vous devez vous connecter à votre compte Microsoft 365.

Utilisez ce compte pour vous connecter à Teams. Si vous utilisez un client du programme pour développeurs Microsoft 365, le compte administrateur que vous avez configuré lors de l’inscription est votre compte Microsoft 365.

Visual Studio Code
Ligne de commande

Ouvrez Visual Studio Code.
Sélectionnez l’icône Microsoft 365 Agents Toolkit dans la barre latérale.
Sélectionnez Se connecter à M365 à l’aide de vos informations d’identification.

Votre navigateur web par défaut s’ouvre pour vous permettre de vous connecter au compte.
Fermez le navigateur lorsque vous y êtes invité et revenez à Visual Studio Code.
Revenez à Agents Toolkit dans Visual Studio Code.

Utilisez ce compte pour vous connecter à Teams. Si vous utilisez un client du programme pour développeurs Microsoft 365, le compte administrateur que vous avez configuré lors de l’inscription est votre compte Microsoft 365.

Vous êtes maintenant prêt à créer l’application et à l’exécuter localement !

Se connecter à Microsoft 365 avec Microsoft 365 Agent Toolkit CLI (anciennement TeamsFx CLI) :

atk account login m365

Votre navigateur web par défaut s’ouvre pour vous permettre de vous connecter au compte. Connectez-vous à votre compte Azure à l’aide de vos informations d’identification. Fermez le navigateur lorsque vous y êtes invité.

Les identifiants de compte sont partagés entre Visual Studio Code et Agents Toolkit CLI.

Maintenant que l’environnement de développement est configuré, vous pouvez créer, générer et déployer votre première application Teams.

Créer et exécuter votre première application bot localement

Pour générer et exécuter votre application dans l’environnement local :

Sélectionnez F5 dans Visual Studio Code pour exécuter votre application en mode débogage.

Remarque

Si Agents Toolkit n’est pas en mesure de case activée un prérequis particulier, il vous invite à case activée.
Découvrez ce qui se passe lorsque vous exécutez votre application localement dans le débogueur.

Au cas où vous vous poseriez la question, lorsque vous appuyez sur la touche F5 , Agents Toolkit :
1. vérifie toutes les conditions préalables suivantes :
- Vous êtes connecté avec un compte Microsoft 365.
- Le chargement d’application personnalisé est activé pour votre compte Microsoft 365.
- La version Node.js prise en charge est installée.
- Le port requis par l’application bot est disponible.
1. Installez les packages npm.
2. Démarre Dev Tunnel pour créer un tunnel HTTP.
3. Enregistre l’application dans Microsoft Entra ID et configure l’application.
4. Inscrit l’application bot dans Bot Framework et configure l’application bot.
5. Inscrit l’application dans le portail Teams des développeurs et configure l’application.
6. Démarre l’application bot.
7. Démarre Teams dans un navigateur web et charge l’application bot personnalisée.
Remarque

Lorsque vous exécutez l’application pour la première fois, toutes les dépendances sont téléchargées et l’application est générée. Une fenêtre de navigateur s’ouvre automatiquement une fois la build terminée. Ce processus peut prendre de trois à cinq minutes.

Teams exécute votre application dans un navigateur web.
Connectez-vous avec votre compte Microsoft 365, si vous y êtes invité.
Sélectionnez Ajouter pour charger l’application bot personnalisée dans Teams.
Sélectionnez Ouvrir pour ouvrir l’application dans l’étendue personnelle.

Vous pouvez également rechercher et sélectionner l’étendue requise ou sélectionner un canal, une conversation ou une réunion dans la liste, puis parcourir la boîte de dialogue pour sélectionner Atteindre.

Maintenant, le bot s’exécute correctement sur Teams ! Une fois l’application chargée, une session de conversation avec le bot s’ouvre.

Vous pouvez taper welcome pour afficher une carte de présentation et taper learn pour accéder à la documentation sur la carte adaptative et les commandes de bot.

Vous pouvez effectuer des activités de débogage normales, telles que la définition de points d’arrêt, comme avec n’importe quelle autre application web. Ouvrez le bot/teamsBot.js fichier et localisez la onMessage() méthode. Définissez un point d’arrêt sur n’importe quel cas. Ensuite, tapez du texte.

Découvrez comment résoudre les problèmes si votre application ne s’exécute pas localement.

Pour exécuter correctement votre application dans Teams, assurez-vous que vous avez activé le chargement d’applications personnalisées dans votre compte Teams. Vous pouvez en savoir plus sur le chargement d’applications personnalisées dans la section Conditions préalables.

Important

Le chargement d’applications personnalisées est disponible dans le cloud de la communauté du secteur public (GCC) et n’est pas pris en charge dans GCC High, DoD et Teams gérés par 21Vianet.

Conseil

Recherchez les problèmes avant de charger une application personnalisée à l’aide de l’outil de validation d’application. Cet outil est inclus dans la boîte à outils. Corrigez les erreurs lors du téléchargement de l’application.

Déployer votre première application Teams

Vous avez appris à créer, générer et exécuter une application Teams avec la fonctionnalité de robot. La dernière étape consiste à déployer votre application sur Azure.

Déployons la première application avec une fonctionnalité de bot sur Azure à l’aide d’Agents Toolkit.

Utilisez ce compte pour accéder au Portail Azure Microsoft et provisionner de nouvelles ressources cloud afin de prendre en charge votre application.

Visual Studio Code
Ligne de commande

Ouvrez Visual Studio Code.
Ouvrez le dossier de projet dans lequel vous avez créé l’application de robot.
Sélectionnez l’icône Microsoft 365 Agents Toolkit dans la barre latérale.
Sélectionnez Se connecter à Azure à l’aide de vos informations d’identification.

Conseil

Si vous avez installé l’extension COMPTE AZURE et que vous utilisez le même compte, vous pouvez ignorer cette étape. Utilisez le même compte que celui que vous utilisez dans d’autres extensions.

Votre navigateur web par défaut s’ouvre pour vous permettre de vous connecter au compte.
Fermez le navigateur lorsque vous y êtes invité et revenez à Visual Studio Code.

La section COMPTES de la barre latérale affiche les deux comptes séparément. Il répertorie également le nombre d’abonnements Azure utilisables à votre disposition. Assurez-vous de disposer d’au moins un abonnement Azure utilisable. Si ce n’est pas le cas, déconnectez-vous et utilisez un autre compte.

Félicitations, vous avez créé une application Teams ! Découvrons maintenant comment déployer l’une des applications sur Azure à l’aide d’Agents Toolkit.

Se connecter à Microsoft 365 avec l’interface de ligne de commande AgentsToolkit :

atk account login m365

Se connecter à Azure avec l’interface de ligne de commande AgentsToolkit :

atk account login azure

Les identifiants de compte sont partagés entre Visual Studio Code et Agents Toolkit CLI.

Félicitations, vous êtes connecté à votre compte Azure ! Découvrons maintenant comment déployer l’une des applications sur Azure à l’aide d’Agents Toolkit.

Approvisionner et déployer votre application sur Azure

Le déploiement se compose de deux étapes. Tout d’abord, Azure crée les ressources cloud nécessaires (également appelées approvisionnement). Ensuite, Azure copie le code de votre application dans les ressources cloud créées. Pour ce didacticiel, vous allez déployer l’application bot.

Quelle est la différence entre Provisionner et déployer ?

L’étape Provision crée des ressources dans Azure et Microsoft 365 pour votre application, mais ne copie pas le code (HTML, CSS ou JavaScript) vers les ressources. L’étape de déploiement copie le code de votre application vers les ressources que vous avez créées lors de l’étape de provisionnement. Il est courant de déployer plusieurs fois sans approvisionner de nouvelles ressources. Étant donné que l’étape d’approvisionnement peut prendre un certain temps, elle est distincte de l’étape de déploiement.

Visual Studio Code
Ligne de commande

Sélectionnez l’icône Microsoft 365 Agents Toolkit dans la barre latérale de Visual Studio Code.

Sélectionnez Provisionner.
Sélectionnez un abonnement à utiliser pour les ressources Azure.

Votre application est hébergée à l’aide de ressources Azure.

Une boîte de dialogue vous avertit que des coûts peuvent être encourus lors de l’exécution de ressources dans Azure.
Sélectionnez Provisionner.

Le processus d’approvisionnement crée des ressources dans le cloud Azure. Cela peut prendre un certain temps. Vous pouvez suivre la progression en regardant les boîtes de dialogue dans le coin inférieur droit. Après quelques minutes, l’avis suivant s’affiche :

Si vous le souhaitez, vous pouvez afficher les ressources provisionnées. Pour ce didacticiel, vous n’avez pas besoin d’afficher les ressources.

La ressource approvisionnée apparaît dans la section ENVIRONNEMENT .
Une fois l’approvisionnement terminé, sélectionnez Déployer dans le panneau CYCLE DE VIE .

Comme pour l’approvisionnement, le déploiement prend un certain temps. Vous pouvez surveiller le processus en regardant les boîtes de dialogue dans le coin inférieur droit. Après quelques minutes, vous voyez un avis d’achèvement.

À présent, vous pouvez utiliser le même processus pour déployer vos applications de bot et d’extension de message dans Azure.

Dans la fenêtre de votre terminal :

Exécutez atk provision.
```
atk provision
```
Lorsque vous y êtes invité, sélectionnez un abonnement Azure pour utiliser les ressources Azure.

Votre application est hébergée à l’aide de ressources Azure.
Exécutez atk deploy.
```
atk deploy
```

Exécuter l’application déployée

Une fois les étapes d’approvisionnement et de déploiement terminées :

Ouvrez le panneau de débogage (Ctrl+Maj+D / ⌘⇧-D ou Afficher l’exécuter>) à partir de Visual Studio Code.
Sélectionnez Lancer à distance (Edge) dans la liste déroulante de la configuration du lancement.
Sélectionnez le menu Démarrer le débogage (F5). Vous êtes invité à charger l’application bot personnalisée dans Teams.
Sélectionnez Ajouter.
Sélectionnez Ouvrir pour ouvrir l’application dans l’étendue personnelle.

Vous pouvez également rechercher et sélectionner l’étendue requise ou sélectionner un canal, une conversation ou une réunion dans la liste, puis parcourir la boîte de dialogue pour sélectionner Atteindre.

Vous avez ajouté votre application bot au client Teams.

Découvrez ce qui se produit lorsque vous avez déployé votre application dans Azure

Avant le déploiement, l’application s’exécutait localement :

Le backend s’exécute à l’aide d’Azure Functions Core Tools.
Le point de terminaison HTTP de l’application, où Microsoft Teams charge l’application, s’exécute localement.

Le déploiement est un processus en deux étapes. Vous provisionnez les ressources sur un abonnement Azure actif, puis déployez ou chargez le code back-end et front-end de l’application sur Azure.

Le serveur principal, s’il est configuré, utilise différents services Azure, notamment Azure App Service et Stockage Azure.
L’application front-end est déployée sur un compte de stockage Azure configuré pour l’hébergement web statique.

Félicitations !

Vous l’avez fait !

Vous avez créé une application de robot.

Maintenant que vous avez appris à créer une application de base, vous pouvez passer à la création d’applications plus complexes. Vous avez terminé le tutoriel pour créer un bot avec JavaScript.

Didacticiels

Déboguez votre chatbot IA à l’aide de Microsoft 365 Agents Playground

Démarrez le développement d’applications Microsoft Teams avec votre application de bot de conversation IA Teams et déboguez avec Microsoft 365 Agents Playground (anciennement Outil de test d’application Teams). Agents Playground permet de déboguer des applications basées sur des robots sans effort. Vous n’avez pas besoin d’un compte de développeur Microsoft 365, de tunneling ou d’une inscription d’application et de bot Teams pour utiliser Agent Playground.

Didacticiel : Déboguer votre robot de conversation IA

Configuration requise

Vous pouvez discuter avec votre bot et afficher les messages et les cartes adaptatives tels qu’ils apparaissent dans Teams. Vous pouvez également simuler une activité dans Agents Playground à l’aide de déclencheurs d’activité.

Remarque

Agent Playground est disponible uniquement dans la version 5.4.0 de Microsoft 365 Agents Toolkit (anciennement Teams Toolkit).
Agents Playground est pris en charge uniquement pour les clients de bureau et web.

Ce guide étape par étape vous aide à créer un chatbot IA à l’aide d’Agents Toolkit et à déboguer avec l’outil de test. Vous verrez la sortie suivante après avoir terminé ce guide, où l’utilisateur peut accéder au robot conversationnel IA et l’utiliser :

Installer	Pour utiliser...
Visual Studio Code ou Visual Studio	environnements de construction JavaScript, TypeScript ou C#. Utilisez la dernière version.
Microsoft 365 Agents Toolkit	Extension Microsoft Visual Studio Code qui crée un modèle automatique de projet pour votre application. Utilisez Agents Toolkit v5.4.0. Pour plus d’informations, consultez installer le kit de ressources des agents.
Node.js	Environnement d’exécution JavaScript back-end. Pour plus d’informations, consultez Node.js tableau de compatibilité des versions pour le type de projet.
OpenAI ou Azure OpenAI	Créez d’abord votre clé API OpenAI pour utiliser le GPT d’OpenAI. Si vous souhaitez héberger votre application ou accéder aux ressources dans Azure, vous devez créer un service Azure OpenAI.
Microsoft Edge (recommandé) ou Google Chrome	Navigateur avec outils de développement.

Créer un espace de travail de projet pour votre application de robot de conversation IA

La fonctionnalité bot d’une application Teams crée un chatbot ou un bot conversationnel. Il communique avec un service web, facilitant l’utilisation de ses services. Le bot peut exécuter des tâches simples et automatisées telles que la prestation de service client. Vous pouvez obtenir les prévisions météorologiques, effectuer des réservations ou tout autre service proposé à l’aide d’un robot conversationnel.

La capture d’écran vous montre l’application avec trois fonctionnalités. Le bot est mis en surbrillance.

Comme vous vous êtes déjà préparé à la création de ces applications, vous pouvez configurer un nouveau projet Teams pour créer l’application de bot de conversation IA.

Créer votre espace de travail de projet de bot

Si les conditions préalables sont réunies, commençons !

Ouvrez Visual Studio Code.
Sélectionnez l’icône Microsoft 365 Agents Toolkit dans la barre d’activité Visual Studio Code.
Sélectionnez Créer un agent/une application.
Sélectionner des agents pour Teams>(phrasefix)Azure OpenAI> entrer une entrée dans Entrer la clé de service de l’API Azure maintenant
Sélectionnez Agents de base pour Teams. Si vous avez besoin d’une fonctionnalité différente pour votre bot, sélectionnez l’option requise.
Sélectionnez le langage de programmation JavaScript.
Sélectionnez le dossier par défaut.

Pour modifier l’emplacement par défaut, procédez comme suit :
1. Sélectionnez Parcourir.
2. Sélectionnez l’emplacement de l’espace de travail du projet.
3. Sélectionnez Sélectionner un dossier.
Entrez un nom approprié pour votre application, puis sélectionnez la touche Entrée .

Une boîte de dialogue apparaît, où vous devez choisir oui ou non pour faire confiance aux auteurs des fichiers de ce dossier.

Vous avez maintenant créé votre espace de travail de projet de robot conversationnel IA.

Visite guidée du code source de l’application bot

Une fois que vous avez terminé la génération de modèles, explorez les répertoires et fichiers du projet dans la section EXPLORER du Visual Studio Code.

La capture d’écran montre l’exemple de structure de dossier de bot de Teams Toolkit.

Nom du dossier ou du fichier	Sommaire
`env/.env.playground`	Le fichier de configuration avec les variables d’environnement qui peuvent être validées dans Git.
`env/.env.playground.user`	Le fichier de configuration avec des variables d’environnement, y compris des informations d’identification, qui ne sont pas validées dans Git par défaut.
`appPackage`	Fichiers de modèle de manifeste d’application et icônes d’application (color.png et outline.png).
`appPackage/manifest.json`	Manifeste d’application pour l’exécution de l’application dans un environnement local et distant.
`src/app.js`	Gère les logiques métier du robot conversationnel IA.
`m365agents.yml`	Il s’agit du principal fichier projet Agents Toolkit. Le fichier projet définit deux éléments principaux : les propriétés et la configuration et les définitions d’étapes.
`m365agents.local.yml`	Cela est remplacé par des `m365agents.yml` actions qui permettent l’exécution et le débogage locaux.
`m365agents.playground.yml`	Cela est remplacé par des `m365agents.yml` actions qui permettent l’exécution et le débogage locaux dans l’outil de test.

Créer et exécuter votre application de bot de conversation IA

Créer une clé et un point de terminaison OpenAI pour votre chatbot IA

Accédez au portail Azure.
Sélectionnez Créer une ressource et recherchez Azure OpenAI.
Sélectionnez Azure OpenAI, puis Créer.
Renseignez les détails requis et sélectionnez Suivant.
Sélectionnez Tous les réseaux, y compris Internet, peuvent accéder à cette ressource, puis sélectionnez Suivant.
Renseignez les détails requis et sélectionnez Suivant.
Sélectionnez Créer.

Vous avez créé une clé et un point de terminaison pour votre robot conversationnel IA.

La capture d’écran montre le déploiement d’Azure OpenAI.

Remarque

Vous pouvez également obtenir une clé API OpenAI pour déboguer votre chatbot IA.

Obtenir des clés et un point de terminaison Azure OpenAI

Sélectionnez Accéder aux ressources.
Sélectionnez Clés et point de terminaison dans le volet gauche, puis copiez la CLÉ et le point de terminaison. Vous pouvez copier la CLÉ 1 ou la CLÉ 2.

Enregistrez la CLÉ et le point de terminaison pour une utilisation ultérieure.
Sélectionnez Déploiements de modèles dans le volet gauche, puis sélectionnez Gérer les déploiements.

La fenêtre Azure OpenAI Studio s’affiche.
Sélectionnez Déploiements dans le volet gauche, puis + Créer un déploiement.
Sélectionnez les détails suivants :
1. Sélectionnez gpt-35-turbo dans la liste déroulante Sélectionner un modèle .
  
  Remarque
  
  Seul le modèle gpt-35-turbo est pris en charge pour le robot de conversation IA.
2. Sélectionnez 0301 (par défaut) dans la liste déroulante de la version du modèle .
3. Entrez le nom du déploiement , puis sélectionnez Créer.
4. Copiez et enregistrez le nom du déploiement pour l’utiliser.

Mettre à jour la clé et les points de terminaison d’Azure OpenAI

Ouvrez votre projet dans Visual Studio Code.
Sous EXPLORER, accédez au fichier env.env.playground.user>.

Entrez votre SECRET_AZURE_OPENAI_API_KEY et SECRET_AZURE_OPENAI_ENDPOINT.

...
SECRET_AZURE_OPENAI_API_KEY=<azure-openai-api-key>
SECRET_AZURE_OPENAI_ENDPOINT=<azure-openai-endpoint>

Accédez au fichierapp.jssrc>.
Commentez le OpenAI code et décommentez-le Azure OpenAI .

Entrez le nom de votre déploiement Azure OpenAI dans azureDefaultDeployment.


// Use OpenAI
// apiKey: config.openAIKey,
// defaultModel: "gpt-3.5-turbo",

azureApiKey: config.azureOpenAIKey,
azureDefaultDeployment: "gpt-35-turbo",
azureEndpoint: config.azureOpenAIEndpoint,

Déboguer et exécuter votre application de bot de conversation IA

Dans le volet gauche, sélectionnez EXÉCUTER et déboguer (Ctrl+Maj+D), puis sélectionnez Déboguer dans le terrain de jeu des agents dans la liste déroulante.
Agent Playground ouvre votre bot de conversation IA dans une page web.

Déclencheurs d’activité

Il existe deux types de déclencheurs d’activité :

Déclencheurs d’activité prédéfinis

Agents Playground fournit des déclencheurs d’activité prédéfinis pour tester les fonctionnalités de votre bot.

Catégorie	Activité	Gestionnaire
Déclencher l’activité de mise à jour de l’installation	Installer le bot Désinstaller le bot	`onInstallationUpdate` `onInstallationUpdateAdded` `onInstallationUpdate` `onInstallationUpdateRemove`
Déclencher l’activité de mise à jour de conversation	Ajouter un utilisateur Ajouter un bot Ajouter un canal	`onMembersAdded` `onTeamsMembersAddedEvent` `onMembersAdded` `onTeamsMembersAddedEvent` `onTeamsChannelCreatedEvent`
	Supprimer un utilisateur Supprimer le bot Supprimer un canal Retirer une équipe	`onMembersRemoved` `onTeamsMembersRemovedEvent` `onMembersRemoved` `onTeamsMembersRemovedEvent` `onTeamsChannelDeletedEvent` `onTeamsTeamDeletedEvent`
	Renommer le canal Renommer l’équipe	`onTeamsChannelRenamedEvent` `onTeamsTeamRenamedEvent`

Remarque

Tous les types d’activités ne sont pas disponibles dans toutes les étendues. Par exemple, vous ne pouvez pas ajouter ou supprimer un canal dans une conversation personnelle ou une conversation de groupe.

Des déclencheurs d’activité prédéfinis sont disponibles dans le menu Simuler une activité d’Agent Playground.

Pour simuler une activité Ajouter un utilisateur , procédez comme suit :

Dans le Terrain de travail des agents, accédez à Simuler une activité>Ajouter un utilisateur.

Une boîte de dialogue s’affiche pour afficher un aperçu du gestionnaire d’activité.
Sélectionnez Envoyer l’activité.

Le bot envoie la réponse suivante :

Déclencheurs d’activité personnalisés

Vous pouvez utiliser l’activité personnalisée pour personnaliser les déclencheurs d’activité, par exemple, reactionsAdded afin de répondre aux exigences de votre application de robot. Agents Playground remplit automatiquement les propriétés requises de l’activité. Vous pouvez également modifier le type d’activité et ajouter d’autres propriétés.

Sélectionnez Simuler une activité>activité personnalisée.

Ajouter messageReaction pour personnaliser l’activité sous la type propriété :

{
    "type": "messageReaction",
    "reactionsAdded": [
    {
        "type": "like"
    }
    ],
    "replyToId": "d60fd1cb-3e8f-44ef-849c-404806ba1b47"
}

Sélectionnez Envoyer l’activité.

Le bot envoie un onReactionsAdded gestionnaire en réponse.

Terminer le défi

Avez-vous trouvé un résultat comme celui-ci ?

Félicitations ! Vous avez créé une application de bot de conversation IA. Vous avez maintenant appris à déboguer votre application de bot de conversation IA dans Agent Playground.

Microsoft 365 Agents Playground

Retour au début

Envoyer des messages proactifs

Un message proactif est un message envoyé par un bot en réponse à des commandes simples envoyées dans la conversation par un utilisateur.

Tutoriel : Envoyer des messages proactifs

La réponse au message peut se présenter dans l’un des formats suivants :

Messages de bienvenue
Messages planifiés
Notifications

Ce guide étape par étape vous aide à envoyer un message proactif à partir d’un bot. La sortie suivante s’affiche :

Capture d’écran montrant le message bonjour proactif dans la conversation Teams.

Configuration requise

Veillez à installer les outils suivants pour créer et déployer vos applications.

	Installer	Pour l’utilisation
	Microsoft Visual Studio Code	JavaScript ou TypeScript, créer des environnements. Utilisez la dernière version.
	Microsoft 365 Agents Toolkit (anciennement Teams Toolkit)	Extension de Visual Studio Code qui crée une génération de modèles automatique de projet pour votre application. Utilisez la dernière version.
	Node.js	Environnement d’exécution JavaScript back-end. Pour plus d’informations, consultez Node.js tableau de compatibilité des versions pour le type de projet.
	Microsoft Teams	Teams pour collaborer avec toutes les personnes avec lesquelles vous travaillez via des applications pour le chat, les réunions, les appels et le tout au même endroit.
	Microsoft Edge (recommandé) ou Google Chrome	Navigateur avec outils de développement.
	Compte de développeur Microsoft 365	Accès au compte Teams avec les autorisations appropriées pour installer une application.

Préparer l’environnement de développement

Après avoir installé les outils requis, configurez l’environnement de développement.

Installer Microsoft 365 Agents Toolkit

Vous pouvez utiliser Agents Toolkit avec Visual Studio Code ou une interface de ligne de commande appelée Microsoft 365 Agents Toolkit CLI (anciennement TeamsFx CLI).

Visual Studio Code
Ligne de commande

Ouvrez Visual Studio Code et sélectionnez Extensions (Ctrl+Maj+X ou Afficher>les extensions).
Dans la zone de recherche, entrez Microsoft 365 Agents Toolkit.
Sélectionnez Installer.

L’icône Microsoft 365 Agents Toolkit s’affiche dans la barre d’activité de Visual Studio Code.

Vous pouvez également installer Agents Toolkit depuis la Place de marché de Visual Studio Code.

Pour installer l’interface de ligne de commande Agents Toolkit, utilisez le gestionnaire de npm package et entrez la commande suivante dans l’invite de commandes :

npm install -g @microsoft/m365agentstoolkit-cli

Selon votre configuration, vous devrez peut-être utiliser sudo pour installer l’interface de ligne de commande :

sudo npm install -g --unsafe-perm @microsoft/m365agentstoolkit-cli

Cette condition est plus fréquente sur les systèmes Linux et macOS.

Assurez-vous d’ajouter le cache global npm à votre PATH. Cette étape est normalement effectuée dans le cadre du programme d’installation Node.js.

Vous pouvez utiliser l’interface de ligne de commande avec la atk commande. Vérifiez que la commande fonctionne en cours d’exécutionatk -h.

Attention

Avant de pouvoir exécuter TeamsFx dans des terminaux PowerShell, vous devez activer la stratégie d’exécution signée à distance pour PowerShell.

Configurer votre client de développement Teams

Rechercher l’option Charger une application

Les étapes suivantes vous aident à vérifier si vous pouvez charger des applications dans Teams :

Dans le client Teams, sélectionnez l’icône Applications .
Sélectionnez Gérer vos applications.
Sélectionnez Charger une application.
Recherchez l’option permettant de charger une application personnalisée. Si l’option est visible, vous pouvez télécharger des applications personnalisées.

Remarque

Si vous ne trouvez pas l’option permettant de charger une application personnalisée, contactez votre administrateur Teams.

Créer un locataire pour développeur Teams gratuit (facultatif)

Si vous n’avez pas de compte de développeur Teams, rejoignez le programme pour développeurs Microsoft 365.

Accédez au programme pour développeurs Microsoft 365.
Sélectionnez Rejoindre maintenant , puis suivez les instructions à l’écran.
Dans l’écran d’accueil, sélectionnez Configurer l’abonnement E5.
Configurez votre compte d’administrateur. Une fois que vous avez terminé, l’écran suivant s’affiche :
Connectez-vous à Teams à l’aide du compte d’administrateur que vous venez de configurer. Vérifiez que vous disposez de l’option Charger une application personnalisée dans Teams.

Bot de message proactif

Pour créer un robot de message proactif à l’aide de Visual Studio Code, procédez comme suit :

Ouvrez Visual Studio Code.
Sélectionnez l’icône Microsoft 365 Agents Toolkit dans la barre d’activité Visual Studio Code.
Dans le volet gauche, sélectionnez Afficher les exemples.
Dans la liste des exemples, sélectionnez Messagerie proactive. Un exemple prédéfini prêt pour le débogage s’ouvre.
Sélectionnez Créer.
Sélectionnez le dossier par défaut pour stocker le dossier racine de votre projet dans l’emplacement par défaut.

Si vous souhaitez modifier l’emplacement par défaut, procédez comme suit :
1. Sélectionnez Parcourir.
2. Sélectionnez l’emplacement de l’espace de travail du projet.
3. Sélectionnez Sélectionner un dossier.
Le robot de message proactif est créé en quelques secondes et affiche la boîte de dialogue Réussite du robot de message proactif dans le coin inférieur droit avec l’option de débogage :

:::
Sélectionnez l’icône Exécuter et déboguer dans le coin supérieur gauche.
Sélectionnez Déboguer (Edge) ou Déboguer (Chrome) dans la liste déroulante.

Lorsque le débogage réussit, vous êtes invité à charger le bot de message proactif dans Teams sur votre ordinateur local.
Sélectionnez Ajouter.
Recherchez et sélectionnez l’étendue requise ou sélectionnez un canal, une conversation ou une réunion dans la liste, puis déplacez-vous dans la boîte de dialogue pour sélectionner Atteindre.

L’application de bot de message proactif est téléchargée sur le client Teams et le message suivant s’affiche en réponse au message envoyé.
Copiez et collez l’URL ou accédez à l’URL dans le navigateur. Un message de bonjour proactif est déclenché et partagé dans la conversation.
Accédez à Teams. Vous recevrez un message bonjour proactif du bot.

Faites un tour du code source

Agents Toolkit fournit des composants pour la création d’une application. Après avoir créé le projet, vous pouvez afficher les dossiers et fichiers du projet dans la zone EXPLORER de Visual Studio Code.

La capture d’écran montre l’onglet structure.

Le nouveau dossier de projet contient le contenu suivant :

Dossier/Fichier	Sommaire
`.vscode/`	Fichiers Visual Studio Code pour le débogage.
`appManifest/`	Modèles pour le manifeste de l’application (précédemment appelé manifeste de l’application Teams).
`env/`	Les paires nom/valeur sont stockées dans des fichiers d’environnement et utilisées par `m365agents.yml` pour personnaliser les règles d’approvisionnement et de déploiement.
`manifest.json`	Le manifeste de l’application pour la publication via le portail Développeur pour Teams est stocké dans `Properties/manifest.json`.
`m365agents.yml`	Le fichier de projet principal décrit la configuration de votre application et définit l’ensemble des actions à exécuter à chaque étape du cycle de vie.
`m365agents.local.yml`	Cela est remplacé par des `m365agents.yml` actions qui permettent l’exécution et le débogage locaux.

Déployer votre bot de message proactif

Vous avez appris à créer et à exécuter l’application Teams avec une fonctionnalité de bot de message proactif. Déployons la première application avec une fonctionnalité proactive de bot de message sur Azure à l’aide d’Agents Toolkit.

Utilisez votre compte pour accéder au portail Azure Microsoft et approvisionner de nouvelles ressources cloud pour prendre en charge votre application.

Ouvrez Visual Studio Code.
Ouvrez le dossier de projet dans lequel vous avez créé l’application de bot de message proactif.
Sélectionnez l’icône Microsoft 365 Agents Toolkit dans la barre d’activité Visual Studio Code.
Sélectionnez Se connecter à Azure à l’aide de vos informations d’identification.

Conseil

Si vous avez installé l’extension COMPTE AZURE et que vous utilisez le même compte, vous pouvez ignorer cette étape.

Votre navigateur web par défaut s’ouvre pour vous permettre de vous connecter au compte.
Fermez le navigateur lorsque vous y êtes invité et revenez à Visual Studio Code.

La section COMPTES de la barre latérale affiche les deux comptes séparément. Il répertorie également le nombre d’abonnements Azure utilisables à votre disposition. Assurez-vous de disposer d’au moins un abonnement Azure utilisable. Si ce n’est pas le cas, déconnectez-vous et utilisez un autre compte.

Déployer votre application sur Azure

Le déploiement se compose de deux étapes. Tout d’abord, les ressources cloud nécessaires sont créées (également appelées approvisionnement). Ensuite, le code de votre application est copié dans les ressources cloud créées. Pour ce didacticiel, vous allez déployer l’application bot.

Quelle est la différence entre Provisionner et déployer ?

Le provisionnement crée des ressources dans Azure et Microsoft 365 pour votre application, mais aucun code (HTML, CSS et JavaScript) n’est copié dans les ressources.
Deploy copie le code de votre application vers les ressources que vous avez créées lors de l’approvisionnement. Il est courant de déployer plusieurs fois sans approvisionner de nouvelles ressources. Étant donné que l’approvisionnement peut prendre un certain temps, il est distinct du déploiement.

Visual Studio Code
Ligne de commande

Sélectionnez l’icône Microsoft 365 Agents Toolkit dans la barre d’activité Visual Studio Code.
Sélectionnez Provisionner sous CYCLE DE VIE.
Sélectionnez un des abonnements existants.
Sélectionnez un groupe de ressources existant ou créez un groupe de ressources. Pour plus d’informations, consultez Créer un groupe de ressources.

Remarque

Une boîte de dialogue s’affiche mentionnant que des coûts peuvent être encourus lors de l’exécution de ressources dans Azure.
Sélectionnez Provisionner.

Le processus d’approvisionnement crée des ressources dans le cloud Azure. Vous pouvez suivre la progression des boîtes de dialogue qui s’affichent dans le coin inférieur droit. Après quelques minutes, la boîte de dialogue suivante s’affiche :
Sélectionnez Déployer sous CYCLE DE VIE.
Sélectionnez Déployer.

Le déploiement prend un certain temps. Vous pouvez suivre la progression des boîtes de dialogue qui s’affichent dans le coin inférieur droit. Après quelques minutes, la boîte de dialogue suivante s’affiche.
Ouvrez le panneau de débogage (Ctrl+Maj+D / ⌘⇧-D ou Afficherl’exécuter>) à partir de Visual Studio Code.
Sélectionnez Lancer à distance (Edge) dans la liste déroulante Configuration du lancement.

Lorsque le débogage réussit, vous êtes invité à charger l’application de bot de messagerie proactive dans Teams.
Sélectionnez Ajouter.
Recherchez et sélectionnez l’étendue requise ou sélectionnez un canal, une conversation ou une réunion dans la liste, puis déplacez-vous dans la boîte de dialogue pour sélectionner Atteindre.

L’application de bot de message proactif est téléchargée sur le client Teams et le message suivant s’affiche en réponse au message envoyé.
Copiez et collez l’URL ou accédez à l’URL dans le navigateur. Un message de bonjour proactif est déclenché et partagé dans la conversation.
Accédez à Teams. Vous recevrez un message bonjour proactif du bot.

Dans la fenêtre de votre terminal :

Exécutez atk new pour créer un projet.

atk new

Exécutez atk provision pour créer une ressource Azure.

atk provision

pour atk deploy déployer l’application.

atk deploy

Exécutez atk preview pour exécuter l’application.

atk preview

Terminer le défi

Avez-vous trouvé quelque chose comme ça ?

Capture d’écran illustrant le message bonjour proactif.

Vous avez terminé le scénario.

Vous pouvez envoyer des notifications quotidiennement ou demander régulièrement des commentaires aux utilisateurs.
Vous pouvez gérer les limites afin d’éviter les notifications multiples.

Envoyer des messages proactifs

Retour au début

Extension de message basée sur l’API Build

Les extensions de message créées à l’aide de l’API (basées sur l’API) améliorent considérablement les fonctionnalités de vos applications Teams en leur permettant d’interagir avec des services externes. Les extensions de message basées sur l’API peuvent simplifier les flux de travail en réduisant la nécessité de basculer entre différentes applications.

Didacticiel : Créer une extension de message basée sur l’API

Remarque

Les extensions de message basées sur l’API prennent uniquement en charge les commandes de recherche.

Vous pouvez utiliser des extensions de message basées sur l’API pour intégrer des services externes couramment utilisés dans le flux de travail d’entreprise. Par exemple, une entreprise qui utilise fréquemment un système CRM pour la gestion des clients pourrait utiliser une extension de message pour récupérer et afficher les données client directement à partir de Teams. Cette application permet de gagner du temps et d’améliorer l’efficacité en réduisant la nécessité de basculer entre différentes applications. Cette fonctionnalité est prise en charge sur toutes les plateformes où Teams est disponible, notamment le bureau, le web et les mobiles.

Conditions préalables à la création d’une extension de message

Voici la liste des outils dont vous avez besoin pour créer et déployer vos applications.

Installer	Pour utiliser...
Microsoft Teams	Microsoft Teams pour collaborer avec toutes les personnes avec lesquelles vous travaillez via des applications pour le chat, les réunions ou les appels, le tout au même endroit.
Microsoft Edge (recommandé) ou Google Chrome	Navigateur avec outils de développement.
Visual Studio Code	environnements de construction JavaScript, TypeScript ou SharePoint Framework (SPFx). Utilisez la version 1.55 ou ultérieure.
Compte de développeur Microsoft 365	Accès au compte Teams avec les autorisations appropriées pour installer une application.
Compte Azure	Accès aux ressources Azure.
Document de description OpenAPI (OAD)	Document qui décrit les fonctionnalités de votre API. Pour plus d’informations, consultez Description d’OpenAPI.

Configurer votre client de développement Teams

Un client est comme un espace ou un conteneur pour votre organisation dans Teams, où vous discutez, partagez des fichiers et gérez des réunions. Cet espace est également l’endroit où vous chargez et testez votre application personnalisée. Vérifions si vous êtes prêt à développer avec le client.

Rechercher l’option de chargement d’application personnalisée

Après avoir créé l’application, vous devez charger votre application dans Teams sans la distribuer. Ce processus est appelé « chargement d’application personnalisé ». Connectez-vous à votre compte Microsoft 365 pour afficher cette option.

Remarque

Le chargement d’applications personnalisées est nécessaire pour prévisualiser et tester les applications dans l’environnement local Teams. S’il n’est pas activé, vous ne pouvez pas prévisualiser et tester votre application dans l’environnement local Teams.

Avez-vous déjà un client et disposez-vous de l’accès administrateur ? Allons-case activée si vous le faites vraiment !

Vérifiez si vous pouvez charger une application personnalisée dans Teams :

Dans le client Teams, sélectionnez l’icône Applications .
Sélectionnez Gérer vos applications.
Sélectionnez Charger une application.
Recherchez l’option permettant de charger une application personnalisée. Si vous voyez l’option, le chargement d’application personnalisé est activé.

Remarque

Contactez votre administrateur Teams si vous ne trouvez pas l’option permettant de charger une application personnalisée.

Créer un locataire pour développeur Teams gratuit (facultatif)

Si vous n’avez pas de compte de développeur Teams, vous pouvez l’obtenir gratuitement. Rejoignez le programme Microsoft 365 pour les développeurs !

Accédez au programme pour développeurs Microsoft 365.
Sélectionnez Rejoindre maintenant , puis suivez les instructions à l’écran.
Dans l’écran d’accueil, sélectionnez Configurer l’abonnement E5.
Configurez votre compte d’administrateur. Une fois que vous avez terminé, l’écran suivant s’affiche.
Connectez-vous à Teams à l’aide du compte d’administrateur que vous venez de configurer. Vérifiez que vous disposez de l’option Charger une application personnalisée dans Teams.

Obtenir un compte Azure gratuit

Si vous souhaitez héberger votre application ou accéder à des ressources dans Azure, vous devez avoir un abonnement Azure. Créez un compte gratuit avant de commencer.

Vous disposez de tous les outils pour configurer votre compte. Ensuite, configurons votre environnement de développement et commençons à créer ! Sélectionnez d’abord l’application que vous souhaitez générer.

Créer un document de description OpenAPI

OpenAPI Description (OAD) est la spécification standard qui décrit la structure et la description des fichiers OpenAPI. Il s’agit d’un format indépendant du langage et lisible par l’homme pour décrire les API. Il est facile pour les humains et les machines de lire et d’écrire. Le schéma est lisible par machine et représenté en YAML ou en JSON.

Pour interagir avec les API, un document de description OpenAPI est nécessaire. Le document de description OpenAPI doit répondre aux critères suivants :

La auth propriété ne doit pas être spécifiée.
JSON et YAML sont les formats pris en charge.
Les versions 2.0 et 3.0.x d’OpenAPI sont prises en charge.
Teams ne prend pas en charge les constructions oneOf, anyOf, allOf et not (swagger.io).
La construction de tableaux pour la demande n’est pas prise en charge, mais les objets imbriqués dans un corps de demande JSON sont pris en charge.
Le corps de la demande, le cas échéant, doit être application/JSON pour garantir la compatibilité avec un large éventail d’API.
Définissez une URL de serveur de protocole HTTPS pour la servers.url propriété.
Seule la recherche à paramètre unique est prise en charge.
Un seul paramètre obligatoire sans valeur par défaut est autorisé.
Seules les méthodes HTTP POST et GET sont prises en charge.
Le document de description OpenAPI doit avoir un operationId.
L’opération ne doit pas nécessiter de paramètres d’en-tête ou de cookie sans valeurs par défaut.
Une commande doit avoir exactement un paramètre.
Assurez-vous qu’il n’y a pas de références distantes dans le document de description OpenAPI.

Un paramètre obligatoire avec une valeur par défaut est considéré comme facultatif.

Nous avons utilisé la description OpenAPI suivante comme exemple pour ce tutoriel :

Description d’OpenAPI

    openapi: 3.0.1
    info:
    title: OpenTools Plugin
    description: A plugin that allows the user to find the most appropriate AI tools for their use cases, with their pricing information.
    version: 'v1'
    servers:
        - url: https://gptplugin.opentools.ai
    paths:
    /tools:
    get:
    operationId: searchTools
    summary: Search for AI Tools
        parameters:
        - in: query
          name: search
          required: true
          schema:
          type: string
          description: Used to search for AI tools by their category based on the keywords. For example, a search for "tool to create music" provides a list of tools that can create music.
        responses:
        "200":
          description: OK
          content:
          application/json:
            schema:
            $ref: '#/components/schemas/searchToolsResponse'
        "400":
          description: Search Error
          content:
          application/json:
            schema:
            ref: '#/components/schemas/searchToolsError'
        components:
        schemas:
        searchToolsResponse:
        required:
        - search
        type: object
        properties:
        tools:
        type: array
        items:
        type: object
        properties:
        name:
        type: string
        description: The name of the tool.
        opentools_url:
        type: string
        description: The URL to access the tool.
        main_summary:
        type: string
        description: A summary of what the tool is.
        pricing_summary:
        type: string
        description: A summary of the pricing of the tool.
        categories:
        type: array
        items:
        type: string
        description: The categories assigned to the tool.
        platforms:
        type: array
        items:
        type: string
        description: The platforms that this tool is available on.
        description: The list of AI tools.
        searchToolsError:
        type: object
        properties:
        message:
        type: string
        description: Message of the error.

Remarque

Assurez-vous que la propriété n’est required: true disponible que pour un seul paramètre. Si plusieurs paramètres sont obligatoires, vous pouvez mettre à jour la propriété required: false requise pour les autres paramètres.

Vous pouvez valider si le document de description OpenAPI est valide. Pour vérifier, procédez comme suit :

Allez sur Swagger ou OpenAPI validator et validez le document OpenAPI Description.
Enregistrez le document OpenAPI Description.
Accédez à Swagger Editor.
Dans le volet gauche, collez la description OpenAPI dans l’éditeur.
Dans le volet droit, sélectionnez GET.
Sélectionnez Essayer.
Entrez les valeurs du paramètre de recherche comme outil pour créer de la musique.
Sélectionnez Exécuter. L’éditeur de fanfaronnade affiche une réponse avec une liste de produits.
Accédez aucorps de la réponse> du serveur.
Sous products, copiez le premier produit de la liste et enregistrez-le pour référence ultérieure.

Créer un modèle de rendu de réponse

Un document de description OpenAPI nécessite un modèle de rendu de réponse pour que l’application réponde aux requêtes GET ou POST. Le modèle de rendu de réponse se compose d’un modèle de carte adaptative, d’un modèle de carte d’aperçu et de métadonnées.

Modèle de carte adaptative

Pour créer un modèle de carte adaptative, procédez comme suit :

Accédez à ChatGPT et posez la requête suivante dans la zone de composition du message :


Create an Adaptive Card Template that binds to the following response:
    "categories": [
        "Music Generation",
        "AI Detection"
    ],
    "chatbot_short_url": "https://goto.opentools.ai/c/ai-music-generator",
    "main_summary": "AI Music Generator is an AI-powered music composing tool that allows users to create original and personalized music for various purposes. It can generate melodies, harmonies, and rhythms tailored to specific needs and preferences, with customization options such as genre, mood, length, and instrumentation. The tool is designed for creative individuals, from beginners to professionals, and can produce high-quality music in seconds. Every generated piece of music is royalty-free and can be used instantly, with no limitations on beat creation. With advanced AI technology, AI Music Generator makes music production accessible to everyone.",
    "name": "AI Music Generator",
    "opentools_url": "https://goto.opentools.ai/ai-music-generator",
    "platforms": [
        "Web",
        "App",
        "API"
    ]

Sélectionnez Envoyer un message.

ChatGPT génère une réponse avec un modèle de carte adaptative qui se lie aux données de l’échantillon. Enregistrez le modèle de carte adaptative pour référence ultérieure.

Voici un exemple de modèle de carte adaptative :

Modèle de carte adaptative


{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.4",
"body": [
    {
    "type": "TextBlock",
    "text": "AI Music Generator",
    "weight": "Bolder",
    "size": "Large"
    },
    {
    "type": "TextBlock",
    "text": "Categories",
    "size": "Medium"
    },
    {
    "type": "TextBlock",
     "text": "Music Generation, AI Detection",
     "wrap": true
    },
    {
    "type": "TextBlock",
    "text": "Description",
    "size": "Medium"
    },
    {
    "type": "TextBlock",
    "text": "AI Music Generator is an AI-powered music composing tool that allows users to create original and personalized music for various purposes. It can generate melodies, harmonies, and rhythms tailored to specific needs and preferences, with customization options such as genre, mood, length, and instrumentation. The tool is designed for creative individuals, from beginners to professionals, and can produce high-quality music in seconds. Every generated piece of music is royalty-free and can be used instantly, with no limitations on beat creation. AI Music Generator is powered by advanced AI technology, and it makes music production accessible to everyone.",
    "wrap": true
    },
    {
    "type": "TextBlock",
    "text": "Platform",
    "size": "Medium"
    },
    {
    "type": "TextBlock",
    "text": "Web, App, API",
    "wrap": true
    }
],
"actions": [
    {
    "type": "Action.OpenUrl",
    "title": "Learn More",
    "url": "https://goto.opentools.ai/ai-music-generator"
    },
    {
    "type": "Action.OpenUrl",
    "title": "Try It",
    "url": "https://goto.opentools.ai/c/ai-music-generator"
    }
]
}

Pour vérifier si la carte adaptative générée est liée aux données d’exemple, procédez comme suit :
1. Accédez au Designer de cartes adaptatives.
2. Accédez à Sélectionner l’application hôte, puis sélectionnez Microsoft Teams dans la liste déroulante.
3. Accédez à l’ÉDITEUR DE CHARGE UTILE DE CARTE et collez le code du modèle de carte adaptative.
4. Accédez à EXEMPLE D’ÉDITEUR DE DONNÉES et collez la réponse de l’API GET que vous avez enregistrée précédemment.
5. Sélectionnez le mode Aperçu. Le concepteur de cartes adaptatives affiche une carte adaptative avec les données qui lient la réponse au modèle.

Créer un modèle de carte d’aperçu

Le modèle de carte d’aperçu peut contenir un title, subtitleet les image propriétés. Si la réponse de l’API n’a pas d’image, vous pouvez supprimer la propriété image.

Voici un exemple de modèle de carte d’aperçu :

Aperçu du modèle de carte de carte

   "previewCardTemplate": {
        "title": "${if(name, name, 'N/A')}",
        "subtitle": "$${if(price, price, 'N/A')}"
    }

Créez une condition si pour le title et subtitle, où :

Si le nom existe, le bot l’utilise.
Si le nom n’existe pas, le bot utilise NA.

Par exemple, "title": "Name: ${if(name, name, 'N/A')}". Enregistrez l’aperçu carte modèle pour référence ultérieure.

Modèle de rendu de réponse

Le modèle de rendu de réponse doit être conforme au schéma hébergé dans .https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json

Pour créer un modèle de rendu de réponse, procédez comme suit :

Créez un fichier JSON et ajoutez le code suivant au fichier :

{ 
  "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json", 
  "version": "1.0", 
  "jsonPath": "", 
  "responseLayout": "", 
  "responseCardTemplate": { 
 },
 "previewCardTemplate": {
     }
 }

Mettez à jour les propriétés dans le modèle de rendu de réponse comme suit :

#	Nom de propriété	Valeur
1.	`"$schema"`	`"https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json"`
2.	`"version"`	`"1.0"` `version` est la version du modèle de rendu à utiliser.
3.	`"jsonPath"`	`"tools"` `jsonPath` est le chemin d’accès à un ou plusieurs résultats dans la réponse JSON. Ajoutez le `jsonPath` aux données/tableau appropriés à partir de la liste des produits dans la réponse API. Dans ce cas, les `jsonPath` outils sont. Pour plus d’informations sur la façon de déterminer le chemin JSON, consultez Interroger JSON avec le chemin JSON.
4.	`"responseLayout"`	`"list"` `responseLayout` Spécifie la disposition des pièces jointes. Utilisé pour les réponses de type résultat. Les types pris en charge sont la liste et la grille. Si le corps de la réponse contient un objet avec plusieurs éléments tels que du texte, un titre et une image, la disposition de la réponse doit être définie sur `list`. Si la réponse de l’API contient uniquement des images ou des miniatures, la disposition de la réponse doit être définie sur `grid`.
5.	`"responseCardTemplate"`	Collez le code du modèle de carte adaptative que vous avez enregistré précédemment. `responseCardTemplate` est un modèle de carte adaptative permettant de mapper la réponse JSON à une carte adaptative.
6.	`"previewCardTemplate"`	Collez le code du modèle de carte d’aperçu que vous avez enregistré précédemment. `previewCardTemplate`est un modèle de carte d’aperçu est utilisé pour afficher un aperçu des résultats dans le menu volant d’extension de message.

Enregistrez le modèle de rendu de réponse dans le même dossier que celui où vous avez enregistré le document de description OpenAPI.

Le code suivant est un exemple de modèle de rendu de réponse :

Modèle de rendu de réponse


{
    "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.ResponseRenderingTemplate.schema.json",
    "version": "1.0",
    "jsonPath": "tools",
    "responseLayout": "list",
    "responseCardTemplate": {
        "type": "AdaptiveCard",
        "version": "1.4",
        "body": [
            {
            "type": "TextBlock",
            "text": "AI Music Generator",
            "weight": "Bolder",
            "size": "Large"
            },
            {
            "type": "TextBlock",
            "text": "Categories",
            "size": "Medium"
            },
            {
            "type": "TextBlock",
            "text": "Music Generation, AI Detection",
            "wrap": true
            },
            {
            "type": "TextBlock",
            "text": "Description",
            "size": "Medium"
            },
            {
            "type": "TextBlock",
            "text": "AI Music Generator is an AI-powered music composing tool that allows users to create original and personalized music for various purposes. It can generate melodies, harmonies, and rhythms tailored to specific needs and preferences, with customization options such as genre, mood, length, and instrumentation. The tool is designed for creative individuals, from beginners to professionals, and can produce high-quality music in seconds. Every generated piece of music is royalty-free and can be used instantly, with no limitations on beat creation. With advanced AI technology, AI Music Generator makes music production accessible to everyone.",
            "wrap": true
            },
            {
            "type": "TextBlock",
            "text": "Platform",
            "size": "Medium"
            },
            {
            "type": "TextBlock",
            "text": "Web, App, API",
            "wrap": true
            }
        ],
        "actions": [
            {
            "type": "Action.OpenUrl",
            "title": "Learn More",
            "url": "https://goto.opentools.ai/ai-music-generator"
            },
            {
            "type": "Action.OpenUrl",
            "title": "Try It",
            "url": "https://goto.opentools.ai/c/ai-music-generator"
            }
        ]
    },
    "previewCardTemplate": {
        "title": "${if(name, name, 'N/A')}",
        "subtitle": "$${if(price, price, 'N/A')}"
    } 
}

Créer un manifeste d’application

À présent, vous devez créer un manifeste d’application (précédemment appelé manifeste d’application Teams). Le manifeste de l’application décrit comment votre application s’intègre au produit Microsoft Teams.

Créer un manifeste d’application Teams

Pour créer le manifeste, procédez comme suit :

Créez un nouveau fichier JSON. Votre manifeste d’application doit être conforme à la version 1.20 du schéma défini dans le schéma de manifeste d’application.

Ajoutez le code suivant au fichier JSON :

Manifeste de l’application

{
 "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.20/MicrosoftTeams.schema.json",
 "manifestVersion": "1.20",
 "version": "1.0.3",
 "id": "<<YOUR-MICROSOFT-APP-ID>>",
 "packageName": "com.microsoft.teams.extension",
 "developer": {
     "name": "Teams App, Inc.",
     "websiteUrl": "https://www.example.com",
     "privacyUrl": "https://www.example.com/termofuse",
     "termsOfUseUrl": "https://www.example.com/privacy"
 },
 "icons": {
     "color": "color.png",
     "outline": "outline.png"
 },
 "name": {
     "short": "Search ME API",
     "full": "Search ME API full"
 },
 "description": {
     "short": "product app for testing API Message Extensions",
     "full": "product app for testing API Message Extensions"
 },
 "accentColor": "#FFFFFF",
 "composeExtensions": [
     {
         "composeExtensionType": "",
         "apiSpecificationFile": "",
         "commands": [
             {
                 "context": [
                     "compose"
                 ],
                 "type": "query",
                 "title": "API for fetching Klarna.",
                 "id": "",
                 "parameters": [
                     {
                         "name": "",
                         "title": "",
                         "description": ""
                     }
                 ],
                 "description": "",
                 "apiResponseRenderingTemplateFile": ""
             }
         ]
     }
 ],
 "permissions": [
     "identity",
     "messageTeamMembers"
 ],
 "validDomains": []
}

Mettez à jour les propriétés du manifeste de l’application comme suit :
- Remplacez <<YOUR-MICROSOFT-APP-ID>> par l’ID d’application Microsoft du bot.
- Mettre à jour la valeur de composeExtensionType to apiBased.
- Mettez à jour la valeur du apiSpecificationFile chemin de votre fichier de description OpenAPI.
- Mettre à jour la valeur de commands.id to searchTools.
- Mettre à jour la valeur de commands.title to Search for AI Tools.
- Mettre à jour la valeur de commands.description to Search for AI Tools.
- Mettre à jour la valeur de parameters.name to search. S’il n’y a pas de paramètres, les valeurs doivent être des paramètres de requête ou properties.name si elles font référence à une propriété dans le schéma du corps de la requête.
- Mettez à jour le apiResponseRenderingTemplateFile chemin d’accès de votre fichier de modèle de rendu de réponse.
- Mettez à jour la valeur de validDomains jusqu’au point de service URL terminaison défini dans le fichier de description OpenAPI.
Enregistrez le manifeste de l’application Teams dans le même dossier que celui dans lequel vous avez enregistré le document de description OpenAPI et le modèle de rendu de la réponse.
- Vous avez besoin d’une image en couleur et d’une image de contour. Ces images doivent être incluses dans le dossier et référencées dans le manifeste de votre application Teams.
- Compressez le contenu du dossier. Le fichier zip doit inclure les fichiers suivants :
  - Document de description OpenAPI
  - Modèle de rendu de réponse
  - Manifeste de l’application
  - Icône de couleur
  - Icône Plan

Charger une application personnalisée dans Teams

Connectez-vous à l’environnement de test Teams pour tester votre application dans Teams. Pour charger une application personnalisée dans Teams, procédez comme suit :

Accédez à Microsoft Teams et connectez-vous à l’aide de vos informations d’identification de locataire de test.
Accédez à Applications>Gérer votre application>Charger une application.
Sélectionnez Charger une application personnalisée.
Sélectionnez le fichier zip créé et sélectionnez Ouvrir.
Sélectionnez Ajouter.
Sélectionnez Ouvrir.
Accédez à une conversation, puis sélectionnez + dans la zone de composition des messages et recherchez votre application.
Sélectionnez l’application et effectuez une requête de recherche.
L’application répond avec une carte adaptative dans la fenêtre de conversation.
Sélectionnez Envoyer.

Félicitations ! Vous y êtes arrivé ! Vous avez appris à créer une extension de message basée sur l’API à l’aide du document de description OpenAPI.

Créer une extension de message basée sur l’API

Retour au début

Générer une extension de message basée sur l’action

L’extension de message basée sur les actions Teams permet aux utilisateurs d’interagir avec les services web dans le client Microsoft Teams. Les extensions de message permettent de lancer des actions dans un système externe depuis la zone de rédaction d’un message, la boîte de commande ou directement depuis un message.

Didacticiel : Créer une extension de message basée sur l’action

Principales fonctionnalités de l’extension de message basée sur l’action :

Présente à l’utilisateur une fenêtre contextuelle modale pour collecter ou afficher des informations.
Déclenche les commandes d’action à partir de la zone de composition d’un message, de la boîte de commande ou d’un message.

Ce guide pas à pas vous aide à créer une extension de message basée sur les actions Teams pour lancer des actions à partir de la composition du message et de la zone de message. À la fin de ce didacticiel, vous pouvez obtenir les résultats suivants :

Capture d’écran de la sortie de l’extension de message après avoir terminé avec succès le guide pas à pas.

Configuration requise

Veillez à installer les outils suivants et à configurer votre environnement de développement :

	Installer	Pour utiliser...
	Microsoft Teams	Microsoft Teams pour collaborer avec toutes les personnes avec lesquelles vous travaillez via des applications pour le chat, les réunions et les appels au même endroit.
	Visual Studio 2022	Vous pouvez installer la version entreprise dans Visual Studio 2022, et installer les charges de travail de développement ASP.NET et web. Utilisez la dernière version.
	SDK .NET Core	Liaisons personnalisées pour le débogage local et les déploiements d’applications Azure Functions. Si vous n’avez pas installé la dernière version, installez la version portable.
	Tunnel de développement	Les fonctionnalités de l’application Teams (bots conversationnels, extensions de message et webhooks entrants) nécessitent des connexions entrantes. Un tunnel connecte votre système de développement à Teams. Dev Tunnel est un outil puissant pour ouvrir votre hôte local à Internet en toute sécurité et contrôler qui y a accès. Le tunnel de développement est disponible dans Visual Studio 2022 version 17.7.0 ou ultérieure. ou Vous pouvez également utiliser ngrok comme tunnel pour connecter votre système de développement à Teams. Ce n’est pas nécessaire pour les applications qui n’incluent que des onglets. Ce package est installé dans le répertoire du projet (à l’aide de npm `devDependencies`).

Remarque

Après avoir téléchargé ngrok, inscrivez-vous et installez authtoken.

Configurer l’environnement local

Ouvrez Microsoft-Teams-Samples.
Sélectionnez Code.
Dans le menu déroulant, sélectionnez Ouvrir avec GitHub Desktop.
Sélectionnez Cloner.

Inscrire l’application Microsoft Entra

Les étapes suivantes vous aident à créer et à inscrire votre bot dans le portail Azure :

Créez et inscrivez votre application Azure.
Créez une clé secrète client pour activer l’authentification SSO du bot.
Ajoutez un canal Teams pour déployer le bot.
Créez un tunnel vers les points de terminaison de votre serveur web à l’aide de Dev Tunnel (recommandé) ou ngrok.
Ajoutez un point de terminaison de messagerie au tunnel de développement que vous avez créé.

Ajouter une inscription d’application

Accédez au portail Azure.
Sélectionnez inscriptions d’applications.
Sélectionnez + Nouvelle inscription.
Entrez le nom de votre application.
Sélectionnez Comptes dans n’importe quel répertoire organisationnel (Tout locataire Microsoft Entra ID - Multilocataire).
Sélectionnez Enregistrer.

Votre application est inscrite dans Microsoft Entra ID. La page de vue d’ensemble de l’application s’affiche.

Remarque

Enregistrez l’ID d’application à partir de l’ID d’application (client) et de l’ID d’annuaire (locataire) pour une utilisation ultérieure.

Créer un tunnel

Suivez l’une des deux méthodes suivantes pour créer un tunnel.

Tunnel de développement
ngrok

Ouvrez Visual Studio.
Sélectionnez Créer un projet.
Dans la zone de recherche, entrez ASP.NET. Dans les résultats de la recherche, sélectionnez ASP.NET Core Web App.
Sélectionnez Next (Suivant).
Entrez le nom du projet , puis sélectionnez Suivant.
Sélectionnez Créer.

Une fenêtre de vue d’ensemble s’affiche.
Dans la liste déroulante de débogage, sélectionnez Tunnels de développement (aucun tunnel actif)>Créer un tunnel....

Une fenêtre contextuelle apparaît.
Mettez à jour les détails suivants dans la fenêtre contextuelle :
1. Compte : entrez un compte Microsoft ou GitHub.
2. Nom : Entrez un nom pour votre tunnel.
3. Type de tunnel : Dans la liste déroulante, sélectionnez Temporaire.
4. Accès : dans la liste déroulante, sélectionnez Public.
Sélectionnez OK.

Une fenêtre contextuelle s’affiche indiquant que le tunnel de développement a été créé avec succès.
Sélectionnez OK.

Vous pouvez trouver le tunnel que vous avez créé dans la liste déroulante de débogage comme suit :
Sélectionnez F5 pour exécuter l’application en mode débogage.
Si une boîte de dialogue d’avertissement de sécurité s’affiche, sélectionnez Oui.

Une fenêtre contextuelle apparaît.
Cliquez sur Continuer.

La page d’accueil du tunnel de développement s’ouvre dans une nouvelle fenêtre de navigateur et le tunnel de développement est maintenant actif.
Accédez à Visual Studio, sélectionnez Afficher la > sortie.
Dans le menu déroulant de la console de sortie , sélectionnez Tunnels de développement.

La console de sortie affiche l’URL du tunnel de développement.

Utilisez ngrok ou l’invite de commandes pour créer un tunnel vers les points de terminaison HTTPS disponibles publiquement de votre serveur web s’exécutant localement. Exécutez la commande suivante dans ngrok :

ngrok http --host-header=localhost 3978

Conseil

Si vous rencontrez des ERR_NGROK_4018, suivez les étapes fournies dans l’invite de commandes pour vous inscrire et authentifier ngrok. Exécutez ensuite la ngrok http --host-header=localhost 3978 commande.

La fenêtre affiche l’URL HTTPS.

La capture d’écran montre l’URL HTTPS ngrok.

Ajouter une authentification web

Dans le volet gauche, sous Gérer, sélectionnez Authentification.
Sélectionnez Ajouter une plateforme>Web.
Entrez l’URI de redirection de votre application en l’ajoutant auth-end au nom de domaine complet. Par exemple, https://your-devtunnel-domain/auth-end ou https://your-ngrok-domain/auth-end.
Sous Octroi implicite et flux hybrides, cochez les cases Jetons d’accès et Jetons d’ID .
Sélectionnez Configurer.
Sous Web, sélectionnez Ajouter un URI.
Entrez https://token.botframework.com/.auth/web/redirect.
Sélectionnez Enregistrer.

Créer une clé secrète client

Remarque

Si vous rencontrez l’erreur Les secrets client sont bloqués par la stratégie à l’échelle du locataire. Pour plus d’informations, contactez l’administrateur client. Vous pouvez créer un certificat à la place. Pour obtenir des instructions détaillées, reportez-vous à la section Créer un certificat pour l’inscription d’applications.

Dans le volet gauche, sous Gérer, sélectionnez Certificats & secrets.
Sous Clés secrètes client, sélectionnez + Nouvelle clé secrète client.

La fenêtre Ajouter une clé secrète client s’affiche.
Entrez une description.
Sélectionnez Ajouter.
Sous Valeur, sélectionnez Copier dans le presse-papiers pour enregistrer la valeur de la clé secrète client afin de pouvoir l’utiliser.

Ajouter des autorisations d’API

Dans le volet gauche, sélectionnez Autorisations API.
Sélectionnez + Ajouter une autorisation.
Sélectionnez Microsoft Graph.
Sélectionnez Autorisations déléguées.
SélectionnezUser.Read>.
Sélectionnez Ajouter des autorisations.
Remarque
- Si une application ne reçoit pas le consentement de l’administrateur informatique, les utilisateurs doivent donner leur consentement la première fois qu’ils utilisent une application.
- Les utilisateurs doivent donner leur consentement aux autorisations d’API uniquement si l’application Microsoft Entra est inscrite dans un autre client.

Ajouter l’URI d’ID de l’application

Dans le volet gauche, sous Gérer, sélectionnez Exposer une API.
En regard de l’URI d’ID d’application, sélectionnez Ajouter.
Mettez à jour l’URI d’ID de l’application dans le api://botid-{AppID} format, puis sélectionnez Enregistrer.

Ajouter une étendue

Dans le volet gauche, sous Gérer, sélectionnez Exposer une API.
Sélectionnez + Ajouter une étendue.
Entrez access_as_user comme nom d’étendue.
Sous Qui peut donner son consentement ?, sélectionnez Administrateurs et utilisateurs.
Mettez à jour les valeurs des autres champs comme suit :
- Entrer Teams peut accéder au profil de l’utilisateur en tant que nom complet de consentement de l’Administration.
- Entrée : permet à Teams d’appeler les API web de l’application en tant qu’utilisateur actuel comme description Administration consentement.
- Entrer Teams peut accéder au profil utilisateur et effectuer des demandes en son nom en tant que nom d’affichage de consentement de l’utilisateur.
- Entrez Enable Teams to call this app’s APIs with the same rights asUser consent description.
Assurez-vous que l’état est défini sur Activé.
Sélectionnez Ajouter une étendue.

L’image suivante montre les champs et les valeurs :

Remarque

Le nom de l’étendue doit correspondre à l’URI d’ID de l’application avec /access_as_user ajouté à la fin.

Ajouter une application cliente

Dans le volet gauche, sous Gérer, sélectionnez Exposer une API.

Sous Applications clientes autorisées, identifiez les applications que vous souhaitez autoriser pour l’application web de votre application.
Sélectionnez + Ajouter une application cliente.
Ajoutez le mobile ou de bureau Teams et l’application web Teams.
1. Pour Teams mobile ou de bureau : entrez l’ID client sous la forme 1fec8e78-bce4-4aaf-ab1b-5451cc387264.
2. Pour Teams Web : entrez l’ID client sous la forme 5e3ce6c0-2b1f-4285-8d4b-75ee78787346.
Cochez la case Étendues autorisées .
Sélectionnez Ajouter une application.

L’image suivante affiche l’ID client :

Créer votre bot

Créer une ressource de bot Azure

Remarque

Si vous testez déjà votre bot dans Teams, déconnectez-vous de cette application et de Teams. Pour voir cette modification, reconnectez-vous.

Accédez à Accueil.
Sélectionnez + Créer une ressource.
Dans la zone de recherche, entrez Azure Bot.
Sélectionnez Entrée.
Sélectionnez Azure Bot.
Sélectionnez Créer.
Entrez le nom du bot dans Bot handle.
Sélectionnez votre abonnement dans la liste déroulante.
Sélectionnez votre groupe de ressources dans la liste déroulante.

Si vous n’avez pas de groupe de ressources existant, vous pouvez en créer un. Pour créer un groupe de ressources, procédez comme suit :
1. Sélectionnez Créer.
2. Entrez le nom de la ressource, puis sélectionnez OK.
3. Sélectionnez un emplacement dans la liste déroulante Nouvel emplacement du groupe de ressources .
Sous Tarification, sélectionnez Changer de plan.
Sélectionnez FO Free>Select.
Sous l’ID d’application Microsoft, sélectionnez Type d’application comme multilocataire.
Dans le type de création, sélectionnez Utiliser l’inscription d’application existante.
Entrez l’ID d’application.

Remarque

Vous ne pouvez pas créer plusieurs robots avec le même ID d’application Microsoft.
Sélectionnez Vérifier + créer.
Une fois la validation réussie, sélectionnez Créer.

L’approvisionnement du bot prend quelques minutes.
Sélectionnez Accéder à la ressource.

Vous avez créé votre bot Azure avec succès.

Ajouter un canal Teams

Dans le volet gauche, sélectionnez Canaux.
Sous Canaux disponibles, sélectionnez Microsoft Teams.
Cochez la case pour accepter les conditions d’utilisation.
Sélectionnez Accepter.
Sélectionnez Appliquer.

Ajouter un point de terminaison de messagerie

Utilisez l’une des méthodes suivantes pour ajouter un point de terminaison de messagerie :

Tunnel de développement
ngrok

Utilisez l’URL du tunnel de développement dans la console de sortie comme point de terminaison de messagerie.
Dans le volet gauche, sous Paramètres, sélectionnez Configuration.
Mettez à jour le point de terminaison de messagerie au format https://your-devtunnel-domain/api/messages.
Sélectionnez Appliquer.

Vous avez correctement configuré un bot dans le service Bot Azure.

Remarque

Si la clé d’instrumentation Application Insights affiche une erreur, effectuez une mise à jour avec l’ID d’application.

À partir de ngrok, copiez l’URL HTTPS.

Remarque

L’URL HTTPS dans votre ngrok est un nom de domaine complet. Il WebAppDomain s’agit d’un nom de domaine complet qui n’y figure https:// pas.
Dans le volet gauche, sous Paramètres, sélectionnez Configuration.
Mettez à jour le point de terminaison de messagerie au format https://your-ngrok-domain/api/messages.
Sélectionnez Appliquer.

Vous avez correctement configuré un bot dans le service Bot Azure.

Remarque

Si la clé Application Insights Instrumentation affiche une mise à jour d’erreur avec l’ID d’application.

Configurer les paramètres de l’application et les fichiers manifestes

Accédez au fichier appsettings.json dans le référentiel cloné.
Ouvrez le fichier appsettings.json et mettez à jour les informations suivantes :
- Définissez "MicrosoftAppId" sur l’ID d’application Microsoft de votre bot.
- Définissez "MicrosoftAppPassword" la valeur d’ID de secret client de votre bot.
- Définir ConnectionName comme nom de connexion OAuth.
- Définir "MicrosoftAppType" sur mutualisé.
- Définir "MicrosoftAppTenantId" sur commun.
Accédez au fichier manifest.json dans le référentiel cloné.
Ouvrez le fichier manifest.json et mettez à jour les modifications suivantes :
- Remplacez toutes les occurrences de "{TODO: MicrosoftAppId}" par votre ID d’application Microsoft.
- Définissez "<<domain-name>>" sur votre domaine ngrok ou dev tunnel.

Créer et exécuter le service

Pour créer et exécuter le service, utilisez Visual Studio ou une ligne de commande.

Visual Studio
Ligne de commande

Ouvrez Visual Studio.
Aller dans Fichier>Ouvrir un>projet/une solution.....
Dans le dossier csharp , sélectionnez le fichier TeamsMessagingExtensionsAction.csproj .
Appuyez sur F5 pour exécuter le projet.
Sélectionnez Oui si la boîte de dialogue suivante s’affiche :

Une page web s’affiche avec un message Votre bot est prêt !.

Accédez aux exemples>msgext-action>csharp dans la fenêtre d’invite de commandes et entrez la commande suivante :

    dotnet run

Capture d’écran de l’invite de commandes : dotnet run avec la commande dotnet run.

Ajouter l’application Extension de message d’action à Teams

Dans votre référentiel cloné, accédez aux exemples>msgext-action>csharp>TeamsAppManifest.
Créez un .zip avec les fichiers suivants présents dans le dossier Manifest :
- manifest.json
- icon-outline.png
- icon-color.png
Dans le client Teams, sélectionnez l’icône Applications .
Sélectionnez Gérer vos applications.
Sélectionnez Charger une application.
Recherchez l’option permettant de charger une application personnalisée. Si vous voyez l’option, le chargement d’application personnalisé est activé.

Remarque

Contactez votre administrateur Teams si vous ne trouvez pas l’option permettant de charger une application personnalisée.
Sélectionnez Ouvrir pour télécharger le fichier messaging.zip que vous avez créé dans le dossier TeamsAppManifest.
Sélectionnez Ajouter.
Sélectionnez Ouvrir pour ouvrir l’application dans l’étendue personnelle.

Vous pouvez également rechercher et sélectionner l’étendue requise ou sélectionner un canal, une conversation ou une réunion dans la liste, puis parcourir la boîte de dialogue pour sélectionner Atteindre.

Interagir avec l’application dans Teams

Sélectionnez la commande Créer une carte dans la liste de commandes de la zone de composition.
Entrez vos informations dans la fenêtre contextuelle modale.
Sélectionnez Envoyer.
Sélectionnez Plus d’options (...) dans le menu de débordement.
Sélectionnez Autres actions>Partager le message.
Si vous souhaitez inclure une image, cochez la case Inclure l’image dans la carte de présentation , puis sélectionnez Envoyer.

Terminer le défi

Avez-vous trouvé quelque chose comme ça ?

Capture d’écran de la sortie de l’extension de message après avoir terminé avec succès le guide pas à pas.

Vous avez terminé le didacticiel pour commencer à utiliser une application d’extension de message d’action !

Commandes d’action

Retour au début

Créer un bot avec authentification SSO

Les bots conversationnels dans Microsoft Teams effectuent des tâches automatisées répétitives initiées par les utilisateurs, tels que le service clientèle. L’utilisateur doit se connecter plusieurs fois sans authentification unique (SSO). Avec les méthodes d’authentification SSO, les utilisateurs n’ont pas besoin de se connecter plusieurs fois au bot.

Didacticiel : Créer un bot avec authentification SSO

Un bot se comporte différemment en fonction de la conversation dans laquelle il est impliqué :

Les bots dans les conversations de canal et de groupe nécessitent que les utilisateurs @mention au bot.
Dans une conversation un-à-un, les bots ne nécessitent pas de @mention. Tous les messages envoyés par l’utilisateur sont acheminés vers le bot.

Ce guide pas à pas vous aide à créer un bot avec authentification SSO. La sortie suivante s’affiche :

Capture d’écran du bot avec la sortie de l’authentification SSO après avoir terminé avec succès le guide pas à pas.

Conditions préalables à la création d’un bot

Veillez à installer les outils suivants et à configurer votre environnement de développement :

Installer	Pour utiliser...
Microsoft Teams	Microsoft Teams pour collaborer avec toutes les personnes avec lesquelles vous travaillez via des applications pour le chat, les réunions et les appels au même endroit.
Visual Studio 2022	Vous pouvez installer la version entreprise dans Visual Studio 2022, et installer les charges de travail de développement ASP.NET et web. Utilisez la dernière version.
Compte de développeur Microsoft 365	Accès au compte Teams avec les autorisations appropriées pour installer une application.
Tunnel de développement	Les fonctionnalités de l’application Teams (bots conversationnels, extensions de message et webhooks entrants) nécessitent des connexions entrantes. Un tunnel connecte votre système de développement à Teams. Dev Tunnel est un outil puissant pour ouvrir votre hôte local à Internet en toute sécurité et contrôler qui y a accès. Le tunnel de développement est disponible dans Visual Studio 2022 version 17.7.0 ou ultérieure. ou Vous pouvez également utiliser ngrok comme tunnel pour connecter votre système de développement à Teams. Ce n’est pas nécessaire pour les applications qui n’incluent que des onglets. Ce package est installé dans le répertoire du projet (à l’aide de npm `devDependencies`).

Remarque

Après avoir téléchargé ngrok, inscrivez-vous et installez authtoken.

Configurer le client de développement Teams

Un client est comme un espace ou un conteneur dans lequel vous discutez, partagez des fichiers et gérez des réunions pour votre organisation dans Teams. Vous pouvez également charger et tester l’application personnalisée.

Rechercher une option de chargement d’application personnalisée

Remarque

Le chargement d’applications personnalisées est nécessaire pour prévisualiser et tester les applications dans l’environnement local Teams. Activez le chargement d’applications pour afficher un aperçu et tester votre application localement dans Teams.

Avez-vous déjà un client et disposez-vous de l’accès administrateur ? Allons-case activée si vous le faites vraiment !

Pour vérifier les applications de chargement personnalisées dans Teams :

Dans le client Teams, sélectionnez l’icône Applications .
Sélectionnez Gérer vos applications.
Sélectionnez Charger une application
Recherchez l’option Charger une application personnalisée. Si vous voyez l’option, le chargement d’application personnalisé est activé.

Remarque

Contactez l’administrateur Teams si vous n’avez pas la possibilité de charger une application personnalisée.

Créer un locataire développeur Teams gratuit

Si vous n’avez pas de compte de développeur Teams, vous pouvez l’obtenir gratuitement. Rejoignez le programme Microsoft 365 pour les développeurs !

Accédez au programme pour développeurs Microsoft 365.
Sélectionnez Rejoindre maintenant , puis suivez les instructions à l’écran.
Dans l’écran d’accueil, sélectionnez Configurer l’abonnement E5.
Créez un compte administrateur. Une fois que vous avez terminé, l’écran ci-dessous s’affiche.
Connectez-vous à Teams à l’aide du nouveau compte d’administrateur que vous venez de configurer. Vérifiez que vous disposez de l’option Charger une application personnalisée dans Teams.

Configurer l’environnement local

Procédez comme suit pour cloner le référentiel :

Ouvrez Microsoft-Teams-Samples.
Sélectionnez Code.
Dans le menu déroulant, sélectionnez Ouvrir avec GitHub Desktop.
Sélectionnez Cloner.

Inscrire l’application Microsoft Entra

Les étapes suivantes vous aident à créer et à inscrire votre bot dans le Portail Azure :

Créez et inscrivez votre application Azure.
Créez une clé secrète client pour activer l’authentification SSO du bot.
Ajoutez un canal Teams pour déployer le bot.
Créez un tunnel vers les points de terminaison de votre serveur web à l’aide de Dev Tunnel (recommandé) ou ngrok.
Ajoutez un point de terminaison de messagerie au tunnel de développement que vous avez créé.

Ajouter une inscription d’application

Accédez au portail Azure.
Sélectionnez inscriptions d’applications.
Sélectionnez + Nouvelle inscription.
Entrez le nom de votre application.
Sélectionnez l’option locataire, selon vos besoins.
Sélectionnez Enregistrer.

Votre application est inscrite dans Microsoft Entra ID. La page de vue d’ensemble de l’application s’affiche.

Remarque

Enregistrez l’ID d’application à partir de l’ID d’application (client) et de l’ID d’annuaire (locataire) pour une utilisation ultérieure.

Créer un tunnel

Suivez l’une des deux méthodes suivantes pour créer un tunnel.

Tunnel de développement
ngrok

Ouvrez Visual Studio.
Sélectionnez Créer un projet.
Dans la zone de recherche, entrez ASP.NET. Dans les résultats de la recherche, sélectionnez ASP.NET Core Web App.
Sélectionnez Next (Suivant).
Entrez le nom du projet , puis sélectionnez Suivant.
Sélectionnez Créer.

Une fenêtre de vue d’ensemble s’affiche.
Dans la liste déroulante de débogage, sélectionnez Tunnels de développement (aucun tunnel actif)>Créer un tunnel....

Une fenêtre contextuelle apparaît.
Mettez à jour les détails suivants dans la fenêtre contextuelle :
1. Compte : entrez un compte Microsoft ou GitHub.
2. Nom : Entrez un nom pour votre tunnel.
3. Type de tunnel : Dans la liste déroulante, sélectionnez Temporaire.
4. Accès : dans la liste déroulante, sélectionnez Public.
Sélectionnez OK.

Une fenêtre contextuelle s’affiche indiquant que le tunnel de développement a été créé avec succès.
Sélectionnez OK.

Vous pouvez trouver le tunnel que vous avez créé dans la liste déroulante de débogage comme suit :
Sélectionnez F5 pour exécuter l’application en mode débogage.
Si une boîte de dialogue d’avertissement de sécurité s’affiche, sélectionnez Oui.

Une fenêtre contextuelle apparaît.
Cliquez sur Continuer.

La page d’accueil du tunnel de développement s’ouvre dans une nouvelle fenêtre de navigateur et le tunnel de développement est maintenant actif.
Accédez à Visual Studio, sélectionnez Afficher la > sortie.
Dans le menu déroulant de la console de sortie , sélectionnez Tunnels de développement.

La console de sortie affiche l’URL du tunnel de développement.

ngrok http --host-header=localhost 3978

Conseil

La fenêtre affiche l’URL HTTPS.

La capture d’écran montre l’URL HTTPS ngrok.

Ajouter une authentification web

Dans le volet gauche, sous Gérer, sélectionnez Authentification.
Sélectionnez Ajouter une plateforme>Web.
Entrez l’URI de redirection de votre application en l’ajoutant auth-end au nom de domaine complet. Par exemple, https://your-devtunnel-domain/auth-end ou https://your-ngrok-domain/auth-end.
Sous Octroi implicite et flux hybrides, cochez les cases Jetons d’accès et Jetons d’ID .
Sélectionnez Configurer.
Sous Web, sélectionnez Ajouter un URI.
Entrez https://token.botframework.com/.auth/web/redirect.
Sélectionnez Enregistrer.

Créer une clé secrète client

Remarque

Dans le volet gauche, sous Gérer, sélectionnez Certificats & secrets.
Sous Clés secrètes client, sélectionnez + Nouvelle clé secrète client.

La fenêtre Ajouter une clé secrète client s’affiche.
Entrez une description.
Sélectionnez Ajouter.
Sous Valeur, sélectionnez Copier dans le presse-papiers pour enregistrer la valeur de la clé secrète client afin de pouvoir l’utiliser.

Ajouter des autorisations d’API

Dans le volet gauche, sélectionnez Autorisations API.
Sélectionnez + Ajouter une autorisation.
Sélectionnez Microsoft Graph.
Sélectionnez Autorisations déléguées.
SélectionnezUser.Read>.
Sélectionnez Ajouter des autorisations.
Remarque
- Si une application ne reçoit pas le consentement de l’administrateur informatique, les utilisateurs doivent donner leur consentement la première fois qu’ils utilisent une application.
- Les utilisateurs doivent donner leur consentement aux autorisations d’API uniquement si l’application Microsoft Entra est inscrite dans un autre client.

Ajouter l’URI d’ID de l’application

Dans le volet gauche, sous Gérer, sélectionnez Exposer une API.
En regard de l’URI d’ID d’application, sélectionnez Ajouter.
Mettez à jour l’URI d’ID de l’application dans le api://botid-{AppID} format, puis sélectionnez Enregistrer.

Ajouter une étendue

Dans le volet gauche, sous Gérer, sélectionnez Exposer une API.
Sélectionnez + Ajouter une étendue.
Entrez access_as_user comme nom d’étendue.
Sous Qui peut donner son consentement ?, sélectionnez Administrateurs et utilisateurs.
Mettez à jour les valeurs des autres champs comme suit :
1. Entrer Teams peut accéder au profil de l’utilisateur en tant que nom complet de consentement de l’Administration.
2. Entrée : permet à Teams d’appeler les API web de l’application en tant qu’utilisateur actuel comme description Administration consentement.
3. Entrer Teams peut accéder au profil utilisateur et effectuer des demandes en son nom en tant que nom d’affichage de consentement de l’utilisateur.
4. Entrez Enable Teams to call this app’s APIs with the same rights asUser consent description.
Assurez-vous que l’état est défini sur Activé.
Sélectionnez Ajouter une étendue.

L’image suivante montre les champs et les valeurs :

Remarque

Le nom de l’étendue doit correspondre à l’URI d’ID de l’application avec /access_as_user ajouté à la fin.

Ajouter une application cliente

Dans le volet gauche, sous Gérer, sélectionnez Exposer une API.

Sous Applications clientes autorisées, identifiez les applications que vous souhaitez autoriser pour l’application web de votre application.
Sélectionnez + Ajouter une application cliente.
Ajoutez le mobile ou de bureau Teams et l’application web Teams.
1. Pour Teams mobile ou de bureau : entrez l’ID client sous la forme 1fec8e78-bce4-4aaf-ab1b-5451cc387264.
2. Pour Teams Web : entrez l’ID client sous la forme 5e3ce6c0-2b1f-4285-8d4b-75ee78787346.
Cochez la case Étendues autorisées .
Sélectionnez Ajouter une application.

L’image suivante affiche l’ID client :

Mettre à jour le manifeste

Dans le volet gauche, sélectionnez Manifeste.
Définissez la valeur du requestedAccessTokenVersion à 2 , puis sélectionnez Enregistrer.

Créer votre bot

Créer une ressource de bot Azure

Remarque

Si vous testez déjà votre bot dans Teams, déconnectez-vous de cette application et de Teams. Pour voir cette modification, reconnectez-vous.

Accédez à Accueil.
Sélectionnez + Créer une ressource.
Dans la zone de recherche, entrez Azure Bot.
Sélectionnez Entrée.
Sélectionnez Azure Bot.
Sélectionnez Créer.
Entrez le nom du bot dans Bot handle.
Sélectionnez votre abonnement dans la liste déroulante.
Sélectionnez votre groupe de ressources dans la liste déroulante.

Si vous n’avez pas de groupe de ressources existant, vous pouvez en créer un. Pour créer un groupe de ressources, procédez comme suit :
1. Sélectionnez Créer.
2. Entrez le nom de la ressource, puis sélectionnez OK.
3. Sélectionnez un emplacement dans la liste déroulante Nouvel emplacement du groupe de ressources .
Sous Tarification, sélectionnez Changer de plan.
Sélectionnez FO Free>Select.
Sous l’ID d’application Microsoft, sélectionnez Type d’application comme multilocataire.
Dans le type de création, sélectionnez Utiliser l’inscription d’application existante.
Entrez l’ID d’application.

Remarque

Vous ne pouvez pas créer plusieurs robots avec le même ID d’application Microsoft.
Sélectionnez Vérifier + créer.
Une fois la validation réussie, sélectionnez Créer.

L’approvisionnement du bot prend quelques minutes.
Sélectionnez Accéder à la ressource.

Vous avez créé votre bot Azure avec succès.

Ajouter un canal Teams

Dans le volet gauche, sélectionnez Canaux.
Sous Canaux disponibles, sélectionnez Microsoft Teams.
Cochez la case pour accepter les conditions d’utilisation.
Sélectionnez Accepter.
Sélectionnez Appliquer.

Ajouter un point de terminaison de messagerie

Utilisez l’une des méthodes suivantes pour ajouter un point de terminaison de messagerie :

Tunnel de développement
ngrok

Utilisez l’URL du tunnel de développement dans la console de sortie comme point de terminaison de messagerie.
Dans le volet gauche, sous Paramètres, sélectionnez Configuration.
Mettez à jour le point de terminaison de messagerie au format https://your-devtunnel-domain/api/messages.
Sélectionnez Appliquer.

Vous avez correctement configuré un bot dans le service Bot Azure.

Remarque

Si la clé d’instrumentation Application Insights affiche une erreur, effectuez une mise à jour avec l’ID d’application.

À partir de ngrok, copiez l’URL HTTPS.

Remarque

L’URL HTTPS dans votre ngrok est un nom de domaine complet. Il WebAppDomain s’agit d’un nom de domaine complet qui n’y figure https:// pas.
Dans le volet gauche, sous Paramètres, sélectionnez Configuration.
Mettez à jour le point de terminaison de messagerie au format https://your-ngrok-domain/api/messages.
Sélectionnez Appliquer.

Vous avez correctement configuré un bot dans le service Bot Azure.

Remarque

Si la clé Application Insights Instrumentation affiche une mise à jour d’erreur avec l’ID d’application.

Ajouter des paramètres de connexion OAuth

Dans le volet gauche, sélectionnez Configuration.
Sélectionnez Ajouter des paramètres de connexion OAuth.
Sous Nouveau paramètre de connexion, mettez à jour les détails suivants :
- Nom : Entrez un nom pour votre nouveau paramètre de connexion. Vous pouvez utiliser le nom dans les paramètres du code de votre service de bot.
- Fournisseur de services : dans la liste déroulante, sélectionnez Azure Active Directory v2.
- ID client : mettez à jour votre ID d’application Microsoft.
- Clé secrète client : mettez à jour la valeur des clés secrètes client.
- URL d’échange de jetons : mettez à jour l’URI d’ID de l’application.
- ID client : Entrez Commun.
- Étendues : Entrez User.Read.
Sélectionnez Enregistrer.

Configurer les paramètres de l’application et les fichiers manifestes

Accédez au fichier appsettings.json dans le référentiel cloné.
Ouvrez le fichier appsettings.json et mettez à jour les informations suivantes :
- Définissez "MicrosoftAppId" sur l’ID d’application Microsoft de votre bot.
- Définissez "MicrosoftAppPassword" la valeur d’ID de secret client de votre bot.
- Définir ConnectionName comme nom de connexion OAuth.
- Définir "MicrosoftAppType" sur mutualisé.
- Définir "MicrosoftAppTenantId" sur commun.
Accédez au fichier manifest.json dans le référentiel cloné.
Ouvrez le fichier manifest.json et mettez à jour les modifications suivantes :
- Remplacez toutes les occurrences de "{TODO: MicrosoftAppId}" par votre ID d’application Microsoft.
- Définissez "<<domain-name>>" sur votre domaine ngrok ou dev tunnel.

Créer et exécuter le service

Ouvrez Visual Studio.
Aller au fichier>Ouvrir un>projet/une solution....
Dans bot-conversation-sso-quickstart>csharp_dotnetcore dossier, puis sélectionnez BotConversationSsoQuickstart.sln fichier.
Sélectionnez F5 pour exécuter le projet.
Si une boîte de dialogue d’avertissement de sécurité s’affiche, sélectionnez Oui.

Une page web s’ouvre avec un message Votre bot est prêt !.

Remarque

Cette page s’affiche uniquement lorsque vous accédez à l’URL localhost.
Résolution des problèmes

Si le message d’erreur « Impossible de trouver le package » s’affiche, procédez comme suit :
1. Accédez à Outils Gestionnaire> depackage NuGet, Paramètresdu gestionnaire> de package.
2. Dans la fenêtre Options qui s’affiche, sélectionnezSources de package du gestionnaire > de package NuGet.
3. Sélectionnez Ajouter.
4. Dans Nom, entrez nuget.org et dans Source, entrez https://api.nuget.org/v3/index.json.
5. Sélectionnez Mettre à jour, puis OK.
6. Régénérez votre projet.

Charger le robot dans Teams

Dans votre référentiel cloné, accédez à Microsoft-Teams-Samples>samples>bot-conversation-sso-quickstart>csharp_dotnetcore>TeamsApp>appPackage.
Créez un fichier .zip avec les fichiers suivants présents dans le dossier appPackage :
- manifest.json
- outline.png
- color.png
Accédez à Microsoft Teams.
1. Dans le client Teams, sélectionnez Applications.
2. Sélectionnez Gérer vos applications.
3. Sélectionnez Charger une application.
4. Recherchez l’option permettant de charger une application personnalisée.
Sélectionnez Ouvrir pour télécharger le fichier .zip que vous avez créé dans le dossier Manifest .
Sélectionnez Ajouter pour ajouter le robot à votre conversation.
Sélectionnez Ouvrir.

Vous pouvez interagir avec le robot en lui envoyant un message. Le bot échange un jeton SSO et appelle l’API API Graph en votre nom. Il vous maintient connecté, sauf si vous envoyez un message pour vous déconnecter.
Envoyez un message au bot. Le robot de conversation demande le consentement pour la première fois.
Pour le bureau : sélectionnez Continuer pour accorder des autorisations au client Teams pour accéder au bot.

Remarque

Vous avez maintenant configuré l’authentification unique avec votre application bot et c’est le seul moment où vous devez donner votre consentement.
Pour les appareils mobiles : Sélectionnez Accepter.

Remarque

Vous avez maintenant configuré l’authentification unique avec votre application bot sur mobile, et c’est le seul moment où vous devez donner votre consentement.

Avez-vous trouvé quelque chose comme ça ?

Capture d’écran de la sortie après avoir terminé avec succès le guide pas à pas.

Vous avez terminé le tutoriel pour commencer à créer un bot avec l’authentification SSO.

Activer l’authentification unique pour votre bot

Retour au début

Créer votre première application d’extension de message à l’aide de JavaScript

Démarrez le développement d’applications Microsoft Teams avec votre première application Teams à l’aide de JavaScript.

Dans ce tutoriel, vous allez découvrir :

Comment configurer un nouveau projet avec Microsoft 365 Agents Toolkit (anciennement Teams Toolkit).
Comment créer une application d’extension de message.
Comment déployer votre application.

Didacticiel : créer votre première application d’extension de message à l’aide de JavaScript

Ce guide pas à pas vous aide à créer une application d’extension de message Teams avec Agents Toolkit dans Visual Studio Code. Vous verrez la sortie suivante après avoir terminé ce guide :

Configuration requise

Veillez à installer les outils suivants pour créer et déployer vos applications.

	Installer	Pour utiliser...
Requis
	Visual Studio Code	environnements de construction JavaScript ou TypeScript. Utilisez la dernière version.
	Microsoft 365 Agents Toolkit	Extension Microsoft Visual Studio Code qui crée un modèle automatique de projet pour votre application. Utilisez la dernière version.
	Node.js	Environnement d’exécution JavaScript back-end. Pour plus d’informations, consultez Node.js tableau de compatibilité des versions.
	Microsoft Teams	Collaborez avec les personnes avec lesquelles vous collaborez via des applications pour des conversations, des réunions et des appels au même endroit.
	Microsoft Edge (recommandé) ou Google Chrome	Navigateur avec des outils de développement essentiels pour le débogage et les tests.
	Compte de développeur Microsoft 365	Accès au compte Teams avec les autorisations appropriées pour installer une application personnalisée.
Facultatif
	Outils Azure pour Visual Studio Code et Azure CLI	Outils Azure permettant d’accéder aux données stockées ou de déployer un backend cloud pour votre application Teams dans Azure.
	Outils de développement React pour Chrome ou Outils de développement React pour Microsoft Edge	Une extension DevTools du navigateur pour la bibliothèque JavaScript open source React.

Préparer l’environnement de développement

Après avoir installé les outils requis, configurez l’environnement de développement.

Installer Microsoft 365 Agents Toolkit

Vous pouvez utiliser Agents Toolkit avec Visual Studio Code ou une interface de ligne de commande appelée Microsoft 365 Agents Toolkit CLI (anciennement TeamsFx CLI).

Visual Studio Code
Ligne de commande

Ouvrez Visual Studio Code et sélectionnez Extensions (Ctrl+Maj+X ou Afficher>les extensions).
Dans la zone de recherche, entrez Microsoft 365 Agents Toolkit.
Sélectionnez Installer.

L’icône Microsoft 365 Agents Toolkit s’affiche dans la barre d’activité de Visual Studio Code.

Vous pouvez également installer Agents Toolkit depuis la Place de marché de Visual Studio Code.

Pour installer l’interface de ligne de commande Agents Toolkit, utilisez le gestionnaire de npm package et entrez la commande suivante dans l’invite de commandes :

npm install -g @microsoft/m365agentstoolkit-cli

Selon votre configuration, vous devrez peut-être utiliser sudo pour installer l’interface de ligne de commande :

sudo npm install -g --unsafe-perm @microsoft/m365agentstoolkit-cli

Cette condition est plus fréquente sur les systèmes Linux et macOS.

Assurez-vous d’ajouter le cache global npm à votre PATH. Cette étape est normalement effectuée dans le cadre du programme d’installation Node.js.

Vous pouvez utiliser l’interface de ligne de commande avec la atk commande. Vérifiez que la commande fonctionne en cours d’exécutionatk -h.

Attention

Avant de pouvoir exécuter TeamsFx dans des terminaux PowerShell, vous devez activer la stratégie d’exécution signée à distance pour PowerShell.

Configurer votre client de développement Teams

Rechercher l’option Charger une application

Les étapes suivantes vous aident à vérifier si vous pouvez charger des applications dans Teams :

Dans le client Teams, sélectionnez l’icône Applications .
Sélectionnez Gérer vos applications.
Sélectionnez Charger une application.
Recherchez l’option permettant de charger une application personnalisée. Si l’option est visible, vous pouvez télécharger des applications personnalisées.

Remarque

Si vous ne trouvez pas l’option permettant de charger une application personnalisée, contactez votre administrateur Teams.

Créer un locataire pour développeur Teams gratuit (facultatif)

Si vous n’avez pas de compte de développeur Teams, rejoignez le programme pour développeurs Microsoft 365.

Accédez au programme pour développeurs Microsoft 365.
Sélectionnez Rejoindre maintenant , puis suivez les instructions à l’écran.
Dans l’écran d’accueil, sélectionnez Configurer l’abonnement E5.
Configurez votre compte d’administrateur. Une fois que vous avez terminé, l’écran suivant s’affiche :
Connectez-vous à Teams à l’aide du compte d’administrateur que vous venez de configurer. Vérifiez que vous disposez de l’option Charger une application personnalisée dans Teams.

Obtenir un compte Azure gratuit

Si vous souhaitez héberger votre application ou accéder à des ressources dans Azure, vous devez avoir un abonnement Azure. Créez un compte gratuit avant de commencer.

Créer un espace de travail de projet pour votre application d’extension de message

À présent, nous allons créer votre première application d’extension de message.

La fonctionnalité d’extension de message vous permet d’interagir avec un service web via des boutons et des formulaires. Utilisez la zone de composition des messages, la zone de commande ou un message directement dans le client Teams pour rechercher et lancer des actions dans un système externe. Les extensions de message s’appuient sur des bots pour fournir une boîte de dialogue entre l’utilisateur et votre code.

Le diagramme montre : La capture d’écran montre les différents types de fonctionnalités d’application avec l’extension de message mise en surbrillance.

Il existe deux types d’extensions de message Teams :

Commandes de recherche : Vous pouvez rechercher des systèmes externes et insérer les résultats dans un message sous la forme d’une carte.
Commandes d’action : vous pouvez présenter à vos utilisateurs une fenêtre contextuelle modale pour collecter ou afficher des informations. Vous pouvez ensuite traiter leur interaction et renvoyer les informations à Teams.

Créons une application d’extension de message avec une commande de recherche. Tout d’abord, configurez un nouveau projet Teams pour créer l’application d’extension de message.

Dans ce tutoriel, vous allez découvrir :

Comment configurer un nouveau projet d’extension de message avec Agents Toolkit.
À propos de la structure de répertoire de votre projet d’application.

Créer votre extension de message espace de travail de projet

Si les conditions préalables sont réunies, commençons !

Remarque

L’interface utilisateur de Visual Studio Code affichée peut varier pour vous en fonction de votre système d’exploitation, de la version de Toolkit, du thème et de l’environnement.

Visual Studio Code
Ligne de commande

Ouvrez Visual Studio Code.
Sélectionnez l’icône Microsoft 365 Agents Toolkit dans la barre d’activité Visual Studio Code.
Sélectionnez Créer une nouvelle application Teams d’agent/d’application>.
Sélectionnez Extension de message.
Sélectionnez des résultats de recherche personnalisés.
Sélectionnez Démarrer avec un bot.
Sélectionnez JavaScript.
Sélectionnez le dossier par défaut pour stocker votre dossier racine de projet dans l’emplacement par défaut.

Vous pouvez également modifier l’emplacement par défaut en procédant comme suit :
1. Sélectionnez Parcourir.
2. Sélectionnez l’emplacement de l’espace de travail du projet.
3. Sélectionnez Sélectionner un dossier.
Entrez un nom approprié pour votre application. Sélectionnez Entrée.

Agents Toolkit crée l’application en quelques secondes.

Une fois votre application créée, Agents Toolkit affiche le message suivant :

Utilisez l’interface de ligne de commande « atk » pour créer votre premier projet.

Accédez au dossier dans lequel vous souhaitez créer le dossier de projet et ouvrez l’invite de commandes.
Entrez la commande suivante pour créer une application Teams :
```
atk new
```
CLI vous propose une série d’options parmi lesquelles choisir. Utilisez les touches de direction pour sélectionner une option. Après avoir fait votre choix, sélectionnez Entrer pour confirmer.
1. Sélectionnez l’extension de message d’un nouveau projet.
2. Sélectionnez des résultats de recherche personnalisés pour les fonctionnalités de l’application à l’aide d’une extension de message.
3. Sélectionnez Démarrer avec un bot pour l’architecture de l’extension de message basée sur la recherche.
4. Sélectionnez JavaScript pour le langage de programmation.
5. Sélectionnez Entrée pour sélectionner le dossier d’espace de travail par défaut pour votre application.
6. Entrez un nom approprié pour votre application. Le nom de l’application doit être composé uniquement de caractères alphanumériques.

CLI crée le projet une fois que vous avez répondu à toutes les questions.

Visite guidée du code source de l’application d’extension de message

Une extension de message utilise Bot Framework pour interagir avec votre service par le biais d’une conversation. Après la génération de modèles, affichez les répertoires et les fichiers du projet sous EXPLORER.

La capture d’écran montre les fichiers de l’application d’extension de message.

Dossier/Fichier	Sommaire
`m365agents.yml`	Le fichier de projet principal décrit la configuration de votre application et définit l’ensemble des actions à exécuter à chaque étape du cycle de vie.
`m365agents.local.yml`	Remplacements avec des `m365agents.yml` actions qui permettent l’exécution et le débogage locaux.
`.vscode/`	Fichiers Visual Studio Code pour le débogage local.
`appPackage/`	Modèles pour le manifeste de l’application Teams.
`infra/`	Modèles d’approvisionnement des ressources Azure.
`index.js`	le point d’entrée et `express` le gestionnaire de l’application.

Conseil

Familiarisez-vous avec les robots et l’extension de message en dehors de Teams avant d’intégrer votre application dans Teams.

Créer et exécuter votre première application d’extension de message

Après avoir configuré votre espace de travail de projet avec Agents Toolkit, il est temps de construire votre projet. Vous devez vous connecter à votre compte Microsoft 365.

Connectez-vous avec le compte d’administrateur que vous avez créé lors de votre adhésion au programme pour développeurs Microsoft 365.

Visual Studio Code
Ligne de commande

Ouvrez Visual Studio Code.
Sélectionnez l’icône Microsoft 365 Agents Toolkit dans la barre d’activité.
Sélectionnez Se connecter à Microsoft 365 à l’aide de vos informations d’identification. Votre navigateur web par défaut s’ouvre pour vous permettre de vous connecter.
Fermez le navigateur après vous être connecté à l’aide de vos informations d’identification.
Revenez à Agents Toolkit dans Visual Studio Code.

La section COMPTES de la barre latérale affiche le nom de votre compte Microsoft 365. Si le chargement d’une application personnalisée est activé pour votre compte Microsoft 365, Agent Toolkit affiche Chargement d’application personnalisé activé.

Capture d’écran montrant l’utilisateur connecté à Microsoft 365 et le message chargé sur l’activation.

Vous êtes maintenant prêt à créer l’application et à l’exécuter localement !

Accédez au dossier de projet de votre application d’extension de message et ouvrez une invite de commandes.
Se connecter à Microsoft 365 avec Microsoft 365 Agent Toolkit CLI (anciennement TeamsFx CLI) :
```
atk account login m365
```

Votre navigateur web par défaut s’ouvre pour vous permettre de vous connecter. Connectez-vous à votre compte Azure à l’aide de vos informations d’identification. Fermez le navigateur lorsque vous y êtes invité.

Générer et exécuter votre application dans l’environnement local

Vous pouvez maintenant créer et déboguer votre première application d’extension de message Teams localement.

Générez et exécutez votre application localement

Sélectionnez la touche F5 dans Visual Studio Code pour exécuter votre application en mode débogage.

Remarque

Si Agents Toolkit n’est pas en mesure de vérifier un prérequis particulier, il vous invite à case activée.
Découvrez ce qui se passe lorsque vous exécutez votre application localement dans le débogueur.

Lorsque vous sélectionnez F5, Agents Toolkit remplit les fonctions suivantes :
1. Vérifie les conditions préalables suivantes :
  1. Vous êtes connecté avec un compte Microsoft 365.
  2. Le chargement d’application personnalisé est activé pour votre compte Microsoft 365.
  3. La version Node.js prise en charge est installée.
  4. Le port requis par l’application bot est disponible.
2. Installe npm packages
3. Démarre Dev Tunnel pour créer un tunnel HTTP.
4. Enregistre l’application dans Microsoft Entra ID et configure l’application.
5. Inscrit l’application bot dans Bot Framework et configure l’application.
6. Inscrit l’application dans le portail Teams des développeurs et configure l’application.
7. Démarre l’application d’extension de message hébergée localement.
8. Démarre Teams dans un navigateur web et charge l’application Teams.
Lorsque vous déboguez l’application pour la première fois, Teams télécharge les dépendances et génère l’application. Ce processus peut prendre de 3 à 5 minutes.
Teams s’ouvre dans une fenêtre de navigateur une fois la build terminée. Connectez-vous avec votre compte Microsoft 365, si vous y êtes invité.
Une boîte de dialogue s’ouvre pour vous permettre d’ajouter l’application d’extension de message à Teams. Sélectionnez Ajouter.

Teams charge l’application d’extension de message.

Comme les applications d’extension de message s’appuient sur des bots pour permettre la communication entre l’utilisateur et le service web, votre application se charge sur une fonctionnalité de conversation d’un bot.
- Si vous avez créé une application bot avant de créer l’application d’extension de message, Teams charge l’extension de message dans l’application bot que vous avez créée. Les messages de conversation précédents de l’application bot sont visibles.
- Si vous avez créé une extension de message en premier, Teams charge votre application dans la conversation la plus récente ouverte sur Teams.

Tester votre application

La première fois que votre application se charge, l’application d’extension de message est ouverte pour que vous puissiez la tester. Cet exemple d’application vous permet de rechercher des packages npm open source à partir du registre du logiciel.

Comment exécuter une requête de recherche

Message Extension
Zone de commande

Entrez le nom d’un package npm open source dans la zone de recherche de l’extension de message, telle que CLI. L’extension de message affiche une liste des éléments correspondants.
Sélectionnez un des éléments dans la liste. L’application crée une carte adaptative avec l’élément dans la zone de composition des messages afin que vous puissiez l’envoyer dans une conversation ou un canal.
Sélectionnez Entrée. L’application d’extension de message envoie la carte adaptative avec l’élément dans la conversation ou le canal.

Comment ouvrir votre application d’extension de message

Vous avez testé la fonctionnalité de recherche de l’application d’extension de message à l’étape précédente. À présent, découvrez les différentes façons d’ouvrir l’application d’extension de message.

Ouvrir votre application à partir de la boîte de commande

Entrez / suivi du nom de votre application d’extension de message dans la zone de commande.

L’application s’ouvre dans la zone de commande et vous pouvez l’utiliser pour exécuter une requête.
Remarque
- L’utilisation / pour ouvrir votre application d’extension de message à partir de la boîte de commande fonctionne uniquement dans le nouveau client Teams.
- Permet @ d’ouvrir votre application d’extension de message à partir de la boîte de commande dans le client Teams classique.

Ouvrir votre application à partir de la zone de composition des messages

Sélectionnez les trois points en bas de la zone de composition du message.
Sélectionnez votre application d’extension de message.

L’application d’extension de message se charge avec les options permettant d’exécuter une recherche.

Ouvrir votre application à partir d’applications personnalisées chargées

Sélectionnez Applications>Gérer vos applications.
Sélectionnez la liste déroulante de votre application dans la liste des applications, puis sélectionnez Application personnelle.
Une boîte de dialogue s’affiche pour vous proposer d’essayer votre application. Si vous sélectionnez OK, la boîte de dialogue disparaît. Sélectionnez Essayer.
Une liste de vos applications d’extension de message s’affiche dans votre conversation Teams la plus récente. Sélectionnez votre application d’extension de message dans la liste.

Découvrez comment résoudre les problèmes si votre application ne s’exécute pas localement

Pour exécuter votre application dans Teams, vous devez disposer d’un compte de développement Microsoft 365 qui autorise le chargement d’applications personnalisées. Vous pouvez en savoir plus sur le chargement d’applications personnalisées dans la section Conditions préalables.

Déployer votre première application Teams

Nous allons déployer votre première application d’extension de message sur Azure à l’aide d’Agents Toolkit.

Connectez-vous à votre compte Azure pour accéder au Portail Azure Microsoft et approvisionner de nouvelles ressources cloud pour prendre en charge votre application.

Visual Studio Code
Ligne de commande

Ouvrez Visual Studio Code.
Ouvrez le dossier de projet dans lequel vous avez créé l’application d’extension de message.
Sélectionnez l’icône Microsoft 365 Agents Toolkit dans la barre d’activité.
Sélectionnez Se connecter à Azure à l’aide de vos informations d’identification. Votre navigateur web par défaut s’ouvre pour vous permettre de vous connecter.

Conseil

Si vous avez installé l’extension COMPTE AZURE et que vous utilisez le même compte, vous pouvez ignorer cette étape.
Fermez le navigateur lorsque vous y êtes invité et revenez à Visual Studio Code.

La section COMPTES de la barre latérale répertorie le nombre d’abonnements Azure utilisables à votre disposition. Assurez-vous de disposer d’au moins un abonnement Azure utilisable. Si ce n’est pas le cas, déconnectez-vous et utilisez un autre compte.

Accédez au dossier de projet de votre application d’extension de message et ouvrez une invite de commandes.
Se connecter à Azure avec Agents Toolkit CLI :
```
atk account login azure
```
Votre navigateur web par défaut s’ouvre pour vous permettre de vous connecter. Connectez-vous à votre compte Azure à l’aide de vos informations d’identification. Fermez le navigateur lorsque vous y êtes invité.

Découvrons maintenant comment déployer l’application sur Azure à l’aide d’Agents Toolkit.

Déployer votre application sur Azure

Le déploiement se compose de deux étapes. Tout d’abord, les ressources cloud nécessaires sont créées (également appelées approvisionnement). Ensuite, le code de votre application est copié dans les ressources cloud créées. Vous déployez l’application d’extension de message dans ce didacticiel.

Quelle est la différence entre Provisionner et déployer ?

L’étape Provision crée des ressources dans Azure et Microsoft 365 pour votre application, mais aucun code (tel que HTML, CSS ou JavaScript) n’est copié dans les ressources. L’étape de déploiement copie le code de votre application vers les ressources que vous avez créées lors de l’étape de provisionnement. Il est courant de déployer plusieurs fois sans approvisionner de nouvelles ressources. L’étape d’approvisionnement prenant un certain temps, elle est distincte de l’étape de déploiement.

Visual Studio Code
Ligne de commande

Sélectionnez l’icône Microsoft 365 Agents Toolkit dans la barre d’activité Visual Studio Code.

Sélectionnez Provisionner.
Sélectionnez un abonnement.
Sélectionnez un groupe de ressources.

Si vous n’avez pas de groupe de ressources à sélectionner, vous pouvez en créer un en procédant comme suit :
1. Sélectionner + Nouveau groupe de ressources.
2. Sélectionnez le nom par défaut ou entrez un nom approprié pour votre groupe de ressources.
3. Sélectionnez l’emplacement de votre groupe de ressources.
Une boîte de dialogue vous avertit que des coûts peuvent être encourus lors de l’exécution de ressources dans Azure. Sélectionnez Provisionner.

Le processus d’approvisionnement crée des ressources dans le cloud Azure. Cela peut prendre un certain temps. Après quelques minutes, le message suivant s’affiche :

Si vous le souhaitez, vous pouvez afficher les ressources provisionnées. Pour ce didacticiel, vous n’avez pas besoin d’afficher les ressources.

La ressource approvisionnée apparaît sous ENVIRONNEMENT.
Sous CYCLE DE VIE, sélectionnez Déployer.
Une boîte de dialogue s’affiche et vous demande si vous souhaitez déployer des ressources dans l’environnement de développement. Sélectionnez Déployer.

Comme pour l’approvisionnement, le déploiement prend un certain temps. Après quelques minutes, vous voyez un message d’achèvement.

Accédez au dossier dans lequel vous avez créé votre application d’extension de message et ouvrez une invite de commandes.
Exécutez atk provision.
```
atk provision
```
Lorsque vous y êtes invité, sélectionnez un abonnement et un groupe de ressources Azure pour utiliser les ressources Azure. Votre application est hébergée à l’aide de ressources Azure.
Exécutez atk deploy.
```
atk deploy
```
Votre application d’extension de message est déployée.

Exécuter l’application déployée

Une fois les étapes d’approvisionnement et de déploiement terminées, accédez à Exécuter et déboguer (Ctrl+Maj+D ou Afficher > l’exécuter) dans Agents Toolkit.

Sélectionnez le menu déroulant EXÉCUTER ET DÉBOGUER.
Sélectionnez Lancer à distance dans Teams (Edge).
Sélectionnez le bouton ▷ .
Une boîte de dialogue s’ouvre pour installer votre application déployée dans Teams. Sélectionnez Ajouter.

Teams ouvre l’application d’extension de message dans la conversation la plus récente.

Découvrez ce qui se produit lorsque vous avez déployé votre application dans Azure

Avant le déploiement, l’application s’exécute localement.

Le backend s’exécute à l’aide d’Azure Functions Core Tools.
Le point de terminaison HTTP de l’application, où Microsoft Teams charge l’application, s’exécute localement.

Le déploiement est un processus en deux étapes. Vous provisionnez les ressources sur un abonnement Azure actif, puis déployez ou chargez le back-end et le code front-end de l’application sur Azure.

Le serveur principal, s’il est configuré, utilise différents services Azure, notamment Azure App Service et Stockage Azure.
L’application frontale est déployée sur un compte de stockage Azure configuré pour l’hébergement web statique.

Félicitations

Vous avez terminé le tutoriel pour créer une application d’extension de message avec JavaScript.

Avez-vous trouvé quelque chose comme ça ?

Créer une application d’extension de message

Retour au début

Créer votre première application onglet à l’aide du do dièse

Démarrez le développement d’applications Microsoft Teams en créant votre première application Teams avec une fonctionnalité d’onglet.

Dans ce tutoriel, vous allez découvrir :

Comment configurer un nouveau projet.
Comment créer des applications avec la fonctionnalité d’onglet à l’aide de C# et de Microsoft Visual Studio 2022.

Didacticiel : Créez votre première application d’onglet à l’aide de C#

Ce guide pas à pas vous aide à créer un onglet avec Microsoft 365 Agents Toolkit (anciennement Teams Toolkit). Vous verrez la sortie suivante après avoir terminé ce guide :

La capture d’écran montre la sortie finale de l’application d’onglet Teams.

Conditions préalables à la création de votre application

Voici la liste des outils que vous devez installer pour créer et déployer une application Teams.

Installer	Pour utiliser...
Microsoft Teams	Microsoft Teams pour collaborer avec toutes les personnes avec lesquelles vous travaillez via des applications pour le chat, les réunions et les appels au même endroit.
Visual Studio 2022	Vous pouvez installer la version entreprise dans Visual Studio 2022, et installer les charges de travail de développement ASP.NET et web. Utilisez la dernière version.
Microsoft 365 Agents Toolkit	Extension Visual Studio qui crée un modèle automatique de projet pour votre application. Utilisez la dernière version.

Installer le kit de ressources des agents

Agents Toolkit simplifie le processus de développement grâce à des outils permettant de créer un modèle automatique de projet pour votre application. Il crée la structure de répertoires nécessaire pour toutes les fonctionnalités sélectionnées avec les fichiers requis en place, prêts à générer le projet.

Vous pouvez télécharger la dernière version du programme d’installation de Visual Studio. Agents Toolkit est disponible en tant qu’extension dans Visual Studio.

Après avoir ouvert le programme d’installation de Visual Studio dans la fenêtre contextuelle charges de travail :

Sélectionnez ASP.NET et développement web.
Sous Détails >de l’installationFacultatif, sélectionnez Outils de développement Microsoft Teams.
Sélectionnez Installer.
Sélectionnez Lancer. La fenêtre de l’application Visual Studio 2022 s’affiche.
Accédez à Gérer>les extensions

La fenêtre Gérer l’extension s’affiche :
Dans le volet gauche, sélectionnez Installé. L’extension Microsoft 365 Agents Toolkit est disponible.

Configurer votre client de développement Teams

Un client est comme un espace ou un conteneur pour votre organisation dans Teams, où vous pouvez converser, partager des fichiers et organiser des réunions. Cet espace est également l’endroit où vous chargez et testez votre application personnalisée. Vérifions si vous êtes prêt à développer avec le client.

Rechercher l’option de chargement d’application personnalisée

Remarque

Le chargement d’applications personnalisées est nécessaire pour prévisualiser et tester les applications dans l’environnement local Teams. S’il n’est pas activé, vous ne pourrez pas prévisualiser et tester votre application dans l’environnement local Teams.

Avez-vous déjà un accès client et administrateur ? Allons-case activée si vous le faites !

Vérifiez si vous pouvez charger des applications personnalisées dans Teams :

Ouvrez Microsoft Teams, sélectionnez l’icône Applications .
Sélectionnez Gérer vos applications.
Sélectionnez Charger une application.
Recherchez l’option Charger une application personnalisée . Si vous voyez l’option, le chargement d’application personnalisé est activé.

Remarque

Si vous ne trouvez pas l’option permettant de charger une application personnalisée, contactez votre administrateur Teams.

Créer un locataire pour développeur Teams gratuit (facultatif)

Si vous n’avez pas de compte Teams, vous pouvez en obtenir un gratuitement. Rejoignez le programme Microsoft 365 pour les développeurs !

Accédez au programme pour développeurs Microsoft 365.
Sélectionnez Rejoindre maintenant , puis suivez les instructions à l’écran.
Dans l’écran d’accueil, sélectionnez Configurer l’abonnement E5.
Configurez votre compte d’administrateur. Une fois que vous avez terminé, l’écran suivant s’affiche :
Connectez-vous à Teams à l’aide du compte d’administrateur que vous avez configuré. Vérifiez que vous disposez de l’option Charger une application personnalisée dans Teams.

Obtenir un compte Azure gratuit

Si vous souhaitez héberger votre application ou accéder aux ressources dans Azure, vous devez avoir un abonnement Azure. Créez un compte gratuit avant de commencer.

Créer un espace de travail de projet pour votre application onglet à l’aide de C sharp

Démarrez le développement d’applications Microsoft Teams en créant votre première application. Cette application utilise la fonctionnalité d’onglet. Si les conditions préalables sont réunies, commençons !

Les étapes suivantes vous aident à créer un espace de travail de projet pour votre application d’onglet dans Visual Studio :

Ouvrez Visual Studio.
Sélectionnez Nouveau projet.
Dans la zone de recherche, entrez Teams.
SélectionnezensuiteAgents> Microsoft 365.
Entrez les détails suivants pour configurer votre nouveau projet.
Entrez le nom du projet requis dans le nom du projet.
Sélectionnez l’emplacement souhaité pour enregistrer les fichiers et dossiers du projet.
Sélectionnez Créer.
Sélectionnez l’onglet>Créer.

L’application d’onglet Teams est créée en quelques secondes.

Créer et exécuter votre première application onglet à l’aide de C dièse

Après avoir configuré votre espace de travail de projet avec Agents Toolkit, créez votre application d’onglets.

Utilisez votre compte Microsoft 365 pour vous connecter à Teams. Si vous utilisez un client du programme pour développeurs Microsoft 365, le compte administrateur que vous avez configuré lors de l’inscription est votre compte Microsoft 365.

Dans l’Explorateur de solutions, sous Solution MyTeamsApp, cliquez avec le bouton droit sur MyTeamsApp.
Sélectionnez Microsoft 365 Agents Toolkit>Sélectionnez le compte Microsoft 365.
SélectionnezContinuer sur lecompte> Microsoft 365.

Générez et exécutez votre application localement dans Visual Studio

Pour générer et exécuter votre application localement :

Sélectionnez Déboguer,>Démarrer, Déboguer ou F5.

Visual Studio démarre le processus de débogage et ouvre le client web Teams dans un navigateur. Si vous y êtes invité, connectez-vous avec votre compte Microsoft 365.
Sélectionnez Ajouter.
Sélectionnez Ouvrir pour ouvrir l’application dans l’étendue personnelle.

Vous pouvez également rechercher et sélectionner l’étendue requise ou sélectionner un canal ou une conversation dans la liste, puis parcourir la boîte de dialogue pour sélectionner Atteindre.

La capture d’écran affiche la boîte de dialogue de sélection de l’étendue avec la liste des étendues partagées.

Félicitations, votre application First Tab s’exécute sur Teams !

La capture d’écran montre la sortie finale de l’application d’onglet Teams.

Découvrez comment résoudre les problèmes si votre application ne s’exécute pas localement.

Pour exécuter correctement votre application dans Teams, assurez-vous que vous avez activé le chargement d’applications personnalisées dans votre compte Teams. Vous pouvez en savoir plus sur le chargement d’applications personnalisées dans la section Conditions préalables .

Vous avez créé une application d’onglet à l’aide de C#. Agents Toolkit a ajouté la génération de modèles automatique nécessaire à la structure de répertoire de votre application. Le tutoriel est maintenant terminé.

Créer un onglet

Créer un projet Teams à l’aide de Microsoft 365 Agents Toolkit

Retour au début

Ajouter l’authentification unique à l’application d’extension d’onglet et de message

L’authentification unique (SSO) de Microsoft Entra permet une authentification transparente des utilisateurs dans Teams.

Principaux aspects de l’authentification unique de Microsoft Entra :

Autorise l’utilisateur à se connecter automatiquement après la première connexion.
Permet à l’utilisateur de se connecter à d’autres appareils sans saisir à nouveau ses informations d’identification.
Obtient un jeton pour l’utilisateur connecté.

Didacticiel : Ajouter l’authentification unique à l’application d’extension d’onglet et de message

Ce guide pas à pas vous aide à créer des onglets et des extensions de messages pour activer l’authentification SSO de Microsoft Entra. La sortie suivante s’affiche :

Capture d’écran de l’onglet et de l’extension de message avec la sortie de l’authentification SSO après avoir terminé avec succès le guide pas à pas.

Conditions préalables pour ajouter l’authentification unique aux applications

Veillez à installer les outils suivants et à configurer votre environnement de développement :

#	Installer	Pour utiliser...
1.	Microsoft Teams	Microsoft Teams pour collaborer avec toutes les personnes avec lesquelles vous travaillez via des applications pour le chat, les réunions et les appels au même endroit.
2.	Compte de développeur Microsoft 365	Accès au compte Teams avec les autorisations appropriées pour installer une application.
3.	SDK .NET Core	Liaisons personnalisées pour le débogage local et les déploiements d’applications Azure Functions. Si vous n’avez pas installé la dernière version, installez la version portable.
4.	Visual Studio 2022	Vous pouvez installer la version entreprise dans Visual Studio 2022, et installer les charges de travail de développement ASP.NET et web. Utilisez la dernière version.
5.	Tunnel de développement	Les fonctionnalités de l’application Teams (bots conversationnels, extensions de message et webhooks entrants) nécessitent des connexions entrantes. Un tunnel connecte votre système de développement à Teams. Dev Tunnel est un outil puissant pour ouvrir votre hôte local à Internet en toute sécurité et contrôler qui y a accès. Le tunnel de développement est disponible dans Visual Studio 2022 version 17.7.0 ou ultérieure. ou Vous pouvez également utiliser ngrok comme tunnel pour connecter votre système de développement à Teams. Ce n’est pas nécessaire pour les applications qui n’incluent que des onglets. Ce package est installé dans le répertoire du projet (à l’aide de npm `devDependencies`).

Remarque

Après avoir téléchargé ngrok, inscrivez-vous et installez authtoken.

Configurer l’environnement local

Ouvrez Microsoft-Teams-Samples.
Sélectionnez Code.
Dans le menu déroulant, sélectionnez Ouvrir avec GitHub Desktop.
Sélectionnez Cloner.

Inscrire l’application Microsoft Entra

Les étapes suivantes vous aident à créer et à inscrire votre bot dans le portail Azure :

Créez et inscrivez votre application Azure.
Créez une clé secrète client pour activer l’authentification SSO du bot.
Ajoutez un canal Teams pour déployer le bot.
Créez un tunnel vers les points de terminaison de votre serveur web à l’aide de Dev Tunnel (recommandé) ou ngrok.
Ajoutez un point de terminaison de messagerie au tunnel de développement que vous avez créé.

Ajouter une inscription d’application

Accédez au portail Azure.
Sélectionnez inscriptions d’applications.
Sélectionnez + Nouvelle inscription.
Entrez le nom de votre application.
Sélectionnez Comptes dans n’importe quel répertoire organisationnel (Tout locataire Microsoft Entra ID - Multilocataire).
Sélectionnez Enregistrer.

Votre application est inscrite dans Microsoft Entra ID. La page de vue d’ensemble de l’application s’affiche.

Remarque

Enregistrez l’ID d’application à partir de l’ID d’application (client) et de l’ID d’annuaire (locataire) pour une utilisation ultérieure.

Créer un tunnel

Sélectionnez l’une des méthodes suivantes pour créer un tunnel :

Tunnel de développement
ngrok

Ouvrez Visual Studio.
Sélectionnez Créer un projet.
Dans la zone de recherche, entrez ASP.NET. Dans les résultats de la recherche, sélectionnez ASP.NET Core Web App.
Sélectionnez Next (Suivant).
Entrez le nom du projet , puis sélectionnez Suivant.
Sélectionnez Créer.

Une fenêtre de vue d’ensemble s’affiche.
Dans la liste déroulante de débogage, sélectionnez Tunnels de développement (aucun tunnel actif)>Créer un tunnel....

Une fenêtre contextuelle apparaît.
Mettez à jour les détails suivants dans la fenêtre contextuelle :
1. Compte : entrez un compte Microsoft ou GitHub.
2. Nom : Entrez un nom pour votre tunnel.
3. Type de tunnel : Dans la liste déroulante, sélectionnez Temporaire.
4. Accès : dans la liste déroulante, sélectionnez Public.
Sélectionnez OK.

Une fenêtre contextuelle s’affiche indiquant que le tunnel de développement a été créé avec succès.
Sélectionnez OK.

Vous pouvez trouver le tunnel que vous avez créé dans la liste déroulante de débogage comme suit :
Sélectionnez F5 pour exécuter l’application en mode débogage.
Si une boîte de dialogue d’avertissement de sécurité s’affiche, sélectionnez Oui.

Une fenêtre contextuelle apparaît.
Cliquez sur Continuer.

La page d’accueil du tunnel de développement s’ouvre dans une nouvelle fenêtre de navigateur et le tunnel de développement est maintenant actif.
Accédez à Visual Studio, puis sélectionnez Afficher la > sortie.
Dans le menu déroulant de la console de sortie , sélectionnez Tunnels de développement.

La console de sortie affiche l’URL du tunnel de développement.

ngrok http --host-header=localhost xxxx

Conseil

La fenêtre affiche l’URL HTTPS.

La capture d’écran montre l’URL HTTPS ngrok.

Ajouter une authentification web

Dans le volet gauche, sous Gérer, sélectionnez Authentification.
Sélectionnez Ajouter une plateforme>Web.
Entrez l’URI de redirection de votre application en l’ajoutant auth-end au nom de domaine complet. Par exemple, https://your-devtunnel-domain/auth-end ou https://your-ngrok-domain/auth-end.
Sous Octroi implicite et flux hybrides, cochez les cases Jetons d’accès et Jetons d’ID .
Sélectionnez Configurer.
Sous Web, sélectionnez Ajouter un URI.
Entrez https://token.botframework.com/.auth/web/redirect.
Sélectionnez Enregistrer.

Créer une clé secrète client

Remarque

Dans le volet gauche, sous Gérer, sélectionnez Certificats & secrets.
Sous Clés secrètes client, sélectionnez + Nouvelle clé secrète client.

La fenêtre Ajouter une clé secrète client s’affiche.
Entrez une description.
Sélectionnez Ajouter.
Sous Valeur, sélectionnez Copier dans le presse-papiers pour enregistrer la valeur de la clé secrète client afin de pouvoir l’utiliser.

Ajouter des autorisations d’API

Dans le volet gauche, sélectionnez Autorisations API.
Sélectionnez + Ajouter une autorisation.
Sélectionnez Microsoft Graph.
Sélectionnez Autorisations déléguées.
SélectionnezUser.Read>.
Sélectionnez Ajouter des autorisations.
Remarque
- Si une application ne reçoit pas le consentement de l’administrateur informatique, les utilisateurs doivent donner leur consentement la première fois qu’ils utilisent une application.
- Les utilisateurs doivent donner leur consentement aux autorisations d’API uniquement si l’application Microsoft Entra est inscrite dans un autre client.

Ajouter un URI d’ID de l’application

Dans le volet gauche, sous Gérer, sélectionnez Exposer une API.
En regard de l’URI d’ID d’application, sélectionnez Ajouter.
Mettez à jour l’URI d’ID d’applicationapi://your-devtunnel-domain/botid-{AppID} au format ou api://your-ngrok-domain/botid-{AppID} , puis sélectionnez Enregistrer.

L’image suivante montre le nom de domaine :

Ajouter une étendue

Dans le volet gauche, sous Gérer, sélectionnez Exposer une API.
Sélectionnez + Ajouter une étendue.
Entrez access_as_user comme nom d’étendue.
Sous Qui peut donner son consentement ?, sélectionnez Administrateurs et utilisateurs.
Mettez à jour les valeurs des autres champs comme suit :
- Entrer Teams peut accéder au profil de l’utilisateur en tant que nom complet de consentement de l’Administration.
- Entrée : permet à Teams d’appeler les API web de l’application en tant qu’utilisateur actuel comme description Administration consentement.
- Entrer Teams peut accéder au profil utilisateur et effectuer des demandes en son nom en tant que nom d’affichage de consentement de l’utilisateur.
- Entrez Enable Teams to call this app’s APIs with the same rights asUser consent description.
Assurez-vous que l’état est défini sur Activé.
Sélectionnez Ajouter une étendue.

L’image suivante montre les champs et les valeurs :

Remarque

Le nom de l’étendue doit correspondre à l’URI d’ID de l’application avec /access_as_user ajouté à la fin.

Ajouter une application cliente

Dans le volet gauche, sous Gérer, sélectionnez Exposer une API.

Sous Applications clientes autorisées, identifiez les applications que vous souhaitez autoriser pour l’application web de votre application.
Sélectionnez + Ajouter une application cliente.
Ajoutez le mobile ou de bureau Teams et l’application web Teams.
1. Pour Teams mobile ou de bureau : entrez l’ID client sous la forme 1fec8e78-bce4-4aaf-ab1b-5451cc387264.
2. Pour Teams Web : entrez l’ID client sous la forme 5e3ce6c0-2b1f-4285-8d4b-75ee78787346.
Cochez la case Étendues autorisées .
Sélectionnez Ajouter une application.

L’image suivante affiche l’ID client :

Mettre à jour le manifeste

Dans le volet gauche, sélectionnez Manifeste.
Définissez la valeur du requestedAccessTokenVersion à 2 , puis sélectionnez Enregistrer.

Créer un bot

Créer une ressource de bot Azure

Remarque

Si vous testez déjà votre bot dans Teams, déconnectez-vous de cette application et de Teams. Pour voir cette modification, reconnectez-vous.

Accédez à Accueil.
Sélectionnez + Créer une ressource.
Dans la zone de recherche, entrez Azure Bot.
Sélectionnez Entrée.
Sélectionnez Azure Bot.
Sélectionnez Créer.
Entrez le nom du bot dans Bot handle.
Sélectionnez votre abonnement dans la liste déroulante.
Sélectionnez votre groupe de ressources dans la liste déroulante.

Si vous n’avez pas de groupe de ressources existant, vous pouvez en créer un. Pour créer un groupe de ressources, procédez comme suit :
1. Sélectionnez Créer.
2. Entrez le nom de la ressource, puis sélectionnez OK.
3. Sélectionnez un emplacement dans la liste déroulante Nouvel emplacement du groupe de ressources .
Sous Tarification, sélectionnez Changer de plan.
Sélectionnez FO Free>Select.
Sous l’ID d’application Microsoft, sélectionnez Type d’application comme multilocataire.
Dans le type de création, sélectionnez Utiliser l’inscription d’application existante.
Entrez l’ID d’application.

Remarque

Vous ne pouvez pas créer plusieurs robots avec le même ID d’application Microsoft.
Sélectionnez Vérifier + créer.
Une fois la validation réussie, sélectionnez Créer.

L’approvisionnement du bot prend quelques minutes.
Sélectionnez Accéder à la ressource.

Vous avez créé votre bot Azure avec succès.

Ajouter un canal Teams

Dans le volet gauche, sélectionnez Canaux.
Sous Canaux disponibles, sélectionnez Microsoft Teams.
Cochez la case pour accepter les conditions d’utilisation.
Sélectionnez Accepter.
Sélectionnez Appliquer.

Pour ajouter un point de terminaison de messagerie

Tunnel de développement
ngrok

Utilisez l’URL du tunnel de développement dans la console de sortie comme point de terminaison de messagerie.
Dans le volet gauche, sous Paramètres, sélectionnez Configuration.
Mettez à jour le point de terminaison de messagerie au format https://your-devtunnel-domain/api/messages.
Sélectionnez Appliquer.

Vous avez correctement configuré un bot dans le service Bot Azure.

Remarque

Si la clé d’instrumentation Application Insights affiche une erreur, effectuez une mise à jour avec l’ID d’application.

À partir de ngrok, copiez l’URL HTTPS.

Remarque

L’URL HTTPS dans votre ngrok est un nom de domaine complet. Il WebAppDomain s’agit d’un nom de domaine complet qui n’y figure https:// pas.
Dans le volet gauche, sous Paramètres, sélectionnez Configuration.
Mettez à jour le point de terminaison de messagerie au format https://your-ngrok-domain/api/messages.
Sélectionnez Appliquer.

Vous avez correctement configuré un bot dans le service Bot Azure.

Remarque

Si la clé Application Insights Instrumentation affiche une mise à jour d’erreur avec l’ID d’application.

Ajouter des paramètres de connexion OAuth

Dans le volet gauche, sélectionnez Configuration.
Sélectionnez Ajouter des paramètres de connexion OAuth.
Sous Nouveau paramètre de connexion, mettez à jour les détails suivants :
- Nom : Entrez un nom pour votre nouveau paramètre de connexion. Vous pouvez utiliser le nom dans les paramètres du code de votre service de bot.
- Fournisseur de services : dans la liste déroulante, sélectionnez Azure Active Directory v2.
- ID client : mettez à jour votre ID d’application Microsoft.
- Clé secrète client : mettez à jour la valeur des clés secrètes client.
- URL d’échange de jetons : mettez à jour l’URI d’ID de l’application.
- ID client : Entrez Commun.
- Étendues : Entrez User.Read.
Sélectionnez Enregistrer.

Configurer les paramètres de l’application

Accédez au fichier appsettings.json dans le référentiel cloné.
Ouvrez le fichier appsettings.json dans Visual Studio.
Mettez à jour les informations suivantes :
- Remplacez "MicrosoftAppId" par l’ID d’application Microsoft de votre bot.
- Remplacez "MicrosoftAppPassword" par les clés secrètes client de votre bot Value.
- Remplacez "SiteUrl" par votre URL ngrok.
- Remplacer "ConnectionName" par le nom du paramètre de connexion OAuth.
- Remplacez "TenantId" par l’ID de locataire où l’application est utilisée.
- Remplacez "ClientId" par l’ID d’application Microsoft de votre bot.
- Remplacez "AppSecret" par les clés secrètes client de votre bot Value.
- Remplacez "ApplicationIdURI" par .api://*******.ngrok.io/botid-{AppID}

Configurer le fichier manifeste

Accédez au fichier manifest.json dans le référentiel cloné.
Ouvrez le fichier manifest.json dans Visual Studio et apportez les modifications suivantes :
- Remplacez DOMAIN-NAME par votre URL ngrok.
- Remplacez YOUR-MICROSOFT-APP-ID par l’ID d’application Microsoft de votre bot.
  
  Remarque
  
  Selon le scénario [YOUR-MICROSOFT-APP-ID] , et [DOMAIN-NAME] peut se produire plusieurs fois.
- Remplacer resource par api://*******.ngrok.io/botid-{AppID}.

Créer et exécuter le service

Pour créer et exécuter le service, utilisez Visual Studio ou une ligne de commande.

Visual Studio
Ligne de commande

Ouvrez Visual Studio.
Sélectionnez Fichier>Ouvrir> *Projet/Solution...
Dans le dossier csharp , sélectionnez App SSO Sample.csproj file.
Appuyez sur F5 pour exécuter le projet.
Sélectionnez Oui si la boîte de dialogue suivante s’affiche :

Une page web apparaît avec un message Votre bot est prêt !

Capture d’écran de la page web qui affiche Votre bot est prêt.

Accédez au dossier csharp dans une fenêtre d’invite de commandes et entrez la commande suivante :

dotnet run

Dotnet

Télécharger l’application SSO dans Teams

Dans votre référentiel cloné, accédez àl’exemple d’authentification> unique de l’application csharp>TeamsAppManifest.
Créez un fichier .zip avec les fichiers suivants présents dans le dossier Manifest :
- manifest.json
- icon-outline.png
- icon-color.png
Dans le client Teams, sélectionnez l’icône Applications .
Sélectionnez Gérer vos applications.
Sélectionnez Charger une application.
Recherchez l’option permettant de charger une application personnalisée. Si vous voyez l’option, le chargement d’application personnalisé est activé.

Remarque

Contactez votre administrateur Teams si vous ne trouvez pas l’option permettant de charger une application personnalisée.
Sélectionnez Ouvrir pour télécharger le fichier .zip que vous avez créé dans le dossier Manifest .
Sélectionnez Ajouter.
Sélectionnez Ouvrir et envoyez un message au bot.
Le bot effectue une authentification unique et affiche une carte de profil ainsi qu’une invite d’option pour afficher le jeton.
Sélectionnez Oui pour afficher le jeton ou Non pour continuer la conversation.
Si l’authentification unique n’est pas effectuée, le bot effectue la méthode d’authentification par défaut pour votre onglet.
Pour vous connecter, si l’authentification unique n’est pas effectuée :
1. Dans le volet gauche de Teams, sélectionnez Autres applications ajoutées (●●●).
2. Sélectionnez votre nouvelle application SSO.
3. Sélectionnez Connexion.
4. Entrez vos informations d’identification dans la fenêtre de connexion , puis sélectionnez Suivant.
5. Sélectionnez Accepter.
6. Sélectionnez votre profil sous la zone de recherche. La sortie suivante s’affiche :
Envoyez https://profile.botframework.com à l’application pour obtenir une carte de visite.

Avez-vous trouvé un résultat comme celui-ci ?

Capture d’écran de la sortie après avoir terminé avec succès le guide pas à pas.

Vous avez terminé le tutoriel pour bien démarrer avec l’authentification unique pour l’application d’extension de tabulation et de message.

Activer l’authentification unique pour l’application d’onglet

Activer l’authentification unique pour votre application

Retour au début

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2025-12-02