技術関連

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

更新日:

概要

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

はじめに

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

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

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

アーキテクチャ

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

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

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

非常に複雑ですね。

トークンとユーザ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は、やっぱりあまり好きじゃないです。

-技術関連

Copyright© AIなんて気合いダッ! , 2021 All Rights Reserved Powered by AFFINGER5.