TeamsのチャネルとやりとりするWeb Applicationを作ったお話
Download as PPTX, PDF1 like474 views
TeamsのチャネルとやりとりするWeb Applicationを作ったお話
- 2. 誰？ @DevTakas Angular / Azure / .NET Core / Azure DevOps / Microsoft Graph
- 4. (おさらい)Microsoft Graphとは • Microsoftが提供するサービス・データに アクセスできるエンドポイント • 単一エンドポイントhttps://graph.microsoft.comからアクセス • メールや予定表など様々なデータにアクセスできる • 今回はTeamsのデータにアクセスします
- 5. (おさらい)Microsoft Graphとは • 今までの発表の続き物みたいな感じです 1. Microsoft Graph完全に理解した気がしてた • https://www.slideshare.net/ssuser293809/microsoft-graph-166030378 2. Microsoft Graphことはじめ クエリパラメータ編 • https://www.slideshare.net/ssuser293809/microsoft-graph-177001996 3. Microsoft Graphを使ってアプリケーションを作った時の話 • https://www.slideshare.net/ssuser293809/microsoft-graph-199712616 4. Microsoft Graphの変更通知で遊ぶ • https://www.slideshare.net/ssuser293809/microsoft-graph-232617634
- 6. おしながき 1. はじまりのお話 2. 作ってみたアプリケーションの話 3. ハマったポイント 4. まとめ
- 13. 2.作ってみたアプリケーションの話 --構成 Webアプリケーション Microsoft Graph フロントエンド Web API ：Microsoft Graphを使ってメッセージの作成/返信を行い ：Microsoft Graphを使ってメッセージの変更を検知しWebアプリケーションで捕捉 ：Microsoft Graphを使ってメッセージを取得する Free
- 14. 2.作ってみたアプリケーションの話 --アプリケーションの動作フローと使用しているWeb API 1. 初回問い合わせ開始時 Webアプリケーション Microsoft Graph メッセージ作成 POST /teams/{id}/channels/{id}/messages メッセージID返却
- 15. 2.作ってみたアプリケーションの話 --アプリケーションの動作フローと使用しているWeb API 2. メッセージのやりとり(Webアプリケーションからの返信) Webアプリケーション Microsoft Graph メッセージ返信 POST /teams/{id}/channels/{id}/messages/{id}/replies
- 17. 2.作ってみたアプリケーションの話 --アプリケーションの動作フローと使用しているWeb API 3.メッセージのやりとり(返信の取得) Webアプリケーション Microsoft Graph メッセージ取得 GET /teams/{id}/channels/{id}/messages/{id}/replies メッセージ返却
- 18. 2. はまったこと --TeamsのFreeエディションを使用している場合 • TeamsのFreeエディションを使用している場合はADが別になるので注意 • 権限やユーザーの諸々の設定はそちらで行われることになる。
- 19. 2. はまったこと --チャネルの返信内容が取得できない 問題 • アプリケーションのアクセス許可を使用してメッセージを取得 • チャネル全体のメッセージを参照できる必要があった • 特定のユーザーの作業ではなくアプリケーションとしての処理なので • しかし、403 Unknown Error となり取得できなかった • ユーザーの認証フローからは参照可能 • Graphエクスプローラーとか… • ただ、フロントからは認証なしで使用したかったのでアプリケーションのアクセス許可を使用したい…
- 20. 2. はまったこと --チャネルの返信内容が取得できない 解決策 • アプリケーションのアクセス許可を通じてのチャネルメッセージの取得は 「保護されたAPI」の対象だった • Microsoftが提供する要求フォームから申請を行う必要がある • 申請が通った場合はアプリケーションのアクセス許可でも参照可能に • 「技術検証」とかで申請しても通った
- 22. 2. はまったこと --チャネルへの投稿ができない 原因1 • よくよく考えれば当然だが投稿はユーザーが行うものなので アプリケーションではなくユーザーの権限上での作業が必要だった • ダミー用のユーザーをTeamsのAD上に作成し その子を使って送信を行うことに
- 23. 2. はまったこと --チャネルへの投稿ができない 原因2 • しかし、ダミーユーザーを使用しても403エラーは解消せず • ADでチームの所有者などに加えても解消せず • 「Teamsで」メンバーを追加する必要があった • この時点でADの権限周りを弄る事が多かったので ADの権限設定一辺倒になってたのがハマりポイント
- 24. 2. はまったこと --チャネルへの投稿ができない 解決策 • フロントからの投稿用のダミーユーザーをAD上に作成した • TeamsでADで作成したユーザーをメンバーに加えた
- 25. 2. はまったこと --チャネルへの返信が捕捉出来ない？ 問題 • メッセージの返信をどのように補足するのか • GraphのSubscriptionは微妙な雰囲気だった • チャネル内のメッセージ全体のようなのでリプライは捕捉できない？と思ってた。 • リプライだし全体はいらないのでmessages/{id}が指定出来たらサイコーだった。
- 26. 2. はまったこと --チャネルへの返信が捕捉出来ない？ 解決策 • なんかリプライしたときも補足できているっぽい • メッセージのIDが変更通知されるので フロントでフィルタすることでお茶を濁す • ただし、寿命が短いので注意(1時間)
- 27. 2. はまったこと --HTML形式で投稿できない？ 問題 • <br>や<h1>を使ってHTML形式で表示したかった • POSTの返却内容にcontentTypeがあるので”html”指定でいけるかな？ • エラーになった • ドキュメントのリクエストにもcontentTypeないし不可能なのか？
- 28. 2. はまったこと --HTML形式で投稿できない？ 解決策 • リクエスト時のContentTypeはEnum指定だった。 • Text=0 • Html=1 • ただ、HTMLインジェクションの考慮は必要だと思う
- 29. まとめ • Microsoft Graphを使って 問い合わせチャットフォームを作ってみた • 思った以上にシンプルな構成で作成することができることがわ かった • ただしユーザー設定周りや権限周りで気にしなければいけない ことは多そうなので注意！ • Microsoft Graphはいいぞ！
- 30. 参考文献• 季節のMicrosoft Teams APIの基礎、OBS Studioでの配信ソースを添えて • https://www.youtube.com/watch?v=BlX-83yb948&t=10s • サブスクリプション リソースの種類 • https://docs.microsoft.com/ja-jp/graph/api/resources/subscription?view=graph-rest-beta • Microsoft Teams の保護された API • https://docs.microsoft.com/ja-jp/graph/teams-protected-apis • api call error 403 microsoft teams messages • https://stackoverflow.com/questions/56953608/api-call-error-403-microsoft-teams-messages • Microsoft Graph の変更ログ • https://docs.microsoft.com/ja-jp/graph/changelog • チャネルで chatMessage を作成する • https://docs.microsoft.com/ja-jp/graph/api/channel-post-messages?view=graph-rest-1.0&tabs=http • チャネルを取得する • https://docs.microsoft.com/ja-jp/graph/api/channel-get?view=graph-rest-1.0&tabs=csharp • チャネル内のメッセージに返信する • https://docs.microsoft.com/ja-jp/graph/api/channel-post-messagereply?view=graph-rest-beta&tabs=http • チャネルメッセージの返信を一覧表示する • https://docs.microsoft.com/ja-jp/graph/api/channel-list-messagereplies?view=graph-rest-beta&tabs=http • チャネル メッセージを取得する • https://docs.microsoft.com/ja-jp/graph/api/channel-get-message?view=graph-rest-beta&tabs=http • 作ったデモアプリケーション • https://github.com/Takas0522/learn-front-chat-system