How to revoke Identity API Token ( Chrome Extension )

user_11104668 0
Viewed 742

I would like to add a Sign In with Google and a Sign Out button to my Chrome extension.

One technique that uses chrome.identity.getAuthToken for Sign In is described in this tutorial. It works great! When the button is clicked, it shows a popup for authentication and authorization.

But how should I implement the Sign Out button?

I tried to use the removeCachedAuthToken method in the on-click handler of my Sign Out button. With this, the sign-in functionality doesn't work as expected. After, when I pressed the Sign In button again, I got a new token directly without a popup asking the user to authenticate and authorize my extension. I would like users to be able to change their account by signing out. With this technique, that's not possible. How should I implement the sign out functionality to allow for this?

google-chrome-extension google-oauth oauth api javascript
2 Answers

This has been bugging me too, until I realized that I got mixed up by the difference between sign-in and authorization, sign-out and revoking access.

First, let's not get caught up in the name of the button. Yo may call it Sign Out, but what you actually want to achieve is to let users revoke access for their Google Account, and then log in and grant access to a different account.

If you use removeCacheAuthToken, then authorize again, and see no popup, then that means the extension still has access to certain APIs. To check which apps have been granted access to which Google services, go to permission settings and have a look.

There are several ways to revoke access:

  1. Go to chrome://identity-internals/ and remove the tokens that you want. Then click on the Authorize button, and you should see a popup to choose the Google accounts to grant access.

Of course, that method is for testing only. Your end users won't see the access token for your extension if they visit that page.

  1. When the user clicks on the Revoke access button, or whatever name you call, display a popup that tells them to go to the permission settings page to manually revoke access.

  2. Create a form on the current web page, add access token to the form and submits to the https://oauth2.googleapis.com/revoke endpoint.

From my experience, method 3 seems like an ideal solution, but it was a hit and mix for me. Sometimes I would get an invalid or expired token error, and troubleshooting it is not worth it. I would stick with method for peace of mind.

user_121602270

As mentioned in this answer, you can use https://accounts.google.com/o/oauth2/revoke?token=" + current_token) to allow the user to revoke access to the api.

Below is the function for the same:

function revokeToken() {
    user_info_div.innerHTML = "";
    chrome.identity.getAuthToken({ interactive: false }, 
      function (current_token) {
        if (!chrome.runtime.lastError) {
          // @corecode_begin removeAndRevokeAuthToken
          // @corecode_begin removeCachedAuthToken
          // Remove the local cached token
          chrome.identity.removeCachedAuthToken({token: current_token}, function(){});
          // @corecode_end removeCachedAuthToken

          // Make a request to revoke token in the server
          var xhr = new XMLHttpRequest();
          xhr.open(
          "GET", 
          "https://accounts.google.com/o/oauth2/revoke?token=" + current_token);
            
          xhr.send();
          // @corecode_end removeAndRevokeAuthToken

          // Update the user interface accordingly
          changeState(STATE_START);
          sampleSupport.log("Token revoked and removed from cache. " + 
            "Check chrome://identity-internals to confirm.");
        }
    });
}
user_69082820
Related