How to login using Facebook - TranNgocKhoa/hello-doctor GitHub Wiki

Trước khi bắt đầu triển khai Đăng nhập Facebook bằng JavaScript SDK, bạn cần có ID ứng dụng Facebook. Bạn có thể tạo và truy xuất ID này trong Bảng điều khiển ứng dụng. Bạn cũng cần nơi nào đó để lưu trữ các file HTML.

Triển khai Đăng nhập bằng các bước sau:

  1. Nhập URL chuyển hướng của bạn để đưa mọi người đến trang successful-login.
  2. Kiểm tra trạng thái đăng nhập để xem ai đó đã đăng nhập ứng dụng chưa. Trong bước này, bạn cũng nên kiểm tra xem liệu ai 3. đó trước đây đã đăng nhập ứng dụng của bạn nhưng hiện không đăng nhập hay không.
  3. Đăng nhập mọi người bằng nút đăng nhập hoặc hộp thoại đăng nhập và yêu cầu cấp một nhóm quyền với dữ liệu.
  4. Đăng xuất mọi người để cho phép họ thoát khỏi ứng dụng của bạn.

1. Nhập URL chuyển hướng của bạn

Trong Bảng điều khiển ứng dụng, chọn ứng dụng của bạn và đi tới Sản phẩm > Đăng nhập Facebook > Cài đặt. Trong Cài đặt OAuth ứng dụng, nhập URL chuyển hướng của bạn vào trường URI chuyển hướng OAuth hợp lệ để ủy quyền thành công.

2. Kiểm tra trạng thái đăng nhập

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

Lấy từ mã mẫu bên dưới, sau đây là một số mã chạy trong quá trình tải trang để kiểm tra trạng thái đăng nhập của một người:

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

Đối tượng response được cung cấp cho lệnh gọi lại của bạn có chứa nhiều trường:

{

status: 'connected',

authResponse: {

    accessToken: '...',

    expiresIn:'...',

    reauthorize_required_in:'...'

    signedRequest:'...',

    userID:'...'

}

}`

Code:

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
  // 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
    // app know the current login status of the person.
    // Full docs on the response object can be found in the documentation
    // for FB.getLoginStatus().
    if (response.status === 'connected') {
      // Logged into your app and Facebook.
      testAPI();
    } else {
      // The person is not logged into your app or we are unable to tell.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this app.';
    }
  }

  // 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    : '{api-version}' // The Graph API version to use for the call
    });

    // 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:
    //
    // 1. Logged into your app ('connected')
    // 2. Logged into Facebook, but not your app ('not_authorized')
    // 3. 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 = "https://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 + '!';
    });
  }
</script>

<!--
  Below we include the Login Button social plugin. This button uses
  the JavaScript SDK to present a graphical Login button that triggers
  the FB.login() function when clicked.
-->

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

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

</body>
</html>
⚠️ **GitHub.com Fallback** ⚠️