Вход в Facebook зависает на "XD Proxy", когда страница установлена через Интернет-магазин Chrome
Создано следующее веб-приложение:
http://www.web-allbum.com/
Я также добавил его в Интернет-магазин Chrome:
https://chrome.google.com/webstore/detail/idalgghcnjhmnbgbeebpdolhgdpbcplf
Проблема заключается в том, что при переходе в Интернет-магазин Chrome и установке этого приложения окна входа в систему Facebook висят в окне "XD Proxy". Хотя само соединение работает, это пустое окно может смутить пользователей.
Я сделал свое исследование, и это, похоже, проблема Chrome:
https://code.google.com/p/chromium/issues/detail?id=59285#c26
Если вы удалите приложение из Chrome, проблема исчезнет.
Есть ли способ обхода проблемы?
Аналогичные вопросы о stackoverflow:
Это мое подключение к Facebook, если оно помогает:
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();
}
};
Решение
Благодаря ответу reekogi я смог решить эту проблему. Вот полная реализация:
Чтобы избежать проблемы с XD Proxy, вам нужно подключиться к Facebook без использования FB.login, этого можно добиться, перенаправив пользователя вручную на страницу Facebook.
У меня была эта функция входа в мой код:
_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__});
};
Я заменил этот код:
_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-адресу, указанному в параметре "next". Я добавил некоторые дополнительные параметры в этот URL обратного вызова, чтобы код javascript мог проверить его и закрыть всплывающее окно.
Этот код выполняется, когда Facebook перенаправляет 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 - это только вспомогательный объект, содержащий все параметры URL.
Я по-прежнему считаю, что это проблема Chrome, но поскольку это обходное решение сработало и решило мою проблему, я рассматриваю этот вопрос как решенный.
Ответы
Ответ 1
Не могли бы вы вызвать перенаправление javascript для получения разрешений, а затем перенаправить обратно в http://www.web-allbum.com/connected uri?
Я подробно описал этот метод здесь → Разрешения на странице поклонника
EDIT:
Метод, который я продемонстрировал ранее, будет устаревать, когда OAuth 2.0 вступает в требования.
Вот код, адаптированный для OAauth 2.0 (response.session
заменяется на 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>
Просто попробовал и протестировал, отлично работал в хроме.
Ответ 2
Я не пробовал решение, предложенное Cesar, потому что я предпочитаю придерживаться официального SDK для Facebook.
Тем не менее я хотел бы добавить несколько замечаний:
-
Действительно, проблема блокировки произошла только в Chrome после установки из Интернет-магазина Chrome. Проблема с удалением веб-приложения. (протестирован с использованием устаревшего метода аутентификации без oauth
2.0). После закрытия всплывающего окна XD Proxy вручную мое приложение работало правильно.
-
После перехода на асинхронный FB.init()
и включения опции oauth
2.0 мое приложение даже не получит действительный статус подключения к facebook во время входа в систему ({authResponse: null, status: "unknown"})
... Опять же, удалив его из Интернет-магазина Chrome, он работает... ({authResponse: Object, status: "connected"})
-
В любом из этих случаев проблема не возникает с Safari.
Ответ 3
В IE8 - это может быть вызвано вашей флеш-версией. Я пробовал все, и ничего не работало, пока я не отключил вспышку. Подробнее из этого блога: http://hustoknow.blogspot.com/2011/06/how-facebooks-xdproxyphp-seemed-to-have.html#comment-form
Ответ 4
У меня была такая же проблема для всех браузеров. Когда пользователь нажал кнопку "Войти", всплывающее окно открылось и повесило; и если пользователь не убил процесс браузера, это вызвало большую нагрузку на CPU. Если пользователю удалось увидеть кнопку "разрешить" и щелкнуть по нему, значит, появилось пустое окно "xd proxy", и ничего не произошло. Это была проблема.
После долгих исследований я заметил, что мой новый JS-код, который проксирует методы setInterval/clearInterval/setTimeout/clearTimeout, вызвал эту проблему. Код выглядит следующим образом:
window.timeoutList = new Array();
window.intervalList = new Array();
window.oldSetTimeout = window.setTimeout;
window.oldSetInterval = window.setInterval;
window.oldClearTimeout = window.clearTimeout;
window.oldClearInterval = window.clearInterval;
window.setTimeout = function(code, delay) {
window.timeoutList.push(window.oldSetTimeout(code, delay));
};
window.clearTimeout = function(id) {
var ind = window.timeoutList.indexOf(id);
if(ind >= 0) {
window.timeoutList.splice(ind, 1);
}
window.oldClearTimeout(id);
};
window.setInterval = function(code, delay) {
window.intervalList.push(window.oldSetInterval(code, delay));
};
window.clearInterval = function(id) {
var ind = window.intervalList.indexOf(id);
if(ind >= 0) {
window.intervalList.splice(ind, 1);
}
window.oldClearInterval(id);
};
window.clearAllTimeouts = function() {
for(var i in window.timeoutList) {
window.oldClearTimeout(window.timeoutList[i]);
}
window.timeoutList = new Array();
};
window.clearAllIntervals = function() {
for(var i in window.intervalList) {
window.oldClearInterval(window.intervalList[i]);
}
window.intervalList = new Array();
};
Удаление этих строк решило мою проблему. Может быть, это помогает тем, кто переживает то же самое.
Ответ 5
Откройте новую вкладку браузера в Chrome и посмотрите, установлено ли приложение Facebook. Если это так, перетащите его в нижний правый угол, чтобы удалить. После удаления XD Proxy будет работать.
Ссылка: facebook connect blank pop up on chrome
Ответ 6
Другим обходным решением является использование этого кода после вызова FB.init()
:
if (/chrome/.test(navigator.userAgent.toLowerCase())) {
FB.XD._origin = window.location.protocol + '//' + document.domain + '/' + FB.guid();
FB.XD.Flash.init();
FB.XD._transport = 'flash';
}
Всплывающее окно остается открытым и пустым, но я обнаружил, что в моем приложении Chrome Web Store аутентификация проходит, когда этот код используется.
Эта ошибка также подана на Facebook Developers здесь: http://developers.facebook.com/bugs/278247488872084
Ответ 7
Похоже, это исправлено в Chrome. Больше не происходит для нас в Mac Chrome 15.0.874.106
Ответ 8
Я испытываю ту же проблему в IE9, и, похоже, это связано с обновлением до Flash Player 10. Ответы, предложенные мной, уже не работали для меня, и я потерял надежду на то, чтобы исправить это, a href= "http://bugs.developers.facebook.net/show_bug.cgi?id=12112" rel= "nofollow noreferrer" > открыть ошибку в Facebook. Но Henson отправил ответ на аналогичный вопрос, который исправил его для меня. В JavaScript на моем главном сайте я удалил строки
FB.UIServer.setLoadedNode = function (a, b) {
//HACK: http://bugs.developers.facebook.net/show_bug.cgi?id=20168
FB.UIServer._loadedNodes[a.id] = b;
};
и теперь он работает. (N.B. Я не проверял, чтобы IE8 выдавал эти строки для преодоления возвратов.)