Facebook 应用程序：localhost 不再用作应用程序域答案

【问题标题】：Facebook App: localhost no longer works as app domainFacebook 应用程序：localhost 不再用作应用程序域
【发布时间】：2014-02-13 06:35:55
【问题描述】：

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

在过去的一天中，Facebook 似乎对其开发人员 UI 进行了重大更新。现在，如果我将 localhost 添加为应用程序域，则会出现以下错误：

这必须派生自 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，我应该如何开发和测试我的游戏？

【问题讨论】：

Canvas URL、Secure Canvas URL、Site URL、Mobile Site URL、Page Tab URL 或 Secure Page Tab URL 有哪些值？
嘿，伙计们，我知道了，你必须创建一个新的“测试应用”，他们应该在应用设置页面上提及它，搜索 1 小时才能最终使它工作在localhost:port
@LouisGrellet，好吧，我收到“不允许使用顶级域”。就像你说的，f*****g
“在客户端 oAuth 设置下，它显示为重定向 URI 使用严格模式，确保将其设置为否并点击保存。” -- wp-native-articles.com/blog/news/…

标签： javascript ruby-on-rails facebook heroku

【解决方案1】：

只需将 localhost 添加为您的画布 url 或移动站点 url，这将允许您在应用程序域设置中同时拥有 localhost 和 herokuapp.com。然后，一旦您的应用投入生产，只需将其删除。

【讨论】：

【解决方案2】：

尝试使用带有端口的 url，例如

    http://localhost:8000/

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

【讨论】：

您需要将“App on Facebook”添加为平台，并在 Canvas URL 中添加localhost:8000

【解决方案3】：

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

所有更改均在“基本”选项卡下的“设置”页面上进行

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

2.) 在您刚刚添加的网站出现的框中：网站网址： http://localhost:3000/

3.) 在上面的框中（设置 => 基本）：App Domain: localhost

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

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

【讨论】：

感谢您更新答案。确实，原来的答案似乎不再有效（不过，感谢您的原始答案 Camilo 和rareclass）。很遗憾，Facebook 似乎从未宣布这些变化。
请注意，您的 URL 还必须列在 设置 > 高级 > 有效 OAuth 重定向 URI 中。
这似乎不再起作用 :( 我得到 URL Blocked: This redirect failed 因为重定向 URI 未在应用程序的客户端 OAuth 设置中列入白名单。确保客户端和 Web OAuth 登录已打开并将您的所有应用程序域添加为有效的 OAuth 重定向 URI。
你不能再使用'http'了。它必须是“https”。
这个答案不再正确。您不能在基本设置下的应用程序域框中使用 localhost

【解决方案4】：

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

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

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

3.) 在上面的框中（设置 => 基本）：应用域：MYAPP.herokuapp.com（将 MYAPP 替换为您的应用名称）

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

【讨论】：

【解决方案5】：

只是给其他可能像我一样在这方面苦苦挣扎的人。我无法让它与“测试”应用程序一起使用。使用我的实际应用设置（只需添加

"http://localhost:3000/"

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

【讨论】：

【解决方案6】：

对我来说，它是这样工作的：

配置 facebook 应用仪表板：

*在“基本”选项卡上：

1) 将应用程序域留空。

2) 擦除任何平台。含义：没有网站就没有画布平台。（所以没有要填写的站点 URL 字段）

*在“高级”选项卡上：

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

【讨论】：

【解决方案7】：

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

【讨论】：

我创建了一个测试应用程序，但它不起作用。还有更多细节吗？
是的，我相信这是正确的方法，请参阅完整说明stackoverflow.com/a/38173031/3625739

【解决方案8】：

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

127.0.0.1 mydomain.com

然后在 Facebook 应用的设置中，输入 [http://]mydomain.com，不带“[”和“]”

这种方式对我有用

【讨论】：

如果您使用非标准端口，这将不起作用，如果他们并行开发许多应用程序通常会这样做。
它会工作，我使用 python -m SimpleHTTPServer 在端口 8000 上服务，example.com:8000/test-facebook.html，提供了预期的结果。我假设您在 /etc/hosts 中注册了 127.0.0.1 example.com
很高兴知道！所以他们似乎忽略了端口，很奇怪。

【解决方案9】：

在http://developers.facebook.com 中转到您的应用程序设置页面
点击左上角的下拉箭头（在您的应用名称旁边），然后点击“创建测试应用”并为其命名
在该新测试应用的设置 > 基本设置中，将应用域设置为“localhost”
还将网站 URL 设置为“http://localhost:8888”（或您使用的任何端口）。
重要提示：此应用程序的应用程序 ID 和应用程序密码与您的在线应用程序不同。所以，最后一步：确保使用测试应用程序的应用程序 ID 和应用程序密钥更新位于 localhost 中的代码。相反，实时服务器中的代码应该使用主应用的 ID 和 Secret。

【讨论】：

最明智/现代的解决方案与尝试将您的产品帐户配置为也与开发环境一起使用。
这是截至 2021 年 10 月的正确答案

【解决方案10】：

使用 Firebase 的解决方案

为了在localhost、端口3000 上运行，我做了以下操作：

创建应用程序

现在从箭头下拉菜单（左上角）中选择“+ 创建测试应用”。

将localhost 添加到应用域

通过选择“+ 添加平台”将http://localhost:3000/ 添加到站点 URL

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

所以...

在左侧菜单中，选择“添加产品”
添加“Facebook 登录”

您将看到一个工作流轮播，默认域为http://localhost:3000/，点击“继续”直到结束。

从产品菜单中选择“Facebook 登录 > 设置”。
输入您的 Firebase OAuth 重定向 URI（在您的 Firebase 控制台https://console.firebase.google.com 中启用 Facebook 登录时找到，示例如下）

粘贴 URI 并保存。

完成。

【讨论】：

【解决方案11】：

对于所有在 2017 年为此烦恼的人。界面再次改变。我想对答案发表评论，但我没有足够的声誉。您的应用程序的 localhost url 现在必须复制到三个位置。目前，（2017 年 10 月 26 日）顺序为：

1.) 点击左侧菜单中的“设置”。

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

3.) 在您刚刚添加的网站出现的框中，复制您的本地主机站点 URL（例如 http://localhost:3000/）

4.) 在“App Domain”上方的框中复制相同的 URL

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

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

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

这应该可行。

【讨论】：

请注意，Facebook 不再允许“http”用于有效的 OAuth 重定向 URI

【解决方案12】：

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

为了在本地使用 https，我使用了 [ngrok][1]，它允许您通过提供隧道来使用 https。为此：

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

【讨论】：

【解决方案13】：

要进行本地测试，您只需关闭应用程序，或将 facebook 应用程序置于开发模式。然后 Facebook 将允许您单独访问该应用程序

【讨论】：

【解决方案14】：

对于仍然遇到此问题的用户，请确保您的应用处于开发模式，同时尝试使用 localhost 作为应用域，否则它将无法工作。

【讨论】：

【解决方案15】：

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

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

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

TL;DR

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

常见的陷阱

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

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

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

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

【讨论】：

【解决方案16】：

如果您使用的是 Hotwire，请记住使用 button_to 而不是 link_to 并在其上禁用 Turbo。例如：

<%= button_to "Register with Facebook", user_facebook_omniauth_authorize_path, form: { "data-turbo" => "false"}, method: :post %>

【讨论】：