Facebook javascript 与 localhost 域连接答案

【问题标题】：Facebook javascript connect with localhost domainFacebook javascript 与 localhost 域连接
【发布时间】：2013-07-17 01:08:21
【问题描述】：

我正在尝试使用 javascript 创建 facebook 连接，但会出现以下错误：

应用程序配置不允许给定 URL。：应用程序的设置不允许一个或多个给定 URL。它必须与网站 URL 或画布 URL 匹配，或者该域必须是应用程序域之一的子域。

是否是因为我使用 Localhost 服务器进行测试？我需要购买域来测试这个还是什么？还是我需要对以下代码进行更改：

我的代码：

<?php
//
// uses the PHP SDK. Download from https://github.com/facebook/php-sdk
include("facebook-php-sdk/src/facebook.php");

//
// from the facebook app page
define('YOUR_APP_ID', '321849981247524');
define('YOUR_APP_SECRET', '49fd00ce6237aff0af08fd8ca25dbc92');

//
// new facebook object to interact with facebook
$facebook = new Facebook(array(
 'appId' => YOUR_APP_ID,
 'secret' => YOUR_APP_SECRET,
));
//
// if user is logged in on facebook and already gave permissions
// to your app, get his data:
$userId = $facebook->getUser();

?>
<html>
<head>
 <style>body { text-align:center; font-size: 40px }</style>
</head>
<body>
<?php
if ($userId) {
 //
 // already logged? show some data
 $userInfo = $facebook->api('/' + $userId);

echo "<p>YOU ARE: <strong>". $userInfo['name'] ."</strong><br/>";
echo "Your birth date is: ".$userInfo['birthday']."</p>";



} else {
 //
 // use javaascript api to open dialogue and perform
 // the facebook connect process by inserting the fb:login-button
 ?>
 <div id="fb-root"></div>
 <fb:login-button scope='email,user_birthday'></fb:login-button>
 <?php
}
?>
 <script>
 window.fbAsyncInit = function() {
 FB.init({
 appId : <?=YOUR_APP_ID?>, //When I gives app ID "321849981247524" or my own created it gives error that it's not valid
 status : true,
 cookie : true,
 xfbml : true,
 oauth : true,
 });

FB.Event.subscribe('auth.login', function(response) {
 // ------------------------------------------------------
 // This is the callback if everything is ok
 window.location.reload();
 });
 };

(function(d){
 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js";
 d.getElementsByTagName('head')[0].appendChild(js);
 }(document));
</script>
</body>
</html>

当我在浏览器中运行时，它显示 facebook 按钮并单击重定向到新窗口以进行 FB 日志记录，但随后显示上述错误！

【问题讨论】：

Given URL is not permitted by the application configuration的可能重复
@AnveshSaxena：你能告诉我当我使用本地主机服务器时我应该保留什么作为“应用程序域”，我尝试调整http://localhost/FB/login.php
你可以留空，它是可选的。

标签： facebook facebook-graph-api facebook-javascript-sdk

【解决方案1】：

我知道这是一个老问题，但对于任何最终在这里寻找答案的人来说，这里是一个经过测试且有效的解决方案：

在开始时App Domains 字段应留空。

点击下方的“添加平台”按钮并选择“网站”。

在新的网站表单中，您可以在 Site URL 字段中添加 localhost：

例如。 http://localhost:3000/

有关图像的视觉指南，您可以查看this answer。

除此之外，您实际上可以使用 user123 的答案，并将 localhost 映射到本地域（例如 'myproject.dev'），并且必须在相同的 Site URL 字段中输入本地 dev 域：例如。 http://myproject.dev/

【讨论】：

【解决方案2】：

当您想将 Facebook 应用程序与本地环境连接时，您应该使用一些别名域。

尝试以下方法：

       Go to your etc/hosts file and add the following line:

       127.0.0.1 dev01.dev # you can change domain to whatever you want

       Go to Facebook App Dashboard and register your application using dev01.dev as domain!

       Add your Site URL (eg. http://dev01.dev/project/ )

It should works.

编辑：你也可以检查这个问题：Facebook development in localhost

来源：facebook localhost developer

【讨论】：

【解决方案3】：

在 facebook 中，如果 facebook javascript SDK 在 chrome 中不起作用，请参考以下步骤。

将应用域留空
网站网址：localhost/App_Name

从 chrome 禁用所有插件。尤其是广告拦截器，它会给你一个：

307 内部状态码

它应该可以工作。

【讨论】：

问题在于 url 协议，只需删除 http:// 就可以在 localhsot 上正常工作