logo标签列表

在本地主机上使用Facebook登录

facebookfacebook-login
63

我有一个使用React/Horizon开发的应用，其中包含Facebook登录功能。 我想知道是否有办法从本地主机与Facebook登录进行交互？

我发现了这个链接：https://create-react-app.dev/docs/using-https-in-development/ 我成功地运行了 https:localhost:3000，并且它与 Facebook 应用程序在 Live 模式下一起工作。 - SAndriy
13个回答
75

这里有一些其他好的答案。然而，我想补充一些关于如何创建测试应用程序的信息（正如Facebook建议的那样）。

前往管理Facebook应用程序的页面（您必须以管理员身份登录）：https://developers.facebook.com/apps/

将鼠标悬停在包含您的实时Facebook应用程序的区块上，然后单击出现在右下角的三个点按钮。然后从菜单中选择创建测试应用。

enter image description here

测试应用程序将使用您的生产应用程序设置的快照创建。之后，您可以独立编辑测试应用程序的设置，而不会影响生产应用程序。
请参阅此处的文档: https://developers.facebook.com/docs/apps/test-apps/ 关于其余设置：
- 保持应用程序处于“开发”模式 - 转到“设置->基本设置”（左侧菜单）并： - 为“应用程序域”输入“localhost” - 将您的“网站URL”更改为本地主机版本（例如http://localhost:3000/users/auth/facebook）
以下是我用于Facebook登录的测试应用程序设置的一些（2022年1月）屏幕截图。
- “设置->基本设置” Settings -> Basic screenshot - “设置->高级设置” Settings -> Advanced screenshot

Facebook登录 -> 设置 输入图片说明

2
当我输入“localhost”时，我得到以下提示信息：“应用程序域必须与Facebook Web Games URL（https），Mobile Site URL，Unity Binary URL，Site URL或Secure Page Tab URL的域匹配。请至少更正其中一个域名：localhost。”相比于谷歌登录按钮只需10分钟，设置Facebook绝对是一件痛苦的事情。 - Jeremy Thille
1
我已经检查并尝试了您指出的链接中的所有答案。 没有任何有效的答案。 我可以在应用程序域和网站网址中都保存localhost，但是我仍然在本地主机控制台上收到The method FB.login can no longer be called from http pages。没有办法在本地开发Facebook登录，我将直接从HTTPS生产服务器上完成（感谢Facebook）。 - Jeremy Thille
1
听起来很烦人！顺便说一句，网站的URL不是“localhost”，应该是类似于http://localhost:3000/users/auth/facebook这样的形式 - 我会修改我的答案以更清楚地指出这一点。 - Dagmar
3
我的经验是，与任何大型科技巨头进行集成都是具有挑战性的。从过时的文档到难以理解的流程（由于多次升级而导致），通常都很令人崩溃。很抱歉我的答案对你没有用，但我很高兴你最终用ngrok找到了解决办法。 - Dagmar
3
我遇到了错误：“URL被阻止-此重定向失败，因为应用程序的客户端OAuth设置中未列入白名单的重定向URI...”（在FB登录页面上）。但是我无法在“有效的OAuth重定向URI”（Facebook登录>设置）下添加任何带有localhost的URL，因为然后它会说“http：// localhost重定向仅在开发模式下自动允许，不需要在此处添加。”显然，这不是真的，所以对我来说行不通。（是的，我正在使用FB测试应用程序处于开发模式）。 - bass-t
显示剩余11条评论
28

你需要注册成为Facebook开发者并在那里创建你的应用程序。一旦你的Web应用程序注册成功，你可以进入你的应用程序并单击“添加产品”。

添加Facebook登录。然后启用Web OAuth登录并在下面的文本框中添加你的本地主机并保存，你应该能够访问它。附上我的Facebook应用程序的样例截图。这里

71
仅接受 HTTPS URL，对我无效。 - Stefan Falk
5
那么你需要在本地激活HTTPS。如果你使用的是macOS或Linux，这里有一篇指南：https://medium.freecodecamp.org/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec - Design by Adrian
@DesignbyAdrian 即使在本地使用 https，它仍然无法工作。 - franckstifler
使用Facebook登录我的本地设置已成功支持https(https://development.local)，并且它正在工作（通过nginx）。但是仅使用http的beta版本无法正常工作。我仍在努力使其正常工作。对我来说似乎不可能使用http进行Facebook登录，即使我没有在开发者控制台上强制执行https。 - josevoid
要在本地主机上启用https（仅适用于nginx服务器），请查看此分叉的gist https://gist.github.com/josephdicdican/c4a9401b11522f07802959305583491c - josevoid
在Facebook开发者博客上，他们说：“您仍然可以使用HTTP与“localhost”地址，但仅在您的应用程序仍处于开发模式时。”我猜他们指的是localhost而不是localhost:3000或任何端口。 https://developers.facebook.com/blog/post/2018/06/08/enforce-https-facebook-login/ - equivalent8
21

声明：本答案于2019年撰写，无法跟上Facebook引入的最新更改，此处仅供参考。

在我的情况下，以下步骤对我有效。

  1. 确保应用程序处于开发模式

应用程序模式-开发中

  1. 当从本地主机工作时，请确保没有任何内容出现在“Valid OAuth Redirect URIs”中

有效的OAuth重定向URI

  1. 请确保在“App Domains”中也没有任何内容

应用程序域

  1. 请确保已在您的网站URL中输入localhost

网站URL

7
完成了所有操作，仍然收到“FB.login方法无法从http页面调用”的错误提示。设置起来真是太麻烦了 :( - Jeremy Thille
你的网站即使在本地也必须配置SSL。 - Hamza Khanzada
@JeremyThille，你找到解决方案了吗？我遇到了你描述的完全相同的问题。 - Nikitha Nadig
在我的情况下，我意识到错误与在CDN中导入具有不同应用程序ID的SDK有关。我忘记了在导入SDK之前我正在尝试使用CDN。从CDN中移除导入解决了我的问题。 - undefined
16

我想要更新一下：2019年7月

Facebook现在会自动允许在开发模式下使用localhost，但在生产模式下会被阻止。你只需要在应用程序设置中打开开发模式，就可以开始使用了。

你不需要再将localhost添加为重定向URL了。

在这里，你可以看到当我试图添加localhost时，重定向URL出现了错误。

Facebook developer page

1
这是哪一页/它在哪里？ - Andrew Koper
点击保存后，本地主机会添加https。 - Adrian Gonzalez
1
现在当我请求FB的access_token时，它会失败，并说此URL的域不在应用程序的域中，尽管我已将localhost列入应用程序域名白名单（在设置>基本信息中）- 2022年1月。 - bass-t
5

您可以使用像https://ngrok.com/这样的隧道工具，至少一个实例是免费的。然后，您可以创建一个测试应用程序，如已建议的那样，并在此测试应用程序中使用ngrok生成的url。enter image description here

我无法将ngrok域名添加到应用程序域中，我收到了这个消息：https://ibb.co/Z8mmsnv - Dante Calderón
2
经过测试，我发现我们不需要在Facebook应用程序中设置任何内容（甚至Site URL也不需要是localhost）。
只需要使用https://localhost代替http://localhost。然后登录工作并且我们能够接收响应。
注意：如果您在浏览器中输入https://localhost后看到SSL警告，请点击高级->继续前往...（不安全）。
2

使用类似本地ssl代理这样的东西是解决这个问题的简单方法。

2

方法FB.login不能再从http页面中调用。在localhost上，我得到了以下错误：应用程序域必须与Facebook Web Games URL（https）、Mobile Site URL、Unity Binary URL、Site URL或Secure Page Tab URL的域匹配。请至少更正其中一个域名：localhost。

-1

我在使用React和Express时，遇到了在本地主机上使用Facebook登录的问题，并得到了以下信息：“FB.login方法不再可以从http页面调用”。点击登录按钮后，应用程序就崩溃了。

我的解决方案是从本地主机页面中删除Facebook cookie。这样做之后，我仍然会遇到关于http的错误，但我可以继续测试登录选项。

另一个解决方案是在无痕模式下工作。

-1

我正在使用Firebase登录Facebook，老实说，最简单的方法就是通过HTTPS获取本地主机。 我使用了ssl-serve，因为我正在使用没有构建工具的基本ESM应用程序。 但是大多数构建管道（例如Vue的vue-cli，React等）也有SSL的CLI选项。

我使用的内容：

cd src && npx ssl-serve --ssl --clipless --port 5000 --silent

然后你只需要接受自签名证书（在Chrome/Brave中选择“高级”>“继续”），就不需要在Facebook应用程序的配置下更改重定向URI或域，也不需要在Firebase上更改Facebook应用程序ID。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接