Facebook Connect 搭配 API 提供帳號管控教學

woff · 發表於 2012-4-2 16:31:32

網路上已經有許多關於 Facebook API 的使用教學，而最近則是越來越多關於 Facebook Connect 的應用，例如替自己的 Blog 加入留言，但留言可以發佈到 Facebook 塗鴉牆上，在這邊試著結合 Facebok API 與 Facebook Connect ，建立一個網站服務，但網站管理者不管理帳號密碼，反而全部都使用 Facebook 的帳密管理機制。
這樣的最大的好處是網站服務的推廣時，主要透過 Facebook 的平台，提供類似 OpenID 或 OAuth 的服務，讓使用者不必再註冊一個新帳號，並且使用 Facebook 的平台推廣自己開發的服務。
先看看 Facebook 上頭使用者的活躍程度：

More than 400 million active users
50% of our active users log on to Facebook in any given day
More than 35 million users update their status each day
More than 60 million status updates posted each day
...

資料來源：Facebook | 統計資料

除此之外，Facebook 也提供許多官方與非官方 Client libraries ，如：

PHP 5
JavaScript
Facebook Connect for iPhone
ActionScript 3.0 Library for Facebook Platform
Microsoft SDK for Facebook Platform
...
資料來源：User:Client Libraries - Facebook Developer Wiki

所以，有機會就試試 Facebook Connect 的效果吧！
設定方式：

Facebook | 開發人員

Facebook Developers | Facebook Connect

Facebook | 開發人員

建立新的應用程式
- 填寫一些名稱資訊
設定 "聯外通" 並填寫 "聯外通網址"
- 此例以 http://my.domain.com/path/fb/
設定儲存完則會切回此應用程式整體資訊，例如顯示 API 金鑰、Application Secret 等資訊。切換到自己的機器上( http://my.domain.com )
- 準備 xd_receiver.htm ，將它擺在網站的根目錄，以此例就是可以用網頁連到 http://my.domain.com/xd_receiver.htm 這個位置。如果沒有權限，那擺在 http://my.domain.com/path/fb/xd_receiver.htm 也可以試試，我試的結果兩者都可以。
- xd_receiver.htm 檔案內容
  - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>xd</title></head><body><script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script></body></html>
    複製代碼

Facebook Developers | Facebook Connect

擺放 xd_receiver.htm 在網站的根目錄中，如果有權限可以擺放該檔，建議可以先測試後在進行，不然就點選稍候再上傳，並且把檔案擺在網站服務目錄下
接著網站上也會有一些現成的程式碼可以用，比傳統建立的方式輕鬆許多，資料也豐富很多。

關於 Server 位置，雖然設定在使用非 80 port 時可以正常設定完成，如 http://my.domain.com:8080/path/fb/ ，但在使用 Facebook 提供的認證過程中，並不會幫你導回正確的 port ；使用 http://my.domain.com/~user/path/fb/ 的設定方式也會有問題，要留意一下。

辦完向 Facebook 申請的設定部份後，緊接著則是對 Server 撰寫合適的程式碼，在此以簡單的程式碼舉例：

假設網站位置在 http://my.domain.com/path/fb/ ，在 Server 位置恰好是 /data/path/fb/ 目錄，那該目錄會有兩個檔案，分別是 config.php 跟 index.php ，如果無法設定網站根目錄 xd_receiver.htm ，那可以把它擺在 /data/path/fb/ 目錄中，也就是在 /data/path/fb 目錄中共有三個檔案。
config.php
- 1. <?php
  2. session_start();
  4. $appapikey = 'API_KEY';
  5. $appsecret = 'Application Secret';
  7. // check login
  8. if( isset( $_REQUEST['check_login'] ) )
  9. {
  10. require_once 'facebook.php';
  12. $facebook = new Facebook($appapikey, $appsecret);
  13. $user_id = $facebook->get_loggedin_user();
  15. if( !empty( $user_id ) && !isset( $_SESSION['id'] ) )
  16. {
  17. $_SESSION['type'] = 'facebook' ;
  18. $_SESSION['id'] = $user_id;
  20. if( isset( $_REQUEST['continue'] ) )
  21. {
  22. header( 'LOCATION: '.$_REQUEST['continue'] );
  23. exit;
  24. }
  25. }
  26. }
  28. $curr_url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
  29. ?>
  複製代碼
index.php
- 1. <?php
  2. require_once( 'config.php' );
  3. ?>
  4. <html>
  5. <head>
  6. </head>
  7. <body>
  8. <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/zh_TW" type="text/javascript"></script><script type="text/javascript">FB.init("<?php echo $appapikey;?>");</script>
  9. <?php
  10. if( !isset( $_SESSION['id'] ) )
  11. {
  12. $login_url = strpos( $curr_url , '?' ) > -1 ? $curr_url.'&check_login=on' : $curr_url.'?check_login=on';
  14. ?>
  15. <fb:login-button v="2" size="small" onlogin="window.location='<?php echo $login_url; ?>';">用 Facebook 登入</fb:login-button>
  16. <?php
  17. }
  18. else
  19. {
  20. ?>
  21. <fb:comments numposts="4" title="My Blog Comments" css="http://www.yourwebsite.com/css/comments.css?1234" simple="1"></fb:comments>
  22. <?php
  23. }
  24. ?>
  25. </body>
  26. </html>
  複製代碼

網站 Demo 畫面：

http://my.domain.com/path/fb/

若登入後，則將畫面轉成可以留言到個人塗鴉牆上的介面

目前的缺點：

尚未找到妥善的登出方式。

woff · 發表於 2013-2-1 19:30:47

牛X海海!!!

宁波德萨 · 發表於 2014-6-28 08:58:44

交流贴。。。。

cbzdy · 發表於 2014-7-7 18:55:49

大家有什么好看法，赶快说说

bjcars.net

半年松岛枫 · 發表於 2014-7-11 11:52:58

先支持了再说

wvduznm · 發表於 2016-1-16 17:31:47

我来看看！谢谢

{随机城市}门户网站建站

[教學] Facebook Connect 搭配 API 提供帳號管控教學

瀏覽過的版塊

帳號		自動登錄		找回密碼
密碼				註冊