offline access token offline access token

<div style="padding: 1em; background-color: #F7FA8C; margin: 2em;">

This example no longer works since the "offline_access" permission has

been deprecated. More information can be found here: <br>

<a href="https://developers.facebook.com/docs/offline-access-deprecation/">

  https://developers.facebook.com/docs/offline-access-deprecation/

</a>

</div>

<fb:login-button scope="offline_access">Grant offline_access</fb:login-button>

<h1>Access Token:</h1>

<pre id="access-token"></pre>

<script>

var

  pre         = document.getElementById('access-token'),

  showSession = function(response) {

    var html = 'Not Connected';

    if (response.authResponse) {

      html = response.authResponse.accessToken;

    }

    pre.innerHTML = html;

  };

FB.getLoginStatus(function(response) {

  showSession(response);

  FB.Event.subscribe('auth.sessionChange', showSession);

});

</script>

This example no longer works since the "offline_access" permission has been deprecated. More information can be found here:
https://developers.facebook.com/docs/offline-access-deprecation/

Access Token:

AAAAAKvQdWksBAEsMjuBaAGWXsXGvEZBQTJY4BX7pVAZAXoto6UI5QxPmC7mtZCgYUJDYpBWaOYmeWmF3IYq9vKPgeZBXbeCzYgtalsMdMyUVVkrVi3ZCz

login button login button

<button class="btn btn-success" id="fb-login">Login</button>

<script>
document.getElementById('fb-login').onclick = function() {
  FB.login(function(response) {
    Log.info('FB.login callback', response);
    if (response.status === 'connected') {
      Log.info('User is logged in');
    } else {
      Log.info('User is logged out');
    }
  });
};
</script>

Login

login and logout login and logout

<button class="btn btn-success" id="fb-auth">Login</button>

<script>
function updateButton(response) {
  Log.info('Updating Button', response);
  var button = document.getElementById('fb-auth');

  if (response.status === 'connected') {
    button.innerHTML = 'Logout';
    button.className = 'btn btn-danger';
    button.onclick = function() {
      FB.logout(function(response) {
        Log.info('FB.logout callback', response);
      });
    };
  } else {
    button.innerHTML = 'Login';
    button.className = 'btn btn-success';
    button.onclick = function() {
      FB.login(function(response) {
        Log.info('FB.login callback', response);
        if (response.status === 'connected') {
          Log.info('User is logged in');
        } else {
          Log.info('User is logged out');
        }
      });
    };
  }
}


FB.getLoginStatus(updateButton);
FB.Event.subscribe('auth.statusChange', updateButton);
</script>

 

Logout

extended permissions extended permissions

Login & Permissions

<button id="fb-login">Login & Permissions</button>

<script>

document.getElementById('fb-login').onclick = function() {

  var cb = function(response) {

    Log.info('FB.login callback', response);

    if (response.status === 'connected') {

      Log.info('User logged in');

    } else {

      Log.info('User is logged out');

    }

  };

  FB.login(cb, { scope: 'publish_actions' });

};

</script>

extended-permissions-profile-selector extended-permissions-profile-selector

Login & Permissions

<button class="btn" id="fb-login">Login & Permissions</button>
<script>document.getElementById('fb-login').onclick = function() {  var cb = function(response) {    Log.info('FB.login callback', response);    if (response.status === 'connected') {      Log.info('User logged in');    } else {      Log.info('User is logged out');    }  };  FB.login(cb, {    scope: 'publish_stream',    enable_profile_selector: 1  });};</script>

All in One All in One

     

<button class="btn" id="fb-login-status">FB.getLoginStatus()</button>
<button class="btn" id="fb-login-status-force">FB.getLoginStatus() force=true</button>
<button class="btn" id="fb-get-auth-response">FB.getAuthResponse()</button>
<button class="btn" id="fb-login">FB.login()</button>
<button class="btn" id="fb-permissions">FB.login() with Permissions</button>
<button class="btn" id="fb-logout">FB.logout()</button>

<script>
FB.Event.subscribe('auth.login', function(response) {
  Log.info('auth.login event handler', response);
});
FB.Event.subscribe('auth.logout', function(response) {
  Log.info('auth.logout event handler', response);
});
FB.Event.subscribe('auth.statusChange', function(response) {
  Log.info('auth.statusChange event handler', response);
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
  Log.info('auth.authResponseChange event handler', response);
});

document.getElementById('fb-login-status').onclick = function() {
  FB.getLoginStatus(function(response) {
    Log.info('FB.getLoginStatus callback', response);
  });
};

document.getElementById('fb-login-status-force').onclick = function() {
  FB.getLoginStatus(function(response) {
    Log.info('FB.getLoginStatus force=true callback', response);
  }, true);
};

document.getElementById('fb-get-auth-response').onclick = function() {
  Log.info('FB.getAuthResponse', FB.getAuthResponse());
};

document.getElementById('fb-login').onclick = function() {
  FB.login(function(response) {
    Log.info('FB.login callback', response);
  });
};

document.getElementById('fb-permissions').onclick = function() {
  FB.login(
    function(response) {
      Log.info('FB.login with permissions callback', response);
    },
    { scope: 'publish_actions' }
  );
};

document.getElementById('fb-logout').onclick = function() {
  FB.logout(function(response) {
    Log.info('FB.logout callback', response);
  });
};
</script>

Login, Logout, Name and Profile Picture Login, Logout, Name and Profile Picture

<h1>Login, Logout, Name and Profile Picture</h1>
<div id="account-info"></div>
<script>

function showAccountInfo() {
  FB.api(
    {
      method: 'fql.query',
      query: 'SELECT name, pic_square FROM user WHERE uid='+FB.getUserID()
    },
    function(response) {
      Log.info('API Callback', response);
      document.getElementById('account-info').innerHTML = (
        '<img src="' + response[0].pic_square + '"> ' +
        response[0].name +
        ' <button class="btn" onclick="FB.logout()">Logout</button>'
      );
    }
  );
}


function showLoginButton() {
  document.getElementById('account-info').innerHTML = (
    '<button class="btn btn-primary" onclick="FB.login()">Login</button>'
  );
}


function onStatus(response) {
  Log.info('onStatus', response);
  if (response.status === 'connected') {
    showAccountInfo();
  } else {
    showLoginButton();
  }
}
FB.getLoginStatus(function(response) {
  onStatus(response);
  FB.Event.subscribe('auth.statusChange', onStatus);
});
</script>

Login, Logout, Name and Profile Picture

 Tito Love Eva