Share via

在 Teams 互操作性聊天中使用 UI 連結庫啟用檔案共用

  • 文章

重要

此 Azure 通訊服務功能目前處於預覽狀態。

提供的預覽 API 並無服務等級協定。 建議您不要將其用於生產工作負載。 有些功能可能不受支援，或是在功能上有所限制。

如需詳細資訊，請參閱 Microsoft Azure 預覽版增補使用規定。

在 Teams 互操作性聊天 （“Interop Chat”），我們可以在 Azure 通訊服務 終端使用者與 Teams 使用者之間啟用檔案共用。 請注意，Interop Chat 與 Azure 通訊服務 Chat 不同。 如果您想要在 Azure 通訊服務 聊天中啟用檔案共用，請參閱在 Azure 通訊服務 聊天中新增與 UI 連結庫的檔案共用。 目前，Azure 通訊服務終端使用者只能從 Teams 使用者接收檔案附件。 請參閱 UI 連結庫使用案例 以深入瞭解。

重要

檔案共用功能隨附 CallWithChat 複合版，不需要額外的設定。

下載程序代碼

在 GitHub 上存取本教學課程的程式代碼。

必要條件

  • 具有有效訂用帳戶的 Azure 帳戶。 如需詳細資訊，請參閱 免費建立帳戶。
  • 其中一個支援平台上的 Visual Studio Code。
  • Node.js、作用中 LTS 和維護 LTS 版本。 請使用 node --version 命令來檢查您的版本。
  • 作用中的通訊服務資源和 連接字串。 建立通訊服務資源。
  • 使用UI連結庫 1.7.0-beta.1 版或最新版本。
  • 建立 Teams 會議並準備好會議連結。
  • 熟悉 ChatWithChat 複合的運作方式。

背景

首先，我們需要瞭解Teams Interop Chat 目前必須參與Teams會議的一部分。 當 Teams 使用者建立線上會議時，將會建立與會議相關聯的聊天對話。 若要啟用加入聊天並開始傳送/接收訊息的 Azure 通訊服務 終端使用者，會議參與者（Teams 使用者）必須先接受通話。 否則，他們無法存取聊天。

一旦 Azure 通訊服務 終端使用者進入通話，他們就能夠開始與其他參與者在通話中聊天。 在本教學課程中，我們會查看內嵌影像在Interop聊天中的運作方式。

概觀

類似於我們將 內嵌影像支援 新增至UI連結庫的方式，我們需要 CallWithChat 建立複合。 讓我們遵循腳本頁面的基本範例來建立 ChatWithChat 複合。

從範例程式代碼中，它需要 CallWithChatExampleProps，其定義為下列代碼段：

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

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

若要能夠啟動複合會議聊天，我們需要通過 TeamsMeetingLinkLocator，如下所示：

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

這是您所需要的一切- 而且不需要其他設定，即可讓 Azure 通訊服務 終端使用者從 Teams 使用者接收檔案附件！

權限

從 Teams 用戶端共享檔案時，Teams 使用者可以選擇將檔案權限設定為：

  • “任何人”
  • 「組織中 人員」
  • 「目前在此聊天中 人員」
  • 「具有現有存取權的 人員」
  • “人員 您選擇的”

具體來說，UI 連結庫目前僅支援「任何人」和「您選擇的 人員」（含電子郵件位址），且不支援所有其他許可權。 如果 Teams 使用者傳送了具有不支援許可權的檔案，Azure 通訊服務 當使用者按兩下聊天對話中的檔案附件時，可能會提示使用者登入頁面或拒絕存取權。

Teams 用戶端列出檔案許可權的螢幕快照。

此外，Teams 使用者的租用戶系統管理員可能會對檔案共用施加限制，包括停用某些檔案許可權或停用檔案共享選項。

執行程式碼

讓我們執行 npm run start ，您應該能夠透過 localhost:3000 下列螢幕快照來存取我們的範例應用程式：

Azure 通訊服務 UI 連結庫的螢幕快照。

只要按下底部的聊天按鈕以顯示聊天面板，現在如果 Teams 使用者傳送一些檔案，您應該會看到類似下列螢幕快照的內容：

Teams 用戶端傳送一個檔案的螢幕快照。

Azure 通訊服務 UI 連結庫接收一個檔案的螢幕快照。

現在如果使用者按下檔案附件卡片，則會開啟新的索引標籤，如下所示，使用者可以下載檔案：

顯示檔案內容的 Sharepoint 網頁螢幕快照。

下一步

檢查 UI 連結庫的其餘部分

您可能也想要：