Hướng dẫn làm chức năng đăng nhập nhanh bằng facebook (vieclam123.vn)

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div id="status"></div>
  <!-- Facebook login or logout button -->
  <a href="javascript:void(0);" onclick="fbLogin()" id="fbLink" style="background:#0960b8;padding:5px;">Đăng nhập</i></a>
  <!-- Display user profile data -->
  <div id="userData"></div>
</body>

</html>
<script>
window.fbAsyncInit = function() {
  // FB JavaScript SDK configuration and setup
  FB.init({
    appId: '401264273790288', // FB App ID
    cookie: true, // enable cookies to allow the server to access the session
    xfbml: true, // parse social plugins on this page
    version: 'v5.0' // 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,birthday,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>';
  });
}

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>Ngày sinh:</b> ' + response.birthday + '</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>';
    // Save user data
    saveUserData(response);
  });
}
// 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>
PreviousHướng dẫn làm chức năng đăng nhập nhanh bằng Google (vieclam123.vn)NextQuản lí các thư viện PHP với Composer
Last updated 4 years ago