的Facebook登錄 - 混合應用

Question

UPDATE:

最後，我結束了通過使用Eclipse apache cordova/phonegap Android和Xcode中的iOS imlementing。這是我首選設置的唯一解決方案。

鏈接下載插件和文件：https://github.com/phonegap/phonegap-facebook-plugin

Previous post:

我想實現的Facebook登錄到我的混合應用。我已經在Facebook文檔中做了很少的研究，但是我還沒有找到任何可行的方法。如果您可以提供一些提示，那將會非常有幫助。我會獎勵一個可以告訴我如何去做的人。

我不想通過Phonegap/cordova和其他框架，因爲它需要我很多時間來研究這些框架。

Hybrid apps - like native apps, run on the device, and are written with web technologies (HTML5, CSS and JavaScript). Hybrid apps run inside a native container, and leverage the device’s browser engine (but not the browser) to render the HTML and process the JavaScript locally. A web-to-native abstraction layer enables access to device capabilities that are not accessible in Mobile Web applications, such as the accelerometer, camera and local storage.

如果任何人有任何解決方案，並願意提供幫助，請讓我知道。

我試過Javascript SDK，但沒有運氣。

代碼：

<div id="fb-root"></div> 
<script> 
window.fbAsyncInit = function() { 
    FB.init({ 
    appId  : 'xxxx', // App ID 
    channelUrl : '//xxxx/channel.html', // Channel File 
    status  : true, // check login status 
    cookie  : true, // enable cookies to allow the server to access the session 
    xfbml  : true // parse XFBML 
    }); 

    // Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired 
    // for any authentication related change, such as login, logout or session refresh. This means that 
    // whenever someone who was previously logged out tries to log in again, the correct case below 
    // will be handled. 
    FB.Event.subscribe('auth.authResponseChange', function(response) { 
    // Here we specify what we do with the response anytime this event occurs. 
    if (response.status === 'connected') { 
     // The response object is returned with a status field that lets the app know the  current 
     // login status of the person. In this case, we're handling the situation where they 
     // have logged in to the app.  
     testAPI(); 
    } else if (response.status === 'not_authorized') { 
     // In this case, the person is logged into Facebook, but not into the app, so we call 
     // FB.login() to prompt them to do so. 
     // In real-life usage, you wouldn't want to immediately prompt someone to login 
     // like this, for two reasons: 
     // (1) JavaScript created popup windows are blocked by most browsers unless they 
     // result from direct interaction from people using the app (such as a mouse click) 
     // (2) it is a bad experience to be continually prompted to login upon page load. 
     FB.login(); 
    } else { 
     // In this case, the person is not logged into Facebook, so we call the login() 
     // function to prompt them to do so. Note that at this stage there is no indication 
     // of whether they are logged into the app. If they aren't then they'll see the Login 
     // dialog right after they log in to Facebook. 
     // The same caveats as above apply to the FB.login() call here. 
     FB.login(); 
    } 
    }); 
    }; 

    // Load the SDK asynchronously 
    (function(d){ 
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; 
    if (d.getElementById(id)) {return;} 
    js = d.createElement('script'); js.id = id; js.async = true; 
    /* js.src = "//connect.facebook.net/en_US/all.js"; */ 
    js.src="https://connect.facebook.net/en_US/all.js"; 
    ref.parentNode.insertBefore(js, ref); 
    }(document)); 

    // Here we run a very simple test of the Graph API after login is successful. 
    // This testAPI() function is only called in those cases. 
    function testAPI() { 
    console.log('Welcome! Fetching your information.... '); 
    FB.api('/me', function(response) { 
     console.log('Good to see you, ' + response.name + '.'); 
    }); 
    } 
</script> 

<!-- 
    Below we include the Login Button social plugin. This button uses the JavaScript SDK to 
    present a graphical Login button that triggers the FB.login() function when clicked. 

    Learn more about options for the login button plugin: 
    /docs/reference/plugins/login/ --> 

<!-- <fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button> --> 

<!-- End script of Facebook Login --> 

Answer 1

目前您從本地計算機的測試，或在服務器上託管的HTML？ 如果在服務器上 - 你的域名是什麼？

1. 更新它的應用程序域（見圖片）
2. 更新其上的「與Facebook登錄網站」
3. 用於測試的問題，從testAPI刪除FB.api（）調用。只是提醒一下。
4. 從標準瀏覽器進行測試。如果有效 - 您的FB定義沒有問題。

Answer 2

而不是FB.Event.subscribe

使用FB.getLoginStatus

FB.getLoginStatus(function(response) { 
    if (response.status === 'connected') { 
    // the user is logged in and has authenticated your 
    // app, and response.authResponse supplies 
    // the user's ID, a valid access token, a signed 
    // request, and the time the access token 
    // and signed request each expire 
    var uid = response.authResponse.userID; 
    var accessToken = response.authResponse.accessToken; 

    FB.api('/me', function(response) { 
     console.log(response); 
    }); 

    } else if (response.status === 'not_authorized') { 
    // the user is logged in to Facebook, 
    // but has not authenticated your app 
    } else { 
    // the user isn't logged in to Facebook. 
    } 
}); 

參考鏈接：https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/

Answer 3

我偶然發現這是工作真的很好對我來說是不同的解決方案，甚至更好，沒有本地代碼庫！這裏的訣竅是繞過Facebook JavaScript SDK庫並直接使用Facebook REST API端點。

我正在使用OpenFB javascript庫（https://github.com/ccoenraets/OpenFB）使這個工作更容易，而不是自己寫所有的調用，但你可以做到這一點。我已經概述瞭如何讓它在下面工作的步驟。

1）創建一個Facebook應用程序，並更新基本和高級下的URL設置，以允許使用Facebook或您的本地URL的回調。然後複製Facebook的ID準備下一步

2）如果您有沒有準備好，請下載並安裝科爾多瓦把工具在命令行中。然後導航至您的站點文件夾，然後運行以下命令來創建項目並添加平臺：

cordova create your-project-name 
cordova platform add ios 
cordova platform add android 

3）現在，我們需要添加一個科爾多瓦插件來從Facebook登錄處理彈出窗口。要添加一個插件使用命令：

cordova plugin add org.apache.cordova.inappbrowser 

4）現在我們只需要下載和配置OpenFB我們新的科爾多瓦項目中。在這個例子中，我們只使用他們提供的測試頁面，所以從OpenFB Github頁面下載它並將這些文件提取到你的cordova項目/ www /文件夾中。這打開index.html，然後從步驟1與您的Facebook應用程序ID編輯下面一行之後：

openFB.init({appId: 'YOUR_FB_APP_ID'}); 

5）您現在應該能夠運行使用本地的瀏覽器設置的例子並登錄。

6）爲了測試在iOS模擬器，你需要安裝，然後Xcode中運行命令：

cordova emulate ios 

要測試你需要安裝Android SDK中的Android模擬器，然後運行命令：

cordova emulate android 

爲了測試與電纜連接時，運行一個iOS裝置上下面的命令：

cordova run ios 

要測試與電纜連接，運行在Android設備上以下命令：

cordova run android