Facebook 開發筆記 - 使用單一 Facebook app 仿 OAuth 架構提供單多平台多 app 登入使用

由於 Facebook app 在任何平台上，只能允許一個 app，例如 iOS platform 就只能綁定一個 iOS app，如果想要多個 iOS app 都用同一款 Facebook app 時，就出現了這奇妙的需求 :P

因此，再次包裝的方式，那就是用 UIWebview/WebView 來解吧！對於任何一款 Mobile app 都是採用 Browser 來完成登入的。而 Backend service 是維持採用同一款 Facebook app。

原理：主體是以 Facebook Javascript SDK 來使用，當完成 Facebook app 登入認證後，將 Javascript 端取得的 Facebook app token 丟給 backend service ，驗證後交換成自家 service token，未來用自己的 service token 來進行服務互動。

以上狀態僅需依照 Facebook SDK Javascript 文件已經可以完成大半了：

FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
    console.log('get facebook app token');
  }
  else {
    FB.login();
  }
});

在 response.status === 'connected' 就能取得 facebook token，再轉呼叫自家 service 來交換 token 即可收工。

然而？事情不是那麼簡單的 XD 在 mobile platform 環境上，用 chrome browser 或是 safari 都可以正常工作，唯獨 PhoneGap 等類似架構會出錯，主因是 Facebook SDK Javascript 登入時，會彈跳視窗，結束後可以再導回來，但在 PhoneGap 架構上，可能受限於沒有分頁機制而出錯？總之，解法：自行用 direct_url 跟 Facebook 互動吧！這招印象中是在寫 server side 的用法：

當使用者點擊 login 時，不要用 Facebook Javascript SDK，而是將網址導向到:

https://www.facebook.com/dialog/oauth?client_id=YourFacebookAppID&redirect_uri=http://localhostOrServiceWebURL/&response_type=token&scope=publish_stream,email

當使用者完成登入後，將導回你指定的位置，而這時在 FB.getLoginStatus 時，又可以正常取得 response.status === 'connected' 等資訊了。