Lấy khóa API
Hãy bắt đầu bằng cách truy cập vào developers.facebook.com và đăng nhập bằng tài khoản Facebook của bạn. Nhấp vào nút Apps ở trên cùng của trang và chọn Register as a Developer. Điền vào tất cả những thông tin cần thiết và nhấn Send để chuyển đến trang có chứa khóa API và mã bí mật của bạn.
Cấu hình cài đặt
Khi đã có khóa API thì bạn nhấn vào nút Add platform và chọn Website. Điền tên miền của bạn ở phía trên và trong phần Site URL. SDK sẽ sử dụng chúng để đảm bảo cho việc ủy quyền yêu cầu đăng nhập từ máy chủ của bạn. Việc này được khuyến cáo là không nên sử dụng trên localhost.Cài đặt SDK
Chúng ta sẽ sử dụng SDK JavaScript để nhúng nút đăng nhập Facebook và website. Chạy IDE của bạn và tạo ra một tập tin HTML mới. Thêm vào đoạn mã sau, thay thế APP-ID với APP-ID mà bạn được cung cấp ở phía trên.|
1
2
3
4
5
6
7
8
9
10
|
<div id=”fb-root”></div>
<script> window.fbAsyncInit = function() { FB.init({ appId : ‘{APP-ID}’, status : true, cookie : true, xfbml : true }); </script> |
Xử lý đăng nhập
Thêm đoạn mã dưới đây vào phần trên (vẫn đặt trong thẻ script), đoạn code này sẽ kiểm tra phản hồi từ SDK và xử lý đăng nhập. Nếu đăng nhập thành công, nó sẽ gọi hàm testAPI(), nếu không nó sẽ quay trở lại trang đăng nhập.|
1
2
3
4
5
6
7
8
9
10
|
FB.Event.subscribe(‘auth. authResponseChange’, function(response) {
if (response.status === ‘connected’) { testAPI(); } else if (response.status === ‘not_authorized’) { FB.login(); } else { FB.login(); } }); }; |
Chào mừng người sử dụng
Thêm đoạn mã sau vào phần phía trên sẽ xử lý các phản hồi từ SDK, lấy dữ liệu người dùng từ API và cập nhật nội dung cho các thẻ để hiển thị thông điệp chào mừng.|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
(function(d){
var js, id = ‘facebook-jssdk’, ref = d.getElementsByTagName(‘script’)[0]; if (d.getElementById(id)) {return;} js = d.createElement(‘script’); js.id = id; js.async = true; js.src = “//connect.facebook.net/en_US/all.js”; ref.parentNode.insertBefore(js, ref); }(document)); function testAPI() { FB.api(‘/me’, function(response) { document.getElementById (‘welcome’).innerHTML=’Good to see you, ‘ + response.name + ‘.’; }); } |
