Đăng nhập Facebook sử dụng JavaScript SDK

Với Facebook API bạn có thể dễ dàng thu thập các thông tin cơ bản cần thiết như: họ tên, ngày sinh, địa chỉ email, giới tính,.. từ người dùng khi họ đăng nhập Facebook. Và dưới đây là một ví dụ lấy thông tin facebook sử dụng Facebook Javascript SDK, nhưng trước tiên bạn xem demo bằng cách click vào nút đăng nhập dưới đây. Bạn cũng có thể xem hướng dẫn login facebook bằng PHP và MySQL.

Xem thêm tài liệu hướng dẫn này sử dụng Facebook Javascript SDK v2.2

- Trước tiên, bạn cần phải có một App ID
- Để có được App ID truy cập vào địa chỉ https://developers.facebook.com/apps và tạo ra một ứng dụng miễn phí từ địa chỉ đó. Sau khi tạo xong ứng dụng, bạn sẻ được cung cấp app ID

App ID được lấy từ các trang ứng dụng facebook, như trong hình trên.

- Tạo một Form HTML cho phép nhập các thông tin như: họ tên, email,..

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//getbootstrap.com/dist/js/bootstrap.min.js"></script>

<form class="form-signin" role="form">
 <div id="status"></div>
 <h2 class="form-signin-heading">User Registration</h2>
        
 <label for="inputFname" class="sr-only">First Name</label>
 <input type="text" id="inputFname" class="form-control" placeholder="First Name" required autofocus>
        
 <label for="inputLname" class="sr-only">First Name</label>
 <input type="text" id="inputLname" class="form-control" placeholder="Last Name" required >
            
 <label for="inputEmail" class="sr-only">Email address</label>
 <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required >

 <label for="inputPassword" class="sr-only">Password</label>
 <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>

 <div class="checkbox">
   <label><input type="checkbox" value="remember-me"> Remember me</label>
 </div>

 <button class="btn btn-sm btn-primary btn-block" type="submit">Sign Up
<button class="btn btn-sm btn-primary btn-block" onclick="_login();" type="submit">Sign Up using Facebook</button>
</form>

- Javascript:

<script>
  // Nạp Javascript SDK
  (function(thisdocument, scriptelement, id) {
    var js, fjs = thisdocument.getElementsByTagName(scriptelement)[0];
    if (thisdocument.getElementById(id)) return;
    
    js = thisdocument.createElement(scriptelement); js.id = id;
    js.src = "//connect.facebook.net/vi_VN/sdk.js"; //you can use 
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
    
  window.fbAsyncInit = function() {
  FB.init({
    appId      : '212550605589620', // APP ID ứng dụng của bạn
    cookie     : true,  // Kích hoạt cookies
                        
    xfbml      : true,  // plugins xã hội
    version    : 'v2.1' // Sử dụng version 2.1
  });

  // Xử lý hàm callback
  FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });

  };
    
  // Kết quả từ FB.getLoginStatus().
  function statusChangeCallback(response) {
    if (response.status === 'connected') {
      // Đăng nhập vào ứng dụng của bạn và facebook.
      _i();
    } else if (response.status === 'not_authorized') {
      // Người dùng đăng nhập từ một địa chỉ khác.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this app.';
    }
  }  
  
  function _login() {
    FB.login(function(response) {
       // Xử lý các kết quả
       if(response.status==='connected') {
        _i();
       }
     }, {scope: 'public_profile,email'});
 }
 
// Điền kết quả vào textbox
 function _i(){
     FB.api('/me', function(response) {
        document.getElementById("inputFname").value = response.first_name;
        document.getElementById("inputLname").value = response.last_name;
        document.getElementById("inputEmail").value = response.email;
    });
 }

</script>

Kết quả:
ID: id
Link : link
Họ và tên: name
Tên: last_name
Tên đệm: middle_name
Họ: first_name
Email: email
Thành phố: hometown.name
Sinh nhật: birthday
Giới tính: gender
...
Xem thêm: https://developers.facebook.com/docs/facebook-login/permissions/v2.0#reference