在移动版网站中集成 OAuth 工作流程

Question

对于 twitter 和 facebook 等服务，我们有以下工作流程：

1. 用户单击“发布”按钮。
2. 我们在服务器上获取 auth url
3. 我们发送到客户端验证 url
4. 客户端在标准 javascript 弹出窗口中打开身份验证 url
5. 客户端通过回调url授权返回
6. 在回调 url 上，我们与社交服务进行交互。

我们在手机上的第 4 步遇到了很大的麻烦。

标准 javascript 弹出窗口无法在移动设备上运行。我们可以为外部身份验证网址使用哪些替代方案？

UPD 临时解决方案是生成身份验证链接作为锚点并将它们放置在文档中。 它解决了问题，但我们想要更好的用户体验。

Answer 1

我在这个移动网站上使用jquery mobile popup，它看起来也是完美的桌面浏览器。我希望你使用这样的回调（我使用这样的东西）

var jsonp = document.createElement("script");
        jsonp.type = "text/javascript";
        jsonp.src = "http://foo.com/api/ad?foo_var=4345&callback=displayinfo";
        document.getElementsByTagName("body")[0].appendChild(jsonp);

在回调函数中你可以使用那些弹出窗口

function displayinfo(data) {    
$("#somepopup").html('<div data-role="popup">
                        '+data+'
                    <div id="ok" data-inline=true data-role=button>
                        <a class="ui-link-inherit" href="">Ok</a>
                    </div>
                    <div id="cancel" data-inline=true data-role=button>
                        <a class="ui-link-inherit" href="">Cancel</a>
                    </div>
                    </div>');

                $('#ok').button();
                $('#cancel').button();

                $("#somepopup").popup();
}

您的文档中应该有一个 id 为 somepopup 的 div，如果您实现 jquery mobile，所有这些都可以正常工作。我希望这会有所帮助。