Facebook登录挂在“XD Proxy”当通过Chrome网上应用店安装页面时 [英] Facebook login hangs at "XD Proxy" when page is installed via Chrome Web Store
问题描述
创建了以下Web应用程序：
我也将其添加到Chrome网上应用店：
https://chrome.google.com/webstore/detail/idalgghcnjhmnbgbeebpdolhgdpbcplf 问题是，当进入Chrome网上应用店并安装此应用程序时，Facebook登录窗口会挂在XD Proxy窗口中。虽然连接本身有效，但这个空白窗口可能会让用户感到困惑。 我做了我的研究，这似乎是一个Chrome问题：
https://code.google.com/p/chromium/issues/detail如果您从Chrome卸载应用程序，问题就会消失。
有没有解决这个问题的办法？
类似的stackoverflow问题：
这是我的Facebook连接，以防万一：
FB.init（{
appId：window .__ FACEBOOK_APP_ID__，
status：true，//检查登录状态
cookie：true，//启用cookie以允许服务器访问会话
xfbml：true，//解析XFBML
channelUrl：window .__ MEDIA_URL__ +'channel.html'，// channel.html文件
oauth：true //启用OAuth 2.0
}）;
FB.XD.Flash.init（）;
FB.XD._transport =flash;
if（A.networks.facebook.connected）{
FB.getLoginStatus（function（response）{
//存储当前用户ID以备后用
that.network_id = response.authResponse.userID;
if（！response.authResponse）{
//没有用户会话可用，某人不知道
A.networks.facebook .connected = false;
}
callback（）;
}）;
}
else {
callback（）;
}
};
解决方案
感谢reekogi回复我能解决这个问题。这里是完整的实现：
为了避免XD代理问题，您必须在不使用FB.login的情况下连接到Facebook，这可以通过手动重定向用户转到Facebook页面。
我在我的代码中使用了此登录功能：
控制台。
FB.login（function（response）{
if（response.authResponse））{code> _facebook.connect_to_network = function（callback） log（'Welcome！抓取你的信息....'）;
FB.api（'/ me'，function（response）{
//存储当前用户ID供以后使用
that.network_id = response.id;
console.log（'Good to see you，'+ response.name +'。'）;
callback（）;
}）;
}
else {
console.log（'用户取消登录或未完全授权。'）;
that.connected = false;
callback（）;
}
}，{scope：window .__ FACEBOOK_PERMS__}）;
};
我用这段代码取代：
_facebook.connect_to_network = function（callback）{
var url ='https://www.facebook.com/connect/uiserver.php？ app_id ='+ window .__ FACEBOOK_APP_ID__ +'& method = permissions.request& display = page& next ='+ encodeURIComponent（window .__ BASE_URL__ +'authorize-window？my_app = facebook& my_method = login'）+'& response_type = token& fbconnect = 1& perms ='+ window .__ FACEBOOK_PERMS__;
window.open（url）;
};
新代码打开一个弹出窗口，连接到Facebook并返回到下一个参数。我在这个回调url中添加了一些额外的参数，以便JavaScript代码可以检查它并关闭弹出窗口。
当Facebook重定向到回调url时执行此代码：
$ b
_facebook.parse_url_params = function（）{
//这是弹出式窗口
if（URL_PARAMS.my_method ==='login'）{
window.opener.A.networks.facebook.connected = true;
self.close（）;
}
};
URL_PARAMS只是一个包含所有url参数的帮助对象。
我仍然认为这是一个Chrome问题，但由于此解决方案已经解决了我的问题，因此我将此问题标记为已解决。 >解决方案
您可以调用JavaScript重定向来获取权限，然后重定向到 http://www.web-allbum.com/connected uri？
我在这里详细描述了这种方法 - >
粉丝专页上的权限
编辑：
以前演示的方法将在OAuth 2.0进入要求时被弃用。
以下是适用于OAauth 2.0的代码（ response.session 替换为 response.authResponse < code $）
$ b
< div id =fb-root><< ; / DIV>
< script>
theAppId =YOURAPPID;
redirectUri =YOURREDIRECTURI; //这是您在用户接受权限对话框后重定向到的页面
//连接到JS SDK
FB.init（{
appId：theAppId，
cookie：true，
xfbml：true，
status：true，
channelURL：'http://yourdomain.co.uk/channel.html'，// channel.html文件
oauth：true //启用OAuth 2.0
}）;
//追加到JS SDK到div.fb-root
（function（）{
var e = document.createElement（'script'）;
e .src = document.location.protocol +'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById（'fb-root'）。 appendChild（e）;
}（））;
//检查登录状态和权限
FB.getLoginStatus（function（response）{
if（response.authResponse）{
//登录并且连接的用户，你认识的人
} else {
//重定向到权限对话
top.location =https://www.facebook.com/connect/uiserver.php?app_id=+ theAppId +& method = permissions.request& display = page& next =+ redirectUri +& response_type = token& fbconnect = 1& perms = email，read_stream，publish_stream，offline_access;
}
}）;
< / script>
刚刚经过测试，在Chrome中运行良好。
The created the following web application:
I also added it to the Chrome Web Store:
https://chrome.google.com/webstore/detail/idalgghcnjhmnbgbeebpdolhgdpbcplf
The problem is that when go to the Chrome Web Store and install this app the Facebook login windows hangs at a "XD Proxy" window. While the connect itself works, this blank window can confuse the users.
I did my research, and this seems to be a Chrome issue: https://code.google.com/p/chromium/issues/detail?id=59285#c26
If you uninstall the app from Chrome, the problem disappears.
Is there any workaround for this problem?
Similar stackoverflow questions:
- Facebook connect login window locking in Chrome
- FB.login dialog does not close on Google Chrome
- facebook connect blank pop up on chrome
- https://stackoverflow.com/questions/4423718/blank-page-with-fb-connect-js-sdk-on-after-permission-request
This is my Facebook connect in case it helps:
FB.init({
appId : window.__FACEBOOK_APP_ID__,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelUrl : window.__MEDIA_URL__ + 'channel.html', // channel.html file
oauth : true // enable OAuth 2.0
});
FB.XD.Flash.init();
FB.XD._transport = "flash";
if (A.networks.facebook.connected) {
FB.getLoginStatus(function (response) {
// Stores the current user ID for later use
that.network_id = response.authResponse.userID;
if (!response.authResponse) {
// no user session available, someone you dont know
A.networks.facebook.connected = false;
}
callback();
});
}
else {
callback();
}
};
The Solution
Thanks to the reekogi reply I was able to workaround this issue. Here is the full implementation:
In order to avoid the XD Proxy problem, you have to connecte to Facebook without using the FB.login, this can be achieved by manually redirecting the user to Facebook page.
I had this login function in my code:
_facebook.connect_to_network = function (callback) {
FB.login(function (response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function (response) {
// Stores the current user Id for later use
that.network_id = response.id;
console.log('Good to see you, ' + response.name + '.');
callback();
});
}
else {
console.log('User cancelled login or did not fully authorize.');
that.connected = false;
callback();
}
}, {scope: window.__FACEBOOK_PERMS__});
};
Which I replaced by this code:
_facebook.connect_to_network = function (callback) {
var url = 'https://www.facebook.com/connect/uiserver.php?app_id=' + window.__FACEBOOK_APP_ID__ + '&method=permissions.request&display=page&next=' + encodeURIComponent(window.__BASE_URL__ + 'authorize-window?my_app=facebook&my_method=login') + '&response_type=token&fbconnect=1&perms=' + window.__FACEBOOK_PERMS__;
window.open(url);
};
The new code opens a popup which connects to Facebook and returns to the url specified in the 'next' parameter. I added some extra parameters in this callback url so that the javascript code could check for it and close the popup.
This code is executed when the Facebook redirects to the callback url:
_facebook.parse_url_params = function () {
// This is the popup window
if (URL_PARAMS.my_method === 'login') {
window.opener.A.networks.facebook.connected = true;
self.close();
}
};
URL_PARAMS is just a helper object that contains all the url parameters.
I still believe that this is a Chrome issue, but since this workaround has worked and solved my problem I am marking this question as solved.
Could you call a javascript redirect to get permissions then redirect back to the http://www.web-allbum.com/connected uri?
I described this method in detail here -> Permissions on fan page
EDIT:
The method I demonstrated before will be deprecated when OAuth 2.0 comes into the requirements.
Here is the code, adapted for OAauth 2.0 (response.session is replaced with response.authResponse)
<div id="fb-root"></div>
<script>
theAppId = "YOURAPPID";
redirectUri = "YOURREDIRECTURI"; //This is the page that you redirect to after the user accepts the permissions dialogue
//Connect to JS SDK
FB.init({
appId : theAppId,
cookie: true,
xfbml: true,
status: true,
channelURL : 'http://yourdomain.co.uk/channel.html', // channel.html file
oauth : true // enable OAuth 2.0
});
//Append to JS SDK to div.fb-root
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
//Check login status and permissions
FB.getLoginStatus(function(response) {
if (response.authResponse) {
// logged in and connected user, someone you know
} else {
//Redirect to permissions dialogue
top.location="https://www.facebook.com/connect/uiserver.php?app_id=" + theAppId + "&method=permissions.request&display=page&next=" + redirectUri + "&response_type=token&fbconnect=1&perms=email,read_stream,publish_stream,offline_access";
}
});
</script>
Just tried and tested, worked fine in chrome.
这篇关于Facebook登录挂在“XD Proxy”当通过Chrome网上应用店安装页面时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
