ใช้งานแอปพลิเคชัน Facebook บน localhost

ฉันกำลังวางแผนที่จะเชื่อมต่อกับแชท Facebook จาก localhost ของฉัน ฉันจะต้องได้รับรหัสเซสชันจาก Facebook เมื่อฉันให้ URL ของไซต์เป็นlocalhost:8080หรือip-address:8080ไม่ได้ผล

ฉันอ่านเกี่ยวกับการตั้งค่าแอพสองตัวที่มีคีย์ API 2 อันที่แตกต่างกันอันหนึ่งทำงานบน dev m / c และอื่น ๆ บน localhost แต่ฉันไม่ค่อยเข้าใจ

ใครช่วยอธิบายวิธีเรียกใช้แอพ Facebook บน localhost ได้ไหม

ฉันเขียนบทช่วยสอนเกี่ยวกับเรื่องนี้เมื่อไม่นานมานี้

จุดที่สำคัญที่สุดคือ "URL ของไซต์":

URL ของไซต์: http: // localhost / app_name /

โดยที่โครงสร้างโฟลเดอร์เป็นดังนี้:

app_name
¦   index.php
¦
+---canvas
¦   ¦   index.php
¦   ¦
¦   +---css
¦           main.css
¦           reset.css
¦
+---src
        facebook.php
        fb_ca_chain_bundle.crt

แก้ไข:
Kavya : เซิร์ฟเวอร์ FB รู้จัก localhost ของฉันได้อย่างไรแม้ว่าจะไม่มี IP หรือพอร์ต ??

ฉันไม่คิดว่าสิ่งนี้จะเกี่ยวข้องกับ Facebook ฉันเดาว่าเนื่องจากsrcพารามิเตอร์iframe ถูกโหลดจากฝั่งไคลเอ็นต์มันจะปฏิบัติต่อ URL ในเครื่องของคุณราวกับว่าคุณวางไว้บนเบราว์เซอร์โดยตรง

ตัวอย่างเช่นมีไฟล์บนเซิร์ฟเวอร์ออนไลน์ของคุณที่มีเนื้อหา (เช่นonline.php):

<iframe src="http://localhost/test.php" width="100%" height="100%">
    <p>Not supported!</p>
</iframe>

และบนไดเร็กทอรี root localhost ของคุณมีไฟล์test.php:

<?php echo "Hello from Localhost!"; ?>

เยี่ยมชมตอนนี้http://your_domain.com/online.phpคุณจะเห็นเนื้อหาของไฟล์ localhost ของคุณ!

นี่คือสาเหตุที่การสมัครสมาชิกแบบเรียลไทม์และยกเลิกการอนุญาตการโทรกลับ (เพียงแค่พูดถึง) จะไม่ทำงานกับ URL ของ localhost! เนื่องจาก Facebook จะ ping (ส่งคำขอ http) ไปยัง URL เหล่านี้ แต่แน่นอนว่าเซิร์ฟเวอร์ของ Facebook จะไม่แปล URL เหล่านั้นเป็นของคุณ!

ถ้าคุณใช้ localhost:

ใน Facebook -> Settings -> Basic ในช่อง "App Domains" เขียน "localhost" จากนั้นคลิกเพื่อ "+ Add Platform" เลือก "Web Site"

มันจะสร้างฟิลด์สองฟิลด์ "Mobile Site URL" และ "Site URL" ใน "Site URL" เขียนอีกครั้ง "localhost"

เหมาะกับฉัน

คุณยังสามารถแก้ไขไฟล์ "โฮสต์" และสร้างรูปแบบท้องถิ่นของโดเมนของคุณ

ตัวอย่าง

หากที่อยู่แอปพลิเคชัน facebook จริงของคุณคือ "example.com" คุณสามารถสร้างโดเมน "localhost.example.com" (เข้าถึงได้จากพีซีของคุณเท่านั้น) ในไฟล์ "โฮสต์" ที่ชี้ไปที่ "localhost" และเรียกใช้เว็บไซต์ในพื้นที่ของคุณภายใต้โดเมนนี้ คุณสามารถหลอก Facebook ด้วยวิธีนี้

ในการตั้งค่าพื้นฐานของแอปของคุณ ( https://developers.facebook.com/apps ) ภายใต้การตั้งค่า -> พื้นฐาน -> เลือกว่าแอปของคุณทำงานร่วมกับ Facebook อย่างไร ...

ใช้ "URL ของไซต์:" และ "URL ของไซต์บนอุปกรณ์เคลื่อนที่:" เพื่อเก็บ URL การผลิตและการพัฒนาของคุณ ทั้งสองไซต์จะได้รับอนุญาตให้ตรวจสอบสิทธิ์ ฉันแค่ใช้ Facebook ในการตรวจสอบสิทธิ์ดังนั้นฉันจึงไม่ต้องการคุณสมบัติการเปลี่ยนเส้นทางไซต์บนมือถือใด ๆ โดยปกติฉันจะเปลี่ยน "URL ของไซต์บนอุปกรณ์เคลื่อนที่:" เป็นไซต์ "localhost: 12345" ของฉันในขณะที่ฉันกำลังทดสอบการตรวจสอบสิทธิ์จากนั้นตั้งค่ากลับเป็นปกติเมื่อดำเนินการเสร็จสิ้น

2013 สิงหาคม. Facebook ไม่อนุญาตให้ตั้งค่าโดเมนด้วยพอร์ตสำหรับแอปเช่น "localhost: 3000"

ดังนั้นคุณสามารถใช้https://pagekite.netเพื่อเจาะลึกlocalhost:portโดเมนที่เหมาะสมได้

นักพัฒนา Rails สามารถใช้http://progrium.com/localtunnel/ได้ฟรี

• Facebook อนุญาตให้มีเพียงโดเมนเดียวสำหรับแอปในเวลานั้น หากคุณพยายามเพิ่มอีกรายการหนึ่งเป็น localhost จะแสดงข้อผิดพลาดบางอย่างเกี่ยวกับโดเมน อย่าลืมใช้โดเมนเดียวสำหรับการโทรกลับและสำหรับการตั้งค่าโดเมนของแอปในเวลานั้น

วันนี้ผมจึงใช้งานได้ URL ของฉันคือhttp://localhost:8888. โดเมนที่ฉันให้ facebook คือ localhost ฉันคิดว่ามันใช้ไม่ได้เพราะฉันพยายามดึงข้อมูลโดยใช้FB.apiวิธี ฉันยังคงได้รับชื่อและรูปภาพที่ "ไม่ได้กำหนด" โดยไม่มีแหล่งที่มาดังนั้นจึงไม่มีสิทธิ์เข้าถึงกราฟ

ต่อมาผมตระหนักว่าปัญหาของฉันเป็นจริงที่ฉันเป็นเพียงคนเดียวที่ผ่านอาร์กิวเมนต์แรกของ/meการFB.apiและฉันไม่ได้มีสัญลักษณ์ ดังนั้นคุณจะต้องใช้FB.getLoginStatusฟังก์ชันเพื่อรับโทเค็นซึ่งควรจะเพิ่มใน/meอาร์กิวเมนต์

เพียงแค่ระบุ URL ผ้าใบของคุณเป็นhttp: // localhost / app_path

โอเคฉันไม่แน่ใจว่าคำตอบเหล่านี้เป็นอย่างไร แต่ฉันจะแจ้งให้คุณทราบว่าอะไรได้ผลสำหรับฉันตามคำแนะนำของนักพัฒนาอาวุโสที่ทำงาน ฉันทำงานใน Ruby on Rails และใช้รหัส JavaScript ของ Facebook เพื่อรับโทเค็นการเข้าถึง

ปัญหา: ในการตรวจสอบสิทธิ์ Facebook จะนำ url จากแถบที่อยู่ของคุณและเปรียบเทียบกับสิ่งที่มีอยู่ในไฟล์ พวกเขาไม่อนุญาตให้คุณใช้localhost:3000ด้วยเหตุผลใดก็ตาม อย่างไรก็ตามคุณสามารถใช้ชื่อโดเมนที่สร้างขึ้นอย่างสมบูรณ์เช่นการyoursite.devเรียกใช้เซิร์ฟเวอร์ภายในและชี้yoursite.devไปที่127.0.0.1:3000หรือที่ใดก็ตามที่โฮสต์ในเครื่องของคุณชี้ไป

ขั้นตอนที่ 1 : ติดตั้งหรืออัปเดต Nginx

$ brew install nginx(ติดตั้ง) หรือ$ brew upgrade nginx(อัพเดต)

ขั้นตอนที่ 2 : เปิดไฟล์กำหนดค่า nginx ของคุณ

/usr/local/etc/nginx/nginx.conf (ปกติที่นี่)

/opt/boxen/config/nginx/nginx.conf(ถ้าคุณใช้ Boxen)

ขั้นตอนที่ 3เพิ่มรหัสนี้ลงในhttp {}บล็อกของคุณ

แทนที่proxy_passด้วยทุกที่ที่คุณต้องการชี้yoursite.devไป ในกรณีของฉันมันกำลังแทนที่ localhost: 3000 หรือเทียบเท่า127.0.0.1:3000

server {
  listen       yoursite.dev:80;
  server_name  yoursite.dev;
  location / {
    proxy_pass http://127.0.0.1:3000;
  }
}

ขั้นตอนที่ 4 : แก้ไขไฟล์โฮสต์ของคุณใน/etc/hostsMac เพื่อรวม

127.0.0.1   yoursite.dev

ไฟล์นี้นำโดเมนไปยัง localhost Nginx ฟังใน localhost และเปลี่ยนเส้นทางหากตรงกับกฎ

ขั้นตอนที่ 5 : ทุกครั้งที่คุณใช้สภาพแวดล้อมการพัฒนาของคุณในอนาคตคุณจะใช้yoursite.devในแถบที่อยู่แทนที่จะใช้localhost:3000เพื่อให้ Facebook เข้าสู่ระบบคุณอย่างถูกต้อง

Forward เป็นเครื่องมือที่ยอดเยี่ยมในการช่วยพัฒนาแอพ facebook ในเครื่องรองรับ SSL ดังนั้นสิ่งที่ได้รับการรับรองจึงไม่ใช่ปัญหา

https://forwardhq.com/in-use/facebook

การปฏิเสธความรับผิด: ฉันเป็นหนึ่งในผู้พัฒนา

คุณต้องตั้งค่าแอปให้ทำงานบน https สำหรับ localhost

คุณสามารถทำตามขั้นตอนที่ระบุในนี้เพื่อตั้งค่า HTTPS บน Ubuntu

https://www.digitalocean.com/community/articles/how-to-create-a-ssl-certificate-on-apache-for-ubuntu-12-04

คุณต้องทำตามขั้นตอนต่อไปนี้:

ติดตั้ง apache (ถ้าคุณไม่มี)

sudo apt-get install apache2

ขั้นตอนที่หนึ่ง - เปิดใช้งานโมดูล SSL

sudo a2enmod ssl
sudo service apache2 restart

ขั้นตอนที่สอง - สร้างไดเรกทอรีใหม่

sudo mkdir /etc/apache2/ssl

ขั้นตอนที่สาม - สร้างใบรับรอง SSL ที่ลงนามด้วยตนเอง

sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/apache/ssl/apache.key -out /etc/apache2/ssl/apache.crt

ด้วยคำสั่งนี้เราจะสร้างทั้งใบรับรอง SSL ที่ลงชื่อด้วยตนเองและรหัสเซิร์ฟเวอร์ที่ป้องกันและวางทั้งสองไว้ในไดเร็กทอรีใหม่ บรรทัดที่สำคัญที่สุดคือ "ชื่อสามัญ" ป้อนชื่อโดเมนอย่างเป็นทางการของคุณที่นี่หรือหากคุณยังไม่มีที่อยู่ IP ของไซต์ของคุณ

ชื่อสามัญ (เช่นเซิร์ฟเวอร์ FQDN หรือชื่อของคุณ) []: example.com หรือ localhost

ขั้นตอนที่สี่ - ตั้งค่าใบรับรอง

sudo vim /etc/apache2/sites-available/default-ssl

ค้นหาบรรทัดต่อไปนี้และแก้ไขด้วยการตั้งค่าของคุณ

ServerName localhost หรือ example.com

SSLEngine บน SSLCertificateFile /etc/apache2/ssl/apache.crt

SSLCertificateKeyFile /etc/apache2/ssl/apache.key

ขั้นตอนที่ห้า - เปิดใช้งานโฮสต์เสมือนใหม่

sudo a2ensite default-ssl
sudo service apache2 reload

เคล็ดลับ:

ใช้MAMPPROและสร้าง: ชื่อเซิร์ฟเวอร์: ที่อยู่ที่แน่นอนของเว็บไซต์ของคุณ (เช่น helloworld.com) ไปยังไซต์ของคุณบนดิสก์ของคุณ

บน Facebook: ดังนั้นคุณจึงสามารถเก็บ URL ของเว็บไซต์เดิมไว้ได้เช่นกัน (เช่น helloworld.com)

ตอนนี้คุณเข้าใจแล้วว่าเมื่อคุณพิมพ์เว็บไซต์ของคุณบนแถบที่อยู่คุณอยู่ในท้องถิ่น ! .. และเมื่อคุณต้องการออนไลน์เพียงปิดการใช้งานเซิร์ฟเวอร์บน MAMP PRO ..

:)

คำตอบข้างต้นไม่ได้ผลสำหรับฉัน ฉันใช้ FB API 2.5 เหมืองเป็นการรวมกันของปัญหาที่นำไปสู่ความสำเร็จเมื่อได้รับการแก้ไข

1. สร้างแอปทดสอบเพื่อให้แน่ใจว่าได้รับการดูแลและจัดการเช่นนี้และสามารถปิดใช้งานได้เมื่อเผยแพร่จริง
2. อ่านข้อความแสดงข้อผิดพลาดอย่างถูกต้อง :) - ฉันต้องเปิดใช้งาน "Web OAuth Login" ด้วย "Client OAuth Login"
3. ใช้https://www.whatismyip.com/เพื่อค้นหาว่า IP ปัจจุบันของฉันคืออะไร
4. สร้างบันทึกบนโดเมนของฉันเช่น http://localhost.mydomain.comที่ชี้ไปที่ IP ปัจจุบันของฉัน

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

ในกรณีของฉันปัญหาที่เปิดเผยว่า Chrome บล็อกคำขอ CORS จาก localhost: 4200 ไปยังเว็บไซต์ facebook api การเรียกใช้ Chrome ด้วยการตั้งค่านี้: "YOUR_PATH_TO_CHROME \ Google \ Chrome \ Application \ chrome.exe" --disable-web-security --user-data-dir = "c: / chrome ทำงานได้อย่างมีเสน่ห์ในขณะที่พัฒนาแม้ว่าจะไม่มี localhost เพิ่มในการตั้งค่าของแอพ facebook