使用本地主机时的Facebook应用程序域名

在这里的教程中：http :
//ankurm.com/blog/api/using-localhost-for-facebook-app-development/1091/

我试图为我的Facebook应用程序设置一个本地开发区。但是当我将“ http：// localhost：85 / my_app / ”作为域名时，Facebook说

应用程序域：“ http：// localhost：85 / app-name / ”不应包含协议信息。

另外，当我将“ localhost：85 / my_app /”作为域名时，也会收到错误消息：

应用程序域：localhost：85 / my_app /不是有效的域。

我的解决方案：

1. 将应用程序域留空
2. （产品）Facebook登录>设置
3. 添加http://localhost:85/my_app/到Valid OAuth redirect URIs框
4. 保存更改

协议似乎已更改。

这是我的解决方案（我在2015年4月3日进行了测试，效果很好）：

在设置->基本标签中

1. 应用程序域：本地主机
2. 点击“ +添加平台”，然后选择“网站”
3. 站点URL： http：// localhost：<端口> /（<端口>是您的端口号）
4. 保存更改

1. 将应用程序域留空
2. 使用Facebook登录网站
3. 加 http://localhost:port_number/
4. 保存更改，然后重试。欲了解更多信息，请访问

http://developers.facebook.com/docs/samples/canvas/ 快乐编码：-)

多年来，这种情况已经发生了变化，但是我只是将其与在本地主机上运行的Webapp配合使用。这是我所做的：

1. 转到https://developers.facebook.com/apps
2. 选择您的应用。
3. 从左侧导航栏中选择设置>基本。
4. 单击页面底部的“添加平台”按钮。
5. 点击网站
6. 输入http://localhost:8080/站点URL。
7. 单击刚输入的网站URL最右侧的“快速启动”按钮。
8. 将打开一个新标签。在该标签上，向下滚动到“向我们介绍您的网站”部分，然后再次输入http://localhost:8080/“网站URL”。
9. 单击下一步按钮。
10. 尝试再次登录，但这次有效。

祝好运！

2018年工作解决方案

我花了很长时间才弄清楚这一点，所以我将分享我的解决方案。

我尝试了所有建议的答案，但对我没有任何帮助，最后我要做的就是去https://developers.facebook.com/apps/YOUR_APP_ID/fb-login/settings/并添加我的有效OAuth重定向URI框中的完整回调URL 。

以我为例，在轨道上使用ruby，我的网址看起来像这样http://localhost:3000/user/auth/facebook/callback。

在我添加它之后，一切就开始起作用了！希望这可以帮助其他面临此问题的人。

这就是我过去所做的。

如果使用Windows，则需要修改主机文件。主机文件位置将位于%SystemRoot%\System32\drivers\etc\

像这样在主机文件中添加新行

127.0.0.1    localhost.YOUR-SITE-NAME.com

保存主机文件。

转到FB应用设置控制台，并localhost.YOUR-SITE-NAME.com在“应用域”字段中输入。保存更改。

现在，localhost.YOUR-SITE-NAME.com从浏览器中加载本地环境。

注意：用您的域名更改您的站点名称。

工作解决方案（2018年8月）

首先，在开发人员仪表板中选择您的应用。

然后确保您的应用程序处于开发模式，因为它允许HTTP上的localhost。为此，请点击应用页面右上方的切换按钮。

最后，请遵循以下注意事项，因为如果填写不正确，它们可能会引起麻烦：

• Settings > Basic > App Domains 应该为空
• Products > Facebook Login > Settings > Valid OAuth Redirect URIs 应该为空

您可以将其保留为空白localhost，也可以使用，http://localhost:85/my_app/作为URL

当我当时编写该教程时，应用程序域中允许使用端口。而且我实际上能够使用81端口（垃圾服务器）运行应用程序。现在看来，facebook不允许在url中使用端口。您可以localhost在应用程序域中使用。

我将尽快更新信息。我正在尝试找出解决方案。

临时解决方案是使用localtunnel http://progrium.com/localtunnel/

我对此进行了测试，并且对我有用[2020年2月]：

1. 安装ngrok并获取您的https网址（例如：https ://a3asdf23.ngrok.io ）
2. 转到“应用程序域”下的“ FB App仪表板设置（基本）”->“添加” https://a3asdf23.ngrok.io，“” https://ngrok.io。
3. 在同一页面上，一直向下滚动，添加平台（网站），将URL设置为https://a3asdf23.ngrok.io。尚未完成，请点击“向我们介绍您的网站”下的快速入门->，输入相同的网址https://a3asdf23.ngrok.io。
4. 然后进入产品- > Facebook的登录- >设置- >客户端OAuth的设置- >有效的OAuth重定向的URI - >添加这些https://a3asdf23.ngrok.io，https://ngrok.io，https://a3asdf23.ngrok.io/{your-redirect-uri}。

然后你去。稍后谢谢我：）

您必须创建一个隧道来共享您的本地主机； Ngrok是maby最简单的方法。

https://ngrok.com

通过https://ngrok.com/链接下载ngrok并解压缩该文件。打开cmd（搜索cmd）转到提取ngrok的目录。从命令行ex打开ngrok，例如：c：/ngrok/ngrok.exe [port]或cd c：/ ngrok然后ngrok 80（ngrok [port]）

恩格罗克

Tunnel Status                 online
Version                       1.3/1.3
Forwarding                    http://3ahsdfhska.ngrok.com -> 127.0.0.1:80
Forwarding                    https://3ahsdfhska.ngrok.com -> 127.0.0.1:80
Web Interface                 http://127.0.0.1:4040
# Conn                        0
Avg Conn Time                 0.00ms

不要忘记确保您的Wamp服务器在同一端口上打开了……（如何检查-> goto-> wampicon-> apache-> httpd.conf搜索端口或80（默认值）将其用于ngrok.exe 80）

http://3ahsdfhska.ngrok.com

将是用于在线访问本地主机的URL

如果遇到协议错误，不仅需要删除Http：//，而且在网址末尾有反斜杠，也必须将其删除，否则它将不起作用。我做到了，效果很好！哈啦！

将另外一种解决方案加入混合物：

我按照说明设置了网站，然后添加了第二个应用程序（Facebook Canvas）并将该URL设置为http://localhost:XXXXX。现在，我可以在本地和生产环境中访问FB。

我在本地开发，并使用以下URL： localhost/fb

然后，我必须添加一个具有以下URL的网站： http://localhost

在“应用程序域”下，我添加了localhost。

现在可以了。我唯一遇到的问题是，您必须在所有脚本中使用此URL。例如

$loginUrl = $helper->getLoginUrl('http://localhost/fb/login-callback.php', $permissions);

您不能127.0.0.1在这里使用...

我尝试了这里提到的所有解决方案，但没有一个起作用。

解决我问题的方法是将“ OAuth重定向URI”从Firebase复制到Facebook应用“有效的OAuth重定向URI”

我将所有域留空