Thêm nút đăng nhập Facebook vào website một cách chuyên nghiệp

14/07/2014
6809
0

Hãy cùng chúng tôi khám phá cách thêm nút đăng nhập facebook vào website của bạn cũng như viết lời chào mừng bằng chính tên facebook của người truy cập.

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.

<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.

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.

(function(d){
 var js, id = ‘facebook-jssdk’, ref = d.getElementsByTagName(‘script’)[0];
 if (d.getElementById(id)) {return;}
 js = d.cre-ateElement(‘script’); js.id = id; js.async = true;
 js.src = “//connect.facebook.net/en_US/all.js”;
 ref.parentNode.in-sertBefore(js, ref);
 }(document));
 function testAPI() {
 FB.api(‘/me’, function(response) {
 document.getElementById (‘welcome’).innerHTML=’Good to see you,
 ‘ + response.name + ‘.’;
 });
 }

Đã hoàn thành rồi. Chúc mừng các bạn vừa hoàn thành một việc hết sức quan trọng trong việc kết nối website của bạn tới mạng xã hội phổ biến bậc nhất hiện nay. Khách hàng từ nay có thể đăng nhập cũng như chia sẻ những thông tin thú vị của bạn lên facebook ngay lập tức mà không gặp bất kì phiền phức gì. Nếu có bất kì thắc mắc nào, đừng ngần ngại để lại comment phía dưới để chúng tôi có thể cùng bạn giải quyết vấn đề một cách nhanh chóng.

Chúng tôi phân vân rằng liệu bạn có hứng thú với việc biến website trở thành giao diện làm việc thân thiện với những sticky notes? Vậy thì bạn nên xem qua bài viết: Tạo sticky-notes trên website thật đơn giản. Chắn chắn bạn sẽ tìm thấy được nhiều điều thú vị thông qua bài viết này từ việc sử dụng CSS3 cũng như PHP.

Ý kiến bạn đọc

Bạn cần trở thành thành viên của nhóm để có thể bình luận bài viết này. Nhấn vào đây để đăng ký làm thành viên nhóm!