Facebook App：localhost不再作为app域工作

Question

我一直在使用Rails和jQuery为Facebook编写游戏。自从我开始使用Facebook Javascript SDK以来，使用localhost作为应用程序域似乎工作正常。我能够在本地和Heroku上测试我的游戏。

在过去的一天，似乎Facebook已经对他们的开发者UI进行了大量更新。现在，如果我将localhost添加为app域，则会出现以下错误：

  

这必须来自Canvas URL，Secure Canvas URL，Site URL，Mobile Site URL，Page Tab URL或Secure Page Tab URL。检查并更正以下域：localhost

我的游戏现在也无法在本地运行，当Javascript SDK登录用户时出现错误：

  

API错误代码：191 API错误说明：指定的URL不是   由应用程序拥有错误消息：无效的redirect_uri：给定   应用程序配置不允许使用URL。

当我部署我的游戏时，这不会发生，因为herokuapp.com被认为是一个有效的应用程序域。

如果我不能再使用localhost或127.0.0.1，我应该如何开发和测试我的游戏？

Answer 1

协议似乎在不断变化，接受的答案今天对我不起作用。万一它可以帮助其他搜索者，这对我有用：

• 所有更改均在“基本”标签下的“设置”页面上进行。

1。）在第一个选项框下方的中心，点击“+添加平台”，然后选择“网站”（或任何适合您应用的内容）。

2。）在刚刚添加的网站框中：网站网址 http://localhost:3000/

3.。）在上面的框中（设置=＆gt;基本）：应用领域： localhost

4.）在右下角 - 点击“保存更改”

5.确保您已将应用程序ID复制并正确粘贴到代码中。 （如果您再次需要，该ID位于该页面的第一个框中。）

Answer 2

1. 转到http://developers.facebook.com
中的应用设置页面
2. 点击左上角的下拉箭头（应用名称旁边），然后点击＆＃34;创建测试应用＆＃34;并给它一个名字
3. 在设置＆gt;新测试应用程序的基础将App Domains设置为＆＃34; localhost＆＃34;
4. 同时将网站站点网址设置为＆＃34; http://localhost:8888＆＃34; （或者你正在使用的任何端口）。
5. 重要提示：此应用程序与您的在线应用程序具有不同的App ID和App Secret。因此，最后一步：确保使用Test App的App ID和App Secret更新localhost中的代码。相反，位于实时服务器中的代码应使用主App的ID和密码。

Answer 3

您仍然可以测试您的应用，而无需将其部署在像heroku这样的远程服务器上。 诀窍是以这种方式更新etc/hosts文件：

127.0.0.1 mydomain.com

然后在Facebook应用程序的设置中，键入[http://] mydomain.com，而不输入＆＃34; [＆＃34;和＆＃34;]＆＃34;

这对我有用

Answer 4

对于每个在2017年烦恼的人。界面再次改变。我想对此回答这个问题，但我没有足够的声誉。您的应用的localhost网址现在必须复制到三个地方。目前，（2017年10月26日）的顺序是：

1。）单击左侧菜单中的“设置”。

2.）在第一个选项框下方的中心，点击“+添加平台”并选择“网站”（或任何适合您应用的内容）。

3.。）在您刚刚添加的网站框中，复制您的localhost网站网址（f.e。http://localhost:3000/）

4.。）在上面的框中，“App Domain”复制相同的URL

5.）在右下角 - 点击“保存更改”

6。）在“产品”下的左侧菜单中，单击“Facebook登录”（如果不可用，则通过“+添加产品”添加）

7.。）您现在处于Facebook登录设置中。将相同的网址复制到“有效的OAuth重定向URI”字段

这应该有效。

Answer 5

只需添加localhost作为您的画布网址或移动网站网址，这样您就可以在App Domain设置中同时拥有localhost和herokuapp.com。然后，一旦您的应用程序投入生产，只需将其删除即可。

Answer 6

这是错误的方式。您必须使用应用程序设置中的“测试”选项卡创建测试应用然后，您可以将您的开发阶段URL（例如localhost）输入您的应用程序。

Answer 7

使用Firebase的解决方案

为了让这个工作在localhost端口3000，我做了以下工作：

1. 创建应用



1. 现在选择＆＃34; +创建测试应用＆＃34;从箭头下拉列表（左上角）。



1. 将localhost添加到App Domains



1. 通过选择＆＃34; +添加平台＆＃34;
将http://localhost:3000/添加到网站网址



到目前为止，我已经按照此处提交的所有答案进行了跟踪，但没有任何效果。

因此...

1. 在左侧菜单中，选择＆＃34;添加产品＆＃34;

2. 添加＆＃34; Facebook登录＆＃34;

您将看到一个工作流程转盘，默认域名http://localhost:3000/，点击＆＃34;继续＆＃34;直到最后。

1. 选择＆＃34; Facebook登录＆gt;设置＆＃34;从产品菜单。

2. 输入您的Firebase OAuth重定向URI（在您的firebase控制台中启用Facebook登录时找到https://console.firebase.google.com，如下所示）



1. 粘贴URI并保存。



完成。

Answer 8

尝试使用带端口的网址，例如

    http://localhost:8000/

我遇到了同样的问题，现在找到了这个解决方案。

Answer 9

这对我在heroku中起作用，本地主机的东西不起作用（对我来说）。我希望它有所帮助

1。）在第一个选项框下方的中心，单击＆＃34; +添加平台＆＃34;并选择＆＃34;网站＆＃34; （或适用于您的应用的任何内容。）

2.。）在刚刚添加的网站框中：网站网址：http://MYAPP.herokuapp.com/（将MYAPP替换为您应用的名称）

3.。）在上面的框中（Settings =＆gt; Basic）：App Domain：MYAPP.herokuapp.com（将MYAPP替换为您应用的名称）

4。）在右下角 - 点击＆＃34;保存更改＆＃34;

Answer 10

对于其他一些可能正在努力解决这个问题的人来说，只是一张纸条。我无法使用“测试”应用程序。使用我的实际应用设置（并简单地添加

"http://localhost:3000/"

到我的画布URL）像其他人建议的那样工作。似乎测试应用程序不等于实际应用程序。

Answer 11

对我而言，它的工作原理如下：

配置facebook app仪表板：

*在＆＃39;基本＆＃39;标签：

1）将app域留空。

2）删除任何平台。含义：没有网站没有画布平台。 （所以没有填写的site-URL字段）

*在＆＃39; advanced＆＃39;标签：

3）我输入了有效的OAuth重定向URI：

http://localhost/myappfolder/redirect.php

4）关于我的代码， insdie my c：/xampp/htdocs/localhost/myappfolder/index.php（此文件生成loginURL）：

$helper = new FacebookRedirectLoginHelper('http://localhost/myappfolder/redirect.php');  

在redirect.php文件中：

$helper = new FacebookRedirectLoginHelper('http://localhost/myappfolder/redirect.php');  

我参加了一个会议！最后！没有必要把自己挂在最后：P

Answer 12

我的Rails应用程序遇到问题，我通常使用http://localhost:3000运行，因为Facebook现在需要使用有效的OAuth重定向来使用https。

要在本地使用https，我使用了[ngrok] [1]，它允许您通过提供隧道来使用https。要做到这一点：

1. 我去了他们的网站并下载了他们的程序
2. 我解压缩了该程序的文件
3. 在我的控制台中，我进入了ngrok被解压缩到的目录，并在我的Windows机器上输入了'grok http 3000'，其他人可能会使用'./grok http 3000'
4. 输入后，ngrok提供了https地址，我将其放入Facebook的Valid OAuth Redirect URIs字段
5. 然后我启动了我的服务器并能够使用该https地址而不是localhost：3000
访问它

Answer 13

要做本地测试，您要做的就是关闭应用程序，或将facebook应用程序置于开发模式。然后，Facebook将允许您一个人访问该应用程序

Answer 14

对于仍然存在此问题的用户，请确保您的应用程序处于开发模式，同时尝试将localhost用作应用程序域，否则它将无法正常工作。

Answer 15

在纠结了一段时间后，我找到了一个解决方案，该解决方案结合了这个问题的几个答案。我想在 Facebook 应用等方面，情况会不断变化。

在撰写本文时，以下内容对我有用。
关键要点是：

• 您必须在后端使用 HTTPS。您可以使用自签名 证书。
• 要针对本地主机进行测试，您必须从主应用创建一个测试应用

TL;DR

1. 确保您的服务器使用自签名证书公开启用 HTTPS 的端口。请查阅您的服务器文档。
2. 转到 https://developers.facebook.com/apps 并选择“创建应用”。 选择支持 Facebook 登录的应用类型（例如消费者），点击继续
3. 设置显示名称和联系电子邮件，然后点击“创建应用”
4. 可选！当提示将产品添加到您的应用时，选择添加 Facebook 登录。在这里，您将使用真实域设置生产登录设置，但在此阶段您可以专注于测试应用。
5. 转到显示您的应用名称的页面左侧。在 选择框并单击小箭头。 When the select box expand 单击“创建测试应用程序”按钮
6. 在创建测试应用弹出窗口中选择“创建测试应用”
7. 在新创建的测试应用上，点击“设置”，转到“添加产品”和“添加 Facebook 登录”
8. 通过选择页面左侧“Facebook 登录”下的设置列表忽略设置。
9. 注意顶部的信息消息“您当前正在编辑...的测试版本”
10. 验证客户端 OAuth 登录和 Web OAuth 登录是否已启用（蓝色是）
11. 在“有效的 OAuth 重定向 URI”下添加您的本地 HTTPS 地址，例如 https://localhost:8443
12. 点击保存更改。
13. 点击页面左侧的基本设置并复制您的 App Id 和 App Secret 并将它们保存在安全的地方

常见的陷阱

• 确保在测试时使用的是测试应用机密而不是主应用，从而导致以下错误

<块引用>

无法加载网址 此 URL 的域不包含在应用程序的域中。为了能够加载此 URL，请将您应用的所有域和子域添加到应用设置中的“应用域”字段。

• 确保您使用 https://localhost:8443 和 not https://127.0.0.1:8443 从 OAuth 的角度来看，它们是不同的，导致类似于下面的错误

<块引用>

网址被阻止 此重定向失败，因为重定向 URI 未在应用的客户端 OAuth 设置中列入白名单。确保客户端和网络 OAuth 登录已开启，并将您的所有应用域添加为有效的 OAuth 重定向 URI。