web-dev-qa-db-ja.com

Facebookアプリ：localhostはアプリドメインとして機能しなくなりました

私はRailsとjQueryを使用してFacebook用のゲームを書いてきました。 Facebook Javascript SDKの使用を開始して以来、アプリドメインとしてlocalhostを使用することは問題なく機能しているように見えました。ローカルとHerokuの両方でゲームをテストできました。

過去1日で、Facebookは開発者UIを大幅に更新したようです。 localhostをアプリドメインとして追加すると、次のエラーが表示されます。

これは、キャンバスURL、セキュアキャンバスURL、サイトURL、モバイルサイトURL、ページタブURLまたはセキュアページタブURLから派生する必要があります。次のドメインを確認して修正します：localhost

また、私のゲームはローカルで動作せず、Javascript SDKがユーザーをログインするとエラーが発生します。

APIエラーコード：191 APIエラーの説明：指定されたURLはアプリケーションによって所有されていませんエラーメッセージ：無効なredirect_uri：指定されたURLはアプリケーション構成で許可されていません。

Herokuapp.comは有効なアプリドメインと見なされるため、ゲームをデプロイするときにこれは発生しません。

Localhostまたは127.0.0.1を使用できなくなった場合、どのようにゲームを開発およびテストするのですか？

javascriptruby-on-railsfacebookheroku
91
Ravenstine

プロトコルは変化し続けているようで、今日、受け入れられた答えはうまくいきませんでした。他の検索者に役立つ場合、これが私にとってうまくいったことです：

  • すべての変更は、[基本]タブの[設定]ページで行われました。

1.）オプションの最初のボックスの下の中央にある[+プラットフォームの追加]をクリックし、[ウェブサイト]（またはアプリに適したもの）を選択します。

2.）追加したWebサイト用に表示されるボックス：サイトURL：http://localhost:3000/

3.）その上のボックスで（設定=>基本）：アプリケーションドメイン：localhost

4.）右下-[変更を保存]をクリックします

5.）アプリIDがコピーされ、コードに正しく貼り付けられていることを確認してください。 （再度必要な場合、IDはそのページの最初のボックスにあります。）

235
Taylor714
  1. http://developers.facebook.com でアプリの設定ページに移動します
  2. 左上の（アプリの名前の横にある）ドロップダウン矢印をクリックし、「テストアプリの作成」をクリックして名前を付けます。
  3. 新しいテストアプリの[設定]> [基本]で、アプリドメインを「localhost」に設定します
  4. また、WebサイトサイトのURLを「 http：// localhost：8888 」（または使用しているポート）に設定します。
  5. 重要：このアプリには、オンラインアプリケーションとは異なるアプリIDとアプリシークレットがあります。そのため、最後のステップ：localhostにあるコードを、テストアプリのアプリIDとアプリシークレットで更新してください。それどころか、ライブサーバーにあるコードは、メインアプリのIDとシークレットを使用する必要があります。
29
georgios

Herokuのようなリモートサーバーにデプロイせずにアプリをテストできます。トリックはetc/hostsファイルを次のように更新することです：

127.0.0.1 mydomain.com

次に、Facebookアプリの設定で、「[」と「]」なしで[ http：//] mydomain.comと入力します

このように私のために働いた

13
Patrick

2017年にこれをいじっているすべての人のために。インターフェースが再び変更されました。これを答えにコメントしたかったのですが、評判が十分ではありません。アプリのlocalhost URLを3つの場所にコピーする必要があります。現在、（2017年10月26日）シーケンスは次のとおりです。

1.）左メニューの[設定]をクリックします。

2.）オプションの最初のボックスの下の中央にある[+プラットフォームの追加]をクリックし、[ウェブサイト]（またはアプリに適したもの）を選択します。

3.）追加したWebサイト用に表示されるボックスに、localhostサイトのURLをコピーします（f.e. http：// localhost：3000 / ）

4.）「App Domain」の上のボックスに同じURLをコピーします

5.）右下-[変更を保存]をクリックします

6.）[製品]の下の左側のメニューで[Facebookログイン]をクリックします（使用できない場合は[+製品の追加]で追加します）

7.）Facebookのログイン設定になりました。同じURLを「有効なOAuthリダイレクトURI」フィールドにコピーします

これは動作するはずです。

9
Imre_G

これは間違った方法です。アプリ設定の[テスト]タブを使用して、テストアプリケーションを作成する必要があります。そして、アプリケーションに開発段階のURL（たとえばlocalhost）を入力できます。

5
Esref Atak

Firebaseを使用したソリューション

これをlocalhost、ポート3000で機能させるために、次のことを行いました。

  1. アプリを作成

Create Test App

  1. 次に、矢印ドロップダウン（左上）から[+テストアプリの作成]を選択します。

enter image description here

  1. localhostをApp Domainsに追加します

enter image description here

  1. 「+プラットフォームの追加」を選択して、サイトURLにhttp://localhost:3000/を追加します

enter image description here

ここまでは、ここで提出された以前のすべての回答に従いましたが、何も機能しませんでした。

そう...

  1. 左側のメニューで、「製品の追加」を選択します

  2. 「Facebookログイン」を追加

デフォルトのドメインhttp://localhost:3000/を持つワークフローカルーセルが表示されます。最後まで[続行]をクリックします。

  1. 製品メニューから「Facebookログイン>設定」を選択します。

  2. Firebase OAuthリダイレクトURIを入力します（firebaseコンソールでFacebookログインを有効にすると見つかります https://console.firebase.google.com 、下の例）

enter image description here

  1. URIを貼り付けて保存します。

enter image description here

できた.

5
Matt D. Webb

LocalhostをキャンバスのURLまたはモバイルサイトのURLとして追加するだけです。これにより、アプリケーションドメイン設定にlocalhostとherokuapp.comの両方を含めることができます。次に、アプリの運用が​​開始されたら、削除します。

5
rareclass

ポートでURLを使用してみてください。

    http://localhost:8000/

私は同じ問題を抱えていて、今すぐこの解決策を見つけました。

2
Camilo

これはherokuで機能しますが、localhostが機能しませんでした（私にとって）。私はそれが役立つことを願っています

1.）オプションの最初のボックスの下の中央にある[+プラットフォームの追加]をクリックし、[ウェブサイト]（またはアプリに適したもの）を選択します。

2.）追加したWebサイト用に表示されるボックス：サイトURL： http://MYAPP.herokuapp.com/ （MYAPPをアプリの名前に置き換えます）

3.）その上のボックスで（設定=>基本）：アプリドメイン：MYAPP.herokuapp.com（MYAPPをアプリの名前に置き換えます）

4.）右下-[変更を保存]をクリックします

1
gamanox

私がそうであったようにこれに苦労しているかもしれないいくつかの他の人へのただのメモ。これを「テスト」アプリで動作させることができませんでした。私の実際のアプリ設定を使用して（そして単に追加

"http://localhost:3000/"

私のキャンバスURLに）は、他のみんなが提案したように機能しました。テストアプリは実際のアプリとは異なるようです。

1
user1775485

Facebookで使用するには有効なRailsリダイレクトが必要になったため、通常は http：// localhost：30 で実行する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. その後、サーバーを起動し、localhost：3000の代わりにそのhttpsアドレスを使用してサーバーにアクセスできました
0
yellowreign

私にとっては、このように機能しました：

Facebookアプリダッシュボードの構成：

*「基本」タブ：

1）アプリドメインを空のままにします。

2）プラットフォームの消去。意味：ウェブサイトもキャンバスプラットフォームもありません。 （したがって、入力するサイトURLフィールドはありません）

*「詳細」タブ：

3）有効なOAuthリダイレクトURIを入力しました：

http://localhost/myappfolder/redirect.php

4）私のコードに関しては、私の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

0
Ohad Glaich

ローカルテストを行うには、アプリをオフにするか、Facebookアプリを開発モードにするだけです。その後、Facebookはあなただけがアプリにアクセスできるようにします

0
Peter Ugah