Facebook Messenger bot 的日期选择器 webview - 无法将字段值带回 bot 的输入字段答案

【问题标题】：Date picker webview for Facebook Messenger bot - cannot bring field value back to bot's input fieldFacebook Messenger bot 的日期选择器 webview - 无法将字段值带回 bot 的输入字段
【发布时间】：2019-02-07 11:00:15
【问题描述】：

我正在使用 Dialogflow 和 Messenger 开发聊天机器人。 webhook 是用 Python 3.x 编写的。我遇到了如何将数据从 webview 传输到 messenger 聊天窗口以继续与用户对话的问题。

Messenger 聊天机器人与 Dialogflow (v2) 集成。我添加了一个供用户选择日期的按钮。当用户点击按钮时，它会重定向到一个外部网站，我在该网站上托管日期选择器的 HTML 页面。

webhook 有效载荷按钮包含 --> "messenger_extensions": "true

"attachment" : { 
                 "type" : "template",
                 "payload" : {
                      "template_type" : "button",
                               "text":"Click button and choose",
                               "buttons": [{
                                    "type": "web_url",
                                    "url": "https://datepicker.glitch.me",
                                    "title": "Choose Date",
                                    "webview_height_ratio": "tall",
                                    "messenger_extensions": "true"
                                }]
                            } 
                        }

我的 HTML 域成功列入白名单（在 FB 页面中添加 HTTPS 域 --> 设置 --> Messenger 平台 --> 白名单域）。

这将打开 webview HTML 页面（对于移动设备 --> 作为聊天扩展的弹出窗口，对于 PC --> 在新的浏览器窗口中打开 webview）。我可以选择日期。

提交时，Javascript 获取输入字段值作为警报。 Facebook Messenger SDK 也与 HTML 集成。这也有助于在单击提交按钮时关闭 web 视图。

// Facebook Messener SDK Javascript

      (function(d, s, id){
      alert('Messenger Extension loaded');  // This alert is coming
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.com/en_US/messenger.Extensions.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'Messenger'));

// Messenger SDK 加载完成

window.extAsyncInit = function() {
    // the Messenger Extensions JS SDK is done loading 
    alert('window extAsyncInit')  // This alert is coming
    MessengerExtensions.getUserID(function success(uids) {
            var psid = uids.psid;//This is your page scoped sender_id
            alert("Getting PSID") // This alert is NOT COMING
            alert("This is the user's psid " + psid); // Alert NOT COMING
        }, function error(err) {
            alert("Messenger Extension Error: " + err);
        });
};

//这是基于提交函数的Javascript

 function sendMessage() {
        alert($( "#from_field_id" ).val()) // This is coming
        alert($( "#to_field_id" ).val())   // This is coming
        /// DON't KNOW HOW TO RETURN DATA TO MESSENGER WINDOW         
        MessengerExtensions.requestCloseBrowser(function success() {
        // This works too
        }, function error(err) {

        });

        return $( "#from_field_id" ).val() //Not coming to messenger window
 };

我得到了一些相关的主题，但不幸的是它们都与 node.js 相关。但是我找不到任何与 python webhook 相关的东西。

我浏览了大量文档：

Tutorial
Stackoverflow 主题：Datepicker data pass
Webview Guide
Stackoverflow topic 2: 还有更多可用的文件。

预期：随着 webview 窗口的关闭，用户选择的日期应该被转移到 messenger 聊天窗口以继续对话。否则无法将数据保存到数据库中。

实际：用户可以选择日期。提交时，JS 从输入字段中选择值并关闭 webview 窗口。没有数据被传递到 Messenger 聊天窗口。

我在这里做错了什么？请帮忙。

【问题讨论】：

你最后是怎么解决的，我也有同样的问题？ @swap

标签： python-3.x webview dialogflow-es facebook-messenger

【解决方案1】：

目前，dialoglow 没有对从 messenger webviews 传递的数据进行回调。一种解决方法是使用 Messenger SDK 访问用户的“psid”，使用它来识别您的用户，然后将您在 sumbit 上获得的 json 数据存储在数据库中。

【讨论】：