筆記國度

# 如何在 LIFF 傳送隱藏資料給機器人

大家好，我是做出「LINE 數位版名片」的 LINE API 專家均民。

Hi 大家好，我今天來分享一個小技巧，讓你可以在 LIFF 中傳送隱藏資料給聊天機器人，並且還可以免費回覆訊息，很適合做出很漂亮的 LIFF 給使用者選擇東西喔！

在 LINE 的聊天機器人中，如果你希望使用者按下按鈕後看不到你傳的資料，你可以使用 postback 這個 action 來傳送隱藏資料，同時你也會拿到一個 replyToken 讓你回傳訊息。

但是在 LIFF 中該怎麼做到類似的事情呢？我們直接先用範例程式來試玩看看吧！

(opens new window)

由於後端採用 Google Cloud Function，為了避免用量過高被收錢，所以有鎖執行上限，如果無回應的話，可以重新傳送訊息試試喔！

# 範例程式

加入這個聊天機器人後，你應該就能看到這個畫面：

Android iOS

然後請點選第一個選擇 sender 的 LIFF 連結，點下去以後就會出現 Brown、Cony 和 Sally 給你選擇：

Android iOS

如果我們點選 Brown 以後，你就會看到聊天機器人用最新的 Icon Switch 功能 (opens new window)來跟你打招呼囉！

Android iOS

如果你把這段文字複製到「輔助開發 LINE Flex 訊息的工具」 (opens new window)文章裡面所介紹的「DEMO 開發 Flex」機器人中：

Android iOS

並且在這個工具裡面打開 LIFF 選擇 sender 的話，你就可以成功看到這個 LIFF 到底送出了什麼隱藏內容喔！

Android iOS

# 運作原理

首先，我們需要準備一張 3x1 的透明 png 圖：

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

然後把隱藏資料放在 Image 的網址中：

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

接著，就可以在 LIFF 中呼叫 liff.sendMessages() 來把 Image 送給機器人：

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

然後在聊天機器人中就會收到類似這樣的 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"
    }
  }
}

這時候聊天機器人就可以把 event.message.contentProvider.originalContentUrl 資料解析出來處理，並且還有 replyToken 可以使用喔！

# 原始碼及參考連結

TIP

本文範例程式的原始碼授權為 MIT License。