移动设备上的Facebook登录出现错误屏幕而非登录界面

Question

我将通过Facebook注册用户到我的网站上，并在移动设备上遇到了一个问题。首先，我要说明我对Facebook用户登录过程还比较陌生。整个过程如下：

首先，当用户点击按钮时，我会调用fb.login函数来启动Facebook弹出窗口，让他们进行登录，代码如下：

jQuery(".welcome-cta-facebook span").on("click",function(){     
    FB.login(function(response) {
        if (response.authResponse) {
            getFbUserDetails();
        } else {
            console.log('User cancelled login or did not fully authorize.');
        }
    });
});

一旦用户登录并接受应用程序，我就会调用getFbUserDetails函数，如下所示：

function getFbUserDetails(){
    FB.api(
      '/me',
      'GET',
      {"fields":"id,name,picture{url},email"},
      function(response) {
          console.log(response);
          fbParameters = "?facebookID=" + response.id + "&facebookName=" + response.name + "&facebookEmail=" + response.email + "&facebookProfilePictureURL=" + response.picture.url;

          /* then send the fb parameters to my DB */
      }
    );
};

这个过程在桌面上完全正常，但移动端遇到了一些问题：

• 如果用户没有在他们的移动浏览器中登录，我会收到以下错误消息：

未登录：您尚未登录。请登录后重试。

• 如果用户通过其移动浏览器登录，我会收到以下错误消息：

"URL已阻止：此重定向失败，因为应用的客户端OAuth设置中未列入白名单的重定向URI。确保“客户端”和“Web OAuth登录”打开，并将所有应用程序域添加为有效的OAuth重定向URI。"

不确定为什么桌面上没有问题，却会出现这些错误。如何在移动端顺利地收集某人的详细信息？我使用这种方法是正确的吗？值得注意的是，我没有使用 Facebook 登录按钮。

感谢和欣赏我能得到的帮助！

- red house 87

---

移动端和桌面端在这里是同一个站点吗？还是你有一个子域名进行重定向？// 检查登录对话框URL中的redirect_uri参数值，并确保您已在“有效的OAuth重定向URI”字段中列出了完全相同的值。 - CBroe

我也遇到了同样的问题。你找到解决办法了吗？ - Karim Varela

你确定Facebook中“Facebook登录->设置->有效的OAuth重定向URI”选项中手机和桌面URI都已经被加入白名单了吗？当你发起请求时，请检查URI是否与白名单匹配。如果没有安全问题，你可以在这里发布URI和白名单页面的截图吗？ - cb64

Answer 1

您需要将所有URI添加到Facebook应用程序的白名单字段中

Facebook Developers -> Settings -> Advanced -> Security

在安全区块中，您会看到“允许IP服务器”的选项。请将所有URI添加到此字段中。

- Lionel B