Aplikasi Facebook: localhost tidak lagi berfungsi sebagai domain aplikasi

94

Saya telah menulis game untuk Facebook menggunakan Rails dan jQuery. Sejak saya mulai menggunakan Facebook Javascript SDK, menggunakan localhost sebagai domain aplikasi sepertinya berfungsi dengan baik. Saya dapat menguji game saya secara lokal dan di Heroku.

Di masa lalu, tampaknya Facebook telah melakukan pembaruan besar pada UI pengembang mereka. Sekarang jika saya menambahkan localhost sebagai domain aplikasi, itu memberi saya kesalahan berikut:

Ini harus berasal dari URL Kanvas, URL Kanvas Aman, URL Situs, URL Situs Seluler, URL Tab Halaman atau URL Tab Halaman Aman. Periksa dan perbaiki domain berikut: localhost

Game saya sekarang juga tidak berfungsi secara lokal dan saya mendapatkan kesalahan saat Javascript SDK memasukkan pengguna:

Kode Kesalahan API: 191 API Kesalahan Deskripsi: URL yang ditentukan tidak dimiliki oleh aplikasi Pesan Kesalahan: Redirect_uri tidak valid: URL yang diberikan tidak diizinkan oleh konfigurasi Aplikasi.

Ini tidak terjadi saat saya menerapkan game saya, karena herokuapp.com dianggap sebagai domain aplikasi yang valid.

Bagaimana saya bisa mengembangkan dan menguji game saya jika saya tidak bisa lagi menggunakan localhost atau 127.0.0.1?

javascript ruby-on-rails facebook heroku Ravenstine
sumber
Nilai apa yang Anda miliki untuk URL Kanvas, URL Kanvas Aman, URL Situs, URL Situs Seluler, URL Tab Halaman atau URL Tab Halaman Aman?
Igy
2
hai teman-teman saya mengerti, Anda harus membuat "aplikasi uji" baru, mereka harus menyebutkannya di halaman pengaturan aplikasi, 1 jam pencarian untuk akhirnya membuatnya berfungsi di localhost: port
Louis Grellet
@LouisGrellet, Saya mendapatkan "Domain level teratas tidak diizinkan". Seperti yang Anda katakan, f ***** g
Abhijit Sarkar
1
"Di bawah pengaturan oAuth Klien, di mana dikatakan Gunakan Mode Ketat untuk Pengalihan URI pastikan disetel ke Tidak dan tekan simpan." - wp-native-articles.com/blog/news/…
eflat

Jawaban:

241

Protokolnya tampaknya terus berubah, dan jawaban yang diterima tidak berhasil untuk saya hari ini. Jika ini membantu pencari lain, inilah yang berhasil untuk saya:

  • Semua perubahan dilakukan pada halaman Pengaturan di bawah tab Dasar

1.) Di tengah di bawah kotak opsi pertama, klik "+ Tambahkan Platform" dan pilih "Situs web" (atau apa pun yang sesuai untuk aplikasi Anda.)

2.) Di kotak yang muncul untuk situs web yang baru saja Anda tambahkan: URL Situs: http://localhost:3000/

3.) Di kotak di atas itu (Pengaturan => Dasar): Domain Aplikasi: localhost

4.) Di kanan bawah - klik "Simpan Perubahan"

5.) Pastikan Anda memiliki ID aplikasi yang disalin dan ditempel dengan benar ke dalam kode Anda. (ID ada di kotak pertama pada halaman itu jika Anda membutuhkannya lagi.)

Taylor 714
sumber
1
Terima kasih telah memperbarui jawabannya. Memang, sepertinya jawaban aslinya tidak lagi berfungsi (tetap saja, terima kasih atas jawaban asli Anda Camilo dan rareclass). Sayangnya Facebook tidak pernah mengumumkan perubahan ini.
Ravenstine
1
Facebook pasti baru saja memperbaiki ini untuk bekerja localhostkarena ini sebelumnya tidak berfungsi sebelumnya. Terima kasih atas jawaban yang bagus.
dbasch
25
Perhatikan bahwa URL Anda juga harus dicantumkan di Settings> Advanced> Valid OAuth redirect URIs .
Kara Brightwell
3
Sepertinya ini tidak berfungsi lagi :( Saya mendapatkan URL Diblokir: Pengalihan ini gagal karena URI pengalihan tidak diizinkan di Setelan OAuth Klien aplikasi. Pastikan Login OAuth Klien dan Web aktif dan tambahkan semua domain aplikasi Anda sebagai OAuth Valid Redirect URI.
Maria Ines Parnisari
3
Anda tidak diperbolehkan menggunakan 'http' lagi. Pasti 'https'.
iJames
31
  1. Buka halaman pengaturan Aplikasi Anda di http://developers.facebook.com
  2. Klik panah tarik-turun di kiri atas (di samping nama aplikasi Anda) dan klik "Buat Aplikasi Uji" dan beri nama
  3. Di Setelan> Dasar Aplikasi Pengujian baru itu, setel Domain Aplikasi sebagai "localhost"
  4. Juga setel URL Situs Web sebagai " http: // localhost: 8888 " (atau port apa pun yang Anda gunakan).
  5. PENTING: aplikasi ini memiliki ID Aplikasi dan Rahasia Aplikasi yang berbeda dari aplikasi online Anda. Jadi, langkah terakhir: pastikan Anda memperbarui kode yang ada di localhost Anda dengan ID Aplikasi dan Rahasia Aplikasi Uji Aplikasi. Sebaliknya, kode yang ada di server langsung harus menggunakan ID dan Rahasia Aplikasi utama.
georgios
sumber
Solusi paling masuk akal / modern vs. mencoba mengonfigurasi akun prod Anda untuk juga bekerja dengan dev env.
Carl Edwards
13

Anda masih dapat menguji aplikasi Anda tanpa menerapkannya pada server jarak jauh seperti heroku. Triknya adalah memperbarui etc/hostsfile dengan cara ini:

127.0.0.1 mydomain.com

Kemudian pada pengaturan Facebook App, ketik [ http: //] mydomain.com, tanpa "[" dan "]"

Ini berhasil bagi saya seperti ini

Patrick
sumber
Ini tidak akan berfungsi jika Anda menggunakan port non-standar yang biasanya dilakukan orang jika mereka mengembangkan banyak aplikasi secara paralel.
mgol
1
Ini akan berhasil, saya menggunakan python -m SimpleHTTPServer untuk melayani di port 8000, dan example.com:8000/test-facebook.html , memberikan hasil yang diharapkan. Saya berasumsi bahwa Anda mendaftarkan 127.0.0.1 example.com di / etc / hosts
Patrick
Senang mendengarnya! Jadi mereka sepertinya mengabaikan pelabuhan itu, aneh.
mgol
9

Untuk semua orang yang gelisah dengan ini di tahun 2017. Antarmukanya berubah lagi. Saya ingin mengomentari ini untuk jawaban tetapi saya tidak memiliki reputasi yang cukup. Url localhost aplikasi Anda sekarang harus disalin ke tiga tempat. Saat ini (26 Oktober 2017) urutannya adalah:

1.) Klik "Pengaturan" di menu sebelah kiri.

2.) Di tengah di bawah kotak opsi pertama, klik "+ Tambahkan Platform" dan pilih "Situs web" (atau apa pun yang sesuai untuk aplikasi Anda.)

3.) Di kotak yang muncul untuk situs web yang baru saja Anda tambahkan salin url situs localhost Anda (fe http: // localhost: 3000 / )

4.) Di kotak di atas, "Domain Aplikasi" salin URL yang sama

5.) Di kanan bawah - klik "Simpan Perubahan"

6.) Di menu sebelah kiri di bawah "Produk" klik "Login Facebook" (atau tambahkan melalui "+ Tambahkan Produk" jika tidak tersedia)

7.) Anda sekarang berada di pengaturan Login Facebook. Salin url yang sama ke kolom "Valid OAuth redirect URIs"

Ini seharusnya berhasil.

Imre_G
sumber
2
Perhatikan bahwa Facebook tidak lagi mengizinkan "http" untuk URI Pengalihan OAuth yang Valid
OmNiOwNeR
5

Cukup tambahkan localhost sebagai url kanvas atau url situs seluler Anda, ini akan memungkinkan Anda memiliki localhost dan herokuapp.com dalam pengaturan Domain Aplikasi Anda. Kemudian setelah aplikasi Anda dalam produksi, hapus saja.

kelas langka
sumber
5

Ini cara yang salah. Anda harus membuat aplikasi pengujian menggunakan tab Test di pengaturan aplikasi. Dan kemudian Anda dapat memasukkan url tahap pengembangan Anda (misalnya localhost) ke aplikasi Anda.

Esref Atak
sumber
1
saya membuat aplikasi uji tetapi tidak berhasil. Ada detail lebih lanjut?
Roger Gajraj
Ya, saya yakin ini adalah cara yang benar, lihat petunjuk lengkap stackoverflow.com/a/38173031/3625739
georgios
5

Solusi menggunakan Firebase

Untuk membuatnya berfungsi localhost, port 3000saya melakukan hal berikut:

  1. Buat Aplikasi

Buat Aplikasi Uji

  1. Sekarang Pilih "+ Buat Aplikasi Uji" dari panah tarik-turun (kiri atas).

masukkan deskripsi gambar di sini

  1. Tambahkan localhostke Domain Aplikasi

masukkan deskripsi gambar di sini

  1. Tambahkan http://localhost:3000/ke URL Situs dengan memilih "+ Tambahkan Platform"

masukkan deskripsi gambar di sini

Sampai saat ini saya telah mengikuti semua jawaban sebelumnya yang dikirimkan di sini, tetapi tidak ada yang berhasil.

Begitu...

  1. Di menu sebelah kiri, pilih "Tambahkan Produk"

  2. Tambahkan "Login dengan Facebook"

Anda akan disajikan carrousel alur kerja, dengan domain default http://localhost:3000/, klik "lanjutkan" hingga akhir.

  1. Pilih "Login Facebook> Pengaturan" dari Menu Produk.

  2. Masukkan URI pengalihan OAuth Firebase Anda (ditemukan saat mengaktifkan Login dengan Facebook di konsol firebase https://console.firebase.google.com , contoh di bawah)

masukkan deskripsi gambar di sini

  1. Tempel URI dan Simpan.

masukkan deskripsi gambar di sini

Selesai.

Matt D. Webb
sumber
2

Coba gunakan url dengan port, mis 

    http://localhost:8000/

Saya mengalami masalah yang sama dan menemukan solusi ini sekarang.

Camilo
sumber
1
Anda perlu menambahkan 'Aplikasi di Facebook' sebagai platform, dan menambahkan localhost: 8000 ke dalam Canvas URL
Tachun Lin
1

Ini berfungsi untuk saya di heroku, hal localhost tidak berfungsi (untuk saya). Saya harap ini membantu

1.) Di tengah di bawah kotak opsi pertama, klik "+ Tambahkan Platform" dan pilih "Situs web" (atau apa pun yang sesuai untuk aplikasi Anda.)

2.) Di kotak yang muncul untuk situs web yang baru saja Anda tambahkan: URL Situs: http://MYAPP.herokuapp.com/ (ganti MYAPP dengan nama aplikasi Anda)

3.) Pada kotak di atasnya (Settings => Basic): App Domain: MYAPP.herokuapp.com (ganti MYAPP dengan nama app Anda)

4.) Di kanan bawah - klik "Simpan Perubahan"

gamanox
sumber
1

Sekadar catatan untuk beberapa orang lain yang mungkin berjuang dengan ini seperti saya. Saya belum bisa membuatnya bekerja dengan aplikasi "tes". Menggunakan pengaturan aplikasi saya yang sebenarnya (dan hanya menambahkan

"http://localhost:3000/"

ke URL kanvas saya) berfungsi seperti yang disarankan orang lain. Tampaknya aplikasi uji tidak sama dengan aplikasi sebenarnya.

pengguna1775485
sumber
1

Saya mengalami masalah dengan aplikasi Rails saya yang biasanya saya jalankan dengan http: // localhost: 3000 karena Facebook sekarang membutuhkan pengalihan OAuth yang Valid untuk menggunakan https.

Untuk menggunakan https secara lokal, saya menggunakan [ngrok] [1] yang memungkinkan Anda menggunakan https dengan menyediakan sebuah terowongan. Untuk melakukan ini:

  1. Saya pergi ke situs web mereka dan mengunduh program mereka
  2. Saya mengekstrak file untuk program tersebut
  3. Di konsol saya, saya masuk ke direktori tempat ngrok diekstrak dan memasukkan 'grok http 3000' di mesin Windows saya, orang lain dapat menggunakan './grok http 3000'
  4. Setelah masuk itu ngrok berikan alamat https yang saya masukkan ke kolom Valid OAuth Redirect URIs di Facebook
  5. Kemudian saya memulai server saya dan dapat mengaksesnya menggunakan alamat https itu, bukan localhost: 3000
yellowreign
sumber
1

untuk melakukan pengujian lokal yang harus Anda lakukan adalah mematikan aplikasi, atau meletakkan aplikasi facebook dalam mode pengembangan. Kemudian Facebook akan mengizinkan Anda sendiri untuk mengakses aplikasi

Peter Ugah
sumber
0

Bagi saya itu bekerja seperti ini:

Mengonfigurasi dasbor aplikasi facebook:

* Pada tab 'dasar':

1) Membiarkan domain aplikasi kosong.

2) Menghapus platform apa pun. Artinya: tidak ada situs web tanpa platform kanvas. (jadi tidak ada bidang situs-URL yang harus diisi)

* Pada tab 'lanjutan':

3) Saya masuk ke dalam URI pengalihan OAuth yang valid:

http://localhost/myappfolder/redirect.php

4) mengenai kode saya, masukkan c: /xampp/htdocs/localhost/myappfolder/index.php saya (file ini membuat loginURL):

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

di dalam file redirect.php:

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

dan saya mendapat sesi! akhirnya! tidak perlu gantung diri pada akhirnya: P

Ohad Glaich
sumber