Facebook App: localhost funktioniert nicht mehr als App-Domain

94

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?

Ravenstine
quelle
Welche Werte haben Sie für die Canvas-URL, die Secure Canvas-URL, die Site-URL, die Mobile Site-URL, die Page Tab-URL oder die Secure Page Tab-URL?
Igy
2
Hey Leute, ich habe es verstanden. Du musst eine neue "Test-App" erstellen. Sie sollten es auf der Seite mit den App-Einstellungen erwähnen. 1 Stunde Suche, damit es endlich auf localhost
Louis Grellet
@ LouisGrellet, Nun, ich bekomme "Top-Level-Domains sind nicht erlaubt". Wie Sie sagten, f ***** g
Abhijit Sarkar
1
"Stellen Sie unter" Client oAuth "-Einstellungen mit der Aufschrift" Strikten Modus für Umleitungs-URIs verwenden "sicher, dass" Nein "eingestellt ist und der Treffer gespeichert wird." - wp-native-articles.com/blog/news/…
eflat

Antworten:

241

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.)

Taylor714
quelle
1
Vielen Dank für die Aktualisierung der Antwort. In der Tat scheint es, dass die ursprüngliche Antwort nicht mehr funktioniert (trotzdem danke für Ihre ursprünglichen Antworten Camilo und rareclass). Es ist eine Schande, dass Facebook diese Änderungen nie bekannt zu geben scheint.
Ravenstine
1
Facebook muss dies kürzlich behoben haben, damit es funktioniert, localhostda dies zuvor nicht funktioniert hat. Danke für die gute Antwort.
dbasch
25
Beachten Sie, dass Ihre URL auch unter Einstellungen> Erweitert> Gültige OAuth-Umleitungs-URIs aufgeführt sein muss .
Kara Brightwell
3
Dies scheint nicht mehr zu funktionieren :( Ich erhalte eine URL-Blockierung: Diese Umleitung ist fehlgeschlagen, da der Umleitungs-URI in den Client-OAuth-Einstellungen der App nicht auf der Whitelist steht. Stellen Sie sicher, dass die Client- und Web-OAuth-Anmeldung aktiviert ist, und fügen Sie alle Ihre App-Domänen als gültige OAuth hinzu URIs
umleiten
3
Sie dürfen 'http' nicht mehr verwenden. Es muss 'https' sein.
James
30
  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.
Georgios
quelle
Die sinnvollste / modernste Lösung im Vergleich zum Versuch, Ihr Produktkonto so zu konfigurieren, dass es auch mit einer Entwicklungsumgebung funktioniert.
Carl Edwards
13

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

Patrick
quelle
Es funktioniert nicht, wenn Sie einen nicht standardmäßigen Port verwenden. Dies ist normalerweise der Fall, wenn Benutzer viele Apps parallel entwickeln.
mgol
1
Es wird funktionieren, ich habe Python -m SimpleHTTPServer verwendet, um auf Port 8000 zu dienen, und example.com:8000/test-facebook.html lieferte das erwartete Ergebnis. Ich gehe davon aus, dass Sie 127.0.0.1 example.com in der Datei / etc / hosts registriert haben
Patrick
Gut zu wissen! Dann scheinen sie den Hafen zu ignorieren, komisch.
mgol
9

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.

Imre_G
quelle
2
Beachten Sie, dass Facebook "http" für gültige OAuth Redirect-URIs nicht mehr zulässt
OmNiOwNeR
5

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.

seltene Klasse
quelle
5

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.

Esref Atak
quelle
1
Ich habe eine Test-App erstellt, aber es hat nicht funktioniert. Noch mehr Details?
Roger Gajraj
Ja, ich glaube, das ist der richtige Weg, siehe vollständige Anleitung stackoverflow.com/a/38173031/3625739
georgios
5

Lösung mit Firebase

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

  1. App erstellen

Test-App erstellen

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

Geben Sie hier die Bildbeschreibung ein

  1. In localhostzu App Domains

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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

So...

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

  2. "Facebook Login" hinzufügen

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

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

  2. 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)

Geben Sie hier die Bildbeschreibung ein

  1. URI einfügen und speichern.

Geben Sie hier die Bildbeschreibung ein

Getan.

Matt D. Webb
quelle
2

Versuchen Sie es mit der URL mit Port, z

    http://localhost:8000/

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

Camilo
quelle
1
Sie müssen 'App auf Facebook' als Plattform hinzufügen und localhost: 8000 in Canvas URL
Tachun Lin
1

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".

Gamanox
quelle
1

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.

user1775485
quelle
1

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
gelb regieren
quelle
1

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

Peter Ugah
quelle
0

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.

Ohad Glaich
quelle