ชื่อโดเมนของแอพ Facebook เมื่อใช้ localhost

จากบทแนะนำที่นี่:
http://ankurm.com/blog/api/using-localhost-for-facebook-app-development/1091/

ฉันพยายามตั้งค่า Local development Area สำหรับแอพ Facebook ของฉัน แต่เมื่อฉันใส่ " http: // localhost: 85 / my_app / " เป็นชื่อโดเมนของฉัน Facebook บอกว่า

App Domains: " http: // localhost: 85 / app-name / " ไม่ควรมีข้อมูลโปรโตคอล

นอกจากนี้เมื่อฉันใส่ "localhost: 85 / my_app /" เป็นชื่อโดเมนของฉันฉันได้รับข้อผิดพลาด:

App Domains: localhost: 85 / my_app / ไม่ใช่โดเมนที่ถูกต้อง

วิธีแก้ปัญหาของฉัน:

1. ปล่อยให้ App Domains ว่างไว้
2. (ผลิตภัณฑ์) เข้าสู่ระบบ Facebook> การตั้งค่า
3. เพิ่ม http://localhost:85/my_app/ในValid OAuth redirect URIsกล่อง
4. บันทึกการเปลี่ยนแปลง

ดูเหมือนว่าโปรโตคอลจะถูกเปลี่ยนไป

นี่คือวิธีแก้ปัญหาของฉัน (ฉันทดสอบเมื่อวันที่ 3 เมษายน 2015 และใช้งานได้ดี):

ในการตั้งค่า -> แท็บพื้นฐาน

1. โดเมนของแอป: localhost
2. คลิก " + เพิ่มแพลตฟอร์ม " และเลือก " เว็บไซต์ "
3. URL ของไซต์: http: // localhost: <port> / ( <port>คือหมายเลขพอร์ตของคุณ)
4. บันทึกการเปลี่ยนแปลง

1. ปล่อยให้ App Domains ว่างไว้
2. ไปที่เว็บไซต์ด้วยการเข้าสู่ระบบ Facebook
3. เพิ่ม http://localhost:port_number/
4. บันทึกการเปลี่ยนแปลงแล้วลองอีกครั้ง ดูข้อมูลเพิ่มเติมได้ที่

http://developers.facebook.com/docs/samples/canvas/ Happy coding :-)

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

1. ไปที่https://developers.facebook.com/apps
2. เลือกแอปของคุณ
3. เลือกการตั้งค่า> พื้นฐานจากแถบนำทางด้านซ้ายมือ
4. คลิกปุ่มเพิ่มแพลตฟอร์มที่ด้านล่างของหน้า
5. คลิกเว็บไซต์
6. ป้อนhttp://localhost:8080/URL ของไซต์
7. คลิกปุ่มเริ่มต้นอย่างรวดเร็วทางด้านขวาสุดของ URL ไซต์ที่คุณเพิ่งป้อน
8. แท็บใหม่จะเปิดขึ้น บนแท็บนั้นให้เลื่อนลงไปที่ส่วน "แจ้งให้เราทราบเกี่ยวกับเว็บไซต์ของคุณ" และป้อนhttp://localhost:8080/URL ของไซต์อีกครั้ง
9. คลิกปุ่มถัดไป
10. พยายามเข้าสู่ระบบอีกครั้งและได้ผลในครั้งนี้

โชคดี!

โซลูชันการทำงานปี 2018

ฉันใช้เวลานานกว่าจะคิดออกดังนั้นฉันจะแบ่งปันวิธีแก้ปัญหาของฉัน

ฉันลองใช้คำตอบที่แนะนำทั้งหมด แต่ไม่มีอะไรได้ผลสำหรับฉันและในที่สุดสิ่งที่ฉันต้องทำก็คือไปที่https://developers.facebook.com/apps/YOUR_APP_ID/fb-login/settings/และเพิ่มของฉัน URL เรียกกลับแบบเต็มในURI การเปลี่ยนเส้นทาง OAuth ที่ถูกต้องช่อง

ในกรณีของฉันโดยใช้ Ruby on Rails, URL http://localhost:3000/user/auth/facebook/callbackของฉันมองเช่นนี้

และทันทีที่ฉันเพิ่มมันทุกอย่างก็เริ่มทำงาน! หวังว่านี่จะช่วยคนอื่นที่ประสบปัญหานี้

นี่คือสิ่งที่ฉันเคยทำ

หากคุณใช้ Windows คุณต้องแก้ไขไฟล์โฮสต์ ตำแหน่งไฟล์โฮสต์จะอยู่ที่%SystemRoot%\System32\drivers\etc\

เพิ่มบรรทัดใหม่ในไฟล์โฮสต์เช่นนี้

127.0.0.1    localhost.YOUR-SITE-NAME.com

บันทึกไฟล์โฮสต์

ไปที่แผงควบคุมการตั้งค่าแอพ FB และให้localhost.YOUR-SITE-NAME.comในฟิลด์โดเมนแอพ บันทึกการเปลี่ยนแปลง.

ตอนนี้โหลดสภาพแวดล้อมในท้องถิ่นเช่นlocalhost.YOUR-SITE-NAME.comจากเบราว์เซอร์ของคุณ

หมายเหตุ: เปลี่ยนชื่อเว็บไซต์ของคุณด้วยชื่อโดเมนของคุณ

โซลูชันการทำงาน (สิงหาคม 2018)

ขั้นแรกให้เลือกแอปของคุณในแดชบอร์ดนักพัฒนา

จากนั้นตรวจสอบให้แน่ใจว่าแอปของคุณอยู่ในโหมดการพัฒนาเนื่องจากอนุญาตให้ localhost ผ่าน HTTP โดยคลิกที่ปุ่มสลับที่อยู่ด้านขวาบนของหน้าแอปของคุณ

สุดท้ายโปรดปฏิบัติตามหมายเหตุด้านล่างเนื่องจากอาจทำให้เกิดปัญหาได้หากกรอกข้อมูลไม่ถูกต้อง:

• Settings > Basic > App Domains ควรว่างเปล่า
• Products > Facebook Login > Settings > Valid OAuth Redirect URIs ควรว่างเปล่า

คุณสามารถปล่อยให้มันว่างเปล่าหรือการใช้งานlocalhost, http://localhost:85/my_app/คือ URL

เมื่อฉันเขียนบทช่วยสอนนั้นในเวลานั้นพอร์ตได้รับอนุญาตในโดเมนแอป และฉันสามารถรันแอพด้วย 81 พอร์ต (เซิร์ฟเวอร์ wamp) ได้ ตอนนี้ดูเหมือนว่า facebook ไม่อนุญาตให้ใช้ port ใน url คุณสามารถใช้localhostในโดเมนแอป

ฉันจะอัปเดตข้อมูลโดยเร็วที่สุด ฉันกำลังพยายามหาวิธีแก้ปัญหา

วิธีแก้ปัญหาชั่วคราวคือใช้ localtunnel http://progrium.com/localtunnel/

ฉันทดสอบแล้วและใช้ได้ผลสำหรับฉัน [กุมภาพันธ์ 2020]:

1. ติดตั้ง ngrok และรับ https url ของคุณ (ตัวอย่าง: https://a3asdf23.ngrok.io )
2. ไปที่การตั้งค่าแผงควบคุม FB App (ขั้นพื้นฐาน) -> ภายใต้โดเมน App -> เพิ่ม,https://a3asdf23.ngrok.iohttps://ngrok.io
3. ในหน้าเดียวกันทั้งหมดเลื่อนลงวิธีการเพิ่มแพลตฟอร์ม (เว็บไซต์) ตั้งค่า URL https://a3asdf23.ngrok.ioเป็น ไม่จบเลยคลิก QuickStart -> ใต้ "บอกเราเกี่ยวกับเว็บไซต์ของคุณ" ใส่ https://a3asdf23.ngrok.ioURL
4. จากนั้นไปที่ผลิตภัณฑ์ -> Facebook เข้าสู่ระบบ -> Settings -> การตั้งค่าไคลเอ็นต์ OAuth -> ที่ถูกต้อง OAuth เปลี่ยนเส้นทางยูริ -> เพิ่มเหล่านี้https://a3asdf23.ngrok.io, ,https://ngrok.iohttps://a3asdf23.ngrok.io/{your-redirect-uri}

และนี่คุณไป ขอบคุณฉันในภายหลัง :)

คุณต้องสร้างอุโมงค์เพื่อแชร์ localhost ของคุณ เงาะเป็นวิธีที่ง่ายที่สุดในการทำเช่นนั้น

https://ngrok.com

ไปที่ลิงก์https://ngrok.com/เพื่อดาวน์โหลด ngrok และแตกไฟล์นั้น เปิด cmd (ค้นหา cmd) ไปที่ไดเร็กทอรีที่แตก ngrok เปิด ngrok จากบรรทัดคำสั่งเช่น c: /ngrok/ngrok.exe [port] หรือ cd c: / ngrok จากนั้น ngrok 80 (ngrok [port]) คุณจะได้รับ

เง็ก

Tunnel Status                 online
Version                       1.3/1.3
Forwarding                    http://3ahsdfhska.ngrok.com -> 127.0.0.1:80
Forwarding                    https://3ahsdfhska.ngrok.com -> 127.0.0.1:80
Web Interface                 http://127.0.0.1:4040
# Conn                        0
Avg Conn Time                 0.00ms

อย่าลืมตรวจสอบให้แน่ใจว่าเซิร์ฟเวอร์ wamp ของคุณเปิดอยู่บนพอร์ตเดียวกัน ... (วิธีตรวจสอบ -> goto-> wampicon-> apache-> httpd.conf ค้นหาพอร์ตหรือ 80 (ค่าเริ่มต้น) ใช้สำหรับ ngrok.exe 80)

http://3ahsdfhska.ngrok.com

จะเป็น URL สำหรับเข้าถึง localhost ของคุณทางออนไลน์

ฉันลองวิธีแก้ปัญหาทั้งหมดที่กล่าวถึงที่นี่ แต่ไม่มีวิธีใดได้ผล

สิ่งที่ช่วยแก้ปัญหาของฉันคือการคัดลอก "URI การเปลี่ยนเส้นทาง OAuth" จาก firebase ไปยังแอป facebook "URI การเปลี่ยนเส้นทาง OAuth ที่ถูกต้อง"

ฉันปล่อยโดเมนทั้งหมดว่างไว้

หากคุณได้รับข้อผิดพลาดของโปรโตคอลคุณไม่เพียง แต่ต้องลบ Http: // เท่านั้น แต่หากมีแบ็กสแลชที่ท้ายที่อยู่เว็บคุณต้องลบออกด้วยไม่เช่นนั้นจะไม่ได้ผล ฉันทำสิ่งนี้แล้วและมันก็ทำงานได้อย่างสมบูรณ์แบบ! ฮอล!

โยนอีกหนึ่งวิธีในการผสม:

ฉันตั้งค่าเว็บไซต์ตามคำแนะนำจากนั้นเพิ่มแอพที่สอง (Facebook Canvas) และตั้งค่า URL http://localhost:XXXXXนั้นเป็น ตอนนี้ฉันสามารถเข้าถึง FB ได้ทั้งในประเทศและในการผลิต

ฉันพัฒนาในพื้นที่และฉันใช้ URL นี้: localhost/fb

จากนั้นฉันต้องเพิ่มเว็บไซต์ด้วย URL ต่อไปนี้: http://localhost

ภายใต้App โดเมนlocalhostฉันเพิ่ม

ตอนนี้ใช้งานได้แล้ว ปัญหาเดียวที่ฉันพบคือคุณต้องใช้ URL นี้ในสคริปต์ทั้งหมดของคุณ เช่น

$loginUrl = $helper->getLoginUrl('http://localhost/fb/login-callback.php', $permissions);

คุณใช้127.0.0.1ที่นี่ไม่ได้...