使用 localhost 測試 Facebook login

2018-10 開始 Facebook login 強制使用 HTTPS 了，若要在 localhost 測試也是得用 HTTPS 才行。以下的參考連結說明 MAMP 的作法：
https://gist.github.com/jfloff/5138826

Facebook login 以前做過幾次，都是針對活動網站的，這次也不例外。一陣子沒做了，想說依照官方範例，應該不會有太大問題，但結果還是卡了一兩個小時。以下列出卡到的點：

1. 在設定 Facebook app 時，在「設定」〉「基本資料」，「應用程式網域」和「網站網址」的域名請一致。（設定介面經常在變，規則也是）

2. 在「Facebook 登入」〉「設定」裡，「對重新導向 URI 使用 Strict 模式」現在預設是設定為開啟，而且不能變更。所以一定要在「有效的 OAuth 重新導向 URI」填寫正確的 redirect uri。

3. 使用 facebook/graph-sdk 時，可以直接 copy sample code 去改，但記得在 login.php 和 fb-callback.php 裡都要先以 session_start() 啟動 session 功能。因為 FacebookRedirectLoginHelper 的 CSRF 是寫在 session 裡的。

網頁分享到 FB 的連結

網頁分享到 FB 的連結, 連到

http://www.facebook.com/sharer/sharer.php?u=網址

例如:

http://www.facebook.com/sharer/sharer.php?u=http://qops.blogspot.tw/

網頁內設定 meta 讓 FB 抓取顯示的資料可以參考:
Optimizing Metadata On Self-Hosted Objects Using Pointers

通常使用下列六個:

    <meta property="fb:app_id" content="{app_id}" />
    <meta property="og:title" content="標題" />
    <meta property="og:type" content="article" />
    <meta property="og:image" content="縮圖的原圖 URL" />
    <meta property="og:url" content="http://qops.blogspot.tw/" />
    <meta property="og:description" content="網頁簡短說明" />

除錯工具:
https://developers.facebook.com/tools/debug

取得某網頁上 Facebook 的 like 「讚」數量

http://graph.facebook.com/?ids=http://stackoverflow.com/,http://qops.blogspot.tw/

直接 copy 上列，貼到瀏覽器的網址列，就可以得到如下的結果：

{
    http://stackoverflow.com/: {
        id: "http://stackoverflow.com/",
        shares: 14867,
        comments: 9
    },
    http://qops.blogspot.tw/: {
        id: "http://qops.blogspot.tw/",
        shares: 13
    }
}

利用以下的 PHP 可以得到讚的數量：

<?php
$links = array(
 'http://stackoverflow.com/',
 'http://qops.blogspot.tw/',
);

$my_graph = 'http://graph.facebook.com/?ids=' . implode(',', $links);

$likes_info = json_decode( file_get_contents($my_graph), true );

foreach($links as $link) {
 printf("%s<br/>%s<br/>", $link, $likes_info[ $link ]['shares']);
}

以 Facebook 登入網站

許久沒有做 Facebook 相關的功能了, 記錄一下。

window.fbAsyncInit 是 Facebook JS SDK 載入後執行。
FB.getLoginStatus 判斷用戶目前對 App 的狀況。
FB.login 做授權登入。

JS SDK 和 PHP SDK 一起用時, 記得要將 FB.init 的 status 和 cookie 設定為 true。

本地端測試 Facebook App

Facebook App 註冊之後，可以使用 appId 在本地端測試，而不用上傳到 Canvas URL。
然而，測試時只能使用 127.0.0.1 而禁止使用 localhost 或其它網域名。

Facebook 開發者常用的連結

原文：10 LINKS FOR FACEBOOK DEVELOPERS

Official developer’s documentation

Working examples of Javascript SDK methods and XFBML tags

Console for testing Graph API queries

Console for testing FQL queries

URL Linter

Developers’ Forum

Bugzilla

ThinkDiff.net tutorials

Facebook GUI PSD kit

Flash 可以透過 JavaScript 取得 Facebook 的 session

Flash 可以透過 ExternalInterface (JavaScript) 取得 Facebook 的 session，
只要取得 session 裡的 access_token 就可以在 Flash 呼叫 Facebook 的 Graph API。

以下程式碼的要點：
1. 使用 swfobject 顯示 Flash 內容。
2. JavaScript 都載入後再顯示 Flash。
3. Flash 先呼叫 JS function，JS function 呼叫 FB function，callback function 呼叫 Flash function。
4. JS function 裡，swf movie name 和 callback function name 以傳入的方式設定。
5. access_token 以 get 方式傳送。
6. Graph API 回傳的內容是格式化過的 JSON 字串。
Code 參考

FaceBook 的 JavaScript 和 jQuery 混用

FaceBook 的 JavaScript 和 jQuery 混用時，Chrome 執行是正常的（如預期），但是 FireFox 和 IE8 卻看不到東西，也沒有錯誤提示。
後來想說會不會是 $ 衝到，不使用 $ 而以 jQuery 替代之後，執行就正常了。
難道 FB 的 JavaScript API 裡使用 $ 當變數，嘖！
Code 參考

寫了個方便處理 FacebookSession 的類別

承上一篇「Flash Builder 4 寫 Facebook Apps」，有自行測試者應該都會覺得在開發 Facebook appa上，除錯顯得很麻煩。必須先把 AppKey 和 AppSecret 填入程式中，測試完，拿掉 AppKey 和 AppSecret，編譯再上傳測試，中間會來來回回很多次。時間應該浪費在美好的事物上，玩 Games 應該比寫 Codes 美好 :P。
可以將 AppKey 和 AppSecret 放到一個檔案裡，再載入。URL-encoded 的文字檔是個選擇，為了讓本篇看起來有深度點(誤)，在此採用SWF。若要更有深度可以用ZIP、DOC...，也可以修改副檔名偽裝一下。
若可以載入 Key 檔，表示是在開發過程，必須連一下 Facebook 取得 Session。若無法載入 Key 檔，表示己經發佈了。

Flash Builder 4 寫 Facebook Apps

Adobe Developer Center 上　Jeanette Stallons　的兩篇 Quick Start 是必看的文章：Build and test locally、Deploy on Facebook。熱騰騰的 Flash Builder 4 當然要好好利用一下 :D

Step 1: 先要有網站空間，使用免費的也行。設定一個空目錄，如：「http://www.riarock.net/fbapps/fbastutorial/」給 Facebook App 使用。

Step 2: 登入 Facebook 並在「http://www.facebook.com/developers/」建立新的應用程式。其中必填的項目為：
基本資料→應用程式名稱 :: 就是應用程式名稱，不能用 Face、FB 等混淆視聽的字眼，所以在此用了 Footbook。
畫布→畫布頁面網址 :: 如「http://apps.facebook.com/fbastutorial/」。
畫布→Canvas Callback URL :: 在這個例子設定為「http://www.riarock.net/fbapps/fbastutorial/」。
畫布→呈現方法 :: 設定使用「Iframe」。
聯外通→聯外通網址 :: 在這個例子設定為「http://www.riarock.net/fbapps/fbastutorial/」。
進階→沙盒模式 :: 測試時先設定為「啟用」。

Step 3: 安裝好 Flash Builder 4 之後，開一個新專案，命名為 fbastutorial。將 Facebook_library_v3.4_flex.swc 放到專案的 libs 目錄。 預設的 Application 為 fbastutorial.mxml，不寫程式，直接執行。

Step 4: 將產生的 bin-debug/fbastutorial.html 複製到 src/index.html。並在指定的位置增加下面標起來的程式碼，用來取得 Facebook 給的 GET 參數。

var flashvars = {}; // ← 找到這一行，增加下面的程式碼
// *** START 增加的部份 ***
var strHref = window.location.href;
if ( strHref.indexOf("?") > -1 ) {
  var strQueryString = strHref.substr(strHref.indexOf("?")+1);
  var aQueryString = strQueryString.split("&");
  for ( var iParam = 0; iParam < aQueryString.length; iParam++ ) {
      var aParam = aQueryString[iParam].split("=");
      flashvars[aParam[0]] = aParam[1];
  }
}
// *** END 增加的部份 ***

Step 5: fbastutorial.mxml 的內容如下。

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="840" minHeight="500"
      applicationComplete="init()"
 viewSourceURL="srcview/index.html">
<!-- *** 注意：這裡是用 applicationComplete，不是用 creationComplete *** -->
 
 <fx:Script>
  <![CDATA[
   import com.facebook.Facebook;
   import com.facebook.commands.friends.GetFriends;
   import com.facebook.commands.users.GetInfo;
   import com.facebook.data.friends.FriendsCollection;
   import com.facebook.data.friends.GetFriendsData;
   import com.facebook.data.users.FacebookUser;
   import com.facebook.data.users.FacebookUserCollection;
   import com.facebook.data.users.GetInfoData;
   import com.facebook.events.FacebookEvent;
   import com.facebook.net.FacebookCall;
   import com.facebook.utils.FacebookSessionUtil;
   
   import mx.controls.Image;
   
   private var session:FacebookSessionUtil
   private var facebook:Facebook;
   private var fbUser:FacebookUser;
   private var dictionary:Dictionary;
   
   private function init():void {
    // *** 一開始測試時可以先填入 API Key 和　Application Secret
    //session = new FacebookSessionUtil("<API Key>", "<Application Secret>", loaderInfo);
    session = new FacebookSessionUtil(loaderInfo.parameters.fb_sig_api_key, null, loaderInfo);
    // 取得 Facebook Session，有 Session 才有權使用 Facebook API
    facebook = session.facebook;
    // 取得 Facebook Session 並連結之後，呼叫 onSessionConnect 方法
    session.addEventListener(FacebookEvent.CONNECT, onSessionConnect);
    
    if(loaderInfo.parameters.fb_sig_added == true){
     // 有登入時，呼叫核對 Session，OK的話發出 CONNECT 事件
     session.verifySession();
    } else if(loaderInfo.parameters.fb_sig_added == false){
     // 沒登入時
     navigateToURL(new URLRequest("http://www.facebook.com/login.php?api_key="+loaderInfo.parameters.fb_sig_api_key),"_top");
    } else {
     // 沒取得資料時
     session.login();
     btnLogin.visible = true;
    }
   }
   
   private function onSessionConnect(event:FacebookEvent):void {
    // 呼叫取得朋友資料
    var call:FacebookCall = facebook.post( new GetFriends() );
    // 取得朋友資料之後，執行 onGetFriendsComplete
    call.addEventListener(FacebookEvent.COMPLETE, onGetFriendsComplete);
   }
   
   private function onGetFriendsComplete(event:FacebookEvent):void {
    // 呼叫時用 GetFriends，取得時用 GetFriendsData
    var friendsData:GetFriendsData = event.data as GetFriendsData;
    var friends:FacebookUserCollection = friendsData.friends;
    // 將朋友的 ID 放入 uids 陣列
    var uids:Array = [];
    for(var i:int=0; i< friends.length; i++) {
     var f:FacebookUser = friends.getItemAt(i) as FacebookUser;
     uids.push(f.uid);
    }
    // GetFriends 只能取得朋友的 uid，必須呼叫 GetInfo 才能取得朋友資料
    var call:FacebookCall = facebook.post(
     // 設定要取得的資料項
     new GetInfo(uids, ["name", "pic_square"])
    );
    call.addEventListener(FacebookEvent.COMPLETE, onGetFriendsAttr);
   }
   
   private function onGetFriendsAttr(event:FacebookEvent):void {
    // 呼叫時用 GetInfo，取得時用 GetInfoData
    var getInfoData:GetInfoData = event.data as GetInfoData;
    var userCollection:FacebookUserCollection = getInfoData.userCollection;
    dictionary = new Dictionary();
    // 一一取出朋友資料
    for(var i:int=0; i<userCollection.length; i++) {
     var usr:FacebookUser = userCollection.getItemAt(i) as FacebookUser;
     var img:Image = new Image();
     // 沒有大頭貼時用預設的圖
     if(! usr.pic_square) {
      img.source = 'http://static.ak.fbcdn.net/pics/q_silhouette.gif';
     } else {
      img.source = usr.pic_square;
     }
     img.toolTip = usr.name;
     img.buttonMode = true;
     // 使用字典以方便用物件取得字串
     dictionary[img] = usr.uid;
     img.addEventListener(MouseEvent.CLICK,onImageClick);
     tilesPic.addElement( img );
    }
   }
   private function onImageClick(event:MouseEvent):void {
    var img:Image = event.currentTarget as Image;
    navigateToURL(new URLRequest("http://www.facebook.com/profile.php?id="+dictionary[img]),"_blank");
   }
  ]]>
 </fx:Script>
 
 <s:Button x="10" y="10" label="點按登入 Facebook" id="btnLogin"
     visible="false" click="session.validateLogin()"/>
 <s:Scroller x="30" y="30" width="800" height="450">
  <s:TileGroup width="100%" height="100%" clipAndEnableScrolling="true" id="tilesPic">
  </s:TileGroup>
 </s:Scroller>
 
</s:Application>

Step 6: 發佈，上傳至「http://www.riarock.net/fbapps/fbastutorial/」測試。

Step 7: 範例在「http://apps.facebook.com/fbastutorial/」，於 swf 上按右鍵選「View Source」就可以看到原始檔，並下載專案檔了。