Back to News for Developers

How-To: Handle Revoked Auth Permissions

October 12, 2011ByWill Liu

A common question that developers ask is how to handle users that revoke optional permissions. Users are able to revoke permissions through their app settings on Facebook, and as a developer, it is important that you handle this situation to help drive the best user experience.

Below is an example that will help show how you can check if there are permissions that the app needs that are not granted by the user. The example renders three buttons:

  1. Login: Allows the user to authenticate the app with the permissions the app needs.
  2. Check Permissions: Checks to see if there are any permissions that the app needs but the user hasn’t authorized
  3. Remove Permission: Removes permissions that the app needs.

To use the example, you should first authenticate the app through the “Login” button. Next, click “Check Permissions” to make sure no new permissions are required. Now, click “Remove Permissions” to simulate a user removing the permissions. Finally, when you click “Check Permissions” again, you will be prompted for the missing permissions.

The functionality that checks to see if there are permissions the user has not granted occurs in the checkPermissions JavaScript function. To retrieve all user permissions granted to the app, the function issues an HTTP GET request to the following Graph API connection:

https://graph.facebook.com/USER_ID/permissions

If there are any differences between the permissions the app needs and what the user has granted, the app should re-prompt the user for these missing permissions. To re-prompt the user for the missing permissions, the app can make a call to FB.login utilizing the scope parameter or one of the other authenication mechanism.

<html>
  <body>
    <button id="login">Login</button><br/>
    <button id="checkPerms">Check Permissions</button><br/>
    <button id="removePerms">Remove Permissions</button>
    <div id="fb-root"></div>

    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
    FB.init({
      appId  : 'YOUR_APP_ID',
      status : true, // check login status
      cookie : true, // enable cookies
      xfbml  : true, // parse XFBML
      oauth  : true // enable OAuth 2.0
    });

    // Permissions that are needed for the app
    var permsNeeded = ['email', 'read_stream', 'user_likes'];
    
    // Function that checks needed user permissions
    var checkPermissions = function() {
      FB.api('/me/permissions', function(response) {
        var permsArray = response.data[0];

        var permsToPrompt = [];
        for (var i in permsNeeded) {
          if (permsArray[permsNeeded[i]] == null) {
            permsToPrompt.push(permsNeeded[i]);
          }
        }
        
        if (permsToPrompt.length > 0) {
          alert('Need to re-prompt user for permissions: ' + 
            permsToPrompt.join(','));
          promptForPerms(permsToPrompt);
        } else {
          alert('No need to prompt for any permissions');
        }
      });
    };
    
    // Re-prompt user for missing permissions
    var promptForPerms = function(perms) {
        FB.login(function(response) {
          console.log(response);
        }, {scope: perms.join(',')});
    };

    var removePermissions = function(perms) {
      FB.api(
          {
            method: 'auth.revokeExtendedPermission',
            perm: perms.join(',')
          },
          function(response) {
            console.log(response);
          }
      ); 
    };

    document.getElementById("login").onclick = function() {
      FB.login(function(response) {
        console.log(response);
      }, {scope: permsNeeded.join(',')});
    };

    document.getElementById('checkPerms').onclick = function() {
      checkPermissions();
    };

    document.getElementById('removePerms').onclick = function() {
      removePermissions(['read_stream']);
    };
   </script> 
  </body>
</html>



Tags: