JavaScript oAuth Popup Window Handler Code

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
    }
});

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • 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)