2014-02-16 63 views
0

UPDATE時:錯誤/空白頁爲iPhone使用JavaScript FB登錄代碼

這個問題影響到Chrome和Safari瀏覽器的應用程序。

我想在我的網站上使用Facebook登錄(使用Javascript /解析)用下面的代碼。它在PC瀏覽器中工作正常。

問題與Chrome應用

錯誤,不支持的瀏覽器:谷歌iOS版Chrome不支持 此功能。請使用Safari並再試一次

它停在以下網址(我已將敏感數據更改爲XXXX)。 Safari瀏覽器的應用程序

https://m.facebook.com/dialog/oauth?app_id=XXXX&client_id=XXXX&display=touch&domain=kudosoo.com&e2e=%7B%7D&locale=en_US&origin=2&redirect_uri=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D40%23cb%3Df2562075ac%26domain%3DXXXX.com%26origin%3Dhttp%253A%252F%252Fkudosoo.com%252Ff3714a6424%26relation%3Dopener%26frame%3Df2a549beb4&response_type=token%2Csigned_request&sdk=joey

問題

它停止有我的腳本來執行登錄腳本的網頁上,甚至用瀏覽器刷新它不會搬過去這一頁,不記錄用戶英寸


我看過一些帖子這裏FB.login broken flow for iOS WebApp,但不確定他們是否會解決,或者在何處放置代碼?

我的代碼如下:

<!doctype html> 

<!-- Runs Parse and FB code that uses Facebook authentication to login user to the site and redirects them to the main content area. This page is fired from the Facebook button being clicked on the site landing page--> 


<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> 

    <title>Fb Login</title> 

    <script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.16.min.js"></script> 


</head> 
<body> 

    <!-- Important, must be on the page --> 
    <div id="fb-root"></div>  


    <!-- Initialize the Parse object--> 
    <script type="text/javascript">  
    Parse.initialize("XXX", "XXX"); 


//Fb app information// 

window.fbAsyncInit = function() { 
    Parse.FacebookUtils.init({ 
     appId  : 'XXX', 
     channelUrl : 'http://XXXX/channel.html', 
     status  : true, 
     cookie  : true, 
     xfbml  : true 
    }); 

//FB user authentication script, after this completes it fires todos_two.js to redirect user to main content page// 

Parse.FacebookUtils.logIn(null, { 
    success: function(user) { 
     if (!user.existed()) { 
      alert("User signed up and logged in through Facebook!"); 
      window.location.href="user_home.html"; 
     } else { 
      alert("User logged in through Facebook!"); 
      window.location.href="user_home.html"; 
     } 
    }, 
    error: function(user, error) { 
     alert("User cancelled the Facebook login or did not fully authorize."); 
    } 
}); 


}; 

(function(d, s, id){ 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) {return;} 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_US/all.js"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 


</script> 

</body> 
</html> 
+0

您是使用iOS上的Chrome瀏覽器還是使用Safari? – jackslash

+0

@jackslash是的,這是一個已知的問題? – Dano007

回答

1

所以你說你使用的是Chrome的意見。錯誤消息很明顯:

錯誤,不支持瀏覽器:Google Chrome for iOS不支持此功能。請使用Safari瀏覽器,然後再試一次

瀏覽器不支持。你必須使用Safari瀏覽器才能使用Facebook登錄。

我會假設你足夠聰明,想通了這一點,那你真正問的是,爲什麼是這種情況。 Googling找到了這個問題的答案。

Facebook OAuth "Unsupported" in Chrome on iOS

引領我們here它告訴我們存在阻止其正常工作的iOS在瀏覽器的錯誤。

可以解決此問題通過使用本文檔基於重定向登錄流程:

https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow

+0

感謝您花時間寫出詳細的回覆。正如你可能已經猜到了,我正在學習,因此我的技能不如其他人那麼優秀。基於這個鏈接,這只是在上面使用這個代碼的一個例子嗎? https://www.facebook.com/dialog/oauth? client_id = {app-id} &redirect_uri = {redirect-uri} – Dano007

0

這個問題的答案是兩個部分。

首先,Chrome的問題是根據他的回答中的@jackslash評論。

其次,代碼在登錄成功完成後使用警報通知用戶。在iPhone上的Safari瀏覽器中,即使調整了瀏覽器設置,這也是一個問題。我通過從代碼中完全刪除警報來解決它。之後,登錄過程按要求運行。