30

Facebook OAuth 弹出窗口仅在 iOS 上的 Chrome 中引发错误。developer.facebook.com 和 google 都对此一无所知。想法?

ios 上移动 chrome 上的 facebook 誓言弹出窗口的屏幕截图

4

7 回答 7

16

对于这种情况,您可以使用如下重定向方法(通过检测用户代理是 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 但这应该可以解决问题并且非常简单

于 2013-06-27T02:33:48.203 回答
11

这就是我的做法(专门修复 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'});
于 2014-07-01T13:44:05.503 回答
5

这是您的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>
于 2015-03-06T01:07:23.047 回答
0

我在谷歌浏览器中获得了 ios facebook 网站登录的解决方案。实际上,当我们单击 facebook 登录按钮时,问题出在 ios 中的 google chrome 上,它在内部为 ios chrome 中的 window.open 提供了 null 。
两种解决方案可以在 ios(chrios) 中检查它是 chrome,然后生成自定义登录屏幕(我们仍然没有机会更正它)。
是我用过的。是从反手使用 facebook 登录创建一个 api 命中将填充 facebook 屏幕,然后当登录完成后,它将重定向到您的服务器,您将从该服务器重定向到您的带有 facebook 数据的网站页面。
另一个好处其中一个是您为同一网站所有者创建了 2 个网站,您不能在 facebook 开发人员帐户中设置两个网站 url。这样,您可以使用相同的 facebook appid 创建多个网站 facebook 登录。

于 2016-02-24T10:04:36.397 回答
0

我在这方面的 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);
    }
};

希望能帮助到你!

于 2016-01-28T14:48:00.853 回答
0

这是所有开发人员在实现 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);
}
于 2015-09-05T09:01:19.347 回答
0

不是一个真正的答案,但基于这个值得注意的线程,它开始为我们的应用程序工作,在 Chrome 上,当我们在 iPhone 上时General>Reset>Reset Location & Privacy

于 2016-02-04T20:20:03.817 回答