Facebook App: localhost funktioniert nicht mehr als App-Domain

Ich habe ein Spiel für Facebook mit Rails und jQuery geschrieben. Seit ich das Facebook Javascript SDK verwende, scheint die Verwendung von localhost als App-Domain einwandfrei zu funktionieren. Ich konnte mein Spiel sowohl lokal als auch auf Heroku testen.

Am vergangenen Tag hat Facebook anscheinend ein großes Update für die Entwickler-Benutzeroberfläche vorgenommen. Wenn ich nun localhost als App-Domain hinzufüge, wird folgende Fehlermeldung angezeigt:

Dies muss von der Canvas-URL, der Secure Canvas-URL, der Site-URL, der Mobile Site-URL, der Page Tab-URL oder der Secure Page Tab-URL abgeleitet werden. Überprüfen und korrigieren Sie die folgenden Domänen: localhost

Mein Spiel funktioniert jetzt auch nicht lokal und ich erhalte eine Fehlermeldung, wenn sich das Javascript SDK beim Benutzer anmeldet:

API-Fehlercode: 191 API-Fehlerbeschreibung: Die angegebene URL gehört nicht der Anwendung. Fehlermeldung: Ungültig redirect_uri: Die angegebene URL ist in der Anwendungskonfiguration nicht zulässig.

Dies passiert nicht, wenn ich mein Spiel bereitstelle, da herokuapp.com als gültige App-Domain angesehen wird.

Wie soll ich mein Spiel entwickeln und testen, wenn ich localhost oder 127.0.0.1 nicht mehr verwenden kann?

Das Protokoll scheint sich ständig zu ändern, und die akzeptierte Antwort hat heute bei mir nicht funktioniert. Falls es anderen Suchenden hilft, hat dies für mich funktioniert:

• Alle Änderungen wurden auf der Seite Einstellungen unter der Registerkarte Basis vorgenommen

1.) Klicken Sie in der Mitte unter dem ersten Optionsfeld auf "+ Plattform hinzufügen" und wählen Sie "Website" (oder was auch immer für Ihre App geeignet ist.)

2.) In dem Feld, das für die gerade hinzugefügte Website angezeigt wird: Website-URL: http://localhost:3000/

3.) In dem Feld darüber (Einstellungen => Basis): App Domain: localhost

4.) Klicken Sie unten rechts auf "Änderungen speichern".

5.) Stellen Sie sicher, dass Sie die App-ID kopiert und korrekt in Ihren Code eingefügt haben. (Die ID befindet sich im ersten Feld auf dieser Seite, wenn Sie sie erneut benötigen.)

1. Gehen Sie zur Einstellungsseite Ihrer App unter http://developers.facebook.com
2. Klicken Sie auf den Dropdown-Pfeil oben links (neben dem Namen Ihrer App), klicken Sie auf "Test-App erstellen" und geben Sie ihr einen Namen
3. Legen Sie in den Einstellungen> Basic dieser neuen Test-App die App-Domänen als "localhost" fest.
4. Legen Sie außerdem die URL der Website-Site als " http: // localhost: 8888 " (oder den von Ihnen verwendeten Port) fest.
5. WICHTIG: Diese App hat eine andere App-ID und ein anderes App-Geheimnis als Ihre Online-Bewerbung. Letzter Schritt: Stellen Sie sicher, dass Sie den Code in Ihrem lokalen Host mit der App-ID und dem App-Geheimnis der Test-App aktualisieren. Im Gegenteil, der Code auf dem Live-Server sollte die ID und das Geheimnis der Haupt-App verwenden.

Sie können Ihre App weiterhin testen, ohne sie auf einem Remote-Server wie Heroku bereitzustellen. Der Trick besteht darin, die etc/hostsDatei folgendermaßen zu aktualisieren :

127.0.0.1 mydomain.com

Geben Sie dann in den Einstellungen der Facebook-App [ http: //] mydomain.com ohne "[" und "]" ein.

So hat es bei mir funktioniert

Für alle, die 2017 damit zappeln. Die Benutzeroberfläche hat sich wieder geändert. Ich wollte dies zur Antwort kommentieren, habe aber nicht genug Ruf. Die localhost-URL Ihrer App muss jetzt an drei Stellen kopiert werden. Derzeit (26. Oktober 2017) lautet die Reihenfolge:

1.) Klicken Sie im linken Menü auf "Einstellungen".

2.) Klicken Sie in der Mitte unter dem ersten Optionsfeld auf "+ Plattform hinzufügen" und wählen Sie "Website" (oder was auch immer für Ihre App geeignet ist.)

3.) In das Feld, das für die Website angezeigt wird, die Sie gerade hinzugefügt haben, kopieren Sie die URL Ihrer localhost-Site (z. B. http: // localhost: 3000 / ).

4.) Kopieren Sie in das Feld über dieser "App Domain" dieselbe URL

5.) Klicken Sie unten rechts auf "Änderungen speichern".

6.) Klicken Sie im linken Menü unter "Produkte" auf "Facebook Login" (oder fügen Sie es über "+ Produkte hinzufügen" hinzu, wenn es nicht verfügbar ist).

7.) Sie befinden sich jetzt in den Facebook-Login-Einstellungen. Kopieren Sie dieselbe URL in das Feld "Gültige OAuth-Umleitungs-URIs".

Das sollte funktionieren.

Fügen Sie einfach localhost als Ihre Canvas-URL oder URL für mobile Websites hinzu. Auf diese Weise können Sie sowohl localhost als auch herokuapp.com in Ihrer App Domain-Einstellung haben. Sobald Ihre App in Produktion ist, entfernen Sie sie einfach.

Das ist falsch. Sie müssen eine Testanwendung über die Registerkarte Test in den App-Einstellungen erstellen. Anschließend können Sie Ihre URL für die Entwicklungsphase (z. B. localhost) in Ihre Anwendung eingeben.

Lösung mit Firebase

Um dies zum Laufen zu bringen localhost, habe Port 3000I Folgendes getan:

1. App erstellen

2. Wählen Sie nun "+ Test App erstellen" aus der Pfeil-Dropdown-Liste (oben links).

3. In localhostzu App Domains

4. In http://localhost:3000/zu Site URL von ausgewählten "+ Add - Plattform"

Bis zu diesem Punkt hatte ich alle vorherigen Antworten verfolgt, die hier eingereicht wurden, aber nichts funktionierte.

So...

5. Wählen Sie im Menü auf der linken Seite "Produkt hinzufügen".

6. "Facebook Login" hinzufügen

Sie erhalten ein Workflow-Karussell mit der Standarddomäne http://localhost:3000/. Klicken Sie bis zum Ende auf "Weiter".

7. Wählen Sie "Facebook Login> Einstellungen" aus dem Produktmenü.

8. Geben Sie Ihren Firebase OAuth-Umleitungs-URI ein (gefunden, wenn Sie die Facebook-Anmeldung in Ihrer Firebase-Konsole aktivieren https://console.firebase.google.com , Beispiel unten)

9. URI einfügen und speichern.

Getan.

Versuchen Sie es mit der URL mit Port, z

    http://localhost:8000/

Ich hatte das gleiche Problem und fand gerade diese Lösung.

Dies funktioniert für mich in Heroku, das Localhost-Ding hat nicht funktioniert (für mich). Ich hoffe, es hilft

1.) Klicken Sie in der Mitte unter dem ersten Optionsfeld auf "+ Plattform hinzufügen" und wählen Sie "Website" (oder was auch immer für Ihre App geeignet ist.)

2.) In dem Feld, das für die gerade hinzugefügte Website angezeigt wird : Website-URL: http://MYAPP.herokuapp.com/ (ersetzen Sie MYAPP durch den Namen Ihrer App)

3.) In dem Feld darüber (Einstellungen => Basis): App Domain: MYAPP.herokuapp.com (ersetzen Sie MYAPP durch den Namen Ihrer App)

4.) Klicken Sie unten rechts auf "Änderungen speichern".

Nur eine Notiz für einige andere, die vielleicht so damit zu kämpfen haben wie ich. Ich konnte dies nicht mit "Test" -Apps zum Laufen bringen. Verwenden meiner aktuellen App-Einstellungen (und einfaches Hinzufügen

"http://localhost:3000/"

zu meiner Canvas-URL) funktionierte wie alle anderen vorgeschlagen. Es scheint, dass Test-Apps nicht den tatsächlichen Apps entsprechen.

Ich bin auf ein Problem mit meiner Rails-App gestoßen, das ich normalerweise mit http: // localhost: 3000 ausführe, da Facebook jetzt die gültige OAuth-Umleitung benötigt, um https zu verwenden.

Um https lokal zu verwenden, habe ich [ngrok] [1] verwendet, mit dem Sie https verwenden können, indem Sie einen Tunnel bereitstellen. Um dies zu tun:

1. Ich ging zu ihrer Website und lud ihr Programm herunter
2. Ich habe die Datei für das Programm extrahiert
3. In meiner Konsole ging ich in das Verzeichnis, in das ngrok extrahiert wurde, und gab auf meinem Windows-Computer "grok http 3000" ein. Andere verwenden möglicherweise "./grok http 3000".
4. Nach der Eingabe gab ngrok eine https-Adresse an, die ich in das Feld Valid OAuth Redirect URIs in Facebook eingegeben habe
5. Dann habe ich meinen Server gestartet und konnte mit dieser https-Adresse anstelle von localhost: 3000 darauf zugreifen

Um lokale Tests durchzuführen, müssen Sie lediglich die App ausschalten oder die Facebook-App in den Entwicklungsmodus versetzen. Dann können Sie auf Facebook alleine auf die App zugreifen

Bei mir hat es so funktioniert:

Konfigurieren des Facebook App Dashboards:

* Auf der Registerkarte "Basis":

1) Lassen Sie die App-Domain leer.

2) Löschen einer Plattform. Das heißt: keine Website, keine Canvas-Plattform. (also kein zu füllendes Site-URL-Feld)

* Auf der Registerkarte "Erweitert":

3) Ich habe die gültigen OAuth-Umleitungs-URIs eingegeben:

http://localhost/myappfolder/redirect.php

4) Bezüglich meines Codes, insdie mein c: /xampp/htdocs/localhost/myappfolder/index.php (diese Datei macht die loginURL):

$helper = new FacebookRedirectLoginHelper('http://localhost/myappfolder/redirect.php');  

in der Datei redirect.php:

$helper = new FacebookRedirectLoginHelper('http://localhost/myappfolder/redirect.php');  

und ich habe eine Sitzung! endlich! keine Notwendigkeit, mich am Ende aufzuhängen: P.