使用iPhone HTML5应用程序内(全屏)模式的Azure mobile facebook身份验证

使用iPhone HTML5应用程序内(全屏)模式的Azure mobile facebook身份验证,iphone,html,azure,azure-mobile-services,Iphone,Html,Azure,Azure Mobile Services,我有一个HTML5应用程序,它使用Azure移动服务身份验证进行登录(直接来自下面提供的示例代码)。它在所有桌面浏览器和Safari的iPhone5中都能正常工作。但在应用程序/全屏模式下,它什么也不做(不像safari那样请求显示弹出窗口的权限,也没有弹出窗口显示),我可以永远等待,什么也不会发生。如果我第二次调用它,它会给出一个错误,说“error:Unexpected failure”…可能是因为第一次尝试仍在运行?感谢您的帮助/见解 client.login ("facebook").d

我有一个HTML5应用程序,它使用Azure移动服务身份验证进行登录(直接来自下面提供的示例代码)。它在所有桌面浏览器和Safari的iPhone5中都能正常工作。但在应用程序/全屏模式下,它什么也不做(不像safari那样请求显示弹出窗口的权限,也没有弹出窗口显示),我可以永远等待,什么也不会发生。如果我第二次调用它,它会给出一个错误,说“error:Unexpected failure”…可能是因为第一次尝试仍在运行?感谢您的帮助/见解

client.login ("facebook").done(function (results) {
     alert("You are now logged in as: " + results.userId);
}, function (err) {
     alert("Error: " + err);
});
编辑更新,提供更多信息和2个潜在想法*

我做了更多的研究,发现了一个网站,它使用了一种方法,克服了这个问题,还解决了当前Azure mobile认证方法的另外两个副作用。我认为Azure移动团队可能会考虑做类似的事情,因为代码中有一些其他身份验证选项的提示(尽管很难阅读和确定,因为最小化的代码被破坏了)。这可能只是在代码中激活这些

“解决方案”: 转到并单击Facebook登录。你会看到它在“应用模式”下的iPhone Safari中工作得非常好,因为它没有弹出窗口,只是停留在当前的浏览器窗口中

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

第二,在iPhone Safari中,当弹出窗口自动关闭时,如果Safari中打开了其他浏览器窗口,则原始页面不会获得焦点。取而代之的是,它处于较小/幻灯片模式,因此他们可以选择显示哪一个。如果发生这种情况,用户必须再经历一个步骤…单击浏览器窗口以激活它并使其聚焦..再次让他们感到更痛苦,更可能陷入困境,无法正确操作,需要帮助。m.bcwars.com没有这个问题

Azure选项: 看看Azure移动代码,它看起来可能已经有了解决方案。我无法轻松阅读它,因为它被缩小了/禁用了,但它似乎有4个选项(包括iFrame等)用于调用身份验证,并且只使用了1个选项(弹出窗口中的“不太理想的一个”)。一个简单的解决方案是设置一个属性以允许其中一个备用身份验证工作。但我读得不够好,弄不明白。另一种方法是破解代码(暂时等到微软修复)


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

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

有关此操作的Facebook文档如下:

一些代码示例可以让您更轻松

您可以从以下内容开始:

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);
        });
    } 
}
(请记住用与您的站点相关的内容替换您的应用程序ID和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会将用户重定向回上面给出的您的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片段获得的访问令牌,并将其作为参数传递给您对Azure Mobile Services进行的登录调用

此代码依赖于插件来轻松处理URL片段

希望这能解决你的问题