JavaScript
Article

JavaScript oAuth Popup Window Handler Code

By Sam Deering

This is a useful JavaScript function to create an oAuth popup window which isn’t blocked by web browsers (unless using a popup blocker) and can be monitored with a callback to authenticate through oAuth just like most popular social networks allow.

Demo

jQuery Twitter Widget

oauth-login

Code

//Authorization popup window code
$.oauthpopup = function(options)
{
    options.windowName = options.windowName ||  'ConnectWithOAuth'; // should not include space for IE
    options.windowOptions = options.windowOptions || 'location=0,status=0,width=800,height=400';
    options.callback = options.callback || function(){ window.location.reload(); };
    var that = this;
    log(options.path);
    that._oauthWindow = window.open(options.path, options.windowName, options.windowOptions);
    that._oauthInterval = window.setInterval(function(){
        if (that._oauthWindow.closed) {
            window.clearInterval(that._oauthInterval);
            options.callback();
        }
    }, 1000);
};

Usage

//create new oAuth popup window and monitor it
$.oauthpopup({
    path: urltoopen,
    callback: function()
    {
        log('callback');
        //do callback stuff
    }
});
  • sasanka

    hi Sam,

    I am new to JQuery..
    Can you please add full code..
    :(

  • Itamar

    Nice post Sam!
    I’m using a very similar code to do OAuth in a popup window,
    but for some reason, Chrome blocks my popup by default.
    Any idea what I’m doing wrong?
    (not using any custom popup blocker)

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.