Всплывающее окно Facebook OAuth выдает ошибку в Chrome только на iOS. И developers.facebook.com, и google ничего не знают об этом. Идеи?
Facebook OAuth "Неподдерживаемый" в Chrome на iOS
Ответ 1
Вы можете использовать метод перенаправления, как показано ниже для этого случая (путем обнаружения пользовательского агента, который является хром-ios):
https://www.facebook.com/dialog/oauth?client_id={app-id}&redirect_uri={redirect-uri}
Подробнее см. здесь https://developers.facebook.com/docs/facebook-login/login-flow-for-web-no-jssdk/
Примечание: Я лично использую сервер OAuth в этом случае, но это должно сделать трюк и довольно просто
Ответ 2
Вот как я это сделал (специально для исправления iOS хром)
// fix iOS Chrome
if( navigator.userAgent.match('CriOS') )
window.open('https://www.facebook.com/dialog/oauth?client_id='+appID+'&redirect_uri='+ document.location.href +'&scope=email,public_profile', '', null);
else
FB.login(null, {scope: 'email,public_profile'});
Ответ 3
Ниже приведено полное обходное решение для FB JS Auth по проблеме Chrome iOS http://seanshadmand.com/2015/03/06/facebook-js-login-on-chrome-ios-workaround/
Функции JS для проверки подлинности, откройте страницу FB auth вручную и обновите токены аутентификации на исходной странице после завершения:
function openFBLoginDialogManually(){
// Open your auth window containing FB auth page
// with forward URL to your Opened Window handler page (below)
var redirect_uri = "&redirect_uri=" + ABSOLUTE_URI + "fbjscomplete";
var scope = "&scope=public_profile,email,user_friends";
var url = "https://www.facebook.com/dialog/oauth?client_id=" + FB_ID + redirect_uri + scope;
// notice the lack of other param in window.open
// for some reason the opener is set to null
// and the opened window can NOT reference it
// if params are passed. #Chrome iOS Bug
window.open(url);
}
function fbCompleteLogin(){
FB.getLoginStatus(function(response) {
// Calling this with the extra setting "true" forces
// a non-cached request and updates the FB cache.
// Since the auth login elsewhere validated the user
// this update will now asyncronously mark the user as authed
}, true);
}
function requireLogin(callback){
FB.getLoginStatus(function(response) {
if (response.status != "connected"){
showLogin();
}else{
checkAuth(response.authResponse.accessToken, response.authResponse.userID, function(success){
// Check FB tokens against your API to make sure user is valid
});
}
});
}
И обработчик Opener, который FB auth пересылает и вызывает обновление на главной странице. Обратите внимание, что window.open в Chrome iOS имеет ошибки, поэтому правильно назовите это, как указано выше:
<html>
<head>
<script type="text/javascript">
function handleAuth(){
// once the window is open
window.opener.fbCompleteLogin();
window.close();
}
</script>
<body onload="handleAuth();">
<p>. . . </p>
</body>
</head>
</html>
Ответ 4
Это очень распространенная проблема, с которой сталкиваются все разработчики при внедрении функции входа в FB. Я пробовал большинство интернет-решений, но никто из них не работал. Либо window.opener не работают в Chrome iOS, либо когда-то FB-объект не загружается при использовании /dialog/oauth.
Наконец, я решил это сам, пробовав все хаки!
function loginWithFacebook()
{
if( navigator.userAgent.match('CriOS') )
{
var redirect_uri = document.location.href;
if(redirect_uri.indexOf('?') !== -1)
{
redirect_uri += '&back_from_fb=1';
}
else
{
redirect_uri += '?back_from_fb=1';
}
var url = 'https://www.facebook.com/dialog/oauth?client_id=[app-id]&redirect_uri='+redirect_uri+'&scope=email,public_profile';
var win = window.open(url, '_self');
}
else
{
FB.login(function(response)
{
checkLoginState();
},
{
scope:'public_profile,email,user_friends,user_photos'
});
}
}
Обратите внимание, что выше я передаю дополнительный параметр URL-адресу перенаправления, так что, как только новое окно откроется с вышеуказанным перенаправлением uri, я могу прочитать значения и могу сказать, что этот вызов выполняется из окна Chrome iOS. Также убедитесь, что этот код работает при загрузке страницы.
if (document.URL.indexOf('back_from_fb=1') != -1 && document.URL.indexOf('code=') != -1)
{
pollingInterval = setInterval(function()
{
if(typeof FB != "undefined")
{
FB.getLoginStatus(function(response) {}, true);
checkLoginState();
}
else
{
alert("FB is not responding, Please try again!", function()
{
return true;
});
}
}, 1000);
}
Ответ 5
Мои 2 цента на этом, поскольку никто из ответов не был ясен для меня. Я запускаю диалоговое окно входа в систему при нажатии кнопки, поэтому теперь, когда это chrome ios, я сначала проверяю, зарегистрирован ли пользователь в facebook, и если нет, я отправляю их в окно входа в систему. Проблема в том, что пользователям chome ios необходимо дважды щелкнуть кнопку соединения, если они не вошли в facebook. Если они вошли в facebook, достаточно одного щелчка.
$( 'body' ).on( 'click', '.js-fbl', function( e ) {
e.preventDefault();
if( navigator.userAgent.match('CriOS') ) {
// alert users they will need to click again, don't use alert or popup will be blocked
$('<p class="fbl_error">MESSAGE HERE</p>').insertAfter( $(this));
FB.getLoginStatus( handleResponse );
} else {
// regular users simple login
try {
FB.login( handleResponse , {
scope: fbl.scopes,
return_scopes: true,
auth_type: 'rerequest'
});
} catch (err) {
$this.removeClass('fbl-loading');
}
}
});
Этот бит кода заставляет его работать для пользователей chrome ios. При ответе на управление я просто позабочусь об ответе на fb и отправлю его на мой веб-сайт для входа/регистрации пользователей.
var handleResponse = function( response ) {
var $form_obj = window.fbl_button.parents('.flp_wrapper').find('form') || false,
$redirect_to = $form_obj.find('input[name="redirect_to"]').val() || window.fbl_button.data('redirect');
/**
* If we get a successful authorization response we handle it
*/
if (response.status == 'connected') {
var fb_response = response;
/**
* Make an Ajax request to the "facebook_login" function
* passing the params: username, fb_id and email.
*
* @note Not all users have user names, but all have email
* @note Must set global to false to prevent gloabl ajax methods
*/
$.ajax({...});
} else {
//if in first click user is not logged into their facebook we then show the login window
window.fbl_button.removeClass('fbl-loading');
if( navigator.userAgent.match('CriOS') )
window.open('https://www.facebook.com/dialog/oauth?client_id=' + fbl.appId + '&redirect_uri=' + document.location.href + '&scope=email,public_profile', '', null);
}
};
Надеюсь, что это поможет!
Ответ 6
Не настоящий ответ, но на основе этот поток стоит отметить, что он начал работать для нашего приложения, в Chrome, когда на iPhone мы сделали General>Reset>Reset Location & Privacy
Ответ 7
У меня есть решение для входа в iOS facebook в Google Chrome. На самом деле проблема была связана с google chrome в ios, когда мы нажимаем кнопку входа в facebook, она дает внутренне нулевое значение window.open в ios chrome.
<
Вторая, что я использовал. Является ли использование входа в facebook из бэкэнд, создание апи-хита будет заполнять экран facebook, а затем при входе в систему будет перенаправляться на ваш сервер, откуда вы будете перенаправлять на страницу своего веб-сайта с помощью данных facebook.
еще одно преимущество заключается в том, что вы создаете 2 веб-сайта для того же владельца веб-сайта, что вы не можете установить два URL-адреса веб-сайта в учетной записи разработчика facebook. Таким образом, вы можете создать много сайтов facebook login с тем же facebook appid.