Tony's Web App Development Tips

Working with API’s such as Twitter from your local machine can be a pain. A problem that comes up is Twitter does not let you set your callback URL to hit your localhost. If you are working with OAuth on your local machine and want to test the user authorization flow, you are screwed. I will explain how to circumnavigate this issue on Mac OS X with Firefox. This tutorial assumes you have set up a Twitter oauth application and specified a callback url in the application settings. At the end of the tutorial, I will present a much faster way to accomplish this task.

Important Update:
As Mark Puig mentioned in the comments below, Twitter is currently allowing you to register URL’s like “http://127.0.0.1:8000/twitter_callback” as your Twitter callback URL (pretty sure this was not allowed before) . That being said, this article is still useful for those using API’s that do not allow you to register your local host as a callback and for those who want to learn more about hacking your DNS settings. And if Twitter restricts this in the future…

Step 1 (optional): Force Firefox to expire your DNS cache.
Expiring your DNS cache will force Firefox to take a fresh look at your /etc/hosts file on each request. Otherwise you may have to wait a minute forchanges to /etc/hosts to take effect. This step isn’t necessary but it will save you time if you edit /etc/hosts often.

1. Type “about:config” into your browser address bar.
2. When you get to the config options, right click and go to “New” -> “Integer”. Enter “network.dnsCacheExpiration” as the preference name and “0″ as the integer value.
3. Repeat for Step 2 preference name “network.dnsCacheEntries” and the integer value “0″.

The integer value “0″ for dnsCacheExpiration is the number of seconds it will take for the DNS cache to expire. As a side note, you can increase the performance of Firefox by expiring the cache much less often (set dnsCacheExpiration to “3600″ for once per hour). Obviously you do not want to do this if you are messing around with your DNS settings such as in this example.

Step 2: Trick your browser
Open up /etc/hosts and add a line like the following:
127.0.0.1 xyz.com
where xyz.com is your real host.

If your Twitter callback URL has “www” like www.xyz.com, you must use www.xyz.com instead of xyz.com. This line forces your browser to resolve xyz.com to your localhost instead of visiting the actual website. If you completed step 1 you can type http://xyz.com into your browser address bar and watch it hit your localhost. If you skipped step 1, flush your browser’s DNS cache or wait a minute for the settings to pick up.

Step 3: Add directory and port redirection
Chances are your application’s twitter callback URL is not http://xyz.com, but rather something like http://xyz.com/twitter_callback …plus the oauth_token GET parameter. If this is true, you need to create an identical path on your localhost to a callback directory and forward to wherever you want. This is best explained by example.

My callback URL is http://xyz.com/twitter_callback and Twitter appends the oauth_token to the URL so it looks something like:
http://www.xyz.com/twitter_callback?oauth_token=pyOYM5tbvK71fvt…
Since my localhost points to “/Library/WebServer/Documents”, I created a directory “/Library/WebServer/Documents/twitter_callback/” which is where my browser will go when Twitter redirects me to the callback URL. Of course my browser will be looking for an index.php file, so I created one that looks like this:

<?php
	if($_SERVER['HTTP_HOST'] == 'xyz.com'){
                //$_SERVER['REQUEST_URI'] makes sure the oauth_token is appended 
		header("Location: http://localhost:3000".$_SERVER['REQUEST_URI']);
	}
?>

This file forwards the request to port 3000 which you cannot accomplish through DNS settings. Now I have the Twitter callback URL pointing to the proper directory in my Ruby On Rails application. Again, if your Twitter callback URL is of the form www.xyz.com, you must use www.xyz.com instead of xyz.com for the HTTP_HOST check.

Update:
There is actually a much easier way to accomplish this assuming you don’t need any URL parameters passed from the service to your application upon callback. You can use bit.ly, a URL shortening service. Just shorten the url “http://localhost:3000/twitter_callback” and register the shortened URL as the callback in your Twitter app. For this method, you have to create another Twitter OAuth app for development so that the callback URL’s can differ. Using bit.ly is faster and easier than the 3-step method above, but I will leave that method posted because it allows parameters to be passed back if necessary and it teaches you a little bit about FF and OS X.

If you enjoyed this post, make sure you subscribe to my RSS feed!