Facebookアプリ：localhostがアプリドメインとして機能しなくなった

私は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を使用できなくなった場合、ゲームを開発してテストするにはどうすればよいですか？

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

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

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

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

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

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

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

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

herokuなどのリモートサーバーにアプリをデプロイしなくても、アプリをテストできます。トリックはetc/hostsこの方法でファイルを更新することです：

127.0.0.1 mydomain.com

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

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

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

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

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

3.）追加したWebサイトのボックスに、localhostサイトのURL（http：// localhost：3000 /など）をコピーします。

4.）その「アプリドメイン」の上のボックスに同じURLをコピーします

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

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

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

これはうまくいくはずです。

キャンバスのURLまたはモバイルサイトのURLとしてlocalhostを追加するだけで、アプリのドメイン設定にlocalhostとherokuapp.comの両方を含めることができます。次に、アプリが本稼働になったら、削除します。

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

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

これを動作させるためにlocalhost、ポート3000は次のようにしました：

1. アプリを作成

2. 次に、矢印のドロップダウン（左上）から[+ Create Test App]を選択します。

3. localhostアプリドメインに追加

4. 追加http://localhost:3000/選択したことにより、サイトのURLに「+追加プラットフォーム」

この時点まで、私はここに提出された以前のすべての回答をたどっていましたが、何もうまくいきませんでした。

そう...

5. 左側のメニューで、[製品を追加]を選択します

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

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

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

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

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

できました。

ポートでURLを使用してみてください、例えば

    http://localhost:8000/

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

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

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

2.）追加したばかりのウェブサイトのために立ち上がるボックスで、次のサイトのURL：http://MYAPP.herokuapp.com/ （アプリの名前でMYAPPを置き換え）

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

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

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

"http://localhost:3000/"

私のキャンバスURLに）他の誰もが示唆したように働いた。テストアプリは実際のアプリと同じではないようです。

私は通常、http：// localhost：3000で実行するRailsアプリで問題が発生しました。これは、Facebookがhttpsを使用するために有効なOAuthリダイレクトを必要とするためです。

ローカルでhttpsを使用するために、トンネルを提供することでhttpsを使用できる[ngrok] [1]を使用しました。これをする：

1. 私は彼らのウェブサイトに行き、彼らのプログラムをダウンロードしました
2. プログラムのファイルを抽出しました
3. 私のコンソールでは、ngrokが抽出されたディレクトリに移動し、Windowsマシンで「grok http 3000」と入力しました。他のユーザーは「./grok http 3000」を使用する可能性があります
4. 入力後、ngrokはhttpsアドレスを提供し、それをFacebookの[有効なOAuthリダイレクトURI]フィールドに入力しました
5. 次に、サーバーを起動し、localhost：3000の代わりにそのhttpsアドレスを使用してサーバーにアクセスできました

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

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

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