Cấp bậc tác giả:

HTML

Đăng nhập Website thông qua Facebook SDK

Được viết bởi webmaster ngày 19/05/2018 lúc 10:58 PM
Đăng nhập thông qua Facebook là cách dễ dàng để tích hợp đăng nhập hệ thống Website. Đăng nhập facebook cho phép người dùng có thể đăng nhập vào ứng dụng web với tài khoản người dùng facebook đã đăng ký trên website.
  • 0
  • 965
loading...

Đăng nhập Website thông qua Facebook SDK

Loading...

Đăng nhập thông qua Facebook là cách dễ dàng để tích hợp đăng nhập hệ thống Website. Đăng nhập facebook cho phép người dùng có thể đăng nhập vào ứng dụng web với tài khoản người dùng facebook đã đăng ký trên website. Facebook cung cấp SDK hoặc API để đăng nhập với chức năng facebook trên website. Nhưng Facebook SDK cho JavaScript là cách thân thiện mà hầu hết người dùng thường sử dụng để tích hợp chức năng đăng nhập facebook vào website.
JavaScript
Trong JavaScript, chỉ cần Facebook App ID trong FB.init({});
  • fbLogin() mở hộp thoại đăng nhập để người dùng có thể đăng nhập vào facebook thông qua ủy quyền.
  • getFbUserData() trích xuất ra thông tin dữ liệu người dùng từ  Facebook và hiển thị cũng như trạng thái đăng nhập của người dùng.
  • fbLogout() đăng xuất ra khỏi tài khoản Facebook.
<script>
window.fbAsyncInit = function() {
    // FB JavaScript SDK configuration and setup
    FB.init({
      appId      : 'InsertYourFacebookAppId', // FB App ID
      cookie     : true,  // enable cookies to allow the server to access the session
      xfbml      : true,  // parse social plugins on this page
      version    : 'v2.8' // use graph api version 2.8
    });
    
    // Check whether the user already logged in
    FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {
            //display user data
            getFbUserData();
        }
    });
};

// Load the JavaScript 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'));

// Facebook login with JavaScript SDK
function fbLogin() {
    FB.login(function (response) {
        if (response.authResponse) {
            // Get and display the user profile data
            getFbUserData();
        } else {
            document.getElementById('status').innerHTML = 'User cancelled login or did not fully authorize.';
        }
    }, {scope: 'email'});
}

// Fetch the user profile data from facebook
function getFbUserData(){
    FB.api('/me', {locale: 'en_US', fields: 'id,first_name,last_name,email,link,gender,locale,picture'},
    function (response) {
        document.getElementById('fbLink').setAttribute("onclick","fbLogout()");
        document.getElementById('fbLink').innerHTML = 'Logout from Facebook';
        document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.first_name + '!';
        document.getElementById('userData').innerHTML = '<p><b>FB ID:</b> '+response.id+'</p><p><b>Name:</b> '+response.first_name+' '+response.last_name+'</p><p><b>Email:</b> '+response.email+'</p><p><b>Gender:</b> '+response.gender+'</p><p><b>Locale:</b> '+response.locale+'</p><p><b>Picture:</b> <img src="'+response.picture.data.url+'"/></p><p><b>FB Profile:</b> <a target="_blank" href="'+response.link+'">click to view profile</a></p>';
    });
}

// Logout from facebook
function fbLogout() {
    FB.logout(function() {
        document.getElementById('fbLink').setAttribute("onclick","fbLogin()");
        document.getElementById('fbLink').innerHTML = '<img src="fblogin.png"/>';
        document.getElementById('userData').innerHTML = '';
        document.getElementById('status').innerHTML = 'You have successfully logout from Facebook.';
    });
}
</script>

HTML

<!-- Display login status -->
<div id="status"></div>

<!-- Facebook login or logout button -->
<a href="javascript:void(0);" onclick="fbLogin()" id="fbLink"><img src="fblogin.png"/></a>

<!-- Display user profile data -->
<div id="userData"></div>

Xem thêm tại đây: https://www.codexworld.com/login-with-facebook-using-javascript-sdk/

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

Loading...

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML