Archive for June, 2010

Twitter Login and Auth in a Popup Window

June 8th, 2010 Tags: | |

Making use of Twitter in an app is a simple and straightforward task thanks to great libraries like this one that handle all of the OAuth handshaking and heavy lifting for you. The only problem with the default method is that when a user clicks the connect via Twitter button, it takes them to the Twitter login page and eventually redirects them back to you.

Folks around the Internet are not keen on this approach, preferring a Facebook style integration where a simple pop-up is used to contain the Twitter login process, ensuring the user never loses your page along the way.

First off, grab the Twitter API library if you haven’t already and familiarize yourself with the fantastically simple process. I’m going to modify the included example files to the pop-up feature. First, we add some javascript on the connect.php page (the one with the Twitter button). Add a click event to that connect link that opens a simple window:

window.open('./redirect.php', 'Twitter', 'menubar=no,width=790,height=360,toolbar=no');

The width and height are setup to properly accommodate the Twitter login page. Notice that I am setting the source of the new window to redirect.php, which sets everything up to begin the auth process before sending the pop-up off to Twitter’s login.

The next step is to handle the post-login phase when the user is returned to us. The example uses callback.php as the target for the post-auth redirect, so we’ll modify there. All we have to do there is simply add some javascript to refresh or parent page and close the pop-up and we’re all set. So remove the existing index redirect in the callback file and replace it with some simple javascript and a blank html page:

opener.location = 'index.php'; // could be a refresh or anything really
self.close();

There you have it. The process is essentially the same as the before, only now we’ve moved it all into a separate window that we tightly control.

Posted in jQuery & Javascript | 2 Comments »

Javascript: The importance of the var keyword

June 1st, 2010 Tags:

I recently found a great example of the importance of the var keyword and properly scoping your variables in javascript. In the best case, we should be coding in an object oriented way and utilizing closures to properly contain our code, but sometimes we run into some plain old javascript written the old fashioned (read: messy) way.

By omitting var, we are essentially declaring the variable in the global scope, which is most likely not something we want to be doing. A great example is when declaring an iterator variable for a loop. Without var, the iterator is exposed to any functions called within the loop. If that function also has a variable of the same name that is not locally scoped, you will find that upon completion of the called function, your iterator is suddenly way off.

function parent() {
     // some (incorrect) loop calling a function
     for(iterator=0; iterator<5; iterator++) {
          child();
     }
};

// This function can then mess with our iterator!
function child() {
    iterator = 99;
}

This example shows how some code hidden away in a called function may inadvertently mess with your variables. It is only made worse when both caller and callee are disregarding scope by omitting var. The proper loop is then obvious:

for(var iterator=0; iterator<5; iterator++)

By doing so, we ensure that no one else can accidentally mess with the internals of our code. This is an easy mistake to make, but fortunately not too difficult to identify and correct.

Posted in jQuery & Javascript | No Comments »