本篇介紹如何用Webview給使用者填表單，並回傳資料到Server。 Facebook messenger的主訊息區塊功能是有限的，當你想呈現複雜的功能，就必需借助Webview，開啟自訂網頁來當介面用，同時Facebook提供你SDK，讓你可以更好的控制Webview這個模組。
加入白名單
1. 若要在Webview開啟的網頁，使用一些Facebook提供的進階功能(例 程式關Webview)，要先將你的DOMAIN加入白名單。以下範例用windows版的CURL傳JSON指令給Facebook。
D:\curl\bin\curl -H "Content-Type: application/json" -d "{ \"whitelisted_domains\":[ \"https://\" ]}" https://graph.facebook.com/v2.6/me/messenger_profile?access_token=
URL button
2. 傳送訊息給使用者，產生URL按鈕，準備開啟Webview。
{ "recipient":{ "id":"" }, "message":{ "attachment":{ "type":"template", "payload":{ "template_type":"button", "text":"Try the URL button!", "buttons":[ { "type":"web_url", "url":"https:///option.html" , "title":"URL Button", "messenger_extensions": "true", "webview_height_ratio": "compact" } ] } } } }
option.html
3. Webview會開啟的網頁，已加入Facebook的專用Javascript程式碼，最前面白名單若沒加入，這些功能就不會啟動。這個網頁會讓使用者填表單。
<html> <head> <meta http-equiv="Cache-Control" content="no-cache, no-store, max-age=0, must-revalidate"> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="expires" content="0" /> <title>Choose your preferences4</title> </head> <body> <script> (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/messenger.Extensions.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'Messenger')); window.extAsyncInit = () => { MessengerExtensions.getContext('' , function success(thread_context) { // success document.getElementById("psid").value = thread_context.psid; document.getElementById("showmsg").value = "success"; }, function error(err) { // error document.getElementById("showmsg").value = "error"; } ); document.getElementById('submitButton').addEventListener('click', () => { MessengerExtensions.requestCloseBrowser(function success() { console.log("Webview closing"); }, function error(err) { console.log(err); }); }); }; </script> <form action="optionspostback.php" method="get"> <input type="hidden" name="psid" id="psid"> <input type="text" name="showmsg" id="showmsg"> <h3>Pillows</h3> <input type="radio" name="pillows" value="soft" checked>Soft<br> <input type="radio" name="pillows" value="hard">Hard<br> <h3>Bed</h3> <input type="radio" name="bed" value="single" checked>Single<br> <input type="radio" name="bed" value="double">Double<br> <input type="radio" name="bed" value="twin">Twin<br> <h3>View</h3> <input type="radio" name="view" value="sea" checked>Sea<br> <input type="radio" name="view" value="street">Street<br> <input type="submit" value="Submit" id="submitButton"> </form> <script </body>
optionspostback.php
4. 填完表單，Webview會根據FB SDK指令自動關閉，然後回傳資料，接收資料的網頁有如下的PHP程式接收，同時回傳如圖的確認訊息給使用者。
....//之前自己寫的傳送訊息函數 sendText($_GET['psid'],"Great, I will book you a $_GET[bed] bed, with $_GET[pillows] pillows and a $_GET[view] view."); ....
沒有留言:
張貼留言