# 在 <span style="color: lime">LINE LIFF</span> 中
# 模擬 `postback`
## <span style="color: gold">傳送隱藏資料</span>給機器人
<div style="color: gray; font-size: 1.5rem">
<a href="https://lihi1.com/6yN6B" target="_blank">
https://lihi1.com/6yN6B
</a><br>
taichunmin @chatbot.tw (2020/05)
</div>
---
## Who am I?
<table class="about-me">
<tr>
<td><img src="https://www.gravatar.com/avatar/8d9b432d861e4ac0e40954a800ae90a1?s=2048" class="avatar"></td>
<td>
<ul>
<li>戴均民</li>
<li>現職 <span style="color: #e2231a">微程式資訊</span></li>
<li>後端工程師</li>
<li><a href="https://github.com/taichunmin/" target="_blank"><i class="fa fa-fw fa-github"></i>taichunmin</a></li>
</ul>
</td>
</tr>
</table>
<style>
img.avatar {
border-radius: 50%;
width: 300px;
}
</style>
---
#### 範例：在 LIFF 中進行選擇
<small>請加入這個範例的官方帳號</small>
---
|  |  |
| :-----: | :-: |
| Android | iOS |
---
|  |  |
| :-----: | :-: |
| Android | iOS |
---
|  |  |
| :-----: | :-: |
| Android | iOS |
---
### <span style="color: gold">`liff.sendMessages()`</span>
## 有一個奇怪的問題
<a href="https://developers.line.biz/en/reference/liff/#send-messages" target="_blank" style="font-size: 1.5rem">https://developers.line.biz/en/reference/liff/#send-messages</a>
---
---
---
## 來實測 Flex + 各種 action
---
## Flex + message action
```javascript=
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
```javascript=
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
```javascript=
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
### 也只能是 <span style="color: gold">`type=uri`</span>
---
# 為了要傳送隱藏資料
---
---
## 我決定從
## image 訊息
# 動手腳
---
## 我準備了五張圖
---
```json
[
{
"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"
}
]
```
Note:
---
|  |  |
| :-----: | :-: |
| Android | iOS |
---
## 所以我就做了
## 一個 <span style="color: gold">`3x1`</span> 的透明 png
<code style="font-size: 2rem">https://i.imgur.com/MwS42AE.png</code>
---
## 然後把資料藏在網址中
<code style="font-size: 2rem">https://i.imgur.com/MwS42AE.png?sender=Brown</code>
---
## 然後送出 image 訊息
```javascript=
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
```json
{
"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"
}
}
}
```
---
## 部落格文章連結
<a href="https://taichunmin.idv.tw/blog/2020-04-07-line-liff-send-hidden-data.html" target="_blank" style="font-size: 2rem">https://taichunmin.idv.tw/blog/2020-04-07-line-liff-send-hidden-data.html</a>
---
# Bonus!
---
#### 輔助開發 LINE Flex 訊息的工具
<small>請加入這個工具的官方帳號</small>
---
## 這是受[卡米哥](https://medium.com/@EtrexKuo)啟發
## 而寫出來的工具
---
## 功能 1
直接顯示收到的 Event JSON
---
## 功能 2
貼上 <span style="color: gold">Message Object</span> 就直接 reply
```json
{
"type": "text",
"text": "Hello world"
}
```
---
---
|  |  |
| :-----: | :-: |
| Android | iOS |
---
```json
[
{
"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"
}
]
```
---
|  |  |
| :-----: | :-: |
| Android | iOS |
---
## 功能 3
從 [Flex Message Simulator](https://developers.line.biz/flex-simulator/)
直接貼上複製下來的 JSON
---
|  |  |
| :-----: | :-: |
| Android | iOS |
---
## 部落格文章連結
<a href="https://taichunmin.idv.tw/blog/2020-04-06-line-devbot.html" target="_blank" style="font-size: 2rem">https://taichunmin.idv.tw/blog/2020-04-06-line-devbot.html</a>
---
## 可以把剛剛的範例 LIFF
## 複製到這個工具裡面開啟
---
|  |  |
| :-----: | :-: |
| Android | iOS |
---
|  |  |
| :-----: | :-: |
| Android | iOS |
---
# Thanks!