Facebook OAuth在iOS上的Chrome中"不受支持"

Dan*_*ler 30 javascript iphone facebook ios

Facebook OAuth弹出窗口仅在iOS上的Chrome中引发错误.developers.facebook.com和谷歌都没有透露任何相关信息.想法?

在ios上移动铬的f​​acebook誓言弹出窗口的屏幕截图

Kim*_* D. 16

对于这种情况,您可以使用重定向方法(通过检测用户代理是chrome ios):

https://www.facebook.com/dialog/oauth?client_id={app-id}&redirect_uri={redirect-uri}
Run Code Online (Sandbox Code Playgroud)

点击此处查看更多信息https://developers.facebook.com/docs/facebook-login/login-flow-for-web-no-jssdk/

备注:在这种情况下,我个人使用服务器OAuth,但这应该可以解决问题并且非常简单

  • 由于这个原因,通常不鼓励用户代理嗅探支持功能检测 - 它不可维护.然而,用户代理嗅探本身并没有错误或不可靠.这是与特定浏览器相关的错误,而不是功能集,因此浏览器嗅探绝对没问题.这个答案应该被接受. (6认同)
  • 必须检测用户代理是不理想的(我听到太多的论点,它是不可靠的).相反,有什么东西可用于移动浏览器的特征检测吗? (2认同)

vsy*_*ync 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'});
Run Code Online (Sandbox Code Playgroud)


Sea*_*ean 5

以下是针对Chrome iOS问题的FB JS Auth 的完整解决方法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
            });
        }
    });

}
Run Code Online (Sandbox Code Playgroud)

和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>
Run Code Online (Sandbox Code Playgroud)

  • 工作流程为:调用"openFBLoginDialogManually".这将打开*FB生成的*登录页面.传递给该FB登录页面的URL包括重定向到上面的Opener Handler HTML代码段.HTML页面调用原始的开启者的"fbCompleteLogin".此时,它所做的就是使用新凭据刷新本地FB登录缓存."requireLogin"是不必要的,分散注意力,抱歉.希望这会有所帮助.如果它没有让我更具体地告诉你在哪里发现问题. (2认同)