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 上頭的 Start Building 按鈕進行，使用後者比較簡單，也有完整的程式範例。以 Facebook | 開發人員為例
[*]建立新的應用程式

[*]填寫一些名稱資訊
http://farm5.static.flickr.com/4041/4347595261_7a8fff1a48.jpg
[*]設定 "聯外通" 並填寫 "聯外通網址"
[*]此例以 http://my.domain.com/path/fb/
http://farm3.static.flickr.com/2765/4347595279_7d0ddf5fb8.jpg
設定儲存完則會切回此應用程式整體資訊，例如顯示 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 為例
點選 Start Building 建立基本資料
http://farm3.static.flickr.com/2758/4347595113_a3669ec4d2.jpg [*]擺放 xd_receiver.htm 在網站的根目錄中，如果有權限可以擺放該檔，建議可以先測試後在進行，不然就點選稍候再上傳，並且把檔案擺在網站服務目錄下
http://farm5.static.flickr.com/4026/4347595139_67044c5a5a.jpg [*]接著網站上也會有一些現成的程式碼可以用，比傳統建立的方式輕鬆許多，資料也豐富很多。
http://farm5.static.flickr.com/4015/4348354506_8d4901c27c.jpg
其他留意項目
[*]關於 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

[*]<?php
session_start();

$appapikey = 'API_KEY';
$appsecret = 'Application Secret';

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

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

   if( !empty( $user_id ) && !isset( $_SESSION['id'] ) )
   {
            $_SESSION['type'] = 'facebook' ;
            $_SESSION['id'] = $user_id;

            if( isset( $_REQUEST['continue'] ) )
            {
                     header( 'LOCATION: '.$_REQUEST['continue'] );
                     exit;
            }
   }
}

$curr_url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
?>
[*]index.php

[*]<?php
require_once( 'config.php' );
?>
<html>
   <head>
   </head>
   <body>
            <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>
<?php
if( !isset( $_SESSION['id'] ) )
{
   $login_url = strpos( $curr_url , '?' ) > -1 ? $curr_url.'&check_login=on' : $curr_url.'?check_login=on';

?>
            <fb:login-button v="2" size="small" onlogin="window.location='<?php echo $login_url; ?>';">用 Facebook 登入</fb:login-button>
<?php
}
else
{
?>
            <fb:comments numposts="4" title="My Blog Comments" css="http://www.yourwebsite.com/css/comments.css?1234" simple="1"></fb:comments>
<?php
}
?>
      </body>
</html>
網站 Demo 畫面：

初次訪問 http://my.domain.com/path/fb/ ，此頁只會有單純的一個登入按鈕
http://farm5.static.flickr.com/4068/4348404780_7a835065b8_o.png 點選 Facebook 登入按鈕，會跳出相關的資訊給使用者，告知使用者一些資訊
http://farm5.static.flickr.com/4043/4347656887_72de8fe090.jpg [*]若登入後，則將畫面轉成可以留言到個人塗鴉牆上的介面
http://farm5.static.flickr.com/4009/4347656915_faf2b20c14.jpg
目前的缺點：
尚未找到妥善的登出方式。

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

{:5_4:}牛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

我来看看！谢谢

static/image/common/sigline.gif
{随机城市}门户网站建站

頁: [1]

TShopping's Archiver

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