แอพ Facebook: localhost ไม่ทำงานเป็นโดเมนแอพอีกต่อไป

ฉันเขียนเกมสำหรับ Facebook โดยใช้ Rails และ jQuery ตั้งแต่ฉันเริ่มใช้ Facebook Javascript SDK การใช้ localhost เป็นโดเมนของแอปดูเหมือนจะทำงานได้ดี ฉันสามารถทดสอบเกมของฉันได้ทั้งในเครื่องและบน Heroku

ในวันที่ผ่านมาดูเหมือนว่า Facebook ได้ทำการอัปเดต UI ของนักพัฒนาซอฟต์แวร์ครั้งใหญ่ ตอนนี้ถ้าฉันเพิ่ม localhost เป็นโดเมนของแอปจะทำให้ฉันมีข้อผิดพลาดต่อไปนี้:

สิ่งนี้ต้องได้มาจาก Canvas URL, Secure Canvas URL, URL ของไซต์, URL ของไซต์บนอุปกรณ์เคลื่อนที่, URL ของแท็บหน้าหรือ URL ของแท็บหน้าที่ปลอดภัย ตรวจสอบและแก้ไขโดเมนต่อไปนี้: localhost

ตอนนี้เกมของฉันไม่ทำงานในเครื่องและฉันได้รับข้อผิดพลาดเมื่อ Javascript SDK เข้าสู่ระบบผู้ใช้:

รหัสข้อผิดพลาด API: 191 คำอธิบายข้อผิดพลาด API: URL ที่ระบุไม่ได้เป็นของแอปพลิเคชัน Error Message: Invalid redirect_uri: URL ที่ระบุไม่ได้รับอนุญาตโดยการกำหนดค่าแอปพลิเคชัน

สิ่งนี้ไม่เกิดขึ้นเมื่อฉันปรับใช้เกมของฉันเนื่องจาก herokuapp.com ถือเป็นโดเมนแอปที่ถูกต้อง

ฉันควรจะพัฒนาและทดสอบเกมของฉันอย่างไรหากฉันไม่สามารถใช้ localhost หรือ 127.0.0.1 ได้อีกต่อไป

ดูเหมือนว่าโปรโตคอลจะเปลี่ยนไปเรื่อย ๆ และคำตอบที่ยอมรับก็ใช้ไม่ได้กับฉันในวันนี้ ในกรณีที่ช่วยผู้ค้นหารายอื่นนี่คือสิ่งที่ได้ผลสำหรับฉัน:

• การเปลี่ยนแปลงทั้งหมดเกิดขึ้นในหน้าการตั้งค่าภายใต้แท็บพื้นฐาน

1. ) ตรงกลางใต้ช่องตัวเลือกแรกคลิก "+ เพิ่มแพลตฟอร์ม" แล้วเลือก "เว็บไซต์" (หรืออะไรก็ได้ที่เหมาะสมกับแอปของคุณ)

2. ) ในช่องที่ปรากฏขึ้นสำหรับเว็บไซต์ที่คุณเพิ่งเพิ่มเข้าไป: URL ของไซต์: http://localhost:3000/

3. ) ในช่องด้านบนนั้น (Settings => Basic): App Domain: localhost

4. ) ที่ด้านขวาล่าง - คลิก "บันทึกการเปลี่ยนแปลง"

5. ) ตรวจสอบให้แน่ใจว่าคุณได้คัดลอกและวางรหัสแอปลงในรหัสของคุณอย่างถูกต้อง (รหัสอยู่ในช่องแรกของหน้านั้นหากคุณต้องการอีกครั้ง)

1. ไปที่หน้าการตั้งค่าแอพของคุณในhttp://developers.facebook.com
2. คลิกที่ลูกศรแบบเลื่อนลงทางด้านซ้ายบน (ถัดจากชื่อแอปของคุณ) แล้วคลิก "สร้างแอปทดสอบ" และตั้งชื่อ
3. ในการตั้งค่า> พื้นฐานของแอปทดสอบใหม่นั้นตั้งค่าโดเมนของแอปเป็น "localhost"
4. ตั้งค่า URL ของเว็บไซต์เป็น " http: // localhost: 8888 " (หรือพอร์ตใดก็ตามที่คุณใช้)
5. สิ่งสำคัญ: แอปนี้มีรหัสแอปและรหัสลับของแอปที่แตกต่างจากแอปพลิเคชันออนไลน์ของคุณ ดังนั้นขั้นตอนสุดท้าย: ตรวจสอบให้แน่ใจว่าคุณอัปเดตโค้ดที่อยู่ใน localhost ของคุณด้วย App ID และ App Secret ของ Test App ในทางตรงกันข้ามรหัสที่อยู่ในเซิร์ฟเวอร์ที่ใช้งานจริงควรใช้ ID และ Secret ของแอปหลัก

คุณยังคงสามารถทดสอบแอปของคุณได้โดยไม่ต้องปรับใช้บนเซิร์ฟเวอร์ระยะไกลเช่น heroku เคล็ดลับคือการอัปเดตetc/hostsไฟล์ด้วยวิธีนี้:

127.0.0.1 mydomain.com

จากนั้นในการตั้งค่าของแอพ Facebook ให้พิมพ์ [ http: //] mydomain.com โดยไม่มีเครื่องหมาย "[" และ "]"

มันได้ผลสำหรับฉันด้วยวิธีนี้

สำหรับทุกคนที่อยู่ไม่สุขในปี 2560 อินเทอร์เฟซเปลี่ยนไปอีกครั้ง ฉันต้องการแสดงความคิดเห็นกับคำตอบนี้ แต่ฉันไม่มีชื่อเสียงมากพอ ตอนนี้ URL localhost ของแอปของคุณจะต้องคัดลอกไปที่สามแห่ง ปัจจุบัน (26 ตุลาคม 2017) ลำดับคือ:

1. ) คลิก "การตั้งค่า" ในเมนูด้านซ้าย

2. ) ตรงกลางใต้ช่องตัวเลือกแรกคลิก "+ เพิ่มแพลตฟอร์ม" แล้วเลือก "เว็บไซต์" (หรืออะไรก็ได้ที่เหมาะสมกับแอปของคุณ)

3. ) ในช่องที่ปรากฏขึ้นสำหรับเว็บไซต์ที่คุณเพิ่งเพิ่มคัดลอก url ไซต์ localhost ของคุณ (fe http: // localhost: 3000 / )

4. ) ในช่องด้านบนที่ "App Domain" คัดลอก URL เดียวกัน

5. ) ที่ด้านล่างขวา - คลิก "บันทึกการเปลี่ยนแปลง"

6. ) ในเมนูด้านซ้ายใต้ "สินค้า" คลิก "เข้าสู่ระบบ Facebook" (หรือเพิ่มผ่าน "+ เพิ่มสินค้า" หากไม่มี)

7. ) คุณอยู่ในการตั้งค่าการเข้าสู่ระบบ Facebook คัดลอก URL เดียวกันลงในช่อง "URI การเปลี่ยนเส้นทาง OAuth ที่ถูกต้อง"

สิ่งนี้ควรใช้งานได้

เพียงเพิ่ม localhost เป็น URL ผ้าใบหรือ URL ของไซต์บนอุปกรณ์เคลื่อนที่ซึ่งจะทำให้คุณมีทั้ง localhost และ herokuapp.com ในการตั้งค่า App Domain จากนั้นเมื่อแอปของคุณอยู่ในระหว่างการผลิตให้ลบออก

นี่เป็นวิธีที่ผิด คุณต้องสร้างแอปพลิเคชันทดสอบโดยใช้แท็บทดสอบในการตั้งค่าแอป จากนั้นคุณสามารถป้อน url ขั้นตอนการพัฒนาของคุณ (เช่น localhost) ลงในแอปพลิเคชันของคุณ

วิธีแก้ปัญหาโดยใช้ Firebase

เพื่อให้สิ่งนี้ทำงานได้localhostพอร์ต3000ฉันได้ทำสิ่งต่อไปนี้:

1. สร้างแอป

2. ตอนนี้เลือก "+ สร้างแอปทดสอบ" จากลูกศรแบบเลื่อนลง (บนซ้าย)

3. เพิ่มlocalhostใน App Domains

4. เพิ่มhttp://localhost:3000/ใน URL ของไซต์โดยเลือก "+ เพิ่มแพลตฟอร์ม"

จนถึงจุดนี้ฉันได้ติดตามคำตอบก่อนหน้านี้ทั้งหมดที่ส่งมาที่นี่ แต่ไม่มีอะไรได้ผล

ดังนั้น...

5. ในเมนูด้านซ้ายมือเลือก "เพิ่มผลิตภัณฑ์"

6. เพิ่ม "เข้าสู่ระบบ Facebook"

คุณจะเห็นภาพหมุนเวิร์กโฟลว์พร้อมโดเมนเริ่มต้นhttp://localhost:3000/ให้คลิก "ดำเนินการต่อ" จนจบ

7. เลือก "เข้าสู่ระบบ Facebook> การตั้งค่า" จากเมนูผลิตภัณฑ์

8. ป้อน URI การเปลี่ยนเส้นทาง OAuth ของ Firebase (พบเมื่อเปิดใช้งานการเข้าสู่ระบบ Facebook ในคอนโซล firebase ของคุณhttps://console.firebase.google.comตัวอย่างด้านล่าง)

9. วาง URI และบันทึก

เสร็จแล้ว

ลองใช้ url กับพอร์ตเช่น

    http://localhost:8000/

ฉันประสบปัญหาเดียวกันและพบวิธีแก้ปัญหานี้ในขณะนี้

สิ่งนี้ใช้ได้กับฉันใน heroku สิ่งที่ localhost ไม่ทำงาน (สำหรับฉัน) ฉันหวังว่ามันจะช่วยได้

1. ) ตรงกลางใต้ช่องตัวเลือกแรกคลิก "+ เพิ่มแพลตฟอร์ม" แล้วเลือก "เว็บไซต์" (หรืออะไรก็ได้ที่เหมาะสมกับแอปของคุณ)

2. ) ในช่องที่ปรากฏขึ้นสำหรับเว็บไซต์ที่คุณเพิ่งเพิ่ม: URL ของไซต์: http://MYAPP.herokuapp.com/ (แทนที่ MYAPP ด้วยชื่อแอปของคุณ)

3. ) ในช่องด้านบนนั้น (Settings => Basic): App Domain: MYAPP.herokuapp.com (แทนที่ MYAPP ด้วยชื่อแอปของคุณ)

4. ) ที่ด้านขวาล่าง - คลิก "บันทึกการเปลี่ยนแปลง"

เป็นเพียงบันทึกสำหรับคนอื่น ๆ ที่อาจกำลังดิ้นรนกับสิ่งนี้เหมือนที่ฉันเป็น ฉันไม่สามารถทำให้แอป "ทดสอบ" ทำงานได้ ใช้การตั้งค่าแอพจริงของฉัน (และเพิ่มไฟล์

"http://localhost:3000/"

ไปยัง URL ผ้าใบของฉัน) ทำงานตามที่คนอื่นแนะนำ ดูเหมือนว่าแอพทดสอบจะไม่เท่ากับแอพจริง

ฉันพบปัญหากับแอป Rails ของฉันที่มักจะใช้งานด้วยhttp: // localhost: 3000เนื่องจากตอนนี้ Facebook ต้องการการเปลี่ยนเส้นทาง OAuth ที่ถูกต้องเพื่อใช้ https

ในการใช้ https ในเครื่องฉันใช้ [ngrok] [1] ซึ่งช่วยให้คุณใช้ https โดยการจัดเตรียมอุโมงค์ เพื่อทำสิ่งนี้:

1. ฉันไปที่เว็บไซต์ของพวกเขาและดาวน์โหลดโปรแกรมของพวกเขา
2. ฉันแตกไฟล์สำหรับโปรแกรม
3. ในคอนโซลของฉันฉันเข้าไปในไดเร็กทอรีที่มีการแยก ngrok และป้อน 'grok http 3000' บนเครื่อง Windows ของฉันคนอื่นอาจใช้ "./grok http 3000 '
4. หลังจากป้อนแล้ว ngrok ให้ที่อยู่ https ซึ่งฉันใส่ลงในช่อง URI การเปลี่ยนเส้นทาง OAuth ที่ถูกต้องใน Facebook
5. จากนั้นฉันเริ่มต้นเซิร์ฟเวอร์และสามารถเข้าถึงได้โดยใช้ที่อยู่ https แทน localhost: 3000

ทำการทดสอบในพื้นที่ทั้งหมดที่คุณต้องทำคือปิดแอพหรือทำให้แอพ facebook อยู่ในโหมดการพัฒนา จากนั้น Facebook จะอนุญาตให้คุณคนเดียวเข้าถึงแอปได้

สำหรับฉันมันได้ผลเช่นนี้:

การกำหนดค่าแดชบอร์ดของแอพ Facebook:

* บนแท็บ 'พื้นฐาน':

1) ปล่อยให้โดเมนแอปว่างเปล่า

2) การลบแพลตฟอร์มใด ๆ ความหมาย: ไม่มีเว็บไซต์ไม่มีแพลตฟอร์มผ้าใบ (จึงไม่มีช่อง URL ไซต์ให้กรอก)

* บนแท็บ 'ขั้นสูง':

3) ฉันเข้าสู่ URI การเปลี่ยนเส้นทาง OAuth ที่ถูกต้อง:

http://localhost/myappfolder/redirect.php

4) เกี่ยวกับรหัสของฉัน insdie my c: /xampp/htdocs/localhost/myappfolder/index.php (ไฟล์นี้ทำให้ loginURL):

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

ภายในไฟล์ redirect.php:

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

และฉันมีเซสชั่น! ในที่สุด! ไม่จำเป็นต้องแขวนคอตัวเองในที่สุด: P