TShopping

 找回密碼
 註冊
搜索
查看: 2970|回復: 5

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

[複製鏈接]
發表於 2012-4-2 16:31:32 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
網路上已經有許多關於 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 也提供許多官方與非官方 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 上頭的 Start Building 按鈕進行,使用後者比較簡單,也有完整的程式範例。 以 Facebook | 開發人員 為例
    • 建立新的應用程式
      • 填寫一些名稱資訊

    • 設定 "聯外通" 並填寫 "聯外通網址" 設定儲存完則會切回此應用程式整體資訊,例如顯示 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 檔案內容
          1. <!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 為例

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

    其他留意項目
辦完向 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();

      3. $appapikey = 'API_KEY';
      4. $appsecret = 'Application Secret';

      5. // check login
      6. if( isset( $_REQUEST['check_login'] ) )
      7. {
      8.         require_once 'facebook.php';

      9.         $facebook = new Facebook($appapikey, $appsecret);
      10.         $user_id = $facebook->get_loggedin_user();

      11.         if( !empty( $user_id ) && !isset( $_SESSION['id'] ) )
      12.         {   
      13.                 $_SESSION['type'] = 'facebook' ;
      14.                 $_SESSION['id'] = $user_id;

      15.                 if( isset( $_REQUEST['continue'] ) )
      16.                 {   
      17.                         header( 'LOCATION: '.$_REQUEST['continue'] );
      18.                         exit;
      19.                 }   
      20.         }   
      21. }

      22. $curr_url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
      23. ?>
      複製代碼

  • 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';

      13. ?>
      14.                 <fb:login-button v="2" size="small" onlogin="window.location='<?php echo $login_url; ?>';">用 Facebook 登入</fb:login-button>
      15. <?php
      16. }
      17. else
      18. {
      19. ?>
      20.                 <fb:comments numposts="4" title="My Blog Comments" css="http://www.yourwebsite.com/css/comments.css?1234" simple="1"></fb:comments>
      21. <?php
      22. }
      23. ?>
      24.          </body>
      25. </html>
      複製代碼

網站 Demo 畫面:

    初次訪問 http://my.domain.com/path/fb/ ,此頁只會有單純的一個登入按鈕
    點選 Facebook 登入按鈕,會跳出相關的資訊給使用者,告知使用者一些資訊
  • 若登入後,則將畫面轉成可以留言到個人塗鴉牆上的介面

目前的缺點:
尚未找到妥善的登出方式。

 

臉書網友討論
 樓主| 發表於 2013-2-1 19:30:47 | 顯示全部樓層
牛X海海!!!

版主招募中

發表於 2014-6-28 08:58:44 | 顯示全部樓層



   交流贴。。。。


發表於 2014-7-7 18:55:49 | 顯示全部樓層
大家有什么好看法,赶快说说











bjcars.net


發表於 2014-7-11 11:52:58 | 顯示全部樓層


  先支持了再说


發表於 2016-1-16 17:31:47 | 顯示全部樓層
我来看看!谢谢












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


您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-11 10:31 , Processed in 0.059259 second(s), 18 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表