javascript FB.ui feed 对话框需要redirect_uri,对话框不关闭

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8948020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 05:07:19  来源:igfitidea点击:

FB.ui feed dialog requires redirect_uri, dialog does not close

javascriptfacebooksdkdialogfb.ui

提问by Jeremy Schultz

I am trying to open a feed dialog using the JS SDK's FB.ui method and have it close after the user shares. My problem is the feed dialog is requiring a redirect_uri even though the documentation says it doesn't have to be defined, and the popup window redirects there and will not close like the callback function says.

我正在尝试使用 JS SDK 的 FB.ui 方法打开一个提要对话框,并在用户共享后关闭它。我的问题是提要对话框需要 redirect_uri,即使文档说它不必定义,并且弹出窗口重定向到那里并且不会像回调函数所说的那样关闭。

Here's my code, attached to the submit click event:

这是我的代码,附加到提交点击事件:

    FB.ui (
        {
            method: 'feed',
            name: 'xxx!',
            link: 'link to FB tab',
            picture: 'jpg',
            caption: 'xxx',
            actions: {name:'xxx',link:'url'},
            ref: 'xxx',
            redirect_uri: 'link to FB tab'
        },
        function(response) {
            self.close();
        }
    );

If I leave off the redirect_uri, the popup opens but it just says the FB app has an error and please try again.

如果我不使用 redirect_uri,弹出窗口会打开,但它只是说 FB 应用程序有错误,请重试。

采纳答案by Jeremy Schultz

It appears this is a known change in Facebook's JavaScript SDK: http://developers.facebook.com/bugs/302946973066993

看来这是 Facebook 的 JavaScript SDK 中的一个已知更改:http: //developers.facebook.com/bugs/302946973066993

When using the Facebook JavaScript API, invoking FB.ui will fail unless a 'redirect_uri' property is supplied in the params object - this behavior is unexpected because:

1.) The documentation states that the 'redirect_uri' will be automatically appended by most SDKs [1] - previously the JavaScript SDK was providing one which closed the Lightbox iFrame. 2.) Adding a redirect_uri param results in the Facebook Lightbox iFrame redirecting which stops the user from being able to close it. 3.) The redirect_uri param was not required previously.

使用 Facebook JavaScript API 时,调用 FB.ui 将失败,除非在 params 对象中提供了“redirect_uri”属性 - 这种行为是意外的,因为:

1.) 文档指出,大多数 SDK [1] 会自动附加“redirect_uri” - 以前 JavaScript SDK 提供了一种关闭 Lightbox iFrame 的方法。2.) 添加redirect_uri 参数会导致Facebook Lightbox iFrame 重定向,从而阻止用户关闭它。3.) 之前不需要 redirect_uri 参数。

This is the behavior I'm used to and have been trying to duplicate. A FB dev reports that this is now "by design."

这是我习惯并一直试图复制的行为。一位 FB 开发人员报告说,这现在是“设计使然”。

回答by Steven

After spending a whole day working on this problem, I have a very good solution that I'd like to share. Instead of using the SDK with FB.ui(), I have discovered that I can avoid it entirely by manually opening my own popup to https://www.facebook.com/dialog/feed. When doing it this way, redirect_uri works as expected, and you can just redirect to an HTML file that closes the popup window. Whether the user clicks on share or cancel, the popup will close as expected.

在花了一整天的时间解决这个问题之后,我有一个非常好的解决方案,我想分享一下。我发现我没有将 SDK 与 FB.ui() 一起使用,而是通过手动打开我自己的弹出窗口到https://www.facebook.com/dialog/feed来完全避免它。这样做时,redirect_uri 按预期工作,您只需重定向到关闭弹出窗口的 HTML 文件即可。无论用户单击共享还是取消,弹出窗口都会按预期关闭。

I don't believe there are any compromises with this code, and if anything, it is much easier to use than the actual SDK.

我不相信这段代码有任何妥协,如果有的话,它比实际的 SDK 更容易使用。

My Javascript code (which you can save as FacebookFeedDialog.js) looks like this:

我的 Javascript 代码(您可以将其另存为 FacebookFeedDialog.js)如下所示:

/* by Steven Yang, Feb 2015, originally for www.mathscore.com.  This code is free for anybody to use as long as you include this comment.  */
function FacebookFeedDialog(appID, linkTarget, redirectTarget) {
  this.mParams = {
    app_id: appID,
    link: linkTarget,
    redirect_uri: redirectTarget,
    display: "popup"
  }
};

/* Common params include:
   name - the title that appears in bold font
   description - the text that appears below the title
   picture - complete URL path to the image on the left of the dialog
   caption - replaces the link text
*/
FacebookFeedDialog.prototype.addParam = function(key, value) {
  this.mParams[key] = value;
};

FacebookFeedDialog.prototype.open = function() {

  var url = 'https://www.facebook.com/dialog/feed?' + encodeCGIArgs(this.mParams);
  popup(url, 'feedDialog', 700, 400);
};

/* Takes a param object like this:
   { arg1: "value1", arg2: "value2" }
   and converts into CGI args like this:
   arg1=value1&arg2=value2

   The values and args will be properly URI encoded
*/
function encodeCGIArgs(paramObject) {

  var result = '';

  for (var key in paramObject) {
    if (result)
      result += '&';
    result += encodeURIComponent(key) + '=' + encodeURIComponent(paramObject[key]);
  }

  return result;
}

function popup(mylink,windowname,width,height) {
  if (!window.focus) return;
  var href;
  if (typeof(mylink) == 'string')
    href=mylink;
  else
    href=mylink.href;
  if (!windowname)
    windowname='mywindow';
  if (!width)
    width=600;
  if (!height)
    height=350;
  window.open(href, windowname, 'resizable=yes,width='+width+',height='+height+',scrollbars=yes');
}

Here's a sample HTML file that uses the Javascript code above:

这是一个使用上述 Javascript 代码的示例 HTML 文件:

<HTML>
<BODY>
<SCRIPT type="text/javascript" src="FacebookFeedDialog.js"></SCRIPT>
<SCRIPT>
var dialog = new FacebookFeedDialog(yourAppIDGoesHere,yourDestinationURLGoesHere,yourCloseWindowURLGoesHere);
dialog.addParam('name','This is my title');
dialog.addParam('description','This is the description');
dialog.addParam('picture',yourImageURLGoesHere);
dialog.addParam('caption','This is the caption');
</SCRIPT>

<A href="javascript:dialog.open()">Open facebook dialog</A>
</BODY>
</HTML>

Your closeWindow html file can look like this:

您的 closeWindow html 文件可能如下所示:

<SCRIPT>
window.close();
</SCRIPT>

回答by DMCS

Hmmm, the docs I see says it is required and must be defined....

嗯,我看到的文档说它是必需的并且必须定义....

redirect_uri

The URL to redirect to after the user clicks a button on the dialog. Required, but automatically specified by most SDKs.

重定向uri

用户单击对话框上的按钮后重定向到的 URL。必需,但由大多数 SDK 自动指定。