javascript - 在网站的移动版本中集成 OAuth 工作流

Question

我们为 twitter 和 facebook 等服务制定了以下工作流程:

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

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

标准 javascript 弹出窗口不适用于移动设备。我们可以使用哪些替代方案来获取外部授权网址？

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

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，所有这些都可以正常工作。我希望这会有所帮助。