Đăng nhập bằng Facebook

Đăng nhập bằng Facebook dành cho web bằng JavaScript SDK

Tài liệu này hướng dẫn bạn các bước triển khai phương thức Đăng nhập bằng Facebook với Facebook SDK dành cho JavaScript trên trang web.

Trước khi bạn bắt đầu

Bạn sẽ cần có:

Ví dụ cơ bản về tính năng tự động đăng nhập

Mã mẫu dưới đây sẽ chỉ cho bạn cách thêm Facebook SDK dành cho JavaScript vào trang web và khởi tạo SDK này. Nếu bạn đã đăng nhập vào Facebook, màn hình sẽ hiển thị tên và email của bạn. Nếu bạn chưa đăng nhập vào Facebook, cửa sổ bật lên có hộp thoại đăng nhập sẽ tự động hiển thị.

Quyền public_profile - cho phép bạn lấy thông tin có sẵn công khai như tên và ảnh đại diện - và quyền email không yêu cầu xét duyệt ứng dụng mà sẽ tự động được cấp cho mọi ứng dụng dùng phương thức Đăng nhập bằng Facebook. 

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>

    <h2>Add Facebook Login to your webpage</h2>

      <!-- Set the element id for the JSON response -->
    
      <p id="profile"></p>

      <script>
  
        <!-- Add the Facebook SDK for Javascript -->
  
        (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 = "https://connect.facebook.net/en_US/sdk.js";
                              fjs.parentNode.insertBefore(js, fjs);
                            }(document, 'script', 'facebook-jssdk')
        );


        window.fbAsyncInit = function() {
            <!-- Initialize the SDK with your app and the Graph API version for your app -->
            FB.init({
                      appId            : '{your-facebook-app-id}',
                      xfbml            : true,
                      version          : '{the-graph-api-version-for-your-app}'
                    });
            <!-- If you are logged in, automatically get your name and email adress, your public profile information -->
            FB.login(function(response) {
                      if (response.authResponse) {
                           console.log('Welcome!  Fetching your information.... ');
                           FB.api('/me', {fields: 'name, email'}, function(response) {
                               document.getElementById("profile").innerHTML = "Good to see you, " + response.name + ". i see your email address is " + response.email
                           });
                      } else { 
                           <!-- If you are not logged in, the login dialog will open for you to login asking for permission to get your public profile and email -->
                           console.log('User cancelled login or did not fully authorize.'); }
            });
        };

      </script>

  </body>
</html>

1. Bật JavaScript SDK cho phương thức Đăng nhập bằng Facebook

Trong Bảng điều khiển ứng dụng, hãy chọn ứng dụng của bạn và cuộn đến mục Thêm sản phẩm Nhấp vào Thiết lập trong thẻ Đăng nhập bằng Facebook. Chọn Cài đặt trong bảng điều hướng bên trái và trong phần Cài đặt OAuth ứng dụng, hãy nhập URL chuyển hướng vào trường URI chuyển hướng OAuth hợp lệ để ủy quyền thành công.

Cho biết bạn sẽ sử dụng JavaScript SDK để đăng nhập bằng cách đặt nút chuyển Đăng nhập bằng JavaScript SDK là "có", rồi nhập miền của trang lưu trữ SDK này vào danh sách Miền được phép cho JavaScript SDK. Điều này đảm bảo rằng mã truy cập chỉ được trả về cho những lệnh gọi lại trong các miền được ủy quyền. Chỉ các trang https mới được hỗ trợ cho những hành động xác thực với JavaScript SDK của Facebook.

2. Kiểm tra trạng thái đăng nhập của một người dùng

Bước đầu tiên khi trang web tải là xác định xem người dùng đã đăng nhập vào trang web của bạn thông qua phương thức Đăng nhập bằng Facebook hay chưa. Một lệnh gọi đến FB.getLoginStatus sẽ kích hoạt lệnh gọi đến Facebook để lấy trạng thái đăng nhập. Sau đó, Facebook gọi hàm gọi lại của bạn bằng các kết quả đó.

Lệnh gọi mẫu

FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
});

Phản hồi mẫu ở định dạng JSON

{
    status: 'connected',
    authResponse: {
        accessToken: '{access-token}',
        expiresIn:'{unix-timestamp}',
        reauthorize_required_in:'{seconds-until-token-expires}',
        signedRequest:'{signed-parameter}',
        userID:'{user-id}'
    }
}

status chỉ định trạng thái đăng nhập của người dùng trang web. status có thể là một trong những loại sau:

Loại StatusMô tả

connected

Người dùng đó đăng nhập Facebook và đã đăng nhập trang web của bạn.

not_authorized

Người dùng đó đăng nhập Facebook nhưng chưa đăng nhập trang web của bạn.

unknown

Người dùng đó chưa đăng nhập Facebook nên bạn không biết họ đã đăng nhập trang web của bạn hay chưa. Hoặc FB.logout() đã được gọi trước đó nên không thể kết nối với Facebook.

Nếu trạng thái là connected, phản hồi sẽ trả về các thông số authResponse sau đây:

Thông số authResponseGiá trị

accessToken

Mã truy cập của người dùng trang web.

expiresIn

Nhãn thời gian UNIX khi mã truy cập hết hạn. Sau khi mã truy cập hết hạn, người dùng đó cần đăng nhập lại.

reauthorize_required_in

Khoảng thời gian trước khi phiên đăng nhập hết hạn (tính bằng giây) và người dùng đó cần đăng nhập lại.

signedRequest

Một thông số đã ký chứa thông tin về người dùng trang web.

userID

ID của người dùng trang web.

JavaScript SDK tự động phát hiện trạng thái đăng nhập nên bạn không cần thực hiện bất kỳ điều gì để kích hoạt hành vi này.

3. Đăng nhập một người dùng

Nếu một người dùng mở trang web nhưng chưa đăng nhập hoặc chưa đăng nhập vào Facebook, bạn có thể sử dụng hộp thoại Đăng nhập để nhắc người dùng đó thực hiện cả hai việc này. Nếu họ chưa đăng nhập Facebook thì trước tiên, họ sẽ được nhắc đăng nhập nền tảng này, sau đó sẽ được nhắc đăng nhập trang web của bạn.

Có 2 cách để đăng nhập một người nào đó:

A. Đăng nhập bằng nút Đăng nhập

Để sử dụng nút Đăng nhập bằng Facebook, hãy dùng Bộ cấu hình plugin của chúng tôi để tùy chỉnh nút Đăng nhập và lấy mã.

Bộ cấu hình plugin

Width
Kích thước nút
Văn bản trên nút
Hình dạng bố cục của nút
[?]
Nhận mã

B. Đăng nhập bằng hộp thoại Đăng nhập từ JavaScript SDK

Để sử dụng nút đăng nhập của chính bạn, hãy kích hoạt hộp thoại Đăng nhập bằng lệnh gọi đến FB.login().

FB.login(function(response){
  // handle the response 
});

Yêu cầu cấp thêm quyền

Khi một người dùng nhấp vào nút HTML của bạn, một cửa sổ bật lên sẽ hiển thị hộp thoại Đăng nhập. Với hộp thoại này, bạn có thể yêu cầu quyền truy cập vào dữ liệu của một người dùng. Thông số scope có thể được chuyển cùng với lệnh gọi hàm FB.login(). Thông số không bắt buộc này là một danh sách các quyền (được phân cách bằng dấu phẩy) mà một người dùng phải xác nhận để cấp cho trang web của bạn quyền truy cập vào dữ liệu của họ. Người dùng bên ngoài phải có quyền public_profile nâng cao thì mới sử dụng được phương thức Đăng nhập bằng Facebook.

Lệnh gọi mẫu

Trong ví dụ sau, người dùng đăng nhập sẽ được hỏi xem trang web của bạn có thể có quyền truy cập vào trang cá nhân công khai và email của họ hay không.

FB.login(function(response) {
  // handle the response
}, {scope: 'public_profile,email'});

Xử lý phản hồi của hộp thoại Đăng nhập

Phản hồi (để kết nối hoặc hủy) sẽ trả về đối tượng authResponse cho lệnh gọi lại đã chỉ định khi bạn gọi FB.login(). Phản hồi này có thể được phát hiện và xử lý trong FB.login().

Lệnh gọi mẫu

FB.login(function(response) {
  if (response.status === 'connected') {
    // Logged into your webpage and Facebook.
  } else {
    // The person is not logged into your webpage or we are unable to tell. 
  }
});

4. Đăng xuất một người dùng

Đăng xuất một người dùng khỏi trang web của bạn bằng cách đính kèm hàm JavaScript SDK FB.logout() vào một nút hoặc liên kết.

Lệnh gọi mẫu

FB.logout(function(response) {
   // Person is now logged out
});

Lưu ý: Lệnh gọi hàm này cũng có thể đăng xuất người dùng đó khỏi Facebook.

Các trường hợp cần xem xét

  1. Một người dùng đăng nhập Facebook, rồi đăng nhập trang web của bạn. Khi đăng xuất khỏi ứng dụng của bạn, người dùng đó vẫn đang đăng nhập Facebook.
  2. Một người dùng đăng nhập trang web của bạn và đăng nhập Facebook trong quy trình đăng nhập của ứng dụng. Khi đăng xuất khỏi ứng dụng của bạn, người đó cũng đăng xuất Facebook.
  3. Một người dùng đăng nhập trang web khác và đăng nhập Facebook trong quy trình đăng nhập của trang web khác rồi đăng nhập trang web của bạn. Khi đăng xuất khỏi một trong hai trang web, người dùng đó cũng đăng xuất Facebook.

Ngoài ra, việc đăng xuất trang web của bạn sẽ không thu hồi quyền mà người dùng đã cấp cho trang web của bạn trong khi đăng nhập. Bạn phải thu hồi quyền trong một bước riêng biệt. Xây dựng trang web của bạn theo cách sao cho người dùng đã đăng xuất sẽ không nhìn thấy hộp thoại Đăng nhập khi đăng nhập trở lại.

Mã mẫu đầy đủ

Mã này tải và khởi chạy JavaScript SDK trong trang HTML của bạn. Thay thế {app-id} bằng ID ứng dụng của bạn và {api-version} bằng phiên bản API Đồ thị để sử dụng. Nếu bạn không có lý do cụ thể cho việc sử dụng phiên bản cũ hơn, hãy chỉ định phiên bản mới nhất: v21.0. 

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>

  function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
    console.log('statusChangeCallback');
    console.log(response);                   // The current login status of the person.
    if (response.status === 'connected') {   // Logged into your webpage and Facebook.
      testAPI();  
    } else {                                 // Not logged into your webpage or we are unable to tell.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this webpage.';
    }
  }


  function checkLoginState() {               // Called when a person is finished with the Login Button.
    FB.getLoginStatus(function(response) {   // See the onlogin handler
      statusChangeCallback(response);
    });
  }


  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{app-id}',
      cookie     : true,                     // Enable cookies to allow the server to access the session.
      xfbml      : true,                     // Parse social plugins on this webpage.
      version    : '{api-version}'           // Use this Graph API version for this call.
    });


    FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
      statusChangeCallback(response);        // Returns the login status.
    });
  };
 
  function testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
    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 + '!';
    });
  }

</script>


<!-- The JS SDK Login Button -->

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>

<div id="status">
</div>

<!-- Load the JS SDK asynchronously -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
</body>
</html>

Thông tin và nguồn lực khác