iphone - 在应用程序(全屏)模式下使用 iPhone HTML5 进行 Azure 移动 Facebook 身份验证

Question

我有一个 HTML5 应用程序，它使用 Azure 移动服务身份验证进行登录(直接来自下面提供的示例代码)。它在所有桌面浏览器和 iPhone 5 的 Safari 中运行良好。但在应用程序/全屏模式下，它什么也不做(不像在 safari 中那样请求显示弹出窗口的许可，并且不会显示弹出窗口)，我可以永远等待，什么也不会发生。如果我第二次调用它，它会给出错误“错误:意外失败”...也许是因为第一次尝试仍在运行？任何帮助/见解表示赞赏。

client.login ("facebook").done(function (results) {
     alert("You are now logged in as: " + results.userId);
}, function (err) {
     alert("Error: " + err);
});

编辑更新，提供更多信息和 2 个潜在想法*

我做了一些更多的研究，发现一个网站使用的方法可以克服这个问题，并且还解决了当前 Azure 移动身份验证方法的两个其他副作用。我认为 Azure 移动团队可能正在寻求做类似的事情，因为代码中存在一些其他身份验证选项的提示(尽管难以阅读和确定，因为最小化的代码被混淆了)。这可能只是在代码中激活这些的问题......

“解决方案”:

转到http://m.bcwars.com/然后点击 Facebook 登录。您会发现它在“应用程序模式”下的 iPhone Safari 中完美运行，因为它不是弹出窗口，而是停留在当前浏览器窗口中。

此方法解决了当前 Azure 移动方法的另外两个问题。首先，弹出窗口被大多数浏览器解释为潜在的广告，并且要么被自动阻止(桌面 Chrome)...并且用户不知道为什么它不起作用...或者给出用户必须批准的警告( iPhone Safari 处于“浏览器模式”)这很麻烦。如果用户安装了弹出窗口拦截器，那么用户就很难让它正常工作，甚至更有可能。 bcwars.com 方法没有这个问题。

其次，在 iPhone Safari 中，当弹出窗口自动关闭时，如果 Safari 中打开了其他浏览器窗口，则原始页面不会获得焦点。相反，它处于较小/幻灯片模式，因此他们可以选择要显示的内容。如果发生这种情况，用户必须再执行一个步骤...单击浏览器窗口以激活它并给予其焦点...再次更加痛苦，并且更有可能让他们搞砸并且无法正确执行并需要帮助。 m.bcwars.com 没有这个问题。

Azure 选项:

查看 Azure 移动代码，看起来可能已经有了解决方案。我无法轻松阅读它，因为它被缩小/混淆了，但它似乎有 4 个选项(包括 iFrame 等)用于调用身份验证，并且仅使用 1 个(弹出窗口中的“不太理想的选项”)。一个简单的解决方案是设置一个属性以允许替代身份验证之一起作用。但我读得不够好，无法弄清楚。另一种方法是破解代码(暂时直到微软提供修复程序为止)。

我可以在那里得到一些帮助吗？

Answer 1

您可以使用 Facebook 实现不使用弹出窗口的身份验证流程。基本思想是使用“Web Flow”进行登录，一旦窗口从登录返回，就使用访问 token 将用户登录到 Azure 移动服务。

执行此操作的 Facebook 文档位于此处: https://developers.facebook.com/docs/facebook-login/login-flow-for-web-no-jssdk/#step2

一些代码示例，让您更轻松。

你可以从这样的事情开始:

(请记住将 YOUR_APP_ID 和 YOUR_URL 替换为与您网站相关的内容。

function logIn() {
    window.location.replace('https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=http%3A%2F%2FYOUR_URL&response_type=token')
}

这会将窗口重定向到 Facebook 页面，以便用户登录并授权您的应用程序。用户完成操作后，Facebook 会将用户重定向回上面给出的 YOUR_URL。

您可以在此处处理重定向并执行移动服务登录，如下所示:

function handleLoginResponse() {
    var frag = $.deparam.fragment();
    if (frag.hasOwnProperty("access_token")) {
        client.login("facebook", { access_token: frag.access_token }).then(function () {
            // you're logged in
        }, function (error) {
            alert(error);
        });
    } 
}

在这里，您可以解析作为 URL 片段获得的访问 token ，并将其作为参数传递给您对 Azure 移动服务进行的登录调用。

此代码取决于 jquery BBQ轻松处理 URL 片段的插件。

希望这能解决您的问题!