无法再从http页面调用方法FB.getLoginStatus

Question

所以我尝试在我的nodejs后端服务器中实现Facebook登录功能。出于测试目的，我正在尝试客户端检查登录并获取访问令牌。为此，我遵循了文档，它说要使用 Javascript SDK，并且我遵循了该过程，但有一个问题。

window.fbAsyncInit = function() {
    FB.init({
      appId            : '##############',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v4.0'
    })


    FB.getLoginStatus(function(response) {
        statusChangeCallback(response);
    });

  }

这是我想要获取用户登录状态的代码，但我收到一条错误消息：

The method FB.getLoginStatus can no longer be called from http pages

我非常了解生产规则，但这是我正在研究的开发模式，但仍然出现错误。我缺少什么吗？有什么我必须做的吗？我在本地主机上运行它并收到错误。

Answer 1

• 如果您的服务器在本地主机上运行（也称为在您的计算机上）：在本地主机上使用 devcert 表示 https
• 或者，手动使用自签名证书
...或者使用
• ngrok，如果你想公开你的本地服务器
如果不在本地主机上，请使用
• Let's Encrypt 与 certbot 的免费证书：https://letsencrypt.org/docs/client-options/

Answer 2

如果使用 create-react-app，有一个更简单的修复方法：将环境变量 HTTPS 设置为 true。取消您的启动脚本

package.json

:

"scripts": {
  "start": "HTTPS=true react-scripts start",
  ...
}

如果已经使用自定义脚本，您也可以将其添加到此处：

process.env.HTTPS = true; 后一种方法的主要优点是你可以添加注释来解释它。

有关 CRA 中配置的更多信息：

https://create-react-app.dev/docs/advanced-configuration

Answer 3

为了解决这个问题“无法再从http页面调用方法FB.getLoginStatus”，我使用了应用程序

https://ngrok.com/

并且它通过隧道或类似的东西在我的浏览器中在本地服务器上创建https

Windows 10 +wsl(Debian)

1. 下载ngrok

2. 解压到文件夹

3. 运行 cmd 并使用 ngrok 导航到文件夹

4. 现在您可以运行：“ngrok http:80”

   <-assuming that You have apache2 service working

5. 我的项目位于 DocumentRoot 的不同/子文件夹中，我还需要执行此操作：

   https://stackoverflow.com/a/51114684

Answer 4

对于那些运行 NextJS 的人，这里有详细的讨论：

https://github.com/vercel/next.js/discussions/10935

我认为评论中最简单的解决方案是

this：

• yarn add --dev local-ssl-proxy
• next dev -p 3001 & local-ssl-proxy --source 3000 --target 3001

如果您使用的是 Chrome，请导航至

chrome://flags/#allow-insecure-localhost

 并启用该设置。

这个解决方案的缺点是

local-ssl-proxy

 是一个非常旧的包。但如果您只需要测试一些仅限 HTTPS 的功能，它就可以达到目的。

Answer 5

如果您使用 Vue CLI 开发您的网站或应用程序，那么在

package.json

 中您可以使用以下内容：

"serve": "vue-cli-service serve --https true", 代替：

"serve": "vue-cli-service serve", 效果很好。

Answer 6

它可以在本地计算机上运行，但您需要先做一些事情。

将您的计算机 URI 从 X.X.X.X 更改为 localhost。

例如：更改

http://127.0.0.0 ---> http://localhost

Answer 7

使用

react-facebook

时遇到同样的错误。这就是解决我的问题的方法 - 在开发人员仪表板上的元数据上，我单击了左上角的下拉菜单并创建了我的应用程序的测试版本，然后我将我的 

appId

 替换为测试应用程序之一，它工作了，我得到了一个

accessToken

。除非您创建一个测试应用程序，否则它似乎无法与生产应用程序一起使用