Facebook Messenger bot的日期选择器Webview-无法将字段值带回bot的输入字段 [英] Date picker webview for Facebook Messenger bot - cannot bring field value back to bot's input field

问题描述

我正在使用Dialogflow&信使。 Webhook是用Python 3.x编写的。我面临如何将数据从Webview再次传输到Messenger聊天窗口以继续与用户对话的问题。

I'm working on a chatbot with Dialogflow & Messenger. The webhook is been written in Python 3.x. I'm facing problem with how to transfer data from webview to the messenger chat window again to continue conversation with user.

Messenger聊天机器人已与Dialogflow（v2）集成。我添加了一个按钮，供用户选择日期。当用户单击该按钮时，它将重定向到一个外部网站，我在该网站上托管HTML页面以进行日期选择。

Messenger chatbot is integrated with Dialogflow (v2). I've added a button for choosing date by the user. When the user clicks on the button, it redirects to an external website where I host the HTML page for datepicker.

webhook有效负载按钮包含-> messenger_extensions： true

The webhook payload button contains --> "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页面->设置-> Messenger平台->白名单域中添加了HTTPS域）。

My HTML domain is successfully whitelisted (added HTTPS domain in FB Page --> Settings --> Messenger Platform --> white-listed domain).

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

This opens the webview HTML page (for mobile --> popup as chat extension, for PC --> opens webview in new browser window). I can select the dates.

在提交时，Javascript将输入字段的值作为警报。此外，Facebook Messenger SDK也与HTML集成在一起。

On Submit, Javascript gets the input filed values as alert. Also Facebook Messenger SDK is integrated with the HTML. This helps to close the webview on click of Submit button too.

// Facebook Messener SDK Javascript

// 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加载完成

// Messenger SDK loading completes

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);
        });
};

//这是基于Submit函数的Javascript

// This is the Javascript based onSubmit function

 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相关的任何东西。

I got a few related topics but unfortunately all of them are related to node.js. But I could not find anything related to python webhook.

我浏览了大量文档：

1. 教程


2. Stackoverflow主题：日期选择器数据传递


3. Webview指南


4. Stackoverflow主题2：
   还有更多可用的文档。

1. Tutorial
2. Stackoverflow topic: Datepicker data pass
3. Webview Guide
4. Stackoverflow topic 2: And many more documents available.

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

Expected: With the closing of the webview window, the user selected dates should be transferred to messenger chat window to continue conversation. Otherwise the data cannot be saved to database.

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

Actual: User can select date. On submit, JS picks the values from input fields and close the webview window. No data is been passed on to messenger chat window.

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

What am I doing wrong here? Please help.

推荐答案

目前，dialoglow尚没有从Messenger Webview传递的数据回调。一种解决方法是使用Messenger SDK访问用户的 psid，使用它来识别用户，然后将通过sumbit获得的json数据存储在数据库中。

At present, dialoglow doesn't have a callback for data passed from messenger webviews. A work around is to access the 'psid' of the user using Messenger SDK, use that to identify your user and then store the json data that you get on sumbit in your database.

这篇关于Facebook Messenger bot的日期选择器Webview-无法将字段值带回bot的输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！