Foursquare authorization without losing context on a website

Question

I am adding the ability for a user to link their foursquare account with their account on my website. Foursquare's oauth account authorization takes the user to foursquare's website, and after authorizing my website it redirects the user back to a url.

I want to avoid breaking the user's context on my website when they decide to add foursquare functionality to their account, so I'm planning on doing foursquare's account authorization in a new window using

var foursquare_popup = window.open("foursquare_url_to_authenticate_user");

and redirecting the popup to a static success page once the authorization has been completed.

I've seen oauth popups done in a couple places like Wired's tweet button.

Is this a good way to handle oauth with things like twitter/facebook/foursquare?

Answer 1

You can specify display=webpopup if you want to use a pop-up window (see https://developer.foursquare.com/overview/auth#display).

Also, you can specify additional parameters in your callback URL, which will be preserved by the oauth flow. So if you passed "&state=settings/accounts" or something as parameter of your redirect_uri, you can parse it out upon success and resume your session with the user appropriately.

Answer 2

i would recommend against opening a popup window as part of the oauth signin process, purely because some browsers do not support popup windows - particularly browsers on mobile phones. also, the browser may support popups but the user may have a popup blocker turned on.

a better way would be to redirect the user from your website to the service provider all in the same window.

i am currently working on a way to do this with an invisible iframe on the page of my website. this way, if the user is already logged in to the service provider then they would not need to be directed away from my website. however, i am half way through this functionality so i cannot confirm that it will work yet.