Support environments without popups (phonegap, etc.)

[callahad]

Several folks on dev-identity are asking about getting BrowserID to work with things like PhoneGap. Apparently one of the primary issues is opening a popup: it opens in a browser outside of the PhoneGap application, breaking the connection between Persona and the app.

[callahad]

I imagine that simply redirecting into and out of our login flow, instead of using a popup, might Just Work with the Observer API, since we would automatically fire an assertion when landing back on the RP...

[benadida]

@callahad yes, that's exactly the idea I've been discussing with Dan for Chrome/iOS support and UIWebView support.

[seanmonstar]

I have always found it skeptical when an app uses an internal webview to show me an oauth page. Its trivial to inject your own JavaScript to read your credentials as you type them.

[benadida]

@seanmonstar I'm with you except.... what other option do we have? Eventually I'd like Firefox to act as the Persona implementation, no passwords. But that's a bit further down the line.

[seanmonstar]

Yea I know.

Well, for Android at least, we could offer a Persona app, and then other apps can launch an org.persona.INTENT_AUTH intent.

Not possible on iOS, plus it requires Android users to download a second app, which might discourage devs from using Persona as a login....

[vthunder]

That would be possible on iOS, apps use custom protocol handlers to do that. But having to download a second app is, IMO, a non-starter. Our only hope is to piggy-back onto another app (like Firefox or Marketplace).

[max-mapper]

there is a plugin for phonegap called ChildBrowser that is cross-platform and lets you open browser window popups for doing things like oauth. it can be used right now for browserid on phonegap

[sintaxi]

Happy to see this issue on the list. This is an important use case to cover.

As @maxogden says, ChildBrowser is the way to go. The problem is that persona (as far as I know) doesn't give you control over how the popup window opens.

[callahad]

This feels really high priority, but low urgency at the moment. It'd be awesome to have a really well fleshed out mobile story in Q3. Especially with Chrome on iOS needing this, etc.

[shane-tomlinson]

Making this the new consolidated tracker bug so we can close down others.

issue #75 issue #428 issue #1822 issue #1870 issue #1946

[warner]

This feels like a candidate for the new beta2-req label.

[lloyd]

now part of our Q3 goals... :+1: to the beta2 label.

[wfwalker]

I have similar symptoms, Ben asked me to mention them here.

Steps to reproduce:

1. visit marketplace.mozilla.org from Mobile Safari on iPhone 4 running iOS 5.
2. choose "Add to Home Screen" from links at the bottom
3. launch the newly created marketplace icon in the home screen
4. click on the "log in / register" button
5. sit at the "Connecting to Persona..." screen forever

[redalastor]

It should also be possible to use the redirection even if you aren't on a mobile app.

I have a use case where a forum I use supports single sign on by opening my "login page" in a popup. My login page would simply use the persona redirection to do its job. Right now, it gives me a popup opening a new popup.

[jchris]

Just want to add that I was able to reproduce @wfwalker's 5 steps on iPad running iOS 6.1

As someone trying to put together a PhoneGap app, it would definitely be helpful to have a comment on this bug with an idea of the priority or the blockers for adding robust PhoneGap support. I'm about to brute-force my app to work, which probably won't be pretty, and if there was a little more guidance about design issues, I'd be more likely to do work that could be contributed back to Browserid.

If my brute force hacks are at all illuminating, I'll follow up with links.

[marknutter]

Decided not to use Persona as a result of this issue. Definitely high priority if you ask me.

[benadida]

@marknutter thanks for the feedback, we are working on this and we do plan a fix. Please consider watching this bug and adding Persona once we've addressed your issue!

[marknutter]

What's the general plan for solving this problem? An in-page javascript modal or something? Also, how can I contribute as a developer?

[benadida]

@marknutter I'll let @seanmonstar give you details, but high-level we're thinking that we'll detect when popups are not possible and implement a redirection-based flow. If you're using the Persona Observer API, i.e. .watch(), you don't need to do anything: it will just work.

[marknutter]

oh, wait, so there's actually a way to do this manually right now via the Observer API? From the blog post about the Observer api: "Whenever a user clicks the login button on your site, you request() a verified email from your user, which opens the Persona dialog." - is that Persona dialog a popup window?

[callahad]

@marknutter Alas, not quite yet. I believe the plan is to have the Observer API automatically detect when popups aren't enabled, and then switch to a redirect-based workflow. So if you implement the Observer API now, you'll eventually get a popup-free experience where needed.

For what it's worth... what specific aspects of the popup blocked you from using Persona? Was it the lack of support in Phonegap or similar?

[redalastor]

Will there be an option to choose the redirection workflow even if popups are detected as possible?

On Wednesday, March 6, 2013, Dan Callahan wrote:

@marknutter https://github.com/marknutter Alas, not quite yet. I believe the plan is to have the Observer API automatically detect when popups aren't enabled, and then switch to a redirect-based workflow. So if you implement the Observer API now, you'll eventually get a popup-free experience where needed.

For what it's worth... what specific aspects of the popup blocked you from using Persona? Was it the lack of support in Phonegap or similar?

— Reply to this email directly or view it on GitHubhttps://github.com/mozilla/browserid/issues/2034#issuecomment-14507461 .

[marknutter]

@callahad I was trying to use it on a web page that had been added as a homescreen web app on my iOS devices, and yes, I do plan on using phonegap with the app as well which will have the same problem.

[ozten]

Also, how can I contribute as a developer?

@marknutter look through this bug list and find a simpler, smaller bug. We'd love to help you work through a pull request. Once you get to know the codebase a bit more, you could help test the Phonegap patch when it's ready, tweak it, and fix any polish bugs to make sure it's any easy integration for other Phonegap devs.

[marknutter]

@ozten sounds great, I'll give it a shot

[seanmonstar]

@benadida @marknutter that will definitely help web browsers who currently have problems, like Chrome for iOS and Windows Phone, but it doesn't help native apps.

[jchris]

I've created a PhoneGap / Cordova plugin that uses the browserid-ios code to present a modal web view. It works but isn't fully featured yet. You can install it with the plugman tool.

Hopefully folks find this helpful in the time we are waiting for a more robust solution.

[marknutter]

@jchris that is awesome, thanks for that!

[jamesshore]

+1

This issue is affecting at least two of my users. The worst part about it is that it doesn't provide any useful information for people to diagnose the issue. Is there an ETA for a fix?

[jaredhirsch]

Bumping to Beta 3. @jamesshore I don't have an ETA, maybe @lloyd or @callahad have thoughts.

[seanmonstar]

I'm taking this, will continue work on the nopopup experiment I did last quarter, and see how many environments we can fix along the way.

[sandeepshetty]

@seanmonstar

• Confused about your earlier comment "but it doesn't help native apps". Wouldn't the nopopup (redirect instead of popup) approach fix this for phonegap based apps?
• Instead of detecting when popups are not possible could it just be an option so implementors can choose to always redirect?
• Is there an ETA for this and can I contribute in any way to make this happen sooner?

[lloyd]

@sandeepshetty - When @seanmonstar says "doesn't help native apps", he's talking about the ability to redirect from an iOS native app to safari, and back to iOS (for instance).

Then generally, it sounds like folks are pretty interested in forcing the redirect behavior in all environments…

Anyone object to a .request() flag? preferRedirect ?

[lloyd]

@seanmonstar fwiw, I'm eager to review when you've got a candidate. This issue is 10 months open with 17 participants. let's get it done!

[ozten]

User Agent (or platform) sniffing is gross, but I'd rather have the shim give the best UX on a platform by platform basis.

Reasons 1) On the same platform, the Persona flow should always be consistent for security and ease of use 2) preferRedirect doesn't do anything on browsers with native implementations, right?

[sandeepshetty]

@lloyd Re native apps: Thanks. that makes sense. @ozten : Agree with both your reasons but how do you handle something like Phonegap that does allow popups but outside the scope of the app?

[callahad]

(+1 to both of ozten's points.)

[ozten]

@sandeepshetty if we could detect that we were on phonegap and do a redirect based flow, I'd be all for it. My feedback is mainly about an RP controlled flag to switch the type of flow.

[sandeepshetty]

It looks like the only reliable way to detect phonegap is to register a callback for the deviceready event and set a flag in that callback to switch to a redirect based flow.

[seanmonstar]

I agree with not having a request() flag. It should only use this method if the standard popup and window.opener don't work. I don't see a way to feature detect that without trying to open a popup before, so it will likely need to be browser sniffed, and compared against a list of known bad agents.

As I work on this, I'm wondering if it's needed to have a redirect flow. Since the watch() API adds a communication_iframe, we can store all the parameters in localStorage, open the dialog, check if we put stuff in localStorage, and then continue like everything is normal. The UX is better than redirecting the page in most cases.

@sandeepshetty ETA should be this coming train. To help development, you could help me understand PhoneGap, as I've never touched it. How would people use Persona in PhoneGap, and what happens when the popup opens? Can PhoneGap work like a normal browser, or should it use the internal API instead?

[sandeepshetty]

@seanmonstar There are two types of phonegap apps. One where you compile it yourself and the other is compiled on build.phoengap.com. I can only speak for the latter because that is what I use.

it looks like popups now work on phonegap. Since 4 months for apps that you compile yourself and since 3 months on build.phonegap.com.

When the popup opens it displays an error message:

Source of the test app: https://github.com/otxt/otxtapp/blob/master/index.html You can test the app on your device by installing it from here: https://build.phonegap.com/apps/385137/share

Sorry did not understand your last question.

[seanmonstar]

@sandeepshetty ok, so it can open popups. It looks like the popups don't include window.opener, but that's ok. That's what I'm looking to fix. So then, I'll work on this that should fix popups with broken openers, without a redirect flow. Once I have it working, I'll create an instance that you can load into your app and you can tell me if it works for you.

[lloyd]

@ozten so yes, preferRedirect does nothing on a native persona implementation. Is that a reason to not expose it?

On a call with our webmaker friends, they seemed incredibly interested in this feature as the default. Further, popup hatred is the +1 community reaction to persona.

While a consistent experience is important, I'm not completely convinced we will sacrifice consistency by letting websites submit a preference.

If this had a meaningful impact on adoption, would we still refuse?

BUT, the decision to expose is orthogonal. it's a couple lines of code. let's not let it block the feature, which will help let persona work in more places.

[callahad]

Is that a reason to not expose it?

Consistency of experience. Persona should probably look / feel the same on the same device. That's how you'll recognize and trust it. If sometimes Persona looks like a popup and sometimes it looks like a big redirect, on the same browser, you'll probably think you're being phished.

Can we throw the opt-in question over to @skinny97214?

[seanmonstar]

@sandeepshetty would you be able to test something for me in PhoneGap? I've been trying with Chrome for iOS, and wondering if the same problem exists elsewhere. Can you make a simple test case that opens a popup with var w = window.open(somewhere), and record the value of w.closed (in the original window) before and after closing the popup?

[sandeepshetty]

@seanmonstar this is the code I used: https://github.com/otxt/otxtapp/blob/9a95b0c063489839d53e3bc92b70c9ada04be5af/index.html It looks lilke w.closed is undefined.

[seanmonstar]

@sandeepshetty that's what I'm finding on Chrome for iOS. That's a bummer. It seems I can't use popups at all. I'll have make this use an actual redirect flow.

[sandeepshetty]

I now understand that a big disadvantage of the redirect flow, at least on Phonegap, is the absence of the address bar making it a prime target for phishing.

@seanmonstar Phonegap lets you listen to an exit event which I've tested. Could this be used instead for Phonegap to retain the popup flow?

[seanmonstar]

It seems the exit event is non standard. I'd rather a flow that works for all (reasonably all) environments.

[shane-tomlinson]

I'm taking it. I have taken @seanmonstar's original work and UA sniffed (gross) for Chrome for iOS and Windows Phone. It's gross, but it works. A working base that can be iterated from is better than not working at all.