Mạng xã hội Facebook được rất nhiều người sử dụng, do vậy nếu trang web của bạn cho phép kết nối với tài khoản Facebook là điều tuyệt vời, người dùng không cần phải đăng ký tài khoản mới mà chỉ cần đăng nhập với Facebook là có thể sử dụng chức năng trên trang của bạn.
Đăng nhập với Facebook JavaScript SDK Mạng xã hội Facebook nhiều người sử dụng, trang web bạn cho phép kết nối với tài khoản Facebook điều tuyệt vời, người dùng không cần phải đăng ký tài khoản mà cần đăng nhập với Facebook sử dụng chức trang bạn Cũng giống bao trang mạng xã hội lớn khác, Facebook hỗ trợ API cho phép bạn đăng nhập vào trang web thông qua tài khoản Facebook Bạn tìm hiểu thêm thông tin trang chủ Facebook Developers Trước thực hướng dẫn bạn phải tạo APP Facebook bạn Nếu bạn có APP bạn vào trình quản lý APP Facebook để cài đặt tạo APP tùy theo công việc bạn Facebook Login JavaScript Example // This is called with the results from from FB.getLoginStatus() function statusChangeCallback(response) { console.log('statusChangeCallback'); console.log(response); // The response object is returned with a status field that lets the // // documentation // if app know the current login status of the person Full docs on the response object can be found in the for FB.getLoginStatus() (response.status === 'connected') { // Logged into your app and Facebook testAPI(); } else if (response.status === 'not_authorized') { // The person is logged into Facebook, but not your app document.getElementById('status').innerHTML = 'Please log ' + 'into this app.'; } else { // The person is not logged into Facebook, so we're not sure if // they are logged into this app or not document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.'; } } // This function is called when someone finishes with the Login // Button See the onlogin handler attached to it in the sample // code below function checkLoginState() { FB.getLoginStatus(function(response) { statusChangeCallback(response); }); } window.fbAsyncInit = function() { FB.init({ appId : '{your-app-id}', cookie : true, // enable cookies to allow the server to access the session xfbml : true, // parse social plugins on this page version : 'v2.5' // use graph api version 2.5 }); // Now that we've initialized the JavaScript SDK, we call // FB.getLoginStatus() This function gets the state of the // person visiting this page and can return one of three states to // the callback you provide They can be: // // Logged into your app ('connected') // Logged into Facebook, but not your app ('not_authorized') // Not logged into Facebook and can't tell if they are logged into // your app or not // // These three cases are handled in the callback function FB.getLoginStatus(function(response) { statusChangeCallback(response); }); }; // Load the SDK asynchronously (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 = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); // Here we run a very simple test of the Graph API after login is // successful See statusChangeCallback() for when this call is made function testAPI() { console.log('Welcome! Fetching your information '); FB.api('/me', function(response) { console.log('Successful login for: ' + response.name); document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.name + '!'; }); } JavaScript SDK to present a graphical Login button that triggers the FB.login() function when clicked > Đoạn code ví dụ mẫu bên Facebook, bạn dựa theo đoạn code để tùy biến đăng nhập với tài khoản Facebook Bên nội dung nút đăng nhập có thông tin scope hàm xử lý kiện onlogin Scope thông tin quyền mà bạn cần biết người dùng kết nối vào trang bạn Bên để bạn tạo chức đăng nhập với Facebook Nếu bạn muốn tạo nút đăng nhập tùy chỉnh bạn tham khảo đoạn code bên dưới: function hocwp_facebook_login_button() { ?> window.hocwp = window.hocwp || {}; function hocwp_facebook_login_status_callback(response) { if(response.status === 'connected') { hocwp_facebook_login_connected_callback(); } else if(response.status === 'not_authorized') { } else { } } function hocwp_facebook_login() { FB.login(function(response) { hocwp_facebook_login_status_callback(response); }, { scope: 'email,public_profile,user_friends' }); } window.fbAsyncInit = function() { FB.init({ appId: '', cookie: true, xfbml: true, version: 'v' }); }; if(typeof FB === 'undefined') { (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 = "//connect.facebook.net//sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); } function hocwp_facebook_login_connected_callback() { FB.api('/me', {fields: 'id,name,first_name,last_name,picture,verified,email'}, function(response) { (function($) { $.ajax({ type: 'POST', dataType: 'json', url: hocwp.ajax_url, data: { action: 'hocwp_social_login_facebook', data: JSON.stringify(response) }, success: function(response){ var href = window.location.href; if($.trim(response.redirect_to)) { href = response.redirect_to; } if(response.logged_in) { window.location.href = href; } } }); })(jQuery); }); } ... id; js.src = "//connect .facebook. net/ /sdk. js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook- jssdk')); } function hocwp _facebook_ login_connected_callback()... hocwp_get_wpseo_social _facebook_ app_id(); if(empty($app_id)) { _e('Please set your Facebook APP ID first.', 'hocwp'); return; } ?> window.hocwp = window.hocwp || {}; function hocwp _facebook_ login_status_callback(response)... type="button" data-action="login -facebook" onclick="hocwp _facebook_ login();" class="btn -facebook btn-social-login btn btn-large">