20 tháng 3 2011

Sử dụng account Facebook cho website của bạn

Có bao giờ bạn tự hỏi làm cách nào để user có thể đăng ký website mình nhanh chóng nhất không? Nếu có bạn đã tìm đúng chỗ rồi. Câu trả lời chỉ có thể là sử dụng account của các dịch vụ nổi tiếng như Facebook, Gmail, Yahoo. Ở đâu mình chỉ bàn tới account Facebook mà thôi, còn Gmail và Yahoo mình sẽ cố gắng viết 1 bài khác.

Trước tiên để đảm bảo code có thể làm việc đúng bạn cần làm có các phần sau:
1. Wamp Server
2. PHP extension php_openssl, php_curl phải được enable
Sau khi đã cài đặt xong các phần cần thiết, mình sẽ chuyển sang phần cách thức hoạt động tổng quát khi dùng Facebook làm account đăng nhập website của mình.
1. Khi người dùng vào website của mình và gửi yêu cầu đăng nhập bằng account Facebook. Website chúng ta sẽ chuyển user sang URL ( được facebook cung cấp ) để chứng thực account.
2. Nếu account đã tồn tại, tiếp đến bước 2 là chứng thực application của website là hợp lệ đối với Facebook ( lưu ý chúng ta cần tạo 1 application trên facebook ).
3. Sau khi đã chứng thực application thành công, website sẽ bắt đầu lấy thông tin của user trên facebook về.
Như vậy coi như ta thành công.
Với 3 bước cơ bản trên chúng ta sẽ tiến hành như sau:
1. Tạo 1 facebook application. Ở đây mình chỉ hướng dẫn tạo 1 facebook application very very simple nha.
- Vào link này http://www.facebook.com/developers/#!/developers/apps.php chọn "Set Up New App".
- Nhập các thông tin cơ bản trong mục About

- Chọn sang mục website, nhập các thông tin tương tự như bên dưới ( lưu ý bạn nên có 1 domain để thử vì khi nhập vào thì Facebook sẽ check xem domain này có thật hay không, nếu không có bạn xem bài này để làm nha )
- Sau khi nhập xong, Save lại. Ta sẽ được chuyển sang trang sau:

Các bạn lưu ý 2 thông tin: AppID và AppSecret, 2 thông tin này sẽ được sử dụng trong code khá thường xuyên.
2. Sau khi đã có Facebook Application, ta bắt đầu sang coding. Ta sẽ cần 2 page, 1 page sẽ là trang index.php, 1 trang là return.php.
- Trang index.php sẽ là trang đầu tiên chạy, còn return.php sẽ là trang sau khi chứng thực user xong sẽ redirect về trang return.php ( url redirect cũng do mình chỉ định )
- Trong file index.php ta sẽ viết như sau
$url = "https://www.facebook.com/dialog/oauth?client_id=CLIENT_ID&redirect_uri=http://www.shop-bebongbong.com/oauth/return.php&scope=email,read_stream,user_about_me,user_birthday";

header("Location:".$url);
?>
Đoạn code này sẽ redirect user sang URL được chỉnh định trước ( bước này bạn có thể đưa vào link của icon facebook trong website của bạn ). Các bạn để ý trong URL này có 2 biến là CLIENT_ID và redirect_uri, "client_id" chính là AppID của Facebook App được đăng ký ở trên, "redirect_id" là URL mà sau khi đã chứng thực user Facebook sẽ redirect về đó.
- File return.php sẽ viết như sau:

/*
* Kiem tra co bien "code"
*/
if(isset($_REQUEST['code'])){
    /*
    * Kiem tra application dang ky voi facebook.
    * Return: key "access_token"
    */
    $url    = "https://graph.facebook.com/oauth/access_token?client_id=167557839959523&redirect_uri=http://www.shop-bebongbong.com/oauth/return.php&client_secret=26c02117cb491827bc4697a6b9211214&code=" . $_REQUEST['code'];
    $data    = array();
   
    $ch = curl_init();   
    curl_setopt($ch, CURLOPT_URL,$url);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST,  2);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);   
    $access_token = curl_exec ($ch);
    curl_close ($ch);
       
    /*
    * Lay thong tin user
    */
    $url    = "https://graph.facebook.com/me?$access_token";   
    $ch = curl_init();   
    curl_setopt($ch, CURLOPT_URL,$url);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST,  2);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);   
    $user = curl_exec ($ch);
    curl_close ($ch);

    echo $url;
    var_dump(json_decode($user));
}
?>
Sau khi đã chứng thực thì khi redirect qua trang "return.php", Facebook sẽ truyền thêm 1 thông số nữa là code. Ta sẽ sử dụng code này cho URL tiếp theo nhằm xác định Facebook Application là hợp lệ. trong URL này cũng có 2 biến như URL trên là "client_id" và "redirect_url" ngoài ra còn 1 biết nữa là "client_secret" chính là "appsecret" của Facebook Application.
Khi bước chứng thực Facebook Application thành công, ta sẽ nhận được 1 token gọi là "access_token". Với token này có thể thực hiện 1 số thao tác đối với account của user như lấy thông tin cá nhân, post status, v.v... ( xem thêm tại đây )
- Bước cuối cùng là sử dụng cá Graph API của facebook để thực hiện các thao tác trên account user vừa đăng nhập.

Như vậy các bạn có thể thấy việc tích hợp Facebook vào website của mình để tiết kiệm thời gian của user cũng tương đối đơn giản.

Chúc các bạn thành công.

18 nhận xét:

Unknown nói...

Tôi chưa hiểu bạn login như thế nào, tôi có một tài khoản fc, nhưng làm sao bạn có thể lấy được id của tôi mà bạn dưa vào link login

Unknown nói...

Thật ra quy trình nó là như vậy:
- Khi bạn click vào button login trên website thì sẽ chuyển qua facebook để login.
- Khi login facebook thành công thì sẽ trả về cho website mình thông tin của bạn như vậy coi như bạn đã login thành công.
- Còn nếu không trả về gì cả thì xem như là login false

Unknown nói...

Sao minh lam the nay lai khong duoc nhi.

Đây là file Return của mình


/*
* Kiem tra co bien "code"
*/
if(isset($_REQUEST['code'])){
/*
* Kiem tra application dang ky voi facebook.
* Return: key "access_token"
*/
$url = "https://graph.facebook.com/oauth/access_token?client_id=214348488595794&redirect_uri=http://www.linhdb.com/fbopenid/return.php&client_secret=f54da147ebd66d54edbc0f5ccd019f8c&code=". $_REQUEST['code'];
$data = array();

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,$url);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$access_token = curl_exec ($ch);
curl_close ($ch);

/*
* Lay thong tin user
*/
$url= "https://graph.facebook.com/me?$access_token";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,$url);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$user = curl_exec ($ch);
curl_close ($ch);

$_SESSION['login'] == "YES"

$user = user;
$email = email;
$yahoo = user_hometown;
$birthday = user_birthday;
$name = user_groups;
$avata = user_photos;
$sex = user_checkins;

echo $url;
var_dump(json_decode($user));
}
?>

Unknown nói...

Bạn có thể nói rõ hơn là bạn không làm được là như thế nào không? Biến nào bạn không nhận được? Nếu được bạn gửi email cho mình xem thử code của bạn xem sao. Email: beckerbao@yahoo.com

Unknown nói...

em gui email cho anh roi, anh xem ho em voi

NDT nói...

Mình đang làm việc với Drupal..Bạn có thể chỉ cho mình cách get & Post comments của API facebook không ???

Unknown nói...

Bạn @NDT ơi, bạn vui lòng vào trang developer.facebook.com tìm API nhé.

Để get & post comment thì phải qua 2 bước:

1. Bạn phải xác định được post hay get của status nào. Mỗi status có 1 id riêng.

2. User phải allow permission cho app của bạn được post comment thì mới được quyền post

Factory News nói...

A cho em hỏi 1 chút về bài này với
Em làm theo a vào làm thử 2 trang là index và return nhưng khi chạy thì ko dc anh ạ

Unknown nói...

@Duy Nguyen: em có thể nói rõ là mình đang bị vấn đề nào không?

Factory News nói...

Em làm như của anh chỉ dẫn. em muốn lấy thông tin ví dụ như email, name của người dùng thì mình phải làm thế nào ạ
Em thấy cái hàm var_dump của anh nó xuất ra 1 object gồm nhiều thông tin về account nhưng em chỉ muốn lấy email với name thì làm thế nào ạ
Rất mong được anh chỉ giúp! Cám ơn anh.

Unknown nói...

@Duy Nguyen: em đã đăng ký application trên facebook chưa? Nếu có rồi thì mình mới dùng các api của facebook để lấy thông tin được.

Về email thì hơi phức tạp vì phải có sự đồng ý của user thì em mới có thể lấy được.

Factory News nói...
Nhận xét này đã bị tác giả xóa.
Factory News nói...

Em đã đăng ký rồi anh ạ
Em làm thử 2 file như của anh và đăng ký 1 app của facebook sau đó thử chạy thì thấy hàm var_dump(json_decode($user));nó in ra cả 1 mảng object trong đó có email mà ko biết lấy như thế nào anh ạ

Unknown nói...

@Duy Nguyen: em đã có object rồi thì chỉ việc lấy như sau:

echo $user->email;

là được rồi.

Factory News nói...

Em cũng thử làm thế rồi nhưng nó không in ra gì cả anh ạ

Unknown nói...

em đã thử với field name hay id được không? Nếu được thì field email đó không có rồi. Vì theo anh nhớ để lấy được email, user phải allow permission nữa kìa

Factory News nói...

Em lấy được rồi anh ạ! Cám ơn anh đã giúp

nguyen giang nói...

Anh ơi cho em hỏi 1 chút ạ.
Khi mình đăng nhập website của mình bằng tài khoản google thì có cách nào để cho cái avatar của tài khoản gmail hiện lên ở trang web của mình không ạ