Hộp thoại FB.ui yêu cầu redirect_uri, hộp thoại không đóng

Question

Tôi đang cố gắng mở hộp thoại nguồn cấp dữ liệu bằng cách sử dụng phương thức FB.ui của JS SDK và đóng nó sau khi người dùng chia sẻ. Vấn đề của tôi là hộp thoại nguồn cấp dữ liệu yêu cầu redirect_uri mặc dù tài liệu nói rằng nó không cần phải được xác định và cửa sổ bật lên sẽ chuyển hướng đến đó và sẽ không đóng như chức năng gọi lại nói.

Dưới đây là mã của tôi, gắn liền với sự kiện nộp click:

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

Nếu tôi rời khỏi redirect_uri, popup mở ra nhưng nó chỉ cho biết các ứng dụng FB có lỗi và xin vui lòng thử lại.

Answer 1

Có vẻ đây là một sự thay đổi được biết đến trong Javascript SDK của Facebook: http://developers.facebook.com/bugs/302946973066993

Khi sử dụng Facebook API JavaScript, gọi FB.ui sẽ thất bại trừ khi một tài sản 'redirect_uri' được cung cấp trong đối tượng params - hành vi này không mong muốn vì:

1.) Tài liệu tuyên bố rằng 'redirect_uri' sẽ tự động được thêm vào bởi hầu hết các SDK [1] - trước đây SDK JavaScript đang cung cấp một SDK đã đóng iFrame hộp đèn. 2.) Thêm một kết quả của redirect_uri param trong chuyển hướng iFrame của Facebook Lightbox, điều này khiến người dùng không thể đóng nó. 3.) Thông số redirect_uri không được yêu cầu trước đó.

Đây là hành vi mà tôi đã quen và đã cố gắng sao chép. Một nhà phát triển FB báo cáo rằng đây là "thiết kế".

Answer 2

Hmmm, các tài liệu tôi thấy nói nó là cần thiết và phải được xác định ....

redirect_uri

URL để chuyển hướng đến sau khi người dùng nhấp vào một nút trên hộp thoại. Bắt buộc nhưng được tự động chỉ định bởi hầu hết các SDK.

Answer 3

Sau khi dành cả ngày làm việc về vấn đề này, tôi có một giải pháp rất tốt mà tôi muốn chia sẻ. Thay vì sử dụng SDK với FB.ui(), tôi đã phát hiện ra rằng tôi có thể tránh hoàn toàn bằng cách mở thủ công cửa sổ bật lên của riêng mình thành https://www.facebook.com/dialog/feed. Khi thực hiện theo cách này, redirect_uri hoạt động như mong đợi và bạn chỉ có thể chuyển hướng đến một tệp HTML đóng cửa sổ bật lên. Cho dù người dùng nhấp vào chia sẻ hoặc hủy, cửa sổ bật lên sẽ đóng như mong đợi.

Tôi không tin rằng có bất kỳ sự thỏa hiệp nào với mã này và nếu có, nó sẽ dễ sử dụng hơn SDK thực tế.

Mã của tôi Javascript (mà bạn có thể save as FacebookFeedDialog.js) trông như thế này:

/* 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'); 
} 

Dưới đây là một file HTML mẫu sử dụng mã Javascript trên:

<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> 

bạn closeWindow html tệp có thể trông giống như sau:

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