Facebook Javascript SDK – Logout with OAuth 2.0

Now we have OAuth 2.0 working with the Facebook Javascript SDK as mentioned in the last article.
Facebook Javascript SDK – A Simple Login Page with OAuth 2.0

The above example is incomplete as there is no logout link. Replace the fb-login-oauth2.php as follow.

<?php

// Enter the app id and secret below
define('YOUR_APP_ID', '<facebook app id>');
define('YOUR_APP_SECRET', 'facebook app secret');

require 'facebook.php';

$facebook = new Facebook(array(
  'appId'  => YOUR_APP_ID,
  'secret' => YOUR_APP_SECRET,
));

// Clear the login session and cookie if the user clicked the logout link
if (1 == $_GET['logout']) {
  $facebook->destroySession();
  setcookie('fbsr_' . YOUR_APP_ID, $_COOKIE['fbsr_' . YOUR_APP_ID], time() - 3600, '/', '.'.$_SERVER['SERVER_NAME']);
} else {
  $userId = $facebook->getUser();
}

?>
<html>
  <head>
    <script type="text/javascript">
      function facebookLogout() {
        FB.init({ 
          appId : <?php print YOUR_APP_ID; ?>,
          cookie: true,
          status: true, 
          xfbml : true,
          oauth : true,
        });
        FB.getLoginStatus(function(response) {
          if (response.authResponse) {
            FB.logout(function() {
              window.location = document.URL + "?logout=1";
            });
            return false;
          } else {
            window.location = document.URL + "?logout=1";
            return false;
          }
        });
      }
    </script>
  </head>
  <body>
    <div id="fb-root"></div>
    <?php if ($userId) { 
      $userInfo = $facebook->api('/' + $userId); ?>
      Welcome <?= $userInfo['name'] ?>
      <p><a href="javascript:facebookLogout();">Logout</a></p>
    <?php } else { ?>
    <fb:login-button></fb:login-button>
    <?php } ?>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId : <?php print YOUR_APP_ID?>,
          status: true, 
          cookie: true,
          xfbml : true,
          oauth : true,
        });

        FB.Event.subscribe('auth.login', function(response) {
          window.location.reload();
        });
      };

      (function(d){
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
      }(document));
    </script>
  </body>
</html>

 

Done =)

Reference:

3 thoughts on “Facebook Javascript SDK – Logout with OAuth 2.0”

  1. Hi,
    I copied this code exactly almost, only thing I changed was the app_id, and I had a config.php that had all my app_id, secret_id, etc, so I did a require_once on top.
    The logout works fine, and I am returned to the login screen. Now when I hit login, and actually logs into facebook, (after I put in the login info within the pop-up window) the login button remains, and logout link doesn’t show. I had to manually refresh the page for the welcome message, and log out link to show.
    It seems window.location.reload() doesn’t do the trick. I even created a separate button for the window.location.reload(), it doesn’t do anything either.
    I am running this in firefox.
    Any suggestion will be greatly appreciated.
    Thanks
    Han

    Like

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.