Tích hợp Facebook connect với website của bạn

Tích hợp Facebook Connect với website của bạn

Tích hợp đăng nhập tài khoản Facebook kết nối với website của bạn.

Trong bài này chúng tôi sẽ giới thiệu cho các bạn cách làm cho các ứng dụng của mình có sẵn đối với hàng triệu người dùng Facebook.

Nếu muốn giới thiệu một ứng dụng web mới nào đó của mình, bạn không thể bỏ qua hàng triệu người dùng trên các mạng xã hội (chẳng hạn như Facebook, MySpace và LinkedIn). Với các mạng xã hội này, bạn có thể cho phép họ sử dụng ứng dụng của mình mà không cần đăng ký (gỡ bỏ được một trong những rào cản lớn nhất), post các nâng cấp ứng dụng đến newsfeed của họ và thậm chí còn có thể mời bạn bè của họ sử dụng ứng dụng.

Trong bài viết này, chúng tôi sẽ tập trung vào nhiệm vụ đơn giản nhất: sử dụng Facebook như một máy chủ đăng nhập một lần (single sign-on). Ứng dụng của chúng ta (đơn giản là Login.htm) sẽ thẩm định người dùng bằng cách sử dụng tài khoản Facebook, cho phép chúng ta có thể nhận diện người dùng mà không cần phải tìm kiếm trong biểu mẫu đăng ký.

Lưu ý: Các mạng xã hội khác (cho ví dụ như LinkedIn) cũng cung cấp chức năng tương tự như vậy; bạn có thể tìm thêm về chúng trong tài liệu.

Các tùy chọn tích hợp của Facebook
Để tích hợp ứng dụng của bạn với Facebook, bạn có thể chọn từ ba tùy chọn nền tảng dưới đây:

1. 
   

   
   

   
   
   • Ứng dụng chạy bên trong Facebook. Các câu chất vấn của Facebook bao trùm mọi vấn đề bạn muốn biết để sử dụng tùy chọn này.
     
   • Máy chủ web của bạn truyền thông với Facebook thông qua Facebook REST API.
     
   • Sự tích hợp được thực hiện trong trình duyệt người dùng thông qua Facebook Connect API.
     

Facebook Connect là một phương pháp tích hợp dễ dàng nhất vì nó cho phép bạn có được những ưu điểm của việc tích hợp Facebook bằng việc nhóm một số đoạn mã Javascript trong các trang ứng dụng lựa chọn.

Sự tích hợp giữa các tài khoản người dùng Facebook và cơ sở dữ liệu xác thực phụ thuộc vào vấn đề bạn tích hợp một ứng dụng đang tồn tại hay một ứng dụng mới hoàn toàn.

Nếu ứng dụng mới yêu cầu một phương pháp thẩm định hay đăng ký, cách tốt nhất là dựa vào xác thực Facebook và cho phép người dùng Facebook truy cập ứng dụng của mình mà không cần phải lo lắng về việc quản trị. Tuy nhiên bạn vẫn phải cung cấp cho các khách mời một tùy chọn đăng ký trên site của mình và sử dụng ứng dụng của bạn mà không sử dụng Facebook.

Các ứng dụng đang tồn tại có thể chọn sự tích hợp chặt (lúc này một tài khoản Facebook có thể làm việc như một cơ chế đăng nhập một lần) hoặc một tích hợp rất lỏng (lúc này người dùng mà bạn đã thẩm định có thể quyết định kết nối đến Facebook trên một cơ sở cần thiết).

Chú ý: Trước khi bắt đầu phát triển mã tích hợp, bạn hãy tham khảo kỹ các chính sách của Facebook Connect để thẩm định rằng những gì mà Facebook cung cấp phù hợp với những ý định của bạn.
Tạo ứng dụng Facebook

Trước khi có thể bắt đầu việc lập trình tích hợp trên website của mình, bạn phải tạo một ứng dụng Facebook gốc để cung cấp cho bạn các tham số tích hợp được yêu cầu bởi Facebook Connect.

1. Sau khi đăng nhập vào tài khoản Facebook (bạn cần có một tài khoản nếu muốn phát triển các ứng dụng Facebook Connect), mở ứng dụng Developer và chọn tùy chọn Setup New Application để tạo ứng dụng mới. Nhập vào tên của ứng dụng và đồng ý với các thỏa thuận của Facebook.
   

Trang tiếp theo sẽ hiển thị biểu mẫu soạn thảo ứng dụng (thể hiện trong hình 1).

1. Thẩm định tên ứng dụng (và thay đổi nó nếu cần), nhập vào phần mô tả ngắn gọn và upload một biểu tượng và một logo sẽ được hiển thị đến người dùng Facebook. Thông tin quan trọng nhất trong màn hình Basic là API Key, lúc này bạn sẽ sử dụng mã Javascript của mình. Kịch bản máy chủ của bạn cũng có thể cần giá trị Secret để hợp lệ hóa chữ ký số được tạo bởi Facebook.
   
2. Khi kết thúc biểu mẫu cơ sở, kích vào tab Connect để mở biểu mẫu thể hiện trong hình 2, ở đây bạn có thể nhập vào các thông tin cụ thể cho Facebook Connect.
   

Trường quan trong nhất trong biểu mẫu này là Connect URL, đây là trường mà bạn phải thiết lập thư mục mà trong đó ứng dụng Facebook Connect cư trú. Nếu ứng dụng của bạn sử dụng nhiều thư mục, bạn phải nhập vào thư mục có chứa trang truyền thông với Facebook.
Mẹo: Để tránh các điều phức tạp về URL có liên quan, cần phải giữ sao cho tất cả các trang web có liên quan với Facebook Connect hoạt động nằm trong cùng một thư mục.

1. Nhập vào dữ liệu được yêu cầu trong các tab Basic và Connect, copy khóa API để sử dụng về sau trong mã của bạn, và lưu dữ liệu của bạn. Lúc này bạn đã sẵn sàng bắt đầu phát triển ứng dụng Javascript.
   

Khởi tạo môi trường
Hai bước đơn giản cho phép bạn truy cập đầy đủ chức năng Facebook Connect trong trang web của mình:

1. Bổ sung thêm thư viện Javascript vào trang của bạn:
   

1. Gọi hàm khởi tạo FB.init của Facebook.
   

Lưu ý: Vị trí chính xác của thư viện Javascript có thể thay đổi; hãy kiểm tra hướng dẫn về Facebook Connect để có thêm các thông tin chi tiết.
Hàm FB.init sử dụng hai đối số:

• API key mà bạn nhận được khi tạo ứng dụng gốc của Facebook.
  
• Địa chỉ có liên quan của trang HTML (thường mang tên xd_receiver.htm) được sử dụng để trao đổi dữ liệu giữa ứng dụng của bạn và Facebook. Trang này phải nằm bên trong thư mục mà bạn đã chỉ định với tư cách là Connect URL trên tab Connect của biểu mẫu chỉnh sửa ứng dụng Facebook.
  

Lưu ý: Các chuyên gia phát triển Facebook không sử dụng các cuộc gọi Ajax mà thay vào đó họ sử dụng một IFRAME ẩn (cross-domain communication channel) để trao dổi dữ liệu giữa các trang web của bạn và máy chủ Facebook.

Nội dung của file xd_receiver.htm tốt nhất nên được download trực tiếp từ tài liệu Facebook, hoặc từ ứng dụng mẫu của Facebook Connect

Mẹo: Ứng dụng mẫu được định vị tại SomethingToPutHere.com. Tại đó bạn sẽ thấy rất nhiều thông tin về Facebook.

Sau khi môi trường Facebook Connect được khởi tạo, bạn có thể truy vấn trạng thái kết nối của ứng dụng với Facebook.

• Connected. Người dùng đã đăng nhập vào Facebook trong session duyệt này (hoặc đã cho phép Facebook lưu trữ trạng thái đăng nhập của họ) và đã xác thực ứng dụng của bạn để có thể sử dụng tài khoản Facebook của họ.
  
• Not connected. Người dùng chưa đăng nhập vào Facebook hoặc chưa thẩm định ứng dụng của bạn.
  

Bạn có thể thực thi các hàm Javascript bổ sung ngay lập tức sau khi môi trường được thiết lập. Cho ví dụ, để thích nghi một đoạn văn bản giới thiệu trên trang web của bạn bằng cách pass chúng bên trong tham số thứ ba của hàm FB.init. Cho ví dụ, ứng dụng mẫu trong bài sử dụng đoạn mã dưới đây để gọi hàm fb_login (đây là hàm thay đổi đoạn văn bản được hiển thị trong trang đầu tiên) nếu người dùng đã kết nối ứng dụng mẫu với tài khoản Facebook của họ:



FB.init("4614058aac0b3b2be7896ce84baf9b44", "xd_receiver.htm",
{ ifUserConnected: fb_login });





Tạo nút Login
Bạn có thể đầu tư thêm thời gian và nỗ lực vào việc tạo kiểu dánh cho nút đăng nhập Facebook Connect, tuy nhiên tốt nhất nên sử dụng nút đăng nhập được cung cấp bởi Facebook. Nút đăng nhập được tạo với tag Facebook Markup Language (FBML) fb:login-button được nhúng trong trang web của bạn.
Các tag FBML sẽ tự động render vào những thành phần HTML tương đương của chúng bằng thư viện Javascript của Facebook Connect. Mặc dù vậy, bạn phải có những dự phòng đặc biệt để bảo đảm rằng tất cả các trình duyệt đều nhận ra không gian tên mở rộng được yêu cầu bởi FBML; bằng không thư viện Facebook Connect sẽ không thể tìm thấy các tag FBML:

• Trang web sử dụng FBML phải tuân thủ theo chuẩn XHTML và sử dụng XHTML DOCTYPE:
  

"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• Thành phần HTML phải tuyên bố không gian tên XHTML mặc định và không gian tên FBML: