Wednesday, February 13, 2013

Programmatic Logout mechanism for Google APIs


While recently working on a project requiring integration with youtube, I had a requirement where I had to switch the currently logged in google user.

The project was using AuthSub authentication to do a web browser based video upload. The way this worked was:
  1. The user was redirected from my site to google's server for the authsub
  2. He would be presented with a choice to grant or deny access of his account to my site (by google) (If he wasn't yet logged into google, he could do that now)
  3. Then google redirects the user to my site, with the required accesses and the site can upload video's on that user's behalf as long as the session contains the token.
However if the browser already has a different logged in google user, then the only option is to log out and re log in when presented with the "allow access" page. This broke the redirection flow and the user would not automatically come back to the site.

The solution to this problem was simple, just log the user out of google services before redirection. Right? Well google had other ideas.

After some searching I found out that there was no documented (by google) way of signing out a user from google. However there were a few sites that mentioned a few approaches.
  1. Open the link: https://mail.google.com/mail/u/0/?logout&hl=en and the user will be logged out of that browser.
  2. www.google.com/Accounts/Logout [?service=mail|youtube|etc &continue=url (url should be inside the google domain)] Optional to pass the parts mentioned in the brackets.

And another one that i found was that you could post "action_logout" with value "1" to www.youtube.com to log out the currently logged in user.

Either of these options required opening the url in a browser window (and possibly posting a parameter). So one way of doing this was opening it in a hidden iframe.

I tried that on firefox as:

<form style="display: inline;" 
      target="hiddenFrame" 
      action="http://www.youtube.com/
      method="post" id="autoLogout">
    
     <input type="hidden" 
            name="action_logout" 
            value="1" />
</form>

<iframe name="hiddenFrame" 
        src="" 
        height="1" 
        width="1" 
        frameborder="0">
</iframe>

<script type="text/javascript">
    dojo.addOnLoad(function (){
        dojo.byId("autoLogout").submit();
    });
</script>

And voila, this worked in Firefox 7 perfectly. However, a quick inspection of the scroll bar for this post, will tell you that this isn't the end of it.

If you try this out in internet explorer 8, you will find that it instead tells you that the url cannot be displayed in an iframe due to security concerns (Specifically: "This content cannot be displayed in a frame"). This is to prevent occurrences of cross site scripting and click-jacking exploits.
http://groups.google.com/group/youtube-api/browse_thread/thread/2d2236731672a098

So instead the only option available was to open this in a new window. So how it goes about was:
(Either on page load or when the user clicks logout)
1. Open a popup window with a name
2. Post auto submit the form to that window
3. Wait for a second or 2, and then close the window just opened.

If you do this in an event handler it should be smooth, but if you do it on any other event (like onload for example), then the popup blocker will block it and the user will have to explicitly grant it permission to proceed.

<!-- The form: Note the target is set to 
     _hiddenFrame, the same as the window 
     that we will be opening -->
<form style="display: inline;" 
      target="_hiddenFrame" 
      action="http://www.youtube.com/
      method="post" 
      id="autoLogout">

    <input type="hidden" 
           name="action_logout" 
           value="1" />
</form>

<script type="text/javascript">
    // This should ideally be called in a click handler, 
    // since then it definitely wont be blocked by a popup blocker.
    function logoutFromGoogle(){
        var windowHandle 
            = window.open("", "_hiddenFrame", 
                          "left=20,top=20,width=1,height=1,toolbar=0,resizable=0")
        dojo.byId("autoLogout").submit();
        setTimeout(function(){
            windowHandle.close();
        }, 2000);
    }
</script>

So there we are, a programmatic logout mechanism for google!

No comments: