web-dev-qa-db-ja.com

localhostでFacebookアプリケーションを実行する

ローカルホストからFacebookチャットに接続する予定です。 Facebookからセッションキーを取得する必要があります。サイトのURLをlocalhost:8080またはip-address:8080として指定しても機能しません。

Dev m/cとlocalhostで実行する2つの異なるAPIキーを使用して2つのアプリを設定する方法を読みましたが、それを取得できませんでした。

誰もがローカルホストでFacebookアプリを実行する方法を説明できますか？

facebooklocalhostfacebook-chat
92
enthusiastic

少し前にこれについて tutorial を書きました。

最も重要なポイントは「サイト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：FBサーバーはどのようにローカルホストを認識しますかIPまたはポートなし？

Iframe srcパラメータはクライアント側からロードされるため、これはFacebookとは関係ないと思います。Iguessはローカル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にアクセスすると、localhostファイルのコンテンツが表示されます！

これが、リアルタイムサブスクリプションと認証解除コールバック（言及するだけ）がローカルホストURLで機能しない理由です！ FacebookはこれらのURLにping（httpリクエストを送信）しますが、明らかにFacebookサーバーはこれらのURLをあなたのURLに変換しません！

77
ifaour

localhostを使用する場合：

facebookで->設定->基本、フィールド「App Domains」に「localhost」と書き込み、「+プラットフォームの追加」をクリックして「Webサイト」を選択し、

「モバイルサイトURL」と「サイトURL」の2つのフィールドが作成され、「サイトURL」に「localhost」と再度書き込まれます。

私のために働く。

29
user3531155

「hosts」ファイルを編集して、ドメインのローカルバリエーションを作成することもできます。

例

実際のFacebookアプリケーションのアドレスが「example.com」の場合、「hosts」ファイルに「localhost」を指す「localhost.example.com」（PCからのみアクセス可能）ドメインを作成し、このドメインでローカルWebサイトを実行できます。この方法でFacebookをだますことができます。

23
Mateusz Charytoniuk

アプリの基本設定（ https://developers.facebook.com/apps ）の[設定]-> [基本]-> [アプリとFacebookとの統合方法を選択...].

「サイトURL：」および「モバイルサイトURL：」を使用して、本番および開発用のURLを保持します。両方のサイトが認証を許可されます。認証にFacebookを使用しているだけなので、モバイルサイトのリダイレクト機能は必要ありません。通常、認証のテスト中に「モバイルサイトURL：」を「localhost：12345」サイトに変更し、完了したら通常の設定に戻します。

7
Carter Medlin

2013年8月。 Facebookでは、「localhost：3000」のように、アプリのポートでドメインを設定することはできません。

したがって、 https://pagekite.net を使用して、localhost:portを適切なドメインにトンネリングできます。

Rails開発者は http://progrium.com/localtunnel/ を無料で使用できます。

  • Facebookは、一度に1つのアプリのドメインのみを許可します。別のホストをローカルホストとして追加しようとすると、ドメインに関する何らかのエラーが表示されます。コールバックとアプリドメイン設定には、その時点で必ず1つのドメインのみを使用してください。
6
Gediminas

それで今日、これを機能させました。私のURLはhttp://localhost:8888です。私がFacebookに与えたドメインはlocalhostです。 FB.apiメソッドを使用してデータをプルしようとしたため、機能していないと思いました。 「未定義」の名前とソースなしの画像を取得し続けたため、グラフにアクセスできませんでした。

後で、私の問題は、/meの最初の引数をFB.apiに渡すだけであり、トークンを持っていないことであることに気付きました。したがって、FB.getLoginStatus関数を使用してトークンを取得する必要があります。トークンは/me引数に追加する必要があります。

4
Lorenzo Mangubat

わかりましたが、これらの答えがどうなっているのかわかりませんが、私の仕事の上級開発者からアドバイスされたように、私にとって何がうまくいったかをお知らせします。 Ruby on Railsで作業しており、FacebookのJavaScriptコードを使用してアクセストークンを取得しています。

問題：認証を行うために、FacebookはアドレスバーからURLを取得し、ファイルにあるURLと比較します。何らかの理由でlocalhost:3000を使用することは許可されていません。ただし、ローカルサーバーを実行してyoursite.devをyoursite.devにポイントするか、ローカルホストがポイントしている場所であれば、127.0.0.1:3000のような完全に構成されたドメイン名を使用できます。

ステップ1：Nginxのインストールまたは更新

$ brew install nginx（インストール）または$ brew upgrade nginx（更新）

ステップ2：nginx設定ファイルを開きます

/usr/local/etc/nginx/nginx.conf（通常はここ）

/opt/boxen/config/nginx/nginx.conf（Boxenを使用する場合）

ステップコードのこのビットを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：Macの/etc/hostsでホストファイルを編集して、

127.0.0.1   yoursite.dev

このファイルは、ドメインをローカルホストに向けます。 Nginxはlocalhostでリッスンし、ルールに一致した場合にリダイレクトします。

ステップ5：今後開発環境を使用するたびに、アドレスバーでyoursite.devの代わりにlocalhost:3000を使用するため、Facebookは正しくログインします。

2
Alex Levine

キャンバスのURLを http：// localhost/app_path として指定するだけです。

2
JustCoding

Forwardは、Facebookアプリのローカル開発を支援するための優れたツールです。SSLをサポートしているため、証明書は問題になりません。

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

免責事項：私は開発者の一人です

1
blahed

トリック：

MAMPPROを使用し、作成：サーバー名：あなたのウェブサイトの正確なアドレス（例：helloworld.com）をディスク上のサイトに

Facebookの場合：したがって、元のサイトURLも保持できます（例：helloworld.com）

これで、アドレスバーにWebサイトを入力すると、local！ ..オンラインにしたいときは、MAMP PROでサーバーを非アクティブにするだけです。

:)

0
Sebastien Horin

ローカルホストの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

ステップ1-SSLモジュールを有効にします

Sudo a2enmod ssl
Sudo service Apache2 restart

ステップ2-新しいディレクトリを作成する

Sudo mkdir /etc/Apache2/ssl

ステップ3 —自己署名SSL証明書を作成します

Sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/Apache/ssl/Apache.key -out /etc/Apache2/ssl/Apache.crt

このコマンドを使用して、自己署名SSL証明書とそれを保護するサーバーキーの両方を作成し、両方を新しいディレクトリに配置します。最も重要な行は「共通名」です。ここに正式なドメイン名を入力するか、まだ持っていない場合はサイトのIPアドレスを入力します。

共通名（例：サーバーのFQDNまたはあなたの名前）[]：example.comまたはlocalhost

ステップ4-証明書のセットアップ

Sudo vim /etc/Apache2/sites-available/default-ssl

次の行を見つけて、設定で編集します

ServerName localhostまたはexample.com

SSLCertificateFileのSSLEngine /etc/Apache2/ssl/Apache.crt

SSLCertificateKeyFile /etc/Apache2/ssl/Apache.key

ステップ5-新しい仮想ホストをアクティブにする

Sudo a2ensite default-ssl
Sudo service Apache2 reload
0
waqas

上記の答えはどれもうまくいきませんでした。 FB API 2.5で実行しています。私の問題は、一度解決すれば成功につながる問題の組み合わせでした

  1. テストアプリを作成して、それ自体が維持および管理されていることを確認し、運用開始時に無効にできることを確認します。
  2. エラーメッセージを適切に読んでください:)-「Web OAuth Login」と「Client OAuth Login」を有効にする必要がありました
  3. https://www.whatismyip.com/ を使用して、現在のIPを確認します。
  4. ドメインにAレコードを作成します。つまり、現在のIPを指す http://localhost.mydomain.com

おそらく、ダイナミックIPの変更としては理想的ではなく、おそらくDynDNSなどを使用してIPをより「静的」にすることができますが、私にとってはうまくいきました。

0
Cornelius Parkin

私の場合、問題はchrome localhost：4200からfacebook api WebサイトへのCORS要求をブロックしていることが判明しました。 Chromeを次の設定で実行： "YOUR_PATH_TO_CHROME\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir = "c：/ chromeはFacebookアプリの設定にlocalhostが追加されていなくても。

0
freecloud