在本地主机上运行 Facebook 应用程序

发布于 2024-10-19 13:49:12 字数 254 浏览 6 评论 0原文

我计划从我的本地主机连接到 Facebook 聊天。我需要从 Facebook 获取会话密钥。当我将站点 URL 指定为 localhost:8080ip-address:8080 时,它不起作用。

我读到关于设置两个具有 2 个不同 API 密钥的应用程序,一个在 dev m/c 上运行,另一个在 localhost 上运行,但我不太明白。

谁能解释如何在本地主机上运行 Facebook 应用程序?

I am planning to connect to Facebook chat from my localhost. I will need to get the session key from Facebook. When I give the site URL as localhost:8080 or ip-address:8080 it does not work.

I read about setting up two apps with 2 different API keys one runs on dev m/c and other on localhost but I did not quite get it.

Can anyone explain how to run a Facebook app on localhost?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(13

九命猫 2024-10-26 13:49:12

我不久前写了一篇关于此的教程

最重要的一点是“站点 URL”:

站点 URL: http://localhost/app_name/

其中文件夹结构类似于:

app_name
¦   index.php
¦
+---canvas
¦   ¦   index.php
¦   ¦
¦   +---css
¦           main.css
¦           reset.css
¦
+---src
        facebook.php
        fb_ca_chain_bundle.crt

编辑:
Kavya即使没有 IP 或端口,FB 服务器如何识别我的本地主机?

我认为这与Facebook,我猜想,由于 iframe src 参数是从客户端加载的,因此它会将您的本地 URL 视为直接将其放入浏览器中。

例如,在您的在线服务器上有一个包含内容的文件(例如 online.php):

<iframe src="http://localhost/test.php" width="100%" height="100%">
    <p>Not supported!</p>
</iframe>

在您的本地主机根目录上,有一个文件 test.php

<?php echo "Hello from Localhost!"; ?>

现在访问 http://your_domain.com/online.php 您将看到本地主机文件的内容!

这就是为什么实时订阅和取消授权回调(仅提及)无法与本地主机 URL 一起使用!因为 Facebook 会 ping(发送 http 请求)到这些 URL,但显然 Facebook 服务器不会将这些 URL 转换为您的 URL!

I wrote a tutorial about this a while ago.

The most important point is the "Site URL":

Site URL: http://localhost/app_name/

Where the folder structure is something like:

app_name
¦   index.php
¦
+---canvas
¦   ¦   index.php
¦   ¦
¦   +---css
¦           main.css
¦           reset.css
¦
+---src
        facebook.php
        fb_ca_chain_bundle.crt

EDIT:
Kavya: how does the FB server recognize my localhost even without an IP or port??

I don't think this has anything to do with Facebook, I guess since the iframe src parameter is loaded from client-side it'll treat your local URL as if you put it directly on your browser.

For example have a file on your online server with content (e.g. online.php):

<iframe src="http://localhost/test.php" width="100%" height="100%">
    <p>Not supported!</p>
</iframe>

And on your localhost root directory, have the file test.php:

<?php echo "Hello from Localhost!"; ?>

Now visit http://your_domain.com/online.php you will see your localhost file's content!

This is why realtime subscriptions and deauthorize callbacks (just to mention) won't work with localhost URLs! because Facebook will ping (send http requests) to these URLs but obviously Facebook server won't translate those URLs to yours!

扛刀软妹 2024-10-26 13:49:12

如果您使用 localhost:

在 Facebook--> 设置--> 基本,
在“应用程序域”字段中写入“localhost”,
然后点击“+添加平台”选择“网站”,

它将创建两个字段“移动网站 URL”和“网站 URL”,
在“站点 URL”中再次写入“localhost”。

对我有用。

if you use localhost:

in Facebook-->Settings-->Basic,
in field "App Domains" write "localhost",
then click to "+Add Platform" choose "Web Site",

it will create two fields "Mobile Site URL" and "Site URL",
in "Site URL" write again "localhost".

works for me.

请你别敷衍 2024-10-26 13:49:12

您还可以编辑“hosts”文件并创建域的本地变体。

示例

如果您真实的 facebook 应用程序地址是“example.com”,您可以在指向“localhost”的“hosts”文件中创建“localhost.example.com”(只能从您的电脑访问)域,并在此域下运行您的本地网站。
你可以用这种方法欺骗Facebook。

You can also edit 'hosts' file and create local variation of your domain.

Example

If your real facebook application address is "example.com" you can create "localhost.example.com" (accessible only from your pc) domain in your "hosts" file pointing to "localhost" and run your local website under this domain.
You can trick Facebook this way.

傲世九天 2024-10-26 13:49:12

在应用的基本设置中 (https://developers.facebook.com/apps)
在“设置”->“基本”->选择您的应用程序与 Facebook 集成的方式...

使用“站点 URL:”和“移动站点 URL:”来保存您的生产和开发 URL。两个站点都将被允许进行身份验证。我只是使用 Facebook 进行身份验证,因此不需要任何移动站点重定向功能。我通常在测试身份验证时将“移动站点 URL:”更改为“localhost:12345”站点,然后在完成后将其设置回正常状态。

In your app's basic settings (https://developers.facebook.com/apps)
under Settings->Basic->Select how your app integrates with Facebook...

Use "Site URL:" and "Mobile Site URL:" to hold your production and development URLs. Both sites will be allowed to authenticate. I'm just using Facebook for authentication so I don't need any of the mobile site redirection features. I usually change the "Mobile Site URL:" to my "localhost:12345" site while I'm testing the authentication, and then set it back to normal when I'm done.

轻拂→两袖风尘 2024-10-26 13:49:12

2013年8月。
Facebook 不允许为应用程序设置带有端口的域,例如“localhost:3000”。

因此,您可以使用 https://pagekite.net 将您的 localhost:port 隧道连接到正确的域。

Rails 开发人员可以免费使用 http://progrium.com/localtunnel/

  • Facebook 当时只允许 App 使用一个域名。如果您尝试添加另一个,作为本地主机,它将显示某种有关域的不同错误。请确保当时仅使用一个域进行回调和应用程序域设置。

2013 August.
Facebook doesn't allow to set domain with port for an App, as example "localhost:3000".

So you can use https://pagekite.net to tunnel your localhost:port to proper domain.

Rails developers can use http://progrium.com/localtunnel/ for free.

  • Facebook allows only one domain for App at the time. If you are trying to add another one, as localhost, it will show some kind of different error about domain. Be sure to use only one domain for callback and for app domain setting at the time.
雪化雨蝶 2024-10-26 13:49:12

所以我今天就开始工作了。我的 URL 是 http://localhost:8888。我给 facebook 的域名是 localhost。我认为它不起作用,因为我试图使用 FB.api 方法提取数据。我不断获得“未定义”的名称和没有来源的图像,因此绝对无法访问图表。

后来我意识到我的问题实际上是我只将 /me 的第一个参数传递给 FB.api,并且我没有令牌。因此,您需要使用 FB.getLoginStatus 函数来获取令牌,该令牌应添加到 /me 参数中。

So I got this to work today. My URL is http://localhost:8888. The domain I gave facebook is localhost. I thought that it was not working because I was trying to pull data using the FB.api method. I kept on getting an "undefined" name and an image without a source, so definitely didn't have access to the Graph.

Later I realized that my problem was really that I was only passing a first argument of /me to FB.api, and I didn't have a token. So you'll need to use the FB.getLoginStatus function to get a token, which should be added to the /me argument.

小嗷兮 2024-10-26 13:49:12

只需将画布 URL 指定为 http://localhost/app_path 即可。

just specify your canvas url as http://localhost/app_path.

在巴黎塔顶看东京樱花 2024-10-26 13:49:12

好吧,我不确定这些答案是怎么回事,但我会让你知道什么对我有用,这是我工作中的高级开发人员建议的。我正在使用 Ruby on Rails 工作并使用 Facebook 的 JavaScript 代码来获取访问令牌。

问题:为了进行身份验证,Facebook 会从您的地址栏中获取 URL,并将其与他们存档的内容进行比较。无论出于何种原因,他们都不允许您使用localhost:3000。但是,您可以通过运行本地服务器并将 yoursite.dev 指向 127.0.0.1:3000< 来使用完全虚构的域名,例如 yoursite.dev /code> 或您的本地主机指向的任何地方。

第 1 步:安装或更新 Nginx

$brew install nginx(安装)或 $brew Upgrade nginx(更新)

第 2 步:打开你的nginx配置文件

/usr/local/etc/nginx/nginx.conf(通常在这里)

/opt/boxen/config/nginx/nginx.conf >(如果您使用 Boxen)

第 3 步将此代码添加到您的 http {} 块中,

proxy_pass 替换为您想要指向的任何位置<代码>yoursite.dev 到。就我而言,它正在替换 localhost:3000 或等效的 127.0.0.1:3000

server {
  listen       yoursite.dev:80;
  server_name  yoursite.dev;
  location / {
    proxy_pass http://127.0.0.1:3000;
  }
}

第 4 步:编辑 /etc/hosts 在 Mac 上包含

127.0.0.1   yoursite.dev

此文件将域定向到本地主机。 Nginx 监听本地主机并在匹配规则时进行重定向。

第 5 步:以后每次使用开发环境时,请在地址栏中使用 yoursite.dev 而不是 localhost:3000,这样Facebook 使您正确登录。

Ok I'm not sure what's up with these answers but I'll let you know what worked for me as advised by a senior dev at my work. I'm working in Ruby on Rails and using Facebook's JavaScript code to get access tokens.

Problem: To do authentication, Facebook is taking the url from your address bar and comparing that with what they have on file. They don't allow you to use localhost:3000 for whatever reason. However, you can use a completely made-up domain name like yoursite.dev by running a local server and pointing yoursite.dev to 127.0.0.1:3000 or wherever your localhost was pointing to.

Step 1: Install or update Nginx

$ brew install nginx (install) or $ brew upgrade nginx (update)

Step 2: Open up your nginx config file

/usr/local/etc/nginx/nginx.conf (usually here)

/opt/boxen/config/nginx/nginx.conf(if you use Boxen)

Step 3 Add this bit of code into your http {} block

Replace proxy_pass with wherever you want to point yoursite.dev to. In my case it was replacing localhost:3000 or the equivalent 127.0.0.1:3000

server {
  listen       yoursite.dev:80;
  server_name  yoursite.dev;
  location / {
    proxy_pass http://127.0.0.1:3000;
  }
}

Step 4: Edit your hosts file, in /etc/hosts on Mac to include

127.0.0.1   yoursite.dev

This file directs domains to localhost. Nginx listens in on localhost and redirects if it matches a rule.

Step 5: Every time you use your dev environment going forward, you use the yoursite.dev in the address bar instead of localhost:3000 so Facebook logs you in correctly.

清旖 2024-10-26 13:49:12

Forward 是一个很好的工具,可以帮助本地开发 facebook 应用程序,它支持 SSL,所以证书不是问题。

https://forwardhq.com/in-use/facebook

免责声明:我是其中之一开发者

Forward is a great tool for helping with development of facebook apps locally, it supports SSL so the cert thing isn't a problem.

https://forwardhq.com/in-use/facebook

DISCLAIMER: I'm one of the devs

回忆凄美了谁 2024-10-26 13:49:12

您需要将应用程序设置为在 localhost 上通过 https 运行

您可以按照本文中给出的步骤在 ubuntu 上设置 HTTPS

https://www.digitalocean.com/community/articles/how-to-create-a-ssl-certificate-on -apache-for-ubuntu-12-04

您需要执行以下步骤:

安装 apache(如果没有)

sudo apt-get install apache2

第一步 - 激活 SSL 模块

sudo a2enmod ssl
sudo service apache2 restart

第二步 - 创建新目录

sudo mkdir /etc/apache2/ssl

第三步 - 创建自签名 SSL 证书

sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/apache/ssl/apache.key -out /etc/apache2/ssl/apache.crt

使用此命令,我们将创建自签名 SSL 证书和服务器密钥保护它,并将它们都放入新目录中。
最重要的一行是“Common Name”。在此输入您的官方域名,如果您还没有,请输入您网站的 IP 地址。

通用名称(例如服务器 FQDN 或您的姓名)[]:example.com 或
本地主机

第四步 - 设置证书

sudo vim /etc/apache2/sites-available/default-ssl

找到以下行并使用您的设置进行编辑

服务器名称 localhost 或 example.com

SSLCertificateFile /etc/apache2/ssl/apache.crt 上的 SSLEngine

SSLCertificateKeyFile /etc/apache2/ssl/apache.key

第五步 — 激活新虚拟主机

sudo a2ensite default-ssl
sudo service apache2 reload

You need to setup your app to run over https for localhost

You can follow steps given in this to setup HTTPS on ubuntu

https://www.digitalocean.com/community/articles/how-to-create-a-ssl-certificate-on-apache-for-ubuntu-12-04

You need to do following steps:

install apache (if you do not have)

sudo apt-get install apache2

Step One—Activate the SSL Module

sudo a2enmod ssl
sudo service apache2 restart

Step Two—Create a New Directory

sudo mkdir /etc/apache2/ssl

Step Three—Create a Self Signed SSL Certificate

sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/apache/ssl/apache.key -out /etc/apache2/ssl/apache.crt

With this command, we will be both creating the self-signed SSL certificate and the server key that protects it, and placing both of them into the new directory.
The most important line is "Common Name". Enter your official domain name here or, if you don't have one yet, your site's IP address.

Common Name (e.g. server FQDN or YOUR name) []:example.com or
localhost

Step Four—Set Up the Certificate

sudo vim /etc/apache2/sites-available/default-ssl

Find following lines and edit those with your settings

ServerName localhost or example.com

SSLEngine on SSLCertificateFile /etc/apache2/ssl/apache.crt

SSLCertificateKeyFile /etc/apache2/ssl/apache.key

Step Five—Activate the New Virtual Host

sudo a2ensite default-ssl
sudo service apache2 reload
a√萤火虫的光℡ 2024-10-26 13:49:12

技巧:

使用 MAMPPRO 并创建:
服务器名称:您网站的确切地址(例如:helloworld.com)
到您磁盘上的网站

在 Facebook 上:
因此,您也可以保留原来的网站 URL(例如:helloworld.com)

现在您明白了,当您在地址栏上键入您的网站时,您就位于本地
..当您想上网时,只需停用 MAMP PRO 上的服务器即可..

:)

A trick:

Use MAMPPRO and create:
server name: the EXACT adress of you website (eg: helloworld.com)
to your site on your disk

On Facebook:
So you can keep your original Site URL as well (eg: helloworld.com)

Now you understand that when you type your website on the adress bar you are in local!
..and when you want to be online, just inactive the server on MAMP PRO..

:)

木有鱼丸 2024-10-26 13:49:12

上面的答案都不适合我。我正在 FB API 2.5 上运行。我的问题是一系列问题的组合,一旦解决,就会取得成功

  1. 创建一个测试应用程序,以确保它的维护和管理
    这样并且可以在上线时禁用
  2. 正确阅读错误消息:) - 我必须启用“Web OAuth Login”与“Client OAuth Login”
  3. 使用 https://www.whatismyip.com/ 了解我的
    当前 IP 是
  4. 在我的域上创建 A 记录,即
    http://localhost.mydomain.com 指向我当前的 IP

这可能并不理想,因为动态 IP 的更改和一个可能可以使用 DynDNS 或类似的东西来使 IP 更加“静态”,但它对我有用

None of the answers above worked for me. I am running on FB API 2.5. Mine was a combination of issues that lead to success once resolved

  1. Create a test app to ensure that it is maintained and managed as
    such and can be disabled when going live
  2. Read the error message properly :) - I had to enable "Web OAuth Login" WITH "Client OAuth Login"
  3. Use https://www.whatismyip.com/ to find out what my
    current IP is
  4. Create an A record on my Domain i.e.
    http://localhost.mydomain.com that points to my current IP

It's probably not ideal as Dynamic IP's change and one could probably use DynDNS or something similar to make the IP more "static" but it worked for me

慕巷 2024-10-26 13:49:12

就我而言,问题是 chrome 阻止了从 localhost:4200 到 facebook api 网站的 CORS 请求。
使用以下设置运行 Chrome:“YOUR_PATH_TO_CHROME\Google\Chrome\Application\chrome.exe” --disable-web-security --user-data-dir="c:/chrome
在开发过程中发挥了魅力。即使没有将 localhost 添加到 Facebook 应用程序的设置中。

In my case the issue revealed to be chrome blocking the CORS request from localhost:4200 to facebook api website.
Running Chrome with this setting: "YOUR_PATH_TO_CHROME\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="c:/chrome
worked like a charm while developing. Even with no localhost added to facebook app's settings.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文