Javascript 在本地主机上登录Facebook-连接不安全

我正在使用Facebook Javascript SDK将Facebook登录添加到我们的React项目中。 我遵循了这一点

单击添加到页面的登录按钮时，显示以下错误：

Facebook检测到X未使用安全连接传输信息。 在X更新其安全设置之前，您将无法使用Facebook登录。

我的应用程序处于开发模式，这意味着（根据Facebook文档）允许本地主机重定向，但事实并非如此

我还尝试将localhost添加到Facebook开发者页面中有效的OAuth重定向URI中，但没有解决问题

---

我通过使用ngrok解决了部分问题，但它有很多缺陷（有时不起作用），而且不实用，因为我经常需要重新启动整个服务器和所有东西。

无需使用ngrok或类似工具

确保已在中指定Facebook应用程序的

应用程序id

的开发模式

window.fbAsyncInit = function() {
    FB.init({
        appId      : '{app-id}',
        cookie     : true,                     // Enable cookies to allow the server to access the session.
        xfbml      : true,                     // Parse social plugins on this webpage.
        version    : '{api-version}'           // Use this Graph API version for this call.
    });
...

---

并在此更新后重新启动服务器。

由于facebook上的安全性更改，如果您禁用https并且在facebook应用程序上处于开发模式，则只能从简单的HTTP登录，下面是一幅解释性图片

---

首先，您需要使用域名，您可以在主机文件中执行此操作

/etc/主机：

127.0.0.1   test.example.com
255.255.255.255 broadcasthost
::1             localhost

然后你需要像这样更新你的开始脚本

package.json：

...
"start": "HTTPS=true react-scripts start"
...

并使用以下内容启动您的reactjs应用程序：

npm run start

---

然后您将在

https://test.example.com

当然，你必须将此域作为受信任的url添加到你的facebook应用程序中

以防出现不安全的情况：尝试在安全套接字层真实模式下为你的应用程序提供服务facebook正在检测不安全的连接

---

使用以下命令：ng serve--ssl true

我确认您可以使用回调

http://localhost

当您的应用处于“开发中”状态时，不使用SSL

---

我来这里是因为我的回调是

http://localhost.localdomain

，这是我在2018年之前为Facebook auth进行的一次黑客攻击，实际上，它在Chome 78上不起作用。

在React中只需执行

HTTPS=true npm start

，它将在本地主机上处理HTTPS。布尔值

HTTPS=true

将用于告诉npm需要启动

HTTPS

连接。

您应该使用“创建测试应用程序”，它将为现有live帐户创建测试应用程序。用户只需在开发中使用测试应用程序的ID即可

---

我也有同样的问题，我使用的是url

http://127.0.0.1

但facebook要求您使用

http://localhost

相反，这将解决问题。

从今天起，您不能仅使用http://localhost. 我会建议考虑这样的服务。

你尝试了DeCurt而不是NGROK吗？我试着不成功地执行它。如果我们可以关闭强制HTTPS，我们会这样做！问题是我们不能。至少现在不会了。所以这就是问题所在。我认为我们应该谈论不同的东西，因为这是我通常遵循的开发流程（将我的应用程序设置为开发，本地工作，再次发布，我今天早上才这么做），有一件事，只是禁用强制执行不起作用，你需要在facebook上切换到开发模式，为什么你说你不能禁用它？因为它是被迫“开启”的，无法更改。文档中明确指出：“2018年10月6日，所有应用程序都必须使用HTTPS。”（）是的，当它投入生产时，这就是为什么您需要切换到开发模式才能从非安全站点（如localhost）运行的原因。您能展示您的face应用程序是如何配置的吗？即使在开发模式下，它也会被迫“打开”，并且无法更改。但是顺便说一句，我遇到的问题是一个奇怪的Ruby gem特有的问题：我应该设置完整的回调URL，而不是像（

/callback

）这样的路径部分。问题是大多数人不能关闭“开发中”这个“在开发中”模式并不是预先设计好可以切换回来的，同样的，一旦你的应用程序进入prod，你就不能将其取下进行测试。我一直使用两个Facebook应用程序ID，其中一个是专门为dev开发的。我的数据库可以很好地与这两个应用程序配合使用。