Teams の相互運用性チャットで UI ライブラリを使用してファイル共有を有効にする - An Azure Communication Services tutorial

[アーティクル]
12/09/2023

重要

Azure Communication Services のこの機能は、現在プレビュー段階にあります。

プレビューの API と SDK は、サービスレベルアグリーメントなしに提供されます。運用環境のワークロードには使用しないことをお勧めします。一部の機能はサポート対象ではなく、機能が制限されることがあります。

詳細については、「Microsoft Azure プレビューの追加利用規約」を確認してください。

Teams の相互運用性チャット ("相互運用チャット") では、Azure Communication Services のエンドユーザーと Teams ユーザーの間でファイルを共有できます。相互運用チャットは、Azure Communication Services Chat とは異なります。 Azure Communication Services Chat でファイルの共有を有効にする場合は、「Azure Communication Services Chat で UI ライブラリを使用してファイル共有を追加する」を参照してください。現在は、Azure Communication Services エンドユーザーのみが Teams ユーザーからの添付ファイルを受信できます。詳細については、「UI ライブラリのユースケース」を参照してください。

重要

ファイルの共有機能には、追加のセットアップが不要な CallWithChat Composite が付属しています。

コードをダウンロードする

このチュートリアルのコードには GitHub でアクセスしてください。

前提条件

アクティブなサブスクリプションが含まれる Azure アカウント。詳細については、アカウントの無料作成に関するページを参照してください。
サポートされているプラットフォームのいずれかにインストールされた Visual Studio Code。
Node.js、アクティブ LTS バージョンとメンテナンス LTS バージョン。 node --version コマンドを使用して、現在のバージョンを確認してください。
アクティブな Communication Services リソースと接続文字列。 Communication Services リソースを作成します。
UI ライブラリバージョン 1.7.0-beta.1 または最新のものを使用。
Teams 会議を作成し、会議リンクを準備する。
ChatWithChat Composite のしくみを理解していること。

背景

まず、Teams 相互運用チャットが現在、Teams 会議の一部であることを理解する必要があります。 Teams ユーザーがオンライン会議を作成すると、チャットスレッドが作成され、その会議に関連付けられます。 Azure Communication Services エンドユーザーがチャットに参加してメッセージの送受信を開始できるようにするには、会議参加者 (Teams ユーザー) が最初に通話を許可する必要があります。それ以外の場合は、チャットにアクセスできません。

Azure Communication Services エンドユーザーは通話が許可されると、通話中に他の参加者とチャットを開始できるようになります。このチュートリアルでは、相互運用チャットでインラインイメージがどのように機能するかを確認します。

概要

インラインイメージのサポートを UI ライブラリに追加する方法と同様に、CallWithChat Composite を作成する必要があります。ストーリーブックページの基本的な例に従って、ChatWithChat Composite を作成してみましょう。

サンプルコードでは、次のコードスニペットとして定義されている 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 Communication Services エンドユーザーが Teams ユーザーから添付ファイルを受信できるようにするために必要となる他の設定はありません。

アクセス許可

Teams クライアントでファイルを共有する場合、Teams ユーザーはファイルのアクセス許可を次のように設定できます。

"すべてのユーザー"
"組織内のユーザー"
"現在このチャットに参加しているユーザー"
"既存のアクセス許可を持つユーザー"
"選択したユーザー"

具体的には、UI ライブラリでは現在 "すべてのユーザー" と "選択したユーザー" (メールアドレスを含める) のみをサポートしており、その他のすべてのアクセス許可はサポートされていません。 Teams ユーザーがサポートされていないアクセス許可を使用してファイルを送信した場合、Azure Communication Services エンドユーザーがチャットスレッドで添付ファイルをクリックしたときに、ログインページの入力を求められたり、アクセスが拒否されたりする可能性があります。

ファイルのアクセス許可が一覧表示された Teams クライアントのスクリーンショット。