[MS][Teams]GraphAPIを使用してファイル情報、サムネイルを取得してみた

概要

GraphAPIを使ってTeams上のファイル情報、サムネイル取得方法について解説します。。

はじめに

GraphAPIを使用して、
Teamsのグループのドライブに保存してあるディレクトリ内のファイル一覧と
そのサムネイルを取得方法について解説したいと思います。

MSのドキュメントには、実装の例も載っておらず、
Qiitaなどでも情報が全くなっていなかったので、
かなり苦戦ました。

その時の忘備録と、同じように困っている方の為に
記事を執筆します。

アーキテクチャ

ファイル一覧情報、ファイルのサムネイルのURL取得のアーキテクチャになります。

Teamsのグループ内のディレクトリに保存されているファイルのサムネイルを取得するためには、
groupId, driveId, itemIdが必要となります。

これらのIDを取得するためにそれぞれのAPIをたたいていく必要があります。

非常に複雑ですね。

• トークン取得（https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/token）
  各APIにアクセスするためのトークンを取得します。
  事前に登録したAzureのテナントIDとGraphAPIのIDとシークレットキーをPostします。

• グループ情報取得（https://graph.microsoft.com/v1.0/groups）
  Azureのアカウントで作成したグループ情報一覧を取得できます。ファイルが保存されているグループ情報のgroupIdをとります。

• ドライブ情報取得（https://graph.microsoft.com/v1.0/groups/${groupId}/drive）
  グループで使用しているドライブの情報を取得します。ここからdriveIdをとることができます。

• ファイル情報取得（https://graph.microsoft.com/v1.0/drives/${driveId}/${fileDir}/children）
  driveIdとファイルが保存されているディレクトリを指定し、ファイル情報一覧を取得することが出来ます。ファイル情報からitemIdをとることが出来ます。

• サムネイル取得（https://graph.microsoft.com/v1.0//drives/${driveId}/items/${itemId}/thumbnails）
  driveIdとitemIdを指定し、ファイルのサムネイルの大中小の画像リンクを取得することが出来ます。

トークンとユーザIDを取得して、カレンダーの取得・登録をします。

IDの確認

GraphAPIを使用するためには、
事前にAzureにログインしGraphAPIを使えるように登録しておく必要があります。
登録方法については、今回割愛させていただきます。

登録したら、テナントID、クライアントID、シークレットキーをメモしておきます。

テナントID

クライアントID

シークレットキー

また、APIのアクセス許可から以下の
GraphAPI権限を許可しておく必要があります。

• Directory.Read.All
• Files.Read.All
• Group.Read.All

API

それぞれのAPIをたたいていきます。
APIをたたくためには、
トークンが必要になりますので、
まずは、トークン取得から説明していきます。

トークン取得

リクエスト

{
        url: `https://login.microsoftonline.com/${テナントID
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        form: {
          grant_type: 'client_credentials',
          client_id: クライアントID,
          client_secret: シークレットキー,
          scope: 'https://graph.microsoft.com/.default',
          response_type: 'code',
        },
        json: true,
            }

レスポンス

{
  "token_type": "Bearer",
  "expires_in": 3599,
  "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6Ik1uQ19WWmNBVGZNNXBP..."
}

グループ情報取得

登録したグループ情報リストを取得します。
displayNameをもとに該当するグループを選択し
そのなかの「id」がgroupIdになります。

リクエスト

{
url: 'https://graph.microsoft.com/v1.0/groups',
headers: {
Authorization: Bearer ${token.accessToken},
'Content-Type': 'application/json',
},
json: true,
}

レスポンス

 { '@odata.context': 'https://graph.microsoft.com/v1.0/$metadata#groups',
        value:
         [ { id: '1d1fcf87-4df1-4cc1-ac71-344dd4cb0cb8',
             deletedDateTime: null,
             classification: null,
             createdDateTime: '2020-05-22T03:04:26Z',
             creationOptions: [Array],
             description: 'This is the default group for everyone in the network',
             displayName: 'グループ名',
             ・・・}
		]
}

グループのドライブ情報取得

groupIdをもとにドライブ情報を取得します。「id」がdriveIdになります。

リクエスト

{
        url: https://graph.microsoft.com/v1.0/groups/${groupId}/drive,
        headers: {
          Authorization: Bearer ${token},
          'Content-Type': 'application/json',
        },
        json: true,
}

レスポンス

{ 
		'@odata.context':'https://graph.microsoft.com/v1.0/$metadata#drives/$entity',
        createdDateTime: '2020-05-09T15:29:19Z',
        description: '',
        id: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
        lastModifiedDateTime: '2020-06-11T07:46:37Z',
        name: 'Documents',
		・・・
}

ファイル情報一覧

driveIdをもとに指定したディレクトリのファイル情報を取得します。
ディレクトリの指定は/root:/document:/といったように、ディレクトリの後ろにはコロンを付ける必要があります。
「id」がitemIdになります。

リクエスト

{
	url: https://graph.microsoft.com/v1.0/drives/${driveId}/${fileDir}/children,
	headers: {
	Authorization: Bearer ${token},
	'Content-Type': 'application/json',
	},
	json: true
}

レスポンス

{ '@odata.context':       'https://graph.microsoft.com/v1.0/$metadata#drives(\'xxxx\')/root/children',        value:
	[ { '@microsoft.graph.downloadUrl':
	'https://downloadurl',
	createdDateTime: '2020-06-01T08:13:47Z',
	eTag: '"{B67256D2-9920-4A49-8AE2-0CEEB0DDE273},1"',
	id: '01YPWIZCOSKZZLMIEZJFFIVYQM52YN3YTT',
	lastModifiedDateTime: '2020-06-01T08:13:47Z',
	name: 'ファイル名',
	webUrl:
	'https://weburl',
	cTag: '"c:{B67256D2-9920-4A49-8AE2-0CEEB0DDE273},2"',
	size: 2578021,
	createdBy: [Object],
	lastModifiedBy: [Object],
	parentReference: [Object],
	file: [Object],
	fileSystemInfo: [Object] },
	]
}

サムネイル情報取得

itemIdをもとに指定したファイルのサムネイルのURLを取得します。
small, mediam, largeで各サイズのサムネを取得できます。

リクエスト

{
        url: https://graph.microsoft.com/v1.0//drives/${driveId}/items/${itemId}/thumbnails,
        headers: {
          Authorization: Bearer ${token},
          'Content-Type': 'application/json',
        },
        json: true
}

レスポンス

{
	"@odata.context": "https://graph.microsoft.com/v1.0/$metadata#drives('xx')/items('xx')/thumbnails",
	"value":[
		{
		"id": "0",
		"large":{
			"height": 247,
			"url": "https://xxxx",
			"width": 439
		},
		"medium":{
			"height": 99,
			"url": "https://xxx",
			"width": 176
		},
		"small":{
			"height": 54,
			"url": "https://xxx",
			"width": 96
			}
		}
	]
}

おわりに

Azureは、やっぱりあまり好きじゃないです。