post-image

Giới thiệu về Facebook Graph API

Tổng quan

Facebook cung cấp cho các lập trình viên các API hỗ trợ cho việc lấy ra các thông tin cá nhân như email, địa chỉ, giới tính,… và nó là Facebook Graph API. Vậy Facebook Graph API là gì ? Chúng ta cùng tìm hiểu ở bài viết này nhé.

Tổng quan về Facebook Graph API

API là gì ?

Đầu tiên chúng ta cùng tìm hiểu xem API là gì ? API là viết tắt của từ Application Programming Interface hay còn gọi là giao diện lập trình ứng dụng, là phương thức để chúng ta có thể kết nối các thư viện và ứng dụng khác với nhau. Facebook, Google,.. đều có những bộ API riêng và với những API này chúng ta có thể xây dựng các tính năng dựa trên dữ liệu hiện có trên server của họ.

Facebook API

Facebook API là nền tảng do Facebook cung cấp cho các lập trình viên để có thể dễ dàng trong việc tạo ứng dụng và đảm bảo người viết ứng dụng mà không can thiệp quá sâu vào hệ thống của Facebook.

Thông qua việc sử dụng Facebook API chúng ta có thể lấy ra các thông tin cá nhân như lấy ra danh sách bạn bè, địa chỉ email, tên,.. nếu như được người dùng cấp quyền.

Facebook Graph API

Facebook Graph API hiểu đơn giản đó chính là đồ thị xã hội của Facebook (social graph)

Facebook Graph API

Chúng ta có thể sử dụng Facebook Graph API để truy vấn dữ liệu như comment một bài viết, tải ảnh lên, lấy ra danh sách ảnh cá nhân,…

Cấu trúc của Facebook Graph API

Graph API được đặt tên theo ý tưởng “social graph” – đại diện cho các thông tin trên Facebook. Nó bao gồm:

  • nodes (nút): là các đối tượng riêng như là người dùng, ảnh, trang cá nhân, bình luận, nhóm, bài viết,…
  • edges (cạnh): là các kết nối giữa những đối tượng riêng ở trên.
  • fields (trường): dữ liệu của đối tượng riêng ở trên, ví dụ như tên, ngày sinh của người dùng, quê quán của người dùng,…

Vì vậy mà chúng ta sử dụng Graph API là để:

  • Sử dụng nodes để lấy dữ liệu về đối tượng cụ thể.
  • Sử dụng edges để lấy tập hợp các đối tượng khác được kết nối với node.
  • Sử dụng fileds để chỉ định dữ liệu mà bạn muốn có trong phản hồi từ Facebook.

HTTP

Graph API dựa trên HTTP nên API này hoạt động với bất cứ ngôn ngữ nào có thư viện HTTP, chẳng hạn như JavaScript. Bạn cũng có thể sử dụng Graph API ngay trong trình duyệt của mình.

Ví dụ như bạn muốn lấy ra các thông tin như id, name, email thì chúng ta sử dụng như sau với đoạn code JavaScript

Và dữ liệu trả về cho chúng ta sẽ như sau:

{
  "name": "your Name",
  "id": "your-user-id",
  "email": "your email"
}Code language: JSON / JSON with Comments (json)

Access token

Để có thể lấy được dữ liệu như trên chúng ta cần phải có access token để được cấp quyền truy cập. Và hầu hết các yêu cầu lấy ra các dữ liệu cá nhân đều cần phải có access token và cách dễ nhất để lấy token này là bắt người dùng đăng nhập Facebook từ ứng dụng.

Nếu như bạn sử dụng JavaScript để sử dụng Facebook Graph API thì chỉ cần thực hiện việc login Facebook với scope là “email” chúng ta sẽ có được thông tin như trên.

FB.login((response) => {
    }, {scope: 'email'});Code language: JavaScript (javascript)

Có 3 loại access token đó là:

  • Access token cho người dùng: dùng để thay mặt một người sửa đổi hoặc ghi dữ liệu Facebook của người đó
  • Access token cho ứng dụng: dùng để đăng hành động trong Open Graph
  • Access token cho trang: dùng để sửa đổi dữ liệu thuộc về 1 trang Facebook

Ngoài ra access token còn được chia làm 2 loại dựa vào thời gian “sống” của nó:

  • Ngắn hạn: Thường có thời hạn khoảng 1 đến 2 giờ.
  • Dài hạn: Thường có thời hạn khoảng 60 ngày.

Objects ID

Mỗi node có một ID duy nhất để truy cập thông qua Graph API. Để có thông tin về node, bạn phải truy vấn trực tiếp đến ID của node đó cú pháp sẽ như sau:

FB.api(
  '/{node-id}',
  'GET',
  function(response) {
      // Insert your code here
  }
);Code language: JavaScript (javascript)

Còn nếu như chúng ta muốn lấy ra một field (trường) cụ thể thì thêm thuộc tính field ví dụ như bên dưới mình lấy thêm thuộc tính email thì thêm field như sau:

FB.api(
  '/{node-id}',
  'GET',
  {"fields":"email"},
  function(response) {
      // Insert your code here
  }
);Code language: JavaScript (javascript)

Và gần như tất cả các node đều có edges (cạnh). Nó có thể trả về tập hợp các đối tượng được kết nối với node đó. Để truy vấn một cạnh, bạn có thể sử dụng cả ID node và tên cạnh. Ví dụ bạn muốn truy vấn lấy ra tất cả photos của node:

FB.api(
  '/{node-id}/photos',
  'GET',
  function(response) {
      // Insert your code here
  }
);Code language: JavaScript (javascript)

Một số node cho phép bạn tạo một trường bằng thao tác POST. Ví dụ nếu bạn là bạn muốn đăng một bài viết mới bạn có thể thực hiện như sau:

FB.api(
  '/{your-page-id}/feed',
  'POST',
  {"message":"Hello!"},
  function(response) {
      // Insert your code here
  }
);Code language: JavaScript (javascript)

Nếu tạo mới thành công bạn sẽ nhận được thông tin trả về như sau

{
  "id": "{your-page-id}_1810399758992730"      
}Code language: JSON / JSON with Comments (json)

Ngoài ra bạn cũng có thể thực hiện việc xóa một node với thao tác DELETE.

FB.api(
  '/{page-post-id}',
  'DELETE',
  {},
  function(response) {
      // Insert your code here
  }
);Code language: JavaScript (javascript)

Nếu thành công bạn sẽ nhận được thông điệp như sau:

{
  "success": true
}Code language: JSON / JSON with Comments (json)

Vậy sử dụng Facebook Graph API như thế nào ?

Đầu tiên chúng ta sẽ truy cập vào trang https://developers.facebook.com/ và tạo một ứng dụng trên đó.

Sau đó truy cập Graph API Explorer bằng cách chọn More > Tools > Graph API Explore hoặc truy cập vào link dưới đây: https://developers.facebook.com/tools/explorer/

Chúng ta có thể test các API ở trang web trên.

Tiếp theo các bạn tạo một dự án Web và nhúng đoạn code JavaScript sau:

    (window as any).fbAsyncInit = function () {
      FB.init({
        appId: 'your-app-id',
        cookie: true,
        xfbml: true,
        version: 'your-api-version',
      });
      FB.AppEvents.logPageView();
    };

    (function (d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {
        return;
      }
      js = d.createElement(s);
      js.id = id;
      js.src = 'https://connect.facebook.net/en_US/sdk.js';
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));Code language: JavaScript (javascript)

Tiếp theo các bạn sử dụng phương thức FB.login() để thực hiện việc đăng nhập và lấy ra access token:

FB.login((response) => {
      //do something
}, {scope: 'email'});Code language: JavaScript (javascript)

Ở trên để scope là email để có thể lấy ra email của tài khoản đăng nhập sau khi được họ cho phép. Và để lấy ra thông tin cá nhân của user đang đăng nhập thì chúng ta thực hiện 1 request như sau

FB.api(
      `/${userId}?fields=id,name,email`,
      (response) => {
        if (response && !response.error) {
          console.log(response.id) // Lấy ra id của user đăng nhập
          console.log(response.name) // Lấy ra họ tên của user đăng nhập
          console.log(response.email) // lấy ra email của user đăng nhập
        }
      }
);Code language: JavaScript (javascript)

Vậy là chúng ta đã lấy được các thông tin như id, name, email của người dùng đang đăng nhập thông qua mấy bước trên.

Đọc thêm: Firebase là gì ?

Trả lời

Email của bạn sẽ không được hiển thị công khai.