Facebook OAuth 弹出窗口仅在 iOS 上的 Chrome 中引发错误。developer.facebook.com 和 google 都对此一无所知。想法?
7 回答
对于这种情况,您可以使用如下重定向方法(通过检测用户代理是 chrome 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 但这应该可以解决问题并且非常简单
这就是我的做法(专门修复 iOS chrome)
// 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'});
这是您的FB JS Auth on Chrome iOS 问题的完整解决方法 http://seanshadmand.com/2015/03/06/facebook-js-login-on-chrome-ios-workaround/
JS 功能检查身份验证,手动打开 FB 身份验证页面并在完成后刷新原始页面上的身份验证令牌:
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
});
}
});
}
以及 FB auth 转发到的 Opener Handler 并调用刷新到主页。请注意,Chrome iOS 中的 window.open 也有错误,因此请如上所述正确调用它:
<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>
我在谷歌浏览器中获得了 ios facebook 网站登录的解决方案。实际上,当我们单击 facebook 登录按钮时,问题出在 ios 中的 google chrome 上,它在内部为 ios chrome 中的 window.open 提供了 null 。
有两种解决方案可以在 ios(chrios) 中检查它是 chrome,然后生成自定义登录屏幕(我们仍然没有机会更正它)。
二是我用过的。是从反手使用 facebook 登录创建一个 api 命中将填充 facebook 屏幕,然后当登录完成后,它将重定向到您的服务器,您将从该服务器重定向到您的带有 facebook 数据的网站页面。
另一个好处其中一个是您为同一网站所有者创建了 2 个网站,您不能在 facebook 开发人员帐户中设置两个网站 url。这样,您可以使用相同的 facebook appid 创建多个网站 facebook 登录。
我在这方面的 2 美分,因为没有一个答案对我来说很清楚。我在单击按钮时触发登录 js 对话框,所以现在当它是 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);
}
};
希望能帮助到你!
这是所有开发人员在实现 FB 登录功能时都面临的一个非常常见的问题。我已经尝试了大多数 Internet 解决方案,但都没有奏效。要么window.opener
在 Chrome iOS 中不起作用,要么在使用/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);
}
不是一个真正的答案,但基于这个值得注意的线程,它开始为我们的应用程序工作,在 Chrome 上,当我们在 iPhone 上时General>Reset>Reset Location & Privacy