002 接入facebook幣金流教學

Post date: 2014/10/5 上午 06:24:04

這幾天用java替公司加入消費facebook幣功能

昨天晚上用php替WOG也寫了一套,分享一下經驗

這是官方的 Facebook Credits 文件

http://developers.facebook.com/docs/creditsapi

內容落落長,英文不太好的人會看的很辛苦

其實要做的事情很簡單

準備工作:

下載官方範例,我們開始用這個範例開始修改

https://github.com/facebook/credits-api-sample

http://www.facebook.com/developers 建立你的應用

應用的部份有幾個關鍵

1.必須啟用 OAuth 2.0 for Canvas

2.facebook幣 要登錄公司資料(填個人資料也可以),並且設定paypal或bank做為你的收款帳戶

3.Credits Callback URL 這地方要輸入facebook跟你的金流接入口

準備工作做完了,接著開始修改Facebook Credits官方範例

要改的檔案只有兩個

index.php

callback.php

其他的可以無視

修改index.php

define('APP_ID', 'abc123'); 這邊要填寫應用程式ID (請注意:是ID不是KEY)

修改

callback.php

$api_key = '<api key>'; 這行可以注解掉不使用

$secret = '<secret>'; 這邊要填寫應用程式密鑰

include_once 'facebook.php'; 這行也可以注解掉不使用

接著上傳

index.php

callback.php

金流基礎功能,以上就修改完成了,以下開始說明細節

流程說明:

facebook是使用json跟你的callback.php做資料傳接

完成一次交易總共會做3次的傳接

我們來看一下這3次傳接了什麼東西

第1次傳接

facebook傳入:

{"algorithm":"HMAC-SHA256","credits":{"buyer":10000012345678,"receiver":10000012345678,"order_id":133557386724972,"order_info":"{\"title\":\"WOG\u904a\u6232\u9ede\",\"description\":\"\",\"price\":50,\"data\":\"ET_FB1\",\"image_url\":\"http:\/\/www.facebook.com\/images\/gifts\/21.png\",\"product_url\":\"http:\/\/www.facebook.com\/images\/gifts\/21.png\"}","test_mode":1},"expires":1308985200,"issued_at":1308979209,"oauth_token":"316161056134|2.AQBopf4B9pRzWKgt.3600.1308985200.1-10000012345678|Y5YB_hkE9Q6tchvOgIO2Z840Y50","user":{"country":"tw","locale":"zh_TW","age":{"min":21}},"user_id":"10000012345678"}

callback.php傳出:

{"content":[{"title":"WOG\u904a\u6232\u9ede","price":50,"description":"ET_FB1 \u514c\u63db 150 WOG\u904a\u6232\u9ede","image_url":"http:\/\/www.facebook.com\/images\/gifts\/21.png","product_url":"http:\/\/www.facebook.com\/images\/gifts\/21.png","data":"ET_FB1"}],"method":"payments_get_items"}

buyer 為買方FB帳號

user_id 為用戶FB帳號 (通常情況下與buyer相同)

order_id 為訂單號

order_info 訂單訊息,買家也會從這裡看到他買什麼東西

"method":"payments_get_items" 表示現在只是把東西顯示給用戶看,讓用戶確認是否要交易

data 若你希望在訂單中夾帶其他訊息,可以使用這個欄位,我在上面夾帶了我在遊戲中的帳號

第2次傳接

facebook傳入:

{"algorithm":"HMAC-SHA256","credits":{"order_details":"{\"order_id\":133557386724972,\"buyer\":10000012345678,\"app\":316161056134,\"receiver\":10000012345678,\"amount\":50,\"update_time\":1308979212,\"time_placed\":1308979209,\"data\":\"\",\"items\":[{\"item_id\":\"0\",\"title\":\"WOG\\u904a\\u6232\\u9ede\",\"description\":\"ET_FB1 \\u514c\\u63db 150 WOG\\u904a\\u6232\\u9ede\",\"image_url\":\"http:\\\/\\\/www.facebook.com\\\/images\\\/gifts\\\/21.png\",\"product_url\":\"http:\\\/\\\/www.facebook.com\\\/images\\\/gifts\\\/21.png\",\"price\":50,\"data\":\"ET_FB1\"}],\"status\":\"placed\"}","status":"placed","order_id":133557386724972,"test_mode":1},"expires":1308985200,"issued_at":1308979212,"oauth_token":"316161056134|2.AQBopf4B9pRzWKgt.3600.1308985200.1-10000012345678|Y5YB_hkE9Q6tchvOgIO2Z840Y50","user":{"country":"tw","locale":"zh_TW","age":{"min":21}},"user_id":"10000012345678"}

callback.php傳出:

{"content":{"status":"settled","order_id":1.3355738672497e+14},"method":"payments_status_update"}

amount 交易多少FB幣

order_info改為items紀錄訂單訊息

"status":"placed" 且 "method":"payments_status_update" 表示facebook跟callback.php確認是否要進行扣款交易

此時若你回傳"status":"placed"可以中止交易

範例中,我回傳"status":"settled",表示進行扣款

第3次傳接

facebook傳入:

{"algorithm":"HMAC-SHA256","credits":{"order_details":"{\"order_id\":133557386724972,\"buyer\":10000012345678,\"app\":316161056134,\"receiver\":10000012345678,\"amount\":50,\"update_time\":1308979213,\"time_placed\":1308979209,\"data\":\"\",\"items\":[{\"item_id\":\"0\",\"title\":\"WOG\\u904a\\u6232\\u9ede\",\"description\":\"ET_FB1 \\u514c\\u63db 150 WOG\\u904a\\u6232\\u9ede\",\"image_url\":\"http:\\\/\\\/www.facebook.com\\\/images\\\/gifts\\\/21.png\",\"product_url\":\"http:\\\/\\\/www.facebook.com\\\/images\\\/gifts\\\/21.png\",\"price\":50,\"data\":\"ET_FB1\"}],\"status\":\"settled\"}","status":"settled","order_id":133557386724972,"test_mode":1},"expires":1308985200,"issued_at":1308979213,"oauth_token":"316161056134|2.AQBopf4B9pRzWKgt.3600.1308985200.1-10000012345678|Y5YB_hkE9Q6tchvOgIO2Z840Y50","user":{"country":"tw","locale":"zh_TW","age":{"min":21}},"user_id":"10000012345678"}

callback.php傳出:

{"content":{"order_id":1.3355738672497e+14},"method":"payments_status_update"}

到這階段callback.php接到facebook傳回"status":"settled",表示交易已完成

上面已經把facebook與callback.php互相交互過程做了一次說明

後面我們針對實際需求,教大家如何客制自己的 index.php callback.php

程式說明:

在index.php中可以看到這段javascript

代碼: 選擇全部

      var title = document.getElementById('title_el').value;
      var desc = document.getElementById('desc_el').value;
      var price = document.getElementById('price_el').value;
      var img_url = document.getElementById('img_el').value;
      var product_url = document.getElementById('product_el').value;
      var order_info = { "title":title,
                         "description":desc,
                         "price":price,
                         "image_url":img_url,
                         "product_url":product_url
                       };

title 為物品名稱

desc 物品說明

price 交易FB幣金額

若要增加額外欄位,必需使用data,例如 "data":value

index.php其他的就是美化工作了,後面的callback.php才是重點

把callback.php看成這樣

代碼: 選擇全部

if ($func == 'payments_status_update') {
   if ($status == 'placed') {
      facebook第2次傳接訊息
   }else
   {
      facebook第3次傳接訊息
   }
} else if ($func == 'payments_get_items') {
   facebook第1次傳接訊息
}

以我的例子來做說明

facebook第2次傳接訊息時,我insert一筆訂單到wog_order表中

facebook第3次傳接訊息時,我update該筆訂單,在wog_order表裡改成已完成交易,並且在wog_player加入WOG點數

下圖是我程式的範例

未命名2.png

程式範例

未命名2.png (22.17 KiB) 被瀏覽 702 次

這是我的wog_order表,給大家參考

未命名1.png

wog_order

未命名1.png (65.72 KiB) 被瀏覽 702 次

PS.

由於facebook的數字是bigint,所以php的json_decode會把數字變成科學符號

若要解決這問題,在使用json_decode之後,可以使用BC Math,把bigint轉成字串處理

function parse_signed_request 為處理OAuth 2.0驗證使用