Générer une extension de message basée sur une action
Les extensions de message basées sur l’action Teams permettent aux utilisateurs d’interagir avec les services web dans le client Teams Microsoft. Les extensions de message permettent de lancer des actions dans un système externe à partir de la zone de rédaction de message, de la zone de commande ou directement à partir d’un message.
Principales fonctionnalités de l’extension de message basé 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 rédaction du message, de la zone de commande ou d’un message.
Ce guide pas à pas vous aide à créer une extension de message basé sur des actions Teams pour lancer des actions à partir de la zone de rédaction de message et de message. À la fin de ce didacticiel, vous pouvez obtenir la sortie suivante :
Conditions préalables
Veillez à installer les outils suivants et à configurer votre environnement de développement :
Installer | Pour l’utilisation... | |
---|---|---|
Obligatoire | ||
Microsoft Teams | Microsoft Teams pour collaborer avec toutes les personnes avec lesquelles vous travaillez via des applications pour la conversation, les réunions, les appels et le tout au même endroit. | |
Visual Studio 2022 version 17.3 Installez l’une des deux charges de travail suivantes : • développement ASP.NET et web • Développement multiplateforme .NET Core |
Vous pouvez installer la version entreprise dans Visual Studio 2022 et installer les charges de travail. | |
SDK .NET Core version 3.1 | Liaisons personnalisées pour le débogage local et les déploiements d’applications Azure Functions. Si vous n’avez pas installé le SDK .NET 3.1 (ou version ultérieure) globalement, la version portable peut être installée. | |
ngrok | Les fonctionnalités d’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. Elle n’est pas obligatoire pour les applications qui incluent uniquement 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
Cloner Microsoft-Teams-Samples
le dépôt sur votre GitHub local :
Ouvrez Microsoft-Teams-Samples.
Sélectionnez Code.
Dans le menu déroulant, sélectionnez Ouvrir avec GitHub Desktop.
Sélectionnez Cloner.
Créer et inscrire votre bot dans le portail Azure AD
Pour créer et inscrire votre bot dans Microsoft Azure Active Directory (Azure AD), créez un tunnel à l’aide de ngrok, ajoutez un point de terminaison de messagerie, puis effectuez les étapes suivantes :
- Créez une ressource Azure Bot pour inscrire le bot auprès d’Azure Bot Service.
- Créez une clé secrète client pour activer l’authentification unique du bot.
- Ajoutez un canal Teams pour déployer le bot sur un canal Teams.
- Utilisez ngrok pour créer un tunnel vers les points de terminaison de votre serveur web.
- Ajoutez un point de terminaison de messagerie au tunnel ngrok que vous avez créé.
Pour créer une ressource Azure Bot
Accédez au Microsoft Portail Azure.
Sélectionnez Créer une ressource.
Dans la zone de recherche, entrez Azure Bot.
Ensuite, sélectionnez Entrée.
Sélectionnez Azure Bot.
Sélectionnez Créer.
Entrez le nom de handle de bot requis dans Handle de bot.
Sélectionnez votre abonnement dans la liste déroulante.
Sélectionnez votre groupe de ressources dans la liste déroulante.
Pour créer un groupe de ressources (sélectionnez Créer,> entrez le nom > de la ressource, sélectionnez OK). Sélectionnez l’emplacement requis dans la liste déroulante Nouvel emplacement du groupe de ressources . Pour plus d’informations, consultez Créer un groupe de ressources.
Dans la section ID d’application Microsoft, par défaut, l’option Créer un ID d’application Microsoft est sélectionnée.
Vous pouvez sélectionner Utiliser l’inscription d’application existante et entrer ID d’application existant et mot de passe d’application existant, ou sélectionner Créer un id d’application Microsoft.
Remarque
Vous ne pouvez pas créer plusieurs bots avec le même ID d’application Microsoft.
Sélectionnez Multilocataire pour Type d’application, puis sélectionnez Vérifier + créer.
Si la validation est réussie, sélectionnez Créer.
L’approvisionnement de votre service de bot prend quelques instants.
Sélectionnez Accéder à la ressource.
Un bot Azure est créé.
Pour créer une clé secrète client
Si vous avez créé un ID d’application Microsoft, procédez comme suit :
Dans le volet gauche, sélectionnez Configuration.
Conseil
Enregistrez l’ID d’application ou l’IDclient Microsoft pour référence ultérieure.
En regard de Microsoft ID d’application, sélectionnez Gérer.
Dans la section Clés secrètes client , sélectionnez Nouvelle clé secrète client.
La fenêtre Ajouter une clé secrète client s’affiche.
Entrez Description.
Sélectionnez Ajouter.
Dans la colonne Valeur , sélectionnez l’icône Copier dans le Presse-papiers .
Conseil
Enregistrez la valeur de clé secrète client ou le mot de passe d’application pour référence ultérieure.
Pour ajouter le canal Teams
Sélectionnez Accueil.
Sélectionnez votre bot dans Ressources récentes.
Sélectionnez Canaux dans le volet gauche, puis sélectionnez Microsoft icône Teams Teams
.
Cochez la case pour accepter les conditions d’utilisation du service.
Sélectionnez Accepter.
Sélectionnez Enregistrer.
Pour créer un tunnel pour le serveur web local
Utilisez ngrok pour créer un tunnel vers les points de terminaison HTTPS de votre serveur web en cours d’exécution localement. Exécutez la commande suivante dans ngrok :
ngrok http --host-header=localhost 3978
Conseil
Si vous rencontrez ERR_NGROK_4018, suivez les étapes fournies dans l’invite de commandes pour vous inscrire et authentifier ngrok. Exécutez ensuite la commande ngrok http --host-header=localhost 3978
.
Pour ajouter un point de terminaison de messagerie
À partir de ngrok, copiez l’URL HTTPS (https vers io).
Remarque
L’URL HTTPS dans votre ngrok est votre nom de domaine complet. est
WebAppDomain
un nom de domaine complet qui n’est pas inclushttps://
dans celui-ci.Dans Paramètres du bot Azure que vous avez créé, sélectionnez Configuration.
Dans Point de terminaison de messagerie, ajoutez l’URL HTTPS disponible à partir de ngrok et à la fin de l’URL, ajoutez /api/messages.
Sélectionnez Appliquer.
Vous avez correctement configuré un bot dans Azure Bot Service.
Mettre à jour l’inscription de l’application Azure AD
Accédez au Portail Azure.
Sélectionnez Azure Active Directory.
Dans le volet gauche, sélectionnez Inscriptions d’applications.
Sélectionnez votre bot.
Sélectionnez Exposer une API sous Gérer.
Sélectionnez Définir.
Définissez l’URI de l’ID d’application sous la forme .
api://{AppID}
Insérez la
WebAppDomain
valeur entreapi://
et/{AppID}
.api://2bb1****.ngrok.io/{AppID}
L’image suivante montre le nom de domaine :
Remarque
Si vous utilisez un service de tunneling tel que ngrok, veillez à mettre à jour la valeur chaque fois que votre sous-domaine ngrok change.
api://f631****.ngrok.io/92c11075-c629-4a1e-ab58-02b4fd4204c2
, oùf631****.ngrok.io
est le nouveau nom de sous-domaine ngrok.Sélectionnez Ajouter une étendue.
Dans le volet qui s’affiche, entrez
access_as_user
comme nom de l’étendue.Définissez Qui peut donner votre consentement ? sur
Admins and users
.Pour configurer les invites de consentement de l’administrateur et de l’utilisateur avec les valeurs appropriées pour
access_as_user
l’étendue, fournissez les informations suivantes dans les champs :Entrez
Teams can access the user’s profile
comme nom d’affichage Administration consentement.Entrez
Allows Teams to call the app’s web APIs as the current user
comme Administration description du consentement.Entrez
Teams can access the user profile and make requests on the user’s behalf
en tant que Nom d’affichage du consentement de l’utilisateur.Entrez
Enable Teams to call this app’s APIs with the same rights as the user
la description du consentement de l’utilisateur.
Vérifiez que State est défini comme Enabled.
Sélectionnez Ajouter une étendue à enregistrer.
Remarque
Le nom de l’étendue doit correspondre à l’URI d’ID d’application avec
/access_as_user
ajouté à la fin. Par exemple :api://2bb1****.ngrok.io/00000000-0000-0000-0000-000000000000/access_as_user
.Dans la section Applications clientes autorisées, identifiez les applications que vous souhaitez autoriser pour l'application Web de votre application.
Sélectionnez Ajouter une application cliente.
Entrez l’ID client :
1fec8e78-bce4-4aaf-ab1b-5451cc387264
pour l’application mobile ou de bureau Teams.Vous pouvez entrer l’ID client :
5e3ce6c0-2b1f-4285-8d4b-75ee78787346
pour l’application web Teams.Sélectionnez Étendues autorisées.
L’image suivante affiche les ID du client :
Dans le volet gauche, sélectionnez Autorisations d’API.
Remarque
Les utilisateurs doivent donner leur consentement à ces autorisations uniquement si l’application Azure AD est inscrite dans un autre locataire.
Sélectionnez Ajouter une autorisation.
Sélectionnez Microsoft Graph.
Sélectionnez Autorisations déléguées.
Ajoutez les autorisations suivantes :
- offline_access
- Openid
- profil
- User.Read
Sélectionnez Ajouter des autorisations.
Dans le volet gauche, sélectionnez Authentification pour définir un URI de redirection.
Remarque
Si une application ne reçoit pas le consentement de l’administrateur informatique, les utilisateurs doivent fournir le consentement pour la première fois qu’ils utilisent l’application.
Sélectionnez Ajouter une plateforme.
Sélectionnez Web.
Entrez l’URI de redirection de votre application en ajoutant
auth-end
au nom de domaine complet :https://2bb1****.ngrok.io/auth-end
Activez l’octroi implicite et les flux hybrides en cochant les cases suivantes :
- Jetons d’accès (utilisés pour les flux implicites)
- Jetons d’ID (utilisés pour les flux implicites et hybrides).
Sélectionnez Configurer.
Configurer les paramètres d’application et les fichiers manifestes
Accédez à appsettings.json dans le référentiel cloné.
Ouvrez appsettings.json dans la dernière version de Visual Studio et mettez à jour les informations suivantes :
- Définissez
"MicrosoftAppType"
sur Multi-locataire. - Définissez sur
"MicrosoftAppId"
l’ID d’application Microsoft de votre bot. - Définissez sur
"MicrosoftAppPassword"
la valeur de votre bot de l’ID de clé secrète client. - Laissez
"MicrosoftAppTenantId"
vide pour le bot MultiTenant. - Définissez
"BaseUrl"
sur le nom de domaine complet.
- Définissez
Accédez au fichier manifest.json dans le dépôt cloné.
Ouvrez
manifest.json
la dernière version de Visual Studio et apportez les modifications suivantes :- Remplacez par votre nom de
<<validDomains>>
domaine complet. - Remplacez toutes les occurrences de
<<Microsoft-App-ID>>
par l’ID d’application Microsoft de votre bot.
- Remplacez par votre nom de
Générer et exécuter le service
Pour générer et exécuter le service à l’aide de la dernière version de Visual Studio ou de la ligne de commande
Lancez la dernière version de Visual Studio.
Accédez à Fichier>Ouvrir le>projet/la solution.
Sélectionnez TeamsMessagingExtensionsAction.csproj fichier à partir du dossier csharp .
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!.
Ajouter l’application Extension de message d’action à Teams
Dans votre dépôt cloné, accédez à exemples>msgext-action>csharp>TeamsAppManifest.
Créez un .zip avec les fichiers suivants présents dans le dossier Manifeste :
- manifest.json
- icon-outline.png
- icon-color.png
Accédez à Microsoft Teams.
Sélectionner les applications.
Sélectionnez Gérer vos applications.
Sélectionnez Charger une application personnalisée.
Sélectionnez Ouvrir pour charger le fichier .zip que vous avez créé dans le dossier Manifeste .
Interagir avec l’application dans Teams
Sélectionnez Créer une commande de carte dans la liste des 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épassement.
Accédez à Plus d’actions.
Sélectionnez Partager le message.
Si vous souhaitez inclure une image, cochez la case Inclure l’image dans la carte héros , puis sélectionnez Envoyer.
Relever le défi
Tu as trouvé quelque chose comme ça ?
Félicitations !
Vous avez terminé le tutoriel pour bien démarrer avec une application Extension de message d’action !
Vous avez un défi avec cette section ? Si c'est le cas, faites-nous part de vos commentaires pour que nous puissions l'améliorer.
Commentaires
Envoyer et afficher des commentaires pour