hello.js 不在 AngularJS 网络应用程序中不适用于 iPhone 和 Blackberry Z10s

Question

我有一个适用于大多数人的登录系统（在 Chrome、Android 设备、IE8、Firefox 等上），但它似乎不适用于使用 Z10s 或 iPhone 5s 的人。我无法访问这些设备，因此很难测试，所以我想问一下我是否正确设置了所有内容。

这是一个 AngularJS 应用，使用 hello.js 进行 OAuth，使用 bootstrap-social 和 font-awesome 作为登录按钮。

要将 hello 插入 Angular，在 app.js 中我包括：

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
});

然后，在我的loginCtrl 中，我将其注入

angular.module('myapp').controller('loginCtrl', [..., 'hello', ...,
function(..., hello, $location, ...) {

...

$scope.doLogin = function(network) {
    console.log('Calling hello ' + network);
    hello.login(network);
};

...
}]);

在我看来，我有

        <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>

昨天我使用onclick="hello.login('facebook')"，我怀疑它在某些设备上被破坏了，因为我不应该使用onclick，而hello不在范围内，所以我把它改成了ngClick并在范围内调用函数。 onclick 对有错误的用户的具体影响是将用户重定向到 default/catch-all 路由而不访问服务器（我监听 hello 事件并调用服务器，所以这表明它不是打个招呼。）

但是，我仍然要求有问题的人重试（显然在刷新之后），现在他们说按钮根本没有任何作用。

网站上的其他按钮也可以使用。事实上，为了访问这个页面，他们使用<button> 使用ui-router 来访问这个页面。

我将继续搜索，但我只是想问一下我是否正确地将 hello.js 挂接到 AngularJS 中，并且没有犯任何其他初学者错误。

Answer 1

我认为问题在于 iPhone 和 Z10 阻止了 hello.js 的 popup OAuth 身份验证，但我不能只是将其切换为使用 page。

当我尝试时，Facebook 将我返回到我的 redirect_url 和片段

#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}}

这很丑，但关键是它以井号标签开头。所以，虽然 hello.js 通常可以读取这个，但在这种情况下它不能，因为 Angular 会立即破坏地址。我不确定这是否是因为我指定使用 hash-bangs 而不是 hash's，但确实如此。

而且我无法将它发送到 PHP 脚本或任何东西，因为主题标签之后的片段永远不会发送到 PHP 脚本。

所以，我的解决方案是将redirect_url 指向一个独立的页面，该页面上有 hello.js，但没有 Angular。它将内容保存到window.sessionStorage 并将用户重定向回登录页面，hello.js 将用户通过该页面。

我对这种丑陋的方法还不是很有信心，所以我放了一个浏览器嗅探器，只为 iPhone 做这件事（并为其他所有人使用 popup），我将来可能会删除这个检查（因为它很粗略)

Answer 2

@matt 它使用本地存储，而不是会话存储。

全部使用弹出窗口，并定义一个仅包含 hello.js 的 redirect_uri 页面。我不知道你为什么会认为那听起来不对。所有的演示都是这样做的。它还让您有机会显示一个漂亮的加载屏幕。

对丑陋的片段感到抱歉。它传达了许多用于 oauth 代理的状态参数......像 facebook 这样的大多数端点都不需要它，所以我可能会对其进行重构以使其不那么令人生畏。