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
    }
});
Sam Deering
Meet the author
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.
  • 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)

Learn Coding Online
Learn Web Development

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