Créer une application de signature de document en réunion - Teams

La signature de réunion est un exemple d’application Microsoft Teams qui permet aux utilisateurs de connecter des documents dans des scénarios en temps réel. Il offre une expérience améliorée en permettant aux utilisateurs d’examiner et de connecter des documents dans une seule session pendant les réunions. Cet exemple permet aux utilisateurs de signer électroniquement des documents avec leur identité de locataire actuelle. Les utilisateurs peuvent signer les documents suivants pendant les réunions :

Contrats d’achat.
Bons de commande.

Le modèle s’applique également à d’autres scénarios, tels que l’examen et l’approbation d’exemples de code et de documents collaboratifs. Les utilisateurs peuvent personnaliser pour incorporer d’autres types de signatures :

Signatures manuscrites.
Signatures basées sur des certificats.

Ce guide pas à pas vous aide à créer une application de signature de documents en réunion. Vous verrez la sortie suivante une fois que vous aurez terminé ce guide :

Sortie finale

Configuration requise

11 minutes restantes

Veillez à installer les outils suivants pour l’environnement de développement :

Dernière version de ngrok ou toute solution de tunneling équivalente.

Remarque

Après avoir téléchargé ngrok, inscrivez-vous et installez authtoken.
Dernière version de Visual Studio.
Dernière version of.NET Kit de développement logiciel (SDK) Core.

Vérifiez que vous avez créé les comptes suivants pour configurer votre environnement de développement :

Compte Microsoft Teams .

Conseil

Vérifiez que le compte Microsoft Teams n’est pas un compte invité.
Compte de développeur Microsoft 365. Si ce n’est pas le cas, vous devez avoir accès à un compte Teams disposant des autorisations appropriées pour installer une application.

Configurer votre locataire de développement Teams

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

Rechercher l’option de chargement indépendant

Après avoir créé l’application, vous devez charger votre application dans Teams sans la distribuer. C’est ce que l’on appelle le chargement indépendant. Connectez-vous à votre compte Microsoft 365 pour afficher cette option.

Remarque

Le chargement indépendant est nécessaire pour l’aperçu et le test des applications dans l’environnement local Teams. Activez le chargement indépendant pour afficher un aperçu et tester votre application dans Teams localement.

Avez-vous déjà un locataire et disposez-vous d’un accès administrateur ? Vérifions si vous le faites vraiment !

Pour vérifier le chargement indépendant des applications dans Teams :

Dans le client Teams, sélectionnez Stocker.
Sélectionnez Gérer vos applications.
Sélectionnez Publier une application.
Recherchez l’option Charger une application personnalisée. Si vous voyez l’option , le chargement indépendant des applications est activé.

Remarque

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

Télécharger l’exemple de code

Vous devez utiliser l’exemple de code de signature de document en réunion pour ce guide pas à pas. Pour utiliser l’exemple de code, clonez le dépôt à partir de GitHub.

Créer et inscrire votre application

10 minutes restantes

Les étapes suivantes vous aident à créer et à inscrire votre application dans Portail Azure.

Créez une inscription d’application dans Azure AD.
Utilisez ngrok pour créer un tunnel.

Créer une inscription d’application Azure AD

Inscrivez une nouvelle application dans Azure AD et configurez la location et la plateforme de l’application. Vous allez générer un nouvel ID d’application qui sera mis à jour ultérieurement dans votre fichier manifeste d’application Teams.

Pour inscrire une nouvelle application dans Azure AD

Ouvrez le Portail Azure sur votre navigateur web. La page du portail Microsoft Azure AD s’ouvre.
Sélectionnez l’icône Inscriptions d'applications.

La page Inscriptions d'applications s’affiche.
Sélectionnez l’icône + Nouvelle inscription.

La page Inscrire une application s’affiche.
Entrez le nom de l’application que vous souhaitez afficher à l’utilisateur de l’application. Vous pouvez modifier ce nom ultérieurement si vous le souhaitez.
Sélectionnez Multilocataire comme type de compte d’utilisateur pouvant accéder à votre application.
Sélectionnez Inscrire. Un message s’affiche sur le navigateur indiquant que l’application a été créée.

La page avec l’ID d’application et d’autres configurations s’affiche.
Notez et enregistrez l’ID d’application à partir de l’ID d’application (client). Vous en aurez besoin pour mettre à jour le manifeste de l’application Teams ultérieurement.

Votre application native est désormais inscrite auprès d'Azure AD. Vous devez maintenant disposer de l’ID d’application pour votre application.

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 https://localhost:44326 -host-header=localhost:44326

Les informations du tunnel ngrok s’affichent.

URL HTTPS ngrok

Mettre à jour l’inscription de l’application Azure AD

5 minutes restantes

Accédez au Portail Azure.
Sélectionnez Azure Active Directory.
Dans le volet de navigation de gauche, sélectionnez Inscriptions d’applications.
Sélectionnez votre application.
Sélectionnez Exposer une API sous Gérer.
Sélectionnez Définir.
Définissez l’URI de l’ID d’application sous la forme et api://your ngrok/AppID sélectionnez Enregistrer.

L’image suivante montre l’URI de l’ID d’application :

Remarque

Si vous utilisez un service de tunneling tel que ngrok, veillez à mettre à jour la valeur chaque fois que votre sous-domaine ngrok change. For example: 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.

La section Ajouter une étendue s’affiche.
Entrez les détails suivants pour ajouter une étendue.
1. Entrez « access_as_user » comme nom de l’étendue.
  
  Remarque
  
  Le nom de l’étendue doit correspondre à l’URI d’ID d’application avec /access_as_user ajouté à la fin.
2. Donnez la valeur Administrateurs et utilisateurs à Qui peut donner son consentement ? .
3. Configurez les invites de consentement de l’administrateur et de l’utilisateur avec les valeurs appropriées pour l’étendue access_as_user :
  - Entrez « Teams peut accéder au profil de l’utilisateur » comme Administration nom d’affichage du consentement.
  - Entrez « Autorise Teams à appeler les API web de l’application en tant qu’utilisateur actuel » comme Administration description du consentement.
  - Entrez « Teams peut accéder au profil utilisateur et effectuer des demandes au nom de l’utilisateur » comme nom d’affichage du consentement de l’utilisateur.
  - Entrez « Autoriser Teams à appeler les API de cette application avec les mêmes droits que l’utilisateur » comme description du consentement de l’utilisateur.
4. Vérifiez que State est défini comme Enabled.
5. Sélectionnez Ajouter une étendue pour enregistrer les détails de l’étendue.
  
  L’étendue de votre application est configurée.
Sélectionnez Ajouter une application cliente dans la section Applications clientes autorisées .

La section Ajouter une application cliente s’affiche .
Entrez les détails de l’application cliente :
1. Entrez l’ID client de l’application que vous souhaitez autoriser. Il s’agit de l’ID d’application de l’application cliente que vous souhaitez autoriser. Utilisez les ID suivants pour les applications clientes pour les autoriser :
  
  ID du client Pour l’autorisation
  
  1fec8e78-bce4-4aaf-ab1b-5451cc387264 Application de bureau ou mobile Teams
  
  5e3ce6c0-2b1f-4285-8d4b-75ee78787346 Application Teams web
  
  Remarque
  
  Vous devez ajouter une autorisation pour le bureau et l’application web séparément.
2. Sélectionnez Étendues autorisées pour déterminer le type de jeton retourné par le service.
L’image suivante affiche l’ID client :

ID du client	Pour l’autorisation
`1fec8e78-bce4-4aaf-ab1b-5451cc387264`	Application de bureau ou mobile Teams
`5e3ce6c0-2b1f-4285-8d4b-75ee78787346`	Application Teams web

Configurer les autorisations Graph

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.
Sélectionnez les autorisations graph :
1. Dans la liste des autorisations, sélectionnez les éléments suivants :
  - email
  - offline_access
  - Openid
  - profil
  - User.Read
  - User.ReadBasic.All
2. Sélectionnez Ajouter des autorisations.

Pour définir l’URI de redirection pour la configuration de la plateforme

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 la première fois qu’ils utilisent une application.
Sélectionnez Ajouter une plateforme.

La section Configurer la plateforme s’affiche.
Sélectionnez Web.
Configurez les détails de la plateforme :
1. Entrez l’URI de redirection de votre application en ajoutant auth-end au nom de domaine complet :
  https://your ngrok/auth-end
2. Activez l’octroi implicite et les flux hybrides en cochant les cases suivantes :
  - Jetons d’ID
  - Jetons d’accès
3. Sélectionnez Configurer.

Vous avez terminé l’inscription et la configuration des applications Azure AD.v

Configurer les paramètres d’application et les fichiers manifestes

4 minutes restantes

Une fois que vous avez configuré l’application Azure AD, vous devez configurer les détails de l’application dans les paramètres de l’application et le fichier manifeste.

Pour configurer les paramètres de l’application

Accédez au dossier MeetingSigning.Web dans le dépôt cloné, puis ouvrez appsettings.json dans Visual Studio.
Mettez à jour les informations suivantes dans appsettings.json :
- Remplacez toutes les occurrences de par <<aad-id>> l’ID d’application Microsoft de votre application.
- Remplacez toutes les occurrences de <<client secret>> par la clé secrète client de votre application.
Enregistrez le fichier.

Pour configurer le fichier manifeste de l’application

Accédez au dossier Manifeste dans le dépôt cloné et ouvrez manifest.json dans Visual Studio.
Apportez les modifications suivantes dans manifest.json :
- Remplacez toutes les occurrences de par votre nom de <<deployment-url> domaine ngrok complet.
- Remplacez toutes les occurrences de par <<aad-id>>l’ID d’application Microsoft de votre application.
Enregistrez le fichier.

Vous avez configuré les paramètres de l’application et les détails du manifeste de l’application.

Générer et exécuter le service

3 minutes restantes

Pour générer et exécuter le service à l’aide de Visual Studio

Ouvrez Visual Studio.
Accédez à Fichier>Ouvrir le>projet/la solution.
Sélectionnez le fichier solution dans dossier source .

La solution s’ouvre dans Visual Studio.
Appuyez sur F5 pour exécuter le projet.
Sélectionnez Oui si la boîte de dialogue suivante s’affiche :

La page web suivante s’ouvre.

Vous êtes maintenant prêt à charger une version test de l’application dans le client Teams.

Ajouter l’application Signature de réunion à Teams

2 minutes restantes

Dans votre dépôt cloné, accédez à Source > MeetingSigning.Web > Manifest.
Créez un package d’application (un fichier .zip) avec les fichiers suivants présents dans le dossier Manifeste :
- manifest.json
- icon-outline.png
- icon-color.png
Créez une réunion dans Teams avec quelques présentateurs et participants.
Une fois la réunion démarrée, sélectionnez Applications>Gérer les applications.
Sélectionnez Charger une application personnalisée.
Sélectionnez le package d’application de signature de réunion que vous avez créé, puis sélectionnez Ouvrir.
Sélectionnez Ajouter pour installer l’application dans la réunion.

À présent, l’application de signature de réunion est ajoutée à la réunion.
Retour à la page des détails de la réunion, puis sélectionnez ApplicationDe signature de réuniondes applications>.

La fenêtre Signature de réunion s’affiche.
Sélectionnez Enregistrer.

L’application Signature de réunion est désormais visible dans la fenêtre de réunion.
Accédez à la conversation de réunion dans Teams, sélectionnez l’onglet Signature de réunion, puis sélectionnez Créer des documents.

La fenêtre Signature de réunion s’affiche.
Entrez les détails suivants dans la fenêtre Signature de réunion.
1. Sélectionnez les documents requis que vous souhaitez consulter.
2. Entrez les visionneuses des documents.
3. Entrez les signataires des documents.
4. Sélectionnez Terminé.
Sélectionnez Consentement pour autoriser l’application à accéder aux données à partir de votre compte.

La fenêtre du navigateur s’affiche.
Connectez-vous à Teams avec vos informations d’identification, puis sélectionnez Se connecter.

Dans Teams, vous recevez une notification pour la création réussie du document.
Retour à la réunion Teams, et vous pouvez maintenant afficher les documents dans le panneau latéral.
Sélectionnez Partager en réunion pour partager le document dans la réunion.
Sélectionnez Cliquer pour signer.

La fenêtre Signature de réunion s’affiche
Sélectionnez Terminé.