Bestandsdeling inschakelen met behulp van ui-bibliotheek in Teams Interoperability Chat - An Azure Communication Services tutorial

Artikel
07/16/2024

In een Teams Interoperability Chat ('Interop Chat') kunnen we het delen van bestanden tussen eindgebruikers van Azure Communication Services en Teams-gebruikers inschakelen. Interop Chat verschilt van de Azure Communication Services-chat. Als u het delen van bestanden in een Azure Communication Services-chat wilt inschakelen, raadpleegt u Bestandsdeling toevoegen met ui-bibliotheek in Azure Communication Services Chat. Momenteel kan de eindgebruiker van Azure Communication Services alleen bestandsbijlagen ontvangen van de Teams-gebruiker. Raadpleeg gebruiksvoorbeelden voor ui-bibliotheken voor meer informatie.

Belangrijk

De functie voor het delen van bestanden wordt geleverd met callWithChat Composite zonder extra instellingen.

Code downloaden

Open de code voor deze zelfstudie op GitHub.

Vereisten

Een Azure-account met een actief abonnement. Zie Gratis een account maken voor meer informatie.
Visual Studio Code op een van de ondersteunde platforms.
Node.js, Active LTS- en Maintenance LTS-versies. Gebruik de opdracht node --version om uw versie te controleren.
Een actieve Communication Services-resource en verbindingsreeks. Een Communication Services-resource maken.
Gebruik de UI-bibliotheek versie 1.17.0 of de nieuwste versie.
Zorg ervoor dat er een Teams-vergadering is gemaakt en dat de koppeling naar de vergadering gereed is.
Vertrouwd zijn met hoe ChatWithChat Composite werkt.

Achtergrond

Allereerst moeten we begrijpen dat Teams Interop Chat momenteel deel uitmaakt van een Teams-vergadering. Wanneer de Teams-gebruiker een onlinevergadering maakt, wordt er een chatgesprek gemaakt en gekoppeld aan de vergadering. Als u wilt dat de eindgebruiker van Azure Communication Services deelneemt aan de chat en berichten gaat verzenden/ontvangen, moet een deelnemer aan de vergadering (een Teams-gebruiker) deze eerst aan het gesprek toelaten. Anders hebben ze geen toegang tot de chat.

Zodra de eindgebruiker van Azure Communication Services is toegelaten tot het gesprek, kan deze beginnen met chatten met andere deelnemers aan het gesprek. In deze zelfstudie bekijken we hoe inlineafbeelding werkt in De chatfunctie van Interop.

Overzicht

Net als bij het toevoegen van ondersteuning voor inline-installatiekopieën aan de UI-bibliotheek hebben we een CallWithChat samengestelde bibliotheek nodig. Laten we het basisvoorbeeld van de storybookpagina volgen om een ChatWithChat Composite te maken.

Vanuit de voorbeeldcode moet CallWithChatExamplePropshet codefragment worden gedefinieerd als het volgende codefragment:

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

Als u de samengestelde vergaderingschat wilt kunnen starten, moeten we dit doorgeven TeamsMeetingLinkLocator of TeamsMeetingIdLocator, wat er als volgt uitziet:

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

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

Dit is alles wat u nodig hebt en er is geen andere installatie nodig om de eindgebruiker van Azure Communication Services in staat te stellen bestandsbijlagen van de Teams-gebruiker te ontvangen.

Machtigingen

Wanneer het bestand wordt gedeeld vanuit een Teams-client, heeft de Teams-gebruiker opties om de bestandsmachtigingen in te stellen op:

"Iedereen"
"Personen in uw organisatie"
"Personen die momenteel in deze chat zijn"
"Personen met bestaande toegang"
"Personen die u kiest"

De UI-bibliotheek ondersteunt momenteel alleen 'Iedereen' en 'Personen die u kiest' (met e-mailadres) en alle andere machtigingen worden niet ondersteund. Als teams-gebruikers een bestand met niet-ondersteunde machtigingen hebben verzonden, wordt de eindgebruiker van Azure Communication Services mogelijk gevraagd om een aanmeldingspagina of wordt de toegang geweigerd wanneer hij op de bestandsbijlage in de chatthread klikt.

Schermopname van een Teams-client met bestandsmachtigingen.

Bovendien kan de tenantbeheerder van de Teams-gebruiker beperkingen opleggen voor het delen van bestanden, waaronder het uitschakelen van bepaalde bestandsmachtigingen of het uitschakelen van de optie voor het delen van bestanden.

De code uitvoeren

Laten we het volgende uitvoeren npm run start : u moet toegang hebben tot onze voorbeeld-app via localhost:3000 de volgende schermopname:

Schermopname van een ui-bibliotheek van Azure Communication Services.

Klik gewoon op de chatknop onderaan om het chatvenster weer te geven en als de Teams-gebruiker een aantal bestanden verzendt, ziet u iets als de volgende schermafbeelding:

Schermopname van een Teams-client die één bestand verzendt.

Schermopname van de UI-bibliotheek van Azure Communication Services die één bestand ontvangt.

En als de gebruiker nu op de bestandsbijlagekaart klikt, wordt er een nieuw tabblad geopend zoals hieronder, waar de gebruiker het bestand kan downloaden:

Schermopname van een Sharepoint-webpagina met de bestandsinhoud.

Volgende stappen

Controleer de rest van de UI-bibliotheek

U wilt mogelijk ook:

Delen via