Tuesday, February 16, 2010

oAuth Signin with Twitter via popup window design pattern

It looks like couple of well made sites use the same pattern for logging in with twitter via the popup window:

The DISCUSS widgets have this pattern:
Dsq.Twitter = new function() {
var that = this;

this.startTwitterConnect = function() {
var popupParams = 'location=0,status=0,width=800,height=400';
that._twitterWindow = window.open(Dsq.jsonData.settings.disqus_url + '/_ax/twitter/begin/', 'twitterWindow', popupParams);
that._twitterInterval = window.setInterval(that.completeTwitterConnect, 1000);
};

this.completeTwitterConnect = function() {
if (that._twitterWindow.closed) {
window.clearInterval(that._twitterInterval);
window.location.reload();
}
};
};


and the twitgoo.com also have very similar pattern:

TG.util.oauth = {
win: null,
timer: null,
loginUpdate: function() {
$.getJSON('/-login/check?format=json', TG.util.oauth.loginCallback);
},
loginCallback: function(data) {
if (data && data.loggedin) {
TG.util.login.update(data);
}
},
winCheck: function() {
if (!TG.util.oauth.win || TG.util.oauth.win.closed) {
window.clearInterval(TG.util.oauth.timer);
return TG.util.oauth.loginUpdate();
}
},
loginClick: function() {
TG.util.oauth.win = window.open('/-oauth-twitter/request?gotoafter=1&gotor=oauthtwitter&gotop=action%3Dwindowend',
'OAuthTwitterRequest',
'width=800,height=450,modal=yes,alwaysRaised=yes');
if (!TG.util.oauth.win) return true;

TG.util.oauth.timer = window.setInterval(TG.util.oauth.winCheck, 300);
return false;
}
};


This means that the callback url - the one that Twitter redirects to after the oAuth dance is complete contains ONLY the window.close() javascript and basically does nothing else at the browser. It's main job is do populate the oViewer object on the server so that when the main window is reloaded it will determine that user is now logged in. OK, one more thing that callback window can do is to set some sort of cookie.

I can see a legitimate reason to do this because what if user closes the browser popup window manually? Then we will never get to the part where the JS in the popup window calls the window.opener
So there is a very small chance that user will be successfully logged in but because he closed what window manually, the main window will never know.

I guess I'll go with that pattern now, after all, I've seen in on 2 well built sites and also the same pattern is recommended on Google OpenSocial developers page.

This is actually very easy to code because you don't need anything special as far as in php of the callback url, only static HTML and OK, possibly setting of cookie, but I'm not even sure that it's even necessary to set this cookie.

2 comments:

  1. Thanks for the posts we are the professional web design and development company offering an array of services like template customization,web designing, CMS solutions, eCommerce solutions, Search engine optimization and Internet marketing.
    CMS DESIGN

    ReplyDelete
  2. Thanks for this, solved my problem.

    ReplyDelete