# 在 <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 中進行選擇 ![](https://i.imgur.com/VsOitU7.png) <small>請加入這個範例的官方帳號</small> --- | ![](https://i.imgur.com/iOLMwZo.jpg =x500) | ![](https://i.imgur.com/5wwTX3o.png =x500) | | :-----: | :-: | | Android | iOS | --- | ![](https://i.imgur.com/mA9LzOn.jpg =x500) | ![](https://i.imgur.com/7peCe3Q.png =x500) | | :-----: | :-: | | Android | iOS | --- | ![](https://i.imgur.com/eFTDnjy.jpg =x500) | ![](https://i.imgur.com/cuNeo7l.png =x500) | | :-----: | :-: | | 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> --- ![](https://i.imgur.com/DimtGxI.png) --- ![](https://i.imgur.com/HqnA6Y0.png) --- ## 來實測 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> --- # 為了要傳送隱藏資料 --- ![](https://i.imgur.com/BrcO9t8.png) --- ## 我決定從 ## image 訊息 # 動手腳 --- ## 我準備了五張圖 ![](https://i.imgur.com/a1jbRio.png) --- ```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: ![](https://i.imgur.com/9CtzqdW.png =x100) ![](https://i.imgur.com/OoTN0ki.png =x100) ![](https://i.imgur.com/mPZRvfa.png =x100) ![](https://i.imgur.com/WI8KXOb.png =x100) ![](https://i.imgur.com/ay5To6z.png =x100) --- | ![](https://i.imgur.com/FQgaJHd.jpg =x500) | ![](https://i.imgur.com/UovGZ7B.png =x500) | | :-----: | :-: | | 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 訊息的工具 ![](https://i.imgur.com/gLaoyur.png) <small>請加入這個工具的官方帳號</small> --- ## 這是受[卡米哥](https://medium.com/@EtrexKuo)啟發 ## 而寫出來的工具 --- ## 功能 1 直接顯示收到的 Event JSON ![](https://i.imgur.com/uSuzESF.png =x450) --- ## 功能 2 貼上 <span style="color: gold">Message Object</span> 就直接 reply ```json { "type": "text", "text": "Hello world" } ``` --- ![](https://i.imgur.com/UhMp3bW.png) --- | ![](https://i.imgur.com/pCQy2Jd.jpg =x500) | ![](https://i.imgur.com/m0mf4mR.png =x500) | | :-----: | :-: | | 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" } ] ``` --- | ![](https://i.imgur.com/FQgaJHd.jpg =x500) | ![](https://i.imgur.com/UovGZ7B.png =x500) | | :-----: | :-: | | Android | iOS | --- ## 功能 3 從 [Flex Message Simulator](https://developers.line.biz/flex-simulator/) 直接貼上複製下來的 JSON --- | ![](https://i.imgur.com/qggoRYv.jpg =x500) | ![](https://i.imgur.com/1YK41xj.png =x500) | | :-----: | :-: | | 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 ## 複製到這個工具裡面開啟 --- | ![](https://i.imgur.com/yDPv0rG.jpg =x500) | ![](https://i.imgur.com/c4nkN1J.png =x500) | | :-----: | :-: | | Android | iOS | --- | ![](https://i.imgur.com/G43kCFA.jpg =x500) | ![](https://i.imgur.com/ejkdQkt.png =x500) | | :-----: | :-: | | Android | iOS | --- # Thanks!
{"tags":"簡報","title":"如何在 LIFF 傳送隱藏資料給機器人"}
    2540 views