Javascript 使用 Facebook Graph API 进行弹出式身份验证的简单示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2716669/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple example of popup authentication with Facebook Graph API
提问by ensnare
Trying to get Facebook to authenticate my users via a javascript popup. Right now, I have:
试图让 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')" />
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.
但是当用户通过 Facebook 登录时，弹出窗口只显示 Facebook.com 主页。我希望弹出窗口对用户进行身份验证并离开，以便我可以开始从图形 api 检索用户数据。
Is there a better / easier way to do this? Simple examples are appreciated.
有没有更好/更简单的方法来做到这一点？简单的例子表示赞赏。
Thank you.
谢谢你。
回答by JiJ
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:
facebook中的oauth2涉及两个步骤，调用authorize获取code，然后调用access_token获取token。一种处理弹出登录的方法：
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.
像你一样在新窗口中打开登录 url，当 facebook 在弹出窗口重定向回你的 url 时，你通过服务器端代码或使用 javascript 设置 cookie 来捕获 url 查询参数，当页面在弹出窗口中加载时，关闭窗口立即window.close。
On your main page, after your window.open code, add JavaScript code to detect if popup is closed and capture the cookie:
在您的主页上，在 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);
}
回答by borisdiakur
Why not simply...
为什么不简单...
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/
https://developers.facebook.com/docs/reference/javascript/FB.login/
回答by Mahmud Ahsan
Checkout this article: Create Facebook PopUp Authentication Window using PHP and javascriptfor customize popup authentication.
查看这篇文章：使用 PHP 和 javascript 创建 Facebook 弹出式身份验证窗口以自定义弹出式身份验证。
回答by LocalPCGuy
It might be a good idea to do both a callback function from the Child window as Avner says as well as a timer that watches for the window to be closed. That way if the Child window is closed without a specific action you can take appropriate action on the Parent window.
正如 Avner 所说，从子窗口执行回调函数以及监视窗口关闭的计时器可能是一个好主意。这样，如果子窗口在没有执行特定操作的情况下关闭，您可以对父窗口执行适当的操作。
**On Child**
// Set oAuthToken from server side when it comes back from authenticating
// and you have the token on the server side.
var oAuthToken = "";
oAuthToken = "--STRING INSERTED BY SERVER SIDE CODE--";
window.opener.pbFromPopup(oAuthToken);
**On Parent :**
function CheckLoginStatus() {
if (authWindow.closed) {
// Handle error if authentication window is closed
// without any action on Allow or Deny
alert("window closed");
//location.href = "errorPage.aspx?error=authwinclosed;
}
else setTimeout(CheckLoginStatus, 1000);
}
function pbFromPopup(token) {
// Function called from child window,
// token is passed back from child
authWindow.close();
// Put token in a hidden form field and submit the form to pass
// it back to the server
$("#authToken").val(token);
$("#form1").submit();
}
