Aplikacja Facebook: localhost nie działa już jako domena aplikacji

Piszę grę na Facebooka używając Railsów i jQuery. Odkąd zacząłem używać Facebook Javascript SDK, używanie localhost jako domeny aplikacji wydawało się działać dobrze. Mogłem przetestować swoją grę lokalnie i na Heroku.

Wygląda na to, że w zeszłym dniu Facebook dokonał dużej aktualizacji swojego interfejsu programisty. Teraz, jeśli dodam localhost jako domenę aplikacji, otrzymam następujący błąd:

Musi to pochodzić z adresu URL kanwy, adresu URL bezpiecznego kanwy, adresu URL witryny, adresu URL witryny mobilnej, adresu URL karty strony lub adresu URL karty bezpiecznej strony. Sprawdź i popraw następujące domeny: localhost

Moja gra również nie działa teraz lokalnie i pojawia się błąd, gdy Javascript SDK loguje się do użytkownika:

Kod błędu interfejsu API: 191 Opis błędu interfejsu API: podany adres URL nie jest własnością aplikacji. Komunikat o błędzie: Nieprawidłowe redirect_uri: Podany adres URL nie jest dozwolony w konfiguracji aplikacji.

Nie dzieje się tak podczas wdrażania gry, ponieważ herokuapp.com jest uważana za prawidłową domenę aplikacji.

Jak mam opracować i przetestować swoją grę, jeśli nie mogę już używać localhost lub 127.0.0.1?

Wydaje się, że protokół ciągle się zmienia, a zaakceptowana odpowiedź nie zadziałała dla mnie dzisiaj. Na wypadek, gdyby pomogło to innym wyszukiwarkom, to zadziałało w moim przypadku:

• Wszystkie zmiany zostały wprowadzone na stronie Ustawienia w zakładce Podstawowe

1.) W środku, pod pierwszym polem opcji, kliknij „+ Dodaj platformę” i wybierz „Witryna” (lub cokolwiek, co jest odpowiednie dla Twojej aplikacji).

2.) W oknie, które pojawia się dla właśnie dodanej witryny: Adres URL witryny: http://localhost:3000/

3.) W polu powyżej (Ustawienia => Podstawowe): Domena aplikacji: localhost

4.) W prawym dolnym rogu kliknij „Zapisz zmiany”

5.) Upewnij się, że identyfikator aplikacji został poprawnie skopiowany i wklejony do kodu. (Identyfikator znajduje się w pierwszym polu na tej stronie, jeśli potrzebujesz go ponownie).

1. Przejdź do strony ustawień swojej aplikacji w http://developers.facebook.com
2. Kliknij strzałkę menu rozwijanego w lewym górnym rogu (obok nazwy aplikacji), kliknij „Utwórz aplikację testową” i nadaj jej nazwę
3. W Ustawieniach> Podstawowe tej nowej aplikacji testowej ustaw domeny aplikacji jako „localhost”
4. Ustaw także adres URL witryny internetowej jako „ http: // localhost: 8888 ” (lub inny używany port).
5. WAŻNE: ta aplikacja ma inny identyfikator aplikacji i sekret aplikacji niż aplikacja online. A więc ostatni krok: upewnij się, że zaktualizowałeś kod, który znajduje się na twoim lokalnym hoście, za pomocą identyfikatora aplikacji testowej i tajnego klucza aplikacji. Wręcz przeciwnie, kod, który znajduje się na serwerze rzeczywistym, powinien używać identyfikatora i klucza aplikacji głównej.

Nadal możesz przetestować swoją aplikację bez wdrażania jej na zdalnym serwerze, takim jak heroku. Sztuczka polega na zaktualizowaniu etc/hostspliku w ten sposób:

127.0.0.1 mydomain.com

Następnie w ustawieniach aplikacji Facebook wpisz [ http: //] moja_domena.com, bez „[” i „]”

U mnie to zadziałało

Dla każdego, kto bawi się tym w 2017 roku. Interfejs ponownie się zmienił. Chciałem skomentować to odpowiedź, ale nie mam wystarczającej reputacji. Adres URL hosta lokalnego Twojej aplikacji należy teraz skopiować do trzech miejsc. Obecnie (26 października 2017) kolejność jest następująca:

1.) Kliknij „Ustawienia” w lewym menu.

2.) W środku, pod pierwszym polem opcji, kliknij „+ Dodaj platformę” i wybierz „Witryna” (lub cokolwiek, co jest odpowiednie dla Twojej aplikacji).

3.) W oknie, które pojawi się dla właśnie dodanej witryny, skopiuj adres URL witryny lokalnego hosta (np. Http: // localhost: 3000 / )

4.) W polu powyżej „Domena aplikacji” skopiuj ten sam adres URL

5.) W prawym dolnym rogu kliknij „Zapisz zmiany”

6.) W menu po lewej stronie w sekcji „Produkty” kliknij „Zaloguj się na Facebooku” (lub dodaj za pomocą opcji „+ Dodaj produkty”, jeśli nie jest dostępna)

7.) Jesteś teraz w ustawieniach logowania na Facebooku. Skopiuj ten sam adres URL do pola „Valid OAuth redirect URIs”

To powinno działać.

Wystarczy dodać localhost jako adres URL kanwy lub adres URL witryny mobilnej, dzięki czemu w ustawieniach domeny aplikacji będziesz mieć zarówno localhost, jak i herokuapp.com. Gdy aplikacja będzie już produkowana, po prostu ją usuń.

To jest zły sposób. Musisz utworzyć aplikację testową za pomocą zakładki Test w ustawieniach aplikacji. Następnie możesz wprowadzić adres URL etapu rozwoju (na przykład localhost) do swojej aplikacji.

Rozwiązanie wykorzystujące Firebase

Aby to działało localhost, port 3000wykonałem następujące czynności:

1. Utwórz aplikację

2. Teraz wybierz „+ Utwórz aplikację testową” z rozwijanego menu ze strzałką (w lewym górnym rogu).

3. Dodaj localhostdo domen aplikacji

4. Dodaj http://localhost:3000/do adresu URL witryny, wybierając opcję „+ Dodaj platformę”

Do tego momentu śledziłem wszystkie poprzednie odpowiedzi przesłane tutaj, ale nic nie działało.

Więc...

5. W menu po lewej stronie wybierz „Dodaj produkt”

6. Dodaj „Facebook Login”

Zostanie wyświetlona karuzela przepływu pracy, z domyślną domeną http://localhost:3000/, kliknij „kontynuuj” do końca.

7. Wybierz „Facebook Login> Settings” z menu produktu.

8. Wprowadź swój identyfikator URI przekierowania Firebase OAuth (znaleziony po włączeniu logowania do Facebooka w konsoli Firebase https://console.firebase.google.com , przykład poniżej)

9. Wklej URI i zapisz.

Gotowe.

Spróbuj użyć adresu URL z portem, np

    http://localhost:8000/

Miałem ten sam problem i właśnie znalazłem to rozwiązanie.

To działa dla mnie w heroku, rzecz localhost nie działa (dla mnie). Mam nadzieję, że to pomoże

1.) W środku, pod pierwszym polem opcji, kliknij „+ Dodaj platformę” i wybierz „Witryna” (lub cokolwiek, co jest odpowiednie dla Twojej aplikacji).

2.) W oknie, które pojawi się dla właśnie dodanej witryny: Adres URL witryny: http://MYAPP.herokuapp.com/ (zastąp MYAPP nazwą Twojej aplikacji)

3.) W polu powyżej (Ustawienia => Podstawowe): Domena aplikacji: MYAPP.herokuapp.com (zamień MYAPP na nazwę Twojej aplikacji)

4.) W prawym dolnym rogu kliknij „Zapisz zmiany”

Tylko uwaga dla innych, którzy mogą mieć z tym problem tak jak ja. Nie udało mi się zmusić tego do działania z aplikacjami „testowymi”. Używając moich aktualnych ustawień aplikacji (i po prostu dodając

"http://localhost:3000/"

do mojego adresu URL płótna) działało tak, jak sugerowali wszyscy inni. Wygląda na to, że aplikacje testowe nie są równe rzeczywistym aplikacjom.

Wystąpił problem z moją aplikacją Rails, którą zwykle uruchamiam z adresem http: // localhost: 3000, ponieważ Facebook wymaga teraz przekierowania Valid OAuth, aby używać protokołu HTTPS.

Aby używać https lokalnie, użyłem [ngrok] [1], który pozwala na używanie https poprzez zapewnienie tunelu. Aby to zrobić:

1. Poszedłem na ich stronę internetową i pobrałem ich program
2. Rozpakowałem plik dla programu
3. W konsoli wszedłem do katalogu, do którego został wyodrębniony ngrok i wpisałem „grok http 3000” na moim komputerze z systemem Windows, inni mogą użyć „./grok http 3000”
4. Po wprowadzeniu tego ngrok podał adres https, który umieściłem w polu Valid OAuth Redirect URIs na Facebooku
5. Następnie uruchomiłem serwer i mogłem uzyskać do niego dostęp za pomocą tego adresu https zamiast localhost: 3000

aby przeprowadzić lokalne testy, wystarczy wyłączyć aplikację lub przełączyć aplikację Facebook w tryb programowania. Wtedy Facebook pozwoli ci samemu uzyskać dostęp do aplikacji

U mnie zadziałało tak:

Konfigurowanie pulpitu nawigacyjnego aplikacji Facebook:

* Na karcie „podstawowe”:

1) Domena aplikacji jest pusta.

2) Kasowanie dowolnej platformy. Znaczenie: brak strony internetowej, brak platformy Canvas. (więc nie ma pola adresu URL witryny do wypełnienia)

* Na karcie „zaawansowane”:

3) Wprowadziłem poprawne identyfikatory URI przekierowań OAuth:

http://localhost/myappfolder/redirect.php

4) jeśli chodzi o mój kod, wstaw mój c: /xampp/htdocs/localhost/myappfolder/index.php (ten plik tworzy loginURL):

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

wewnątrz pliku redirect.php:

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

i mam sesję! Wreszcie! nie trzeba się w końcu wieszać: P