2

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?

2 Answers2

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.

mulllhausen
  • 4,225
  • 7
  • 49
  • 71
  • I totally agree. The best way to NOT break the context is to complete the authorization in the current window and then return to your app. New windows are never, and I mean never, the answer when it comes to user experience. – Jon Nylander Aug 16 '12 at 11:55
  • According to akdotcom's answer in another question iframes dont seem like a possible solution: http://stackoverflow.com/questions/9073883/oauth-not-working-inside-an-iframe?rq=1 –  Aug 16 '12 at 21:13
  • @ThomasW-B i should have specified that i use iframes for ajax (instead of xmlhttprequest) as it is supported by all browsers. so the iframe is hidden to the user. all good browsers have xss prevention with iframes so rather than doing a server-side redirect when the iframe is called (which would result in an inaccessible iframe due to the differences in host), i just pass the redirect location back from my server to the iframe as json, then the javascript on my page decides whether to go to this location or do something else. – mulllhausen Aug 17 '12 at 00:22
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.

akdotcom
  • 4,627
  • 2
  • 17
  • 16