Aktivera fildelning med hjälp av användargränssnittsbiblioteket i Teams Interoperability Chat - An Azure Communication Services tutorial

Artikel
07/16/2024

I en Teams Interoperability Chat ("Interop Chat" kan vi aktivera fildelning mellan Azure Communication Services-slutanvändare och Teams-användare. Observera att Interop Chat skiljer sig från Azure Communication Services Chat. Om du vill aktivera fildelning i en Azure Communication Services-chatt läser du Lägg till fildelning med användargränssnittsbiblioteket i Azure Communication Services Chat. För närvarande kan Slutanvändaren av Azure Communication Services bara ta emot bifogade filer från Teams-användaren. Mer information finns i Användningsfall för användargränssnittsbibliotek.

Viktigt!

Fildelningsfunktionen levereras med CallWithChat Composite utan ytterligare installationer.

Ladda ned kod

Få åtkomst till koden för den här självstudien på GitHub.

Förutsättningar

Ett Azure-konto med en aktiv prenumeration. Mer information finns i Skapa ett konto kostnadsfritt.
Visual Studio Code på någon av plattformarna som stöds.
Node.js, Active LTS- och Maintenance LTS-versioner. node --version Använd kommandot för att kontrollera din version.
En aktiv Communication Services-resurs och anslutningssträng. Skapa en Communication Services-resurs.
Använda användargränssnittsbiblioteket version 1.17.0 eller den senaste.
Skapa ett Teams-möte och möteslänken klar.
Var bekant med hur ChatWithChat Composite fungerar.

Bakgrund

Först och främst måste vi förstå att Teams Interop Chat måste ingå i ett Teams-möte för närvarande. När Teams-användaren skapar ett onlinemöte skapas en chatttråd och associeras med mötet. För att göra det möjligt för Azure Communication Services-slutanvändaren att ansluta till chatten och börja skicka/ta emot meddelanden skulle en mötesdeltagare (en Teams-användare) behöva ta emot dem till samtalet först. Annars har de inte åtkomst till chatten.

När Azure Communication Services-slutanvändaren har antagits till samtalet kan de börja chatta med andra deltagare i samtalet. I den här självstudien tittar vi på hur infogad avbildning fungerar i Interop-chatt.

Översikt

På samma sätt som vi lägger till stöd för infogad bild i användargränssnittsbiblioteket behöver vi en CallWithChat sammansatt. Låt oss följa det grundläggande exemplet från storybook-sidan för att skapa en ChatWithChat Composite.

Från exempelkoden behöver CallWithChatExamplePropsden , som definieras som följande kodfragment:

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;
};

För att kunna starta sammansatt för möteschatt måste vi skicka TeamsMeetingLinkLocator eller TeamsMeetingIdLocator, vilket ser ut så här:

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

Eller

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

Detta är allt du behöver – och det finns ingen annan konfiguration som krävs för att göra det möjligt för Azure Communication Services-slutanvändaren att ta emot filbilagor från Teams-användaren!

Behörigheter

När filen delas från en Teams-klient har Teams-användaren alternativ för att ange filbehörigheterna till:

"Vem som helst"
"Personer i din organisation"
"Personer som för närvarande är i den här chatten"
"Personer med befintlig åtkomst"
"Personer du väljer"

Mer specifikt stöder användargränssnittsbiblioteket för närvarande endast "Alla" och "Personer du väljer" (med e-postadress) och alla andra behörigheter stöds inte. Om Teams-användaren har skickat en fil med behörigheter som inte stöds kan slutanvändaren av Azure Communication Services uppmanas till en inloggningssida eller nekas åtkomst när de klickar på den bifogade filen i chatttråden.

Skärmbild av en Teams-klient som visar filbehörigheter.

Dessutom kan Teams-användarens klientadministratör införa begränsningar för fildelning, inklusive att inaktivera vissa filbehörigheter eller inaktivera fildelningsalternativet tillsammans.

Kör koden

Nu ska vi köra npm run start så att du kan komma åt vår exempelapp via localhost:3000 följande skärmbild:

Skärmbild av ett UI-bibliotek för Azure Communication Services.

Klicka bara på chattknappen längst ned för att visa chattpanelen och om Teams-användare skickar några filer bör du se något som liknar följande skärmbild:

Skärmbild av en Teams-klient som skickar en fil.