使用Facebook Graph API进行弹出式身份验证的简单示例

Question

试图让Facebook通过javascript弹出窗口对我的用户进行身份验证.现在,我有:

<input type="button" value="Connect with Facebook" onclick="window.open('https://graph.facebook.com/oauth/authorize?client_id=XXXXXXXXXXX&redirect_uri=http://example.com/step2&display=popup')"  />

但是当用户通过Facebook登录时,弹出窗口只显示Facebook.com主页.我想让弹出窗口对用户进行身份验证并离开,这样我就可以开始从图形api中检索用户数据了.

有没有更好/更简单的方法来做到这一点？简单的例子是值得赞赏

谢谢.

Answer 1

facebook中的oauth2涉及两个步骤,调用授权来获取代码,然后调用access_token来获取令牌.处理pop登录的一种方法:

在新窗口中打开登录URL就像你一样,当facebook在弹出窗口中重定向回你的url时,你通过服务器端代码设置cookie或者使用javascript来捕获url查询参数,当弹出窗口中加载页面时,关闭窗口立即window.close.

在您的主页上,在window.open代码之后,添加JavaScript代码以检测弹出窗口是否已关闭并捕获cookie:

var signinWin;
$('#FacebookBtn').click(function () {
        var pos = screenCenterPos(800, 500);
        signinWin = window.open("[URL]", "SignIn", "width=780,height=410,toolbar=0,scrollbars=0,status=0,resizable=0,location=0,menuBar=0,left=" + pos.x + ",top=" + pos.y);
        setTimeout(CheckLoginStatus, 2000);
        signinWin.focus();
        return false;
    });

function CheckLoginStatus() {
    if (signinWin.closed) {
        $('#UserInfo').text($.cookie("some_cookie");
    }
    else setTimeout(CheckLoginStatus, 1000);
}

Answer 2

为什么不简单......

function authorizeAppInPopup() {
    FB.login(function(response) {
        if (response.authResponse) {
            // User authorized app
        } else {
            // User cancelled login or did not fully authorize
        }
    }, {scope: 'publish_stream'});
}

??? :]

https://developers.facebook.com/docs/reference/javascript/FB.login/