Who am I?

戴均民 現職 微程式資訊 後端工程師 taichunmin

範例：在 LIFF 中進行選擇

請加入這個範例的官方帳號

liff.sendMessages()

有一個奇怪的問題

https://developers.line.biz/en/reference/liff/#send-messages

來實測 Flex + 各種 action

Flex + message action

liff.sendMessages([{
  "type": "flex",
  "altText": "test",
  "contents": {
    "type": "bubble",
    "body": {
      "type": "box",
      "layout": "vertical",
      "contents": [{
        "type": "button",
        "action": {
          "label": "message",
          "text": "message",
          "type": "message"
        }
      }]
    }
  }
}]).catch(err => { alert(err.message) })

Flex + postback action

liff.sendMessages([{
  "type": "flex",
  "altText": "test",
  "contents": {
    "type": "bubble",
    "body": {
      "type": "box",
      "layout": "vertical",
      "contents": [{
        "type": "button",
        "action": {
          "data": "postback",
          "label": "postback",
          "type": "postback"
        }
      }]
    }
  }
}]).catch(err => { alert(err.message) })

Flex + uri action

liff.sendMessages([{
  "type": "flex",
  "altText": "test",
  "contents": {
    "type": "bubble",
    "body": {
      "type": "box",
      "layout": "vertical",
      "contents": [{
        "type": "button",
        "action": {
          "label": "uri",
          "type": "uri",
          "uri": "https://www.google.com"
        }
      }]
    }
  }
}]).catch(err => { alert(err.message) })

經過實測

Flex 訊息中的 action

也只能是 type=uri

為了要傳送隱藏資料

我決定從

image 訊息

動手腳

我準備了五張圖

[
  {
    "originalContentUrl": "https://i.imgur.com/9CtzqdW.png",
    "previewImageUrl": "https://i.imgur.com/9CtzqdW.png",
    "type": "image"
  },
  {
    "originalContentUrl": "https://i.imgur.com/OoTN0ki.png",
    "previewImageUrl": "https://i.imgur.com/OoTN0ki.png",
    "type": "image"
  },
  {
    "originalContentUrl": "https://i.imgur.com/mPZRvfa.png",
    "previewImageUrl": "https://i.imgur.com/mPZRvfa.png",
    "type": "image"
  },
  {
    "originalContentUrl": "https://i.imgur.com/WI8KXOb.png",
    "previewImageUrl": "https://i.imgur.com/WI8KXOb.png",
    "type": "image"
  },
  {
    "originalContentUrl": "https://i.imgur.com/ay5To6z.png",
    "previewImageUrl": "https://i.imgur.com/ay5To6z.png",
    "type": "image"
  }
]

所以我就做了

一個 3x1 的透明 png

https://i.imgur.com/MwS42AE.png

然後把資料藏在網址中

https://i.imgur.com/MwS42AE.png?sender=Brown

然後送出 image 訊息

liff.sendMessages([{
  type: 'image',
  originalContentUrl: 'https://i.imgur.com/MwS42AE.png?sender=Brown',
  previewImageUrl: 'https://i.imgur.com/MwS42AE.png?sender=Brown'
}]).catch(err => { alert(err.message) })

收到的 Webhook Event

{
  "type": "message",
  "replyToken": "bfd16af576304062931ee39249d1c362",
  "source": {
    "userId": "Udeadbeefdeadbeefdeadbeefdeadbeef",
    "type": "user"
  },
  "timestamp": 1586196950201,
  "mode": "active",
  "message": {
    "type": "image",
    "id": "11738027154079",
    "contentProvider": {
      "type": "external",
      "originalContentUrl": "https://i.imgur.com/MwS42AE.png?sender=Brown",
      "previewImageUrl": "https://i.imgur.com/MwS42AE.png?sender=Brown"
    }
  }
}

部落格文章連結

https://taichunmin.idv.tw/blog/2020-04-07-line-liff-send-hidden-data.html

Bonus!

輔助開發 LINE Flex 訊息的工具

請加入這個工具的官方帳號

這是受卡米哥啟發

而寫出來的工具

功能 1

直接顯示收到的 Event JSON

功能 2

貼上 Message Object 就直接 reply

{
  "type": "text",
  "text": "Hello world"
}

[
  {
    "originalContentUrl": "https://i.imgur.com/9CtzqdW.png",
    "previewImageUrl": "https://i.imgur.com/9CtzqdW.png",
    "type": "image"
  },
  {
    "originalContentUrl": "https://i.imgur.com/OoTN0ki.png",
    "previewImageUrl": "https://i.imgur.com/OoTN0ki.png",
    "type": "image"
  },
  {
    "originalContentUrl": "https://i.imgur.com/mPZRvfa.png",
    "previewImageUrl": "https://i.imgur.com/mPZRvfa.png",
    "type": "image"
  },
  {
    "originalContentUrl": "https://i.imgur.com/WI8KXOb.png",
    "previewImageUrl": "https://i.imgur.com/WI8KXOb.png",
    "type": "image"
  },
  {
    "originalContentUrl": "https://i.imgur.com/ay5To6z.png",
    "previewImageUrl": "https://i.imgur.com/ay5To6z.png",
    "type": "image"
  }
]

功能 3

從 Flex Message Simulator
直接貼上複製下來的 JSON

部落格文章連結

https://taichunmin.idv.tw/blog/2020-04-06-line-devbot.html

可以把剛剛的範例 LIFF

複製到這個工具裡面開啟

Thanks!