OAuth & One-Page Apps: Avoiding the Redirect

OAuth & One-Page Apps: Avoiding the Redirect(nicholasjacob.com)

32 points by chucknibbleston 14 years ago | 13 comments

darklajid 14 years ago |

I kinda sound like a grumpy old man, constantly complaining about the same stuff. But..

For the love of everything that's holy, stop adding these totally useless social media bars that are floating on top of your potentially interesting content. This entry is unreadable on the go, I'll probably forget to come back later today and the only thing I'll recall is that there was another "of those" useless submissions.

jarofgreen 14 years ago | |

Yes. Nicholas: this is what your site looks like in Android 4.0 http://twitpic.com/9q8c7c - in other words, unreadable.

ew 14 years ago |

We, Backup Box, are a one page app and we do OAuth without redirect all the time. In fact we have one script that handles all the OAuth processes and any new ones we need to create just pop in and there's no customization to be done.

I open a new window (tab) with the OAuth process and since I opened the tab I can redirect to some quick closing script and my main code is waiting for the auth process to finish. Once it does the user is through. Easy peasy.

https://mybackupbox.com

mikeknoop 14 years ago | |

Presumably you have the auth flow in the new tab finish on a simple page containing a script. What does that script do to notify the original window that the auth flow is finished?

vnorby 14 years ago | | |

If you open the OAuth flow in a pop-up, with window.open (actually, for most browsers to open a pop-up, the user has to actually click on a link, so your href should be javascript:window.open("https://oauth_start) - target="_blank" might work as well but I can't remember), after the user has completed the authentication and ended back up on your site, you can trigger a function on the parent window and close the pop-up, like window.parent.facebookAuthenticationComplete(); window.close(); I think this is a lot easier and more reliable than pushing anything through a node/pub-sub solution.

ew 14 years ago | | |

The redirect url from the oauth process (which basically every third party has) is simply a page of ours with close(); inside some javascript tags. Since we opened the window programatically we can close it.

In the front end I just poll every few seconds for the oauth completion and the server says "yup I'm done" or "they're still working on it" :)

pshc 14 years ago |

That page is spazzing out at me in Mobile Safari. Some kind of responsive style script conflicting with Safari's auto-formatter?

clarle 14 years ago |

Is there a best practice of doing authentication for single-page apps when you don't want to use an external OAuth provider, since a lot of people don't have Twitter/Facebook accounts?

Would you end up writing your own OAuth provider in that case?

chucknibbleston 14 years ago | |

Unless you're providing an API/external access for your users, you can just use authentication internal to your app. It's pretty easy to roll your own (here's a tutorial for doing it in RoR: http://www.aidanf.net/rails_user_authentication_tutorial), but I would recommend using a popular plugin/middleware if you can find it for your language/framework so you don't have to worry as much about security.

For node/Express, passport.js is a good option (but doesn't help you out with the database at all) -- http://passportjs.org/guide/username-password.html

Django has basic user authentication built-in, Ruby on Rails has Devise - https://github.com/plataformatec/devise and AuthLogic - https://github.com/binarylogic/authlogic.

I'd recommend reading the Ruby on Rails security guide about user management to get an idea of some of the challenges in building an authentication system: http://guides.rubyonrails.org/security.html#user-management

If you want to write an OAuth provider here's a great PHP tutorial: http://djpate.com/2011/01/13/how-to-write-a-complete-oauth-p...

chewxy 14 years ago | |

I think the author meant single load (load one page, fetch the rest by async javascript).

But as I've commented, having built edgeyo and Strangers for Dinner and having tested in-page (iframe) and redirected authentication, redirected authentication seems to garner more trust

drivebyacct2 14 years ago |

that chart makes an extremely simple flow extraordinarily hard to understand.