Facebook-App: localhost funktioniert nicht mehr als App-Domain
Ich habe ein Spiel für Facebook mit Rails und jQuery geschrieben. Seit ich mit dem Facebook Javascript SDK angefangen habe, schien localhost als App-Domain gut zu funktionieren. Ich konnte mein Spiel sowohl lokal als auch auf Heroku testen.
Anscheinend hat Facebook an seinem Entwickler-UI ein großes Update vorgenommen. Wenn ich jetzt localhost als App-Domäne hinzufüge, wird der folgende Fehler angezeigt:
Dies muss von der Zeichenbereichs-URL, der sicheren Zeichenbereichs-URL, der Website-URL, der URL der mobilen Website, der URL der Seitenregisterkarte oder der URL der Sicherheitsregisterkarte abgeleitet werden. Überprüfen und korrigieren Sie die folgenden Domänen: localhost
Mein Spiel funktioniert jetzt auch nicht lokal und ich bekomme eine Fehlermeldung, wenn das Javascript SDK den Benutzer anmeldet:
API-Fehlercode: 191 API-Fehlerbeschreibung: Die angegebene URL lautet nicht Eigentum der Anwendung Fehlermeldung: Ungültige Weiterleitung: Gegeben URL ist in der Anwendungskonfiguration nicht zulässig.
Dies ist bei der Bereitstellung meines Spiels nicht der Fall, da herokuapp.com als gültige Anwendungsdomäne 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 funktionierte heute nicht für mich. Falls es anderen Suchern hilft, hat es 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 für Ihre App geeignet ist).
2.) In der Box für die gerade hinzugefügte Website: Site-URL: http://localhost:3000/
3.) In der Box darüber (Einstellungen => Basic): App Domain: localhost
4.) Klicken Sie unten rechts auf "Änderungen speichern".
5.) Stellen Sie sicher, dass Sie die App-ID korrekt kopiert und in Ihren Code eingefügt haben. (Die ID befindet sich im ersten Feld auf dieser Seite, wenn Sie sie erneut benötigen.)
- Gehen Sie zur Einstellungsseite Ihrer App in http://developers.facebook.com
- 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
- Legen Sie in den Einstellungen> Grundeinstellungen dieser neuen Test-App die App-Domänen als "localhost" fest.
- Legen Sie auch die URL der Website-Site als " http: // localhost: 8888 " (oder einen beliebigen Port) fest.
- WICHTIG: Diese App hat eine andere App-ID und ein anderes App-Secret als Ihre Online-Bewerbung. Also, letzter Schritt: Stellen Sie sicher, dass Sie den Code in Ihrem localhost mit der App-ID und dem App-Secret der Test-App aktualisieren. Im Gegensatz dazu sollte der Code, der sich auf dem Live-Server befindet, die ID und das Secret der Haupt-App verwenden.
Sie können Ihre App immer noch testen, ohne sie auf einem Remote-Server wie heroku .. bereitzustellen. Der Trick besteht darin, die etc/hosts-Datei auf folgende Weise zu aktualisieren:
127.0.0.1 mydomain.com
Geben Sie dann in den Einstellungen der Facebook-App [ http: //] mydomain.com ohne "[" und "]" ein.
Es hat für mich so funktioniert
Für alle, die 2017 damit zappeln. Die Benutzeroberfläche hat sich erneut geändert. Ich wollte das zur Antwort kommentieren, aber ich habe nicht genug Ansehen. 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 dem Feld, das für die gerade hinzugefügte Website angezeigt wird, kopieren Sie die URL Ihrer localhost-Site (zB. http: // localhost: 3000/ )
4.) In das Feld darüber "App Domain" kopieren Sie die gleiche 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-Weiterleitungs-URIs".
Das sollte funktionieren.
Das ist falsch. Sie müssen eine Testanwendung auf der Registerkarte Test in den App-Einstellungen erstellen. Und dann können Sie Ihre Entwicklungsphase-URL (zum Beispiel localhost) in Ihre Anwendung eingeben.
Lösung mit Firebase
Damit dies für localhost funktioniert, Port 3000, habe ich Folgendes ausgeführt:
- App erstellen
- Wählen Sie nun "+ Test App erstellen" aus der Pfeil-Dropdown-Liste (oben links).
- Fügen Sie
localhostzu App-Domains hinzu
- Hinzufügen von
http://localhost:3000/zur Site-URL durch Auswahl von "+ Plattform hinzufügen"
Bis zu diesem Zeitpunkt hatte ich alle vorherigen Antworten verfolgt, aber nichts hat funktioniert.
So...
Wählen Sie im linken Menü "Produkt hinzufügen".
"Facebook Login" hinzufügen
Sie erhalten ein Workflow-Karussell mit der Standarddomäne http://localhost:3000/. Klicken Sie auf "Weiter" bis zum Ende.
Wählen Sie "Facebook Login> Einstellungen" aus dem Produktmenü.
Geben Sie Ihre Firebase OAuth-Weiterleitungs-URI ein (gefunden bei Aktivierung von Facebook Login in Ihrer Firebase-Konsole https://console.firebase.google.com , Beispiel unten)
- Einfügen von URI und Speichern.
Erledigt.
Fügen Sie einfach localhost als Ihre Canvas-URL oder mobile Site-URL hinzu. Dadurch können Sie localhost und herokuapp.com in Ihrer App-Domain-Einstellung verwenden. Sobald Ihre App in Produktion ist, entfernen Sie sie einfach.
Versuchen Sie, die URL mit dem Port zu verwenden, z.
http://localhost:8000/
Ich hatte das gleiche Problem und fand diese Lösung gerade jetzt.
Das 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 der Box für die gerade hinzugefügte Website: Website-URL: http://MYAPP.herokuapp.com/ (ersetzen Sie MYAPP durch den Namen Ihrer App)
3.) Im 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 ein Hinweis für einige andere, die so wie ich damit zu kämpfen haben. Ich konnte nicht mit "Test" -Apps arbeiten. Meine aktuellen App-Einstellungen verwenden (und einfach hinzufügen
"http://localhost:3000/"
zu meiner Canvas-URL) funktionierte wie alle anderen vorgeschlagen. Es scheint, dass Test-Apps nicht mit tatsächlichen Apps identisch sind.
Ich bin mit meiner Rails-App auf ein Problem gestoßen, das ich normalerweise mit http: // localhost: 3000 betreibe, da Facebook jetzt die Valid OAuth-Weiterleitung benötigt, um https zu verwenden.
Für die lokale Verwendung von https habe ich [ngrok] [1] verwendet, mit dem Sie https verwenden können, indem Sie einen Tunnel bereitstellen. Um dies zu tun:
- Ich ging zu ihrer Website und lud ihr Programm herunter
- Ich habe die Datei für das Programm extrahiert
- In meiner Konsole ging ich in das Verzeichnis, in das ngrok extrahiert wurde, und gab 'grok http 3000' auf meinem Windows-Computer ein. Andere verwenden möglicherweise './grok http 3000'.
- Nachdem Sie diese eingegeben hatten, gab ngrok eine https-Adresse an, die ich in das Feld Gültige OAuth-Weiterleitungs-URIs in Facebook eingegeben habe
- Dann habe ich meinen Server gestartet und konnte mit dieser https-Adresse anstelle von localhost: 3000 darauf zugreifen
Für mich hat es so funktioniert:
Facebook-App-Dashboard konfigurieren:
* Auf der Registerkarte "Basis":
1) App-Domain leer lassen.
2) Löschen einer Plattform. Das bedeutet: keine Website, keine Leinwandplattform. (also kein Site-URL-Feld zum Ausfüllen)
* Auf der Registerkarte "Erweitert":
3) Ich habe die gültigen OAuth-Weiterleitungs-URIs eingegeben:
http://localhost/myappfolder/redirect.php
4) bezüglich meines Codes .__diedie meine 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 Session bekommen! endlich! keine Notwendigkeit, mich am Ende aufzuhängen: P
um lokale Tests durchzuführen, müssen Sie nur die App ausschalten oder die Facebook-App in den Entwicklungsmodus versetzen. Dann erlaubt Facebook Ihnen allein, auf die App zuzugreifen