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

【问题标题】：Simple example of popup authentication with Facebook Graph API使用 Facebook Graph API 进行弹出式身份验证的简单示例
【发布时间】：2020-05-30 09:47:59
【问题描述】：

试图让 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 检索用户数据。

有没有更好/更简单的方法来做到这一点？简单的例子表示赞赏。

谢谢。

【问题讨论】：

标签： javascript html facebook

【解决方案1】：

facebook中的oauth2涉及两个步骤，调用authorize获取code，然后调用access_token获取token。一种处理弹出登录的方法：

像你一样在新窗口中打开登录 url，当 facebook 在弹出窗口中重定向回你的 url 时，你可以通过服务器端代码或使用 javascript 捕获 url 查询参数来设置 cookie，当页面加载到弹出，立即关闭窗口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);
}

【讨论】：

您可以在重定向 url 中使用将在弹出窗口中运行的脚本，而不是在原始窗口中使用计时器（这可能会比您预期的延迟更多）： if (opener && "" != opener.location) { opener.handler(); } window.close();这将在打开的窗口上调用 handler() 并关闭弹出窗口。只有当父窗口仍然打开并且没有导航到不同的域时，才会调用处理程序。
我认为是缺少screenCenterPos这个功能。
$('#UserInfo').text($.cookie("some_cookie"); 应该是 $('#UserInfo').text($.cookie("some_cookie")); 。你错过了结束)。
Woooow，出于某种原因，我从没想过我可以在模态窗口关闭时进行某种回调，太棒了！我正在考虑通过套接字向自己发送消息，但现在这绝对是矫枉过正。

【解决方案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/

【讨论】：

您的代码是好的，但是用户令牌将在 2 小时后过期

【解决方案3】：

查看这篇文章：Create Facebook PopUp Authentication Window using PHP and javascript 用于自定义弹出式身份验证。

【讨论】：

【解决方案4】：

正如 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();
        }

【讨论】：