Our widget has a new option that helps it work better on mobile devices. This will keep the user experience in a single browser window for best compatibility on mobile devices.
tl;dr
Our widget has a new option that helps it work better on mobile devices. This will keep the user experience in a single browser window for best compatibility on mobile devices.
Popup vs Redirect
Our widget works very reliably on desktop browsers. Back in 2010, we created the widget with desktop browsing as the priority, when mobile browsers were a tiny fraction of our traffic. When we started, we had a decision to make: do we open the OAuth flow in a popup window or do we redirect the whole browser window?
Because desktop was our primary focus, the popup window made reasonable sense. The main reason we chose to not to redirect the window is that we didn’t want our widget to take the user away from our customer’s website. We thought (and I still do) that despite being out of fashion, using a popup window reduces the risk of a person leaving a customer’s web site completely if they become distracted during the consent flow.
Of course, times have changed considerably and now mobile accounts for at least 30% of our widget sessions. That ratio may be much higher for individual customers who have mobile oriented business. Over the past couple years, there have been a few issues with the popup that caused pain for users on mobile devices.
On mobile devices the popup has not always worked as expected. There have been issues with closing the popup window when the import completes. There have been issues sending messages from the popup window back to the widget on the main page. Lately, Mobile Chrome for iOS has been the friction point. Communication between tabs is defeated because JavaScript is only able to run in one tab at a time.
So, what is new?
Enough humbling background. The short story is that you finally have a choice when you use our widget. By default, our widget will continue to launch a popup window to manage the OAuth flow, but if you’d like to force the new behavior you can specify a value for inline_oauth. Passing a true value will force the inline flow always. Specifying inline_oauth: 'mobile' will force the inline flow on mobile devices only, preserving the popup flow on desktop browsers.
By default, our application will redirect the browser back to the page it was previously on. Once our widget loads, it will open, displaying the user’s address book. We use the URL fragment to pass a message to our widget indicating what to do. If you don’t want to return to the same page, let me know. We have a parameter to override, but since we pass some data back to the widget using the URL fragment, I want to make sure that there isn’t a conflict with your page.
How does it look? Our test-drive is using the inline flow on mobile devices, so point your favorite mobile browser/emulator at /test-drive/ to check it out.
Or watch the demo video above that demonstrates importing my Gmail contacts on iOS.
Please note, you must be using our universal snippet to take advantage of this feature. If your account hasn’t already been migrated, drop us a line and we’ll prioritize your account.
Is there no alternative?
It might be nicer to find a technical solution using an iframe to display the authentication form. We don’t do this because providers don’t allow it. For modern browsers, they send a value of DENY or SAMEORIGIN for the X-Frame-Options header. This prevents any site from hosting the page in an iframe. In older times, these same sites would enforce the policy with some simple JavaScript.
Happy testing! Reach out to support@cloudsponge.com with any questions.
