使用Facebook Graph API进行弹出式验证的简单示例 [英] Simple example of popup authentication with Facebook Graph API

问题描述

试图让Facebook通过javascript弹出窗口验证我的用户。现在，我有：

Trying to get Facebook to authenticate my users via a javascript popup. Right now, I have:

<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开始检索用户数据。

But when the user logs in via Facebook, the popup just displays the Facebook.com homepage. I'd like for the popup to authenticate the user and go away so that I can start retrieving user data from the graph api.

有更好/更容易的方法做这个？

Is there a better / easier way to do this? Simple examples are appreciated.

谢谢。

推荐答案

oauth2 Facebook涉及两个步骤，通过授权获取代码，然后调用access_token获取令牌。
处理流行登录的一种方法：

oauth2 in facebook involves two steps, call authorize to get code, then call access_token to get token. One way to deal with the pop login:

在新窗口中打开登录URL，就像您所做的那样，当Facebook重定向到您的弹出窗口中的url ，您可以通过服务器端代码或使用javascript捕获网址查询参数，当页面加载到弹出窗口中时，立即关闭窗口。关闭窗口。

open login url in new window just like you did,when the facebook redirects back to your url in the popup, you set the cookie either through server side code or using javascript to capture url query parameter, when page is loaded in the popup, close the window immediately window.close.

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

On your main page, after your window.open code, add JavaScript code to detect if popup is closed and capture the 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);
}

这篇关于使用Facebook Graph API进行弹出式验证的简单示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！