Partager via

Ajouter le partage de fichiers à l’aide de la bibliothèque d’interface utilisateur dans la conversation d’interopérabilité Teams

  • Article

Dans une conversation d’interopérabilité Teams (« chat d’interop »), nous pouvons activer le partage de fichiers entre les utilisateurs finaux d’Azure Communication Services et les utilisateurs Teams. Notez que la conversation d’interopérabilité est différente de l’Azure Communication Services Chat. Si vous souhaitez activer le partage de fichiers dans Azure Communication Services Chat, consultez Ajouter le partage de fichiers avec la bibliothèque d’interface utilisateur dans Azure Communication Services Chat. Actuellement, l’utilisateur final d’Azure Communication Services peut uniquement recevoir des pièces jointes de fichiers d’un utilisateur Teams. Pour en savoir plus, consultez Cas d’utilisation de la bibliothèque d’interface utilisateur.

Important

La fonctionnalité de partage de fichiers est fournie avec le composite CallWithChat sans configuration supplémentaire.

Télécharger le code

Accédez au code de ce didacticiel sur GitHub.

Prérequis

Arrière-plan

Tout d’abord, nous devons comprendre que le chat d’interop Teams doit faire actuellement partie d’une réunion Teams. Lorsque l’utilisateur Teams crée une réunion en ligne, un fil de conversation est créé et associé à la réunion. Pour permettre à l’utilisateur final Azure Communication Services de rejoindre la conversation et de commencer à envoyer ou à recevoir des messages, un participant à la réunion (utilisateur Teams) doit d’abord l’admettre dans l’appel. Sinon, il n’aura pas accès à la conversation.

Une fois que l’utilisateur final d’Azure Communication Services est admis dans l’appel, il peut commencer à discuter avec d’autres participants de l’appel. Dans ce didacticiel, nous allons découvrir le fonctionnement de l’image en ligne dans le chat d’interop.

Vue d’ensemble

Comme pour ajouter la prise en charge des images en ligne à la bibliothèque d’interface utilisateur, nous avons besoin de créer un composite CallWithChat. Suivons l’exemple de base de la page storybook pour créer un composite ChatWithChat.

À partir de l’exemple de code, il a besoin de CallWithChatExampleProps, qui est défini comme l’extrait de code suivant :

export type CallWithChatExampleProps = {
  // Props needed for the construction of the CallWithChatAdapter
  userId: CommunicationUserIdentifier;
  token: string;
  displayName: string;
  endpointUrl: string;
  locator: TeamsMeetingLinkLocator | TeamsMeetingIdLocator | CallAndChatLocator;

  // Props to customize the CallWithChatComposite experience
  fluentTheme?: PartialTheme | Theme;
  compositeOptions?: CallWithChatCompositeOptions;
  callInvitationURL?: string;
};

Pour pouvoir démarrer le composite pour la conversation de la réunion, nous devons passer TeamsMeetingLinkLocator ou TeamsMeetingIdLocator. Ce qui ressemble à ceci :

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

Or

{ "meetingId": "<TEAMS_MEETING_ID>", "passcode": "<TEAMS_MEETING_PASSCODE>"}

C’est tout ce dont vous avez besoin : aucune autre configuration n’est nécessaire pour permettre à l’utilisateur final d’Azure Communication Services de recevoir des pièces jointes de fichiers d’un utilisateur Teams.

Autorisations

Lorsque le fichier est partagé à partir d’un client Teams, l’utilisateur Teams dispose d’options pour définir les autorisations du fichier comme suit :

  • « Tout le monde.»
  • « Utilisateurs de votre organisation »
  • « Utilisateurs actuellement dans cette conversation »
  • « Utilisateurs qui ont déjà un accès »
  • « Utilisateurs que vous avez choisis »

Plus précisément, la bibliothèque d’interface utilisateur prend actuellement uniquement en charge « Tout le monde » et « Utilisateurs que vous avez choisis » (avec l’adresse e-mail) et toutes les autres autorisations ne sont pas prises en charge. Si l’utilisateur Teams a envoyé un fichier avec des autorisations non prises en charge, l’utilisateur final d’Azure Communication Services peut être invité à accéder à une page de connexion ou refuser l’accès lorsqu’il clique sur la pièce jointe du fichier dans le fil de la conversation.

Capture d’écran d’un client Teams répertoriant les autorisations de fichier.

En outre, l’administrateur client de l’utilisateur Teams peut imposer des restrictions sur le partage de fichiers, notamment la désactivation de certaines autorisations de fichiers ou la désactivation de l’option de partage de fichiers.

Exécuter le code

Exécutons npm run start, vous devriez pouvoir accéder à notre exemple d’application via localhost:3000, comme dans la capture d’écran suivante :

Capture d’écran d’une bibliothèque d’interface utilisateur Azure Communication Services.

Cliquez simplement sur le bouton de conversation situé en bas pour afficher le panneau de conversation. Maintenant, si l’utilisateur Teams envoie des fichiers, vous devriez voir quelque chose comme ceci :

Capture d’écran d’un client Teams envoyant un fichier.

Capture d’écran de la bibliothèque d’interface utilisateur Azure Communication Services recevant un fichier.

Maintenant, si l’utilisateur clique sur la carte de pièce jointe, un nouvel onglet s’ouvre, où l’utilisateur peut télécharger le fichier :

Capture d’écran d’une page web Sharepoint qui montre le contenu du fichier.

Étapes suivantes

Vérifier le reste de la bibliothèque d’interface utilisateur

Vous souhaiterez peut-être également :