hello.js not in AngularJS web app not working on iPhones and Blackberry Z10s - iphone

Question

I have a login system that works for most people (on Chrome, Android devices, IE8, Firefox, etc), but it seems not to work for people with Z10s or iPhone 5s. I don't have access to these devices so it's difficult to test, so I wanted to ask whether I was setting up everything properly.
It's an AngularJS app, using hello.js for OAuth, and bootstrap-social and font-awesome for the sign in buttons.
To insert hello into Angular, in app.js I include:
var app = angular
.module('myapp', [
'ui.bootstrap',
'ui.router',
'hello',
])
...
.run([..., 'hello', ..., function(..., hello, ...) {
...
hello.init(...);
...
}]);
...
var helloApp = angular.module('hello', []);
helloApp.factory('hello', function() {
return window.hello; // Assumes hello has been loaded
});
Then, in my loginCtrl, I inject it with
angular.module('myapp').controller('loginCtrl', [..., 'hello', ...,
function(..., hello, $location, ...) {
...
$scope.doLogin = function(network) {
console.log('Calling hello ' + network);
hello.login(network);
};
...
}]);
And in my view, I have
<button id="facebookLogin" class="btn btn-social btn-facebook" ng-click="doLogin('facebook')">
<span class="fa fa-facebook pull-left"></span> <span>Sign in with Facebook</span>
</button>
<button id="googleLogin" class="btn btn-social btn-google-plus" ng-click="doLogin('google')">
<span class="fa fa-google-plus pull-left"></span> <span>Sign in with Google</span>
</button>
Yesterday I was using onclick="hello.login('facebook')", and I suspected that was breaking on certain devices because I shouldn't be using onclick and hello wasn't in scope, so that's why I changed it to ngClick and calling a function in scope. The specific effect of onclick on the users who had errors was to redirect the user to the default/catch-all route without accessing the server at all (I listen for hello events and call the server, so this suggests it wasn't calling hello at all.)
But still, I ask the people who are having issues to re-try (after refreshing obviously), and now they say the button simply does nothing.
Other buttons on the site work. In fact, to get to this page, they use a <button> that uses ui-router to get to this page.
I'm going to continue to search, but I just wanted to ask if I seemed to be hooking hello.js into AngularJS properly, and not making any other beginner mistakes.

Answer 1

I believe the problem is that iPhones and Z10s were blocking hello.js's popup OAuth authentication, but I couldn't just switch it to use page.
When I tried, Facebook returns me to my redirect_url with the fragment
#access_token=....&expires_in=4264&state={%22client_id%22%3A%22164986300332415%22%2C%22network%22%3A%22facebook%22%2C%22display%22%3A%22page%22%2C%22callback%22%3A%22_hellojs_3ojn1yy8%22%2C%22state%22%3A%22%22%2C%22oauth_proxy%22%3A%22https%3A%2F%2Fauth-server.herokuapp.com%2Fproxy%22%2C%22scope%22%3A%22basic%22%2C%22oauth%22%3A{%22version%22%3A2%2C%22auth%22%3A%22https%3A%2F%2Fwww.facebook.com%2Fdialog%2Foauth%2F%22}}
it's ugly, but the point is it starts with a hash tag. So, while hello.js can normally read this, it couldn't in this case because Angular would mangle the address immediately. I'm not sure if this is because I specify to use hash-bangs instead of hash's, but it was.
And I couldn't send this to a PHP script or anything because the fragment after the hashtag would never make it to the PHP script.
So, my solution was to point the redirect_url at an independent page that has hello.js on it, but no Angular. It saves stuff to window.sessionStorage and redirects the user back to the login page, where hello.js passes the user through.
I'm not very confident in this ugly approach yet, so I put a browser sniffer to only do it for iPhones (and use popup for everyone else), I may remove this check in the future (because it's sketchy)

Answer 2

#matt it uses localstorage, not sessionstorage.
Use popup for all, and define a redirect_uri page with just hello.js In it. I dont know why you might think thats sounds wrong. All the demos do it this way. It also gives you a chance to display a nifty loading screen.
Sorry about the ugly fragment. It communcates a lot of state parameters which is used for the oauth proxy... most endpoints like facebook dont need it, so I might refactor that to make it a little less daunting.