I have a single page app that integrates with other services such as Dropbox and LinkedIn. Dropbox, for instance, has great API and I got the authentication working by opening Dropbox’s authentication link in another window. Once the user authenticates, I ask them to close that new window to return to my app.
Clearly this is suboptimal as it takes the user away from my app, and even more cumbersome on tablets.
How would I do the authentication within the app, such is in a lightbox or a modal form?
Note that the integration itself happens server-side not client side. Presently, the Dropbox authentication page has a call back page that signals to my server that authentication was successful, which I store in the user’s table in the database for future use.
Note: The bounty comment should read: A code sample is highly desired but not required.
What you’re proposing is to defeat the security model, so it should not be possible. The user should be able to see the URL of the real page for verification. Imagine when you’re making a payment with Paypal, you likely check that you’re on paypal.com before entering your important data right? The same applies to all other apps. It’s a very ugly flow, but the best the industry has come up with today.
The ideal flow is you redirect user to the third-party web site or app, user logs in and authorizes, then redirects back to you. A native app has the benefit of switching to another native app, so the flow is a bit less ugly.
The work around that would do what you want is an app asking for user’s name and password to the 3rd party service, then doing the auth dance themselves behind the scenes. This will likely deter users from your app and is very dangerous. I do not recommend it.