Categories
Chia sẻ

Hướng dẫn viết tính năng Đăng nhập với Facebook cho website sử dụng php

Bạn có thể sử dụng tính năng đăng nhập với Facebook (Login with facebook) trên trang web của bạn để cho phép người dùng đăng nhập bằng tài khoản facebook của họ. Bạn cũng có thể quản lý người dùng trong trang ứng dụng facebook của bạn. Bài viết này hướng dẫn cách viết tính năng Đăng nhập với Facebook cho website sử dụng Facebook PHP SDK với ví dụ và demo

DEMO LOGIN WITH FACEBOOK

DOWNLOAD LOGIN WITH FACEBOOK

Tạo ứng dụng và kết nối với Facebook

Bước 1: Tạo ứng dụng Facebook

Truy cập vào trang https://developers.facebook.com/  chọn My Apps sau đó click vào Add a New App  lúc này sẽ có popup nhảy lên bạn chọn loại Trang web

Tiếp theo đặt tên cho ứng dụng rồi click Create New Facebook App ID tiếp theo bạn Chọn một lĩnh vực cho app rồi click Create App ID

Như vậy là bạn đã tạo thành công 1 ứng dụng facebook:

Tạo ứng dụng đăng nhập bằng facebook

Bỏ qua các bước ở trang này bạn click chọn nút Skip Quick Test như hình

Bước 2: Cấu hình cho ứng dụng vừa tạo

Trong tab Settings các bạn điền App Domains và Contact Email sau đó click vào Add Platform chọn Website và điền domain web vào:

Cấu hình cho ứng dụng đăng nhập facebook

Cuối cùng click Save changes

Bước 3: Public ứng dụng

Mặc định khi ứng dụng của bạn tạo ra ở chế độ test, nên ta cần thay đổi trạng thái của ứng dụng để sử dụng thực tế

Trong tab Cuối cùng click Save changes các bạn chuyển sang nút Yes:

Thay đổi trạng thái ứng dụng đăng nhập Facebook sang public

Cuối cùng click Save changes

Bước 4: Tải mã nguồn đăng nhập bằng facebook sử dụng php

Các bạn download tại đây: DOWNLOAD LOGIN WITH FACEBOOK

Bước 5: Sửa mã nguồn, chèn ID và Secret của ứng dụng

Các bạn mở file login-with-facebook/index.php

<?php
session_start();
require_once 'Facebook/autoload.php';
$fb = new Facebook\Facebook ([
  'app_id' => 'APP_ID', 
  'app_secret' => 'APP_SECRET',
  'default_graph_version' => 'v2.2',
  ]);

$helper = $fb->getRedirectLoginHelper();

try {
  $accessToken = $helper->getAccessToken();
} catch(Facebook\Exceptions\FacebookResponseException $e) {
  // When Graph returns an error
  echo 'Graph returned an error: ' . $e->getMessage();
  exit;
} catch(Facebook\Exceptions\FacebookSDKException $e) {
  // When validation fails or other local issues
  echo 'Facebook SDK returned an error: ' . $e->getMessage();
  exit;
}
    
if (! isset($accessToken)) {
    $permissions = array('public_profile','email'); // Optional permissions
    $loginUrl = $helper->getLoginUrl('http://demo.trinhtuantai.com/login-with-facebook/', $permissions);
    header("Location: ".$loginUrl);  
  exit;
}

try {
  // Returns a `Facebook\FacebookResponse` object
  $fields = array('id', 'name', 'email');
  $response = $fb->get('/me?fields='.implode(',', $fields).'', $accessToken);
} catch(Facebook\Exceptions\FacebookResponseException $e) {
  echo 'Graph returned an error: ' . $e->getMessage();
  exit;
} catch(Facebook\Exceptions\FacebookSDKException $e) {
  echo 'Facebook SDK returned an error: ' . $e->getMessage();
  exit;
}

$user = $response->getGraphUser();

echo 'Faceook ID: ' . $user['id'];
echo '<br />Faceook Name: ' . $user['name'];
echo '<br />Faceook Email: ' . $user['email'];
?>

Thay APP_ID và APP_SECRET bằng app id và app secret của ứng dụng vừa tạo (lấy trong Dashboard của ứng dụng)

Thay đường link trả về (http://demo.trinhtuantai.com/login-with-facebook/) bằng đường link trên domain của bạn. Chú ý rằng nếu bạn thay đổi cấu trúc của thư mục hay rewrite lại đường dẫn thì phải đưa đường link chuẩn dẫn vào file này.

Tiếp theo các bạn chạy chính link trả về này, khi đăng nhập thành công trang sẽ đưa ra các thông tin gồm id,name, email của tài khoản facebook đăng nhập – như vậy là chúng ta đã kết nối thành công với facebook, việc tiếp theo là sử dụng dữ liệu này để đăng nhập trên website

 

Lưu và sử dụng dữ liệu để đăng nhập trên website của bạn

Phần này mình sẽ không làm ví dụ nữa vì mỗi website có cấu trúc và cách store users khác nhau. Mình chỉ xin nói qua về cách xử lý của mình khi đã nhận được dữ liệu trả về từ facebook sau khi làm như phần trên.

Giả sử mình có 1 bảng users(id, fbid, email, password, fullname, avatar, phone, gender, contact ….), website của mình có sử dụng tài khoản thường trên trang với các tính năng đăng nhập, đăng ký, sửa hồ sơ, thay mật khẩu … bây giờ làm thêm phần đăng nhập với Facebook thì ở file trả về kia sẽ làm các bước sau:

Check xem email trả về từ facebook kia đã có trong bảng users chưa ?

Nếu email đã có:

Update fbid của record đó

Select luôn user theo email mà không cần check password rồi tiến hành set đăng nhập (session hoặc cookie tùy kiểu đăng) nhập trên trang của bạn

Nếu email chưa có:

Insert dữ liệu vào bảng users

Select luôn user theo email mà không cần check password rồi tiến hành set đăng nhập (session hoặc cookie tùy kiểu đăng) nhập trên trang của bạn

Khi user có fbid các bạn có thể sử dụng avatar từ facebook bằng đường link: http://graph.facebook.com/[FBID]/picture hoặc http://graph.facebook.com/[FBID]/picture?type=large cho kích thước lớn hơn

Một cách khác các bạn có thể tạo ra mật khẩu fake khi các user đăng nhập từ facebook bằng cách dùng 1 số hàm mã hóa nối id facebook trả về với 1 chuỗi nào đó chẳng hạn.

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

Xem thêm : Viết tính năng Đăng nhập với Google cho website

Leave a Reply

Your email address will not be published. Required fields are marked *