鍋綿ブログ

C#・SharePoint・SharePoint Framework・Office365を中心に扱うブログです。

LINE WebhookをMicrosoft Flowで受け取る!TeamsでもSharePointでも自在に連携!

LINEのビジネス利用って広がってるのかしら。
Office 365は都内の主要企業はほぼ持ってるって聞いた。

では両者を連携すればどうか?
と、いう単純な発想でやってみた。

用途があるかどうかは知らん。

 

 

1.やりたいこと

  • ユーザーはLINEでBotを友達登録し、Bot宛にメッセージや画像を送信
  • 送信されたメッセージをOffice 365の任意のサービスに連携 (今回はTeams)
  • 送信された画像をOffice 365の任意のサービスに連携 (今回はSharePoint)

2.想像している用途

面白そうだからやってみただけだ。用途など無い。
とはいえ以下などは実現できそうだがどうか。

  • 工事や点検作業などの際、現場で写真を撮ってLINEにアップ。それをSharePointサイトに溜め込んだり報告書代わりにして承認回したりする。
  • ブライダルサイト的な何か。結婚式に参加しているゲストが写真をLINEにアップしたり祝福メッセージを送ったりすると、SharePointサイトに奇麗に表示されたりとか。SharePointじゃなくて良くね?的な突っ込みには耳を塞ぐ。
  • 動画をアップしてStreamに溜め込む。その先はノープラン。

3.用意するもの

  • 作業用端末1台 ( Office 365がサポートするブラウザを搭載しているもの )
  • 動作確認用端末1台 ( LINEが使える状態のもの )
  • LINEアカウント ( 開発 / テスト用にサブ垢が欲しい方はこちら )
  • Office 365アカウント

4.実装

4-1.LINE@に登録

LINE@に登録する。
公式サイトからどうぞ。

LINE@で販促・ファンを獲得!無料アプリで簡単に始めるビジネス向けLINE

4-2.LINE Developersに登録

LINE Developersに登録する。
こちらも公式サイトからどうぞ。

LINE Developers

4-3.REST要求を受け取るFlowを構築

このFlowでLINEのWebhookを受け取り、
受け取った要求を解析してSharePointなど他のサービスへ流していく。
LINEのAPIはリファレンスが充実しているので安心。
Flowを触ったことがある人なら簡単簡単。

まずは作ったFlowの全容を。

f:id:micknabewata:20181229171818p:plain

サンプルFlowの全容

要求受けて本文解析して処理して応答するだけ。簡単。

f:id:micknabewata:20181229172035p:plain

HTTP要求の受信時

受けるJSONは一番親の階層だけ書いとけばOK。簡単。
コピペ用に抜き出したJSONを置いときます。

{
    "destination": "",
    "events": []
}

 

f:id:micknabewata:20181229172354p:plain

本文を解析

本文の解析は、Flowの「JSON の解析」アクションで実現。
空っぽのFlowでLINEからのWebhookを受け取り、
結果をサンプルとしてスキーマを生成させた。
以下コピペ用。

{
    "type": "object",
    "properties": {
        "events": {
            "type": "array",
            "items": {
                "type": "object",
                "properties": {
                    "type": {
                        "type": "string"
                    },
                    "replyToken": {
                        "type": "string"
                    },
                    "source": {
                        "type": "object",
                        "properties": {
                            "userId": {
                                "type": "string"
                            },
                            "type": {
                                "type": "string"
                            }
                        }
                    },
                    "timestamp": {
                        "type": "integer"
                    },
                    "message": {
                        "type": "object",
                        "properties": {
                            "type": {
                                "type": "string"
                            },
                            "id": {
                                "type": "string"
                            },
                            "text": {
                                "type": "string"
                            },
                            "contentProvider": {
                                "type": "object",
                                "properties": {
                                    "type": {
                                        "type": "string"
                                    }
                                }
                            }
                        }
                    }
                },
                "required": [
                    "type",
                    "replyToken",
                    "source",
                    "timestamp",
                    "message"
                ]
            }
        },
        "destination": {
            "type": "string"
        }
    }
}

 

あとはこの本文を使って任意の処理を組むだけ。簡単。
テキスト・画像・動画などで本文の中身が違うので、
events > message > type を判断して分岐させる。

f:id:micknabewata:20181229172839p:plain

メッセージの種類を判定

例えば画像は本文内にバイナリが入っていないため
LINE APIにこちらから要求をしてバイナリを得る必要がある。

f:id:micknabewata:20181229173458p:plain

画像コンテンツを取得する

Authorizationヘッダーに指定するトークンは、
LINE Developers管理画面の「アクセストークン(ロングターム)」から得られる。
有効期限の短いものを毎度要求してもいいが今回はサンプルなので簡便さを重視。

f:id:micknabewata:20181229173829p:plain

アクセストークンの発行

画像はSharePointサイトに保管するようにした。
テキストはTeamsの会話に流した。

4-4.LINE DevelopersでWebhookを有効化

Flowを保存すると、リクエスト用のURLが得られる。
これをLINE Developers管理画面から設定した。

f:id:micknabewata:20181229174223p:plain

LINE Webhookの設定
  • Webhook送信 ⇒ 利用する
  • Webhook URL ⇒ Flowのリクエスト用URL

4-5.テスト

テストは、実際にLINEからBotへメッセージを送信することで行った。
LINE Developers管理画面の下のほうにQRコードがあり、
コイツで友達登録することができる。

f:id:micknabewata:20181229174824p:plain

QRコードを読み取って友達登録する

で、友達登録されたBotに画像を送ってみた。

f:id:micknabewata:20181229175021p:plain

LINEでBotに画像を送信したらSharePointにアップロードされた

うまく行った。
続いてテキストメッセージを送ってみた。

f:id:micknabewata:20181229175155p:plain

LINEでBotにテキストを送信したらTeamsの会話に入った

これも成功。あとはFlowの変更やらSharePointの設定やらでいかようにも料理できる。

5.本番環境ではセキュリティに注意

今回の構築はあくまでテスト用です。
実際のシステム構築では、最低限以下の問題をクリアする必要があります。

  • Flowが認証無しで実行されている

今回構築したFlowは、認証無しでインターネット上に公開されています。
このままではURLを知った人が誰でもリクエストを通せてしまうので、
何らかの考慮が必要です。
後述の署名検証だけでも良い・・かも?

  • LINE Webhookを受け取った後に署名の検証をしていない

公式リファレンスで案内されているように、
Webhookを受け取った後は署名を検証する必要があります。

Messaging APIリファレンス

 

以上、参考になれば幸いです。