Teamsアプリ作成時に困ったこと

by 宍倉孝

はじめに

Teamsのメッセージを保存して閲覧するアプリを作成しました。開発中に学んだことをナレッジとして残しておきます。

環境

  • Microsoft Graph REST API v1.0
  • Microsoft Azure

■ AppService から AzureFunctions へのアクセス許可

AppService でホストしたメッセージ拡張機能が Azure Functions でホストした関数を呼び出す際、認証とアクセストークンが必要になりました。

今回は AzureマネージドID で AppService を認証して、Azure Functions にアクセスしました。

  • ・Azure portalでの作業

AppServiceに対してシステム割り当てマネージドID、またはユーザー割り当てマネージドIDを設定します。マネージドIDのクライアントIDを控えておきます。

Azure Functions > 認証 > ID プロバイダーの作成/編集 の クライアントアプリケーションの要件 を ”特定のクライアントアプリケーションからの要求を許可する” に設定して、許可されたクライアント アプリケーション にマネージドIDのクライアントIDを追加します。

  • ・アプリソース

ManagedIdentityCredential クラスを使用してトークンを取得します。取得したトークンをヘッダーに設定してAzure Functionsにリクエストします。

import { ManagedIdentityCredential } from "@azure/identity";
.....
const credential = new ManagedIdentityCredential({マネージドIDのクライアントID}); // ユーザー割り当ての場合は引数にマネージドIDのクライアントIDを渡す
const tokenResponse = await credential.getToken("{AzureFunctionsのIdPのアプリケーションID のURI}/.default ");
const token = tokenResponse.token;

.....
"Authorization": `Bearer ${token}`
.....

参考：ManagedIdentityCredential クラス

■ Graph API で SharePoint リソースのファイルを取得

Microsoft Graph API には SharePoint リソースのファイルを取得するエンドポイントがあります。

https://graph.microsoft.com/v1.0/sites/${siteId}/drive/root:/${filePath}

Microsoft Graph API をたたくアクセス許可には

  • ・ユーザー委任のアクセス許可
  • ・アプリケーションのアクセス許可

がありますが、このエンドポイントはアプリケーションのアクセス許可では access denied が返されます。SharePoint はアクセス許可グループ、ユーザー、リンクがファイルごとに設定されているため、ユーザーとしてアクセスしなければいけないものと考えられます。

teamsUserCredential クラスを使用してトークンを取得します。取得したトークンをヘッダーに設定して Graph API をたたき、ユーザーとしてアクセスすることで、ファイルを情報を取得することができます。

const { loading, theme, themeString, teamsUserCredential } = useTeamsUserCredential({
  initiateLoginEndpoint: config.initiateLoginEndpoint!,
  clientId: config.clientId!,
});
.....
const tokenResponse = await teamsUserCredential.getToken('Sites.Read.All');
const token = tokenResponse.token

.....
"Authorization": `Bearer ${token}`
.....

参考：useTeamsUserCredential(TeamsUserCredentialAuthConfig)

■ Fluent Emoji

Fluent Emoji は Microsoft が開発した粘土のような質感の絵文字セットで、オープンソースとして以下で公開されています。

Github microsoft/fluentui-emoji : https://github.com/microsoft/fluentui-emoji

https://raw.githubusercontent.com/microsoft/fluentui-emoji/main/assets/{絵文字の名前}/3D/{絵文字の名前}_3d.png で使用したいFluent Emoji を取得できるので、URLをimgタグのsrcプロパティに設定するなどで手軽に使用できます。

Red Heart を表示しているhtml
<img src="https://raw.githubusercontent.com/microsoft/fluentui-emoji/main/assets/Red%20heart/3D/red_heart_3d.png">

カラーバリエーションがある絵文字の場合は、

https://raw.githubusercontent.com/microsoft/fluentui-emoji/main/assets/{絵文字の名前}/{color}/3D/{絵文字の名前}_3d_{color}.png

で取得できます。

デフォルトカラー
<img src="https://raw.githubusercontent.com/microsoft/fluentui-emoji/main/assets/Thumbs%20up/Default/3D/thumbs_up_3d_default.png">
ダークカラー
<img src="https://raw.githubusercontent.com/microsoft/fluentui-emoji/main/assets/Thumbs%20up/Dark/3D/thumbs_up_3d_dark.png">
ライトカラー
<img src="https://raw.githubusercontent.com/microsoft/fluentui-emoji/main/assets/Thumbs%20up/Light/3D/thumbs_up_3d_light.png">

さいごに

最後まで読んでいただきありがとうございます。

私がどのようなアプリを作成したのか推測することができないくらいピンポイントでバラバラの内容ですが、開発中に参考記事が少なかったかなという印象のあるトピックを選んでみました。

この記事がどなたかのお役に立てば幸いです。

一覧へ戻る

PAGE TOP