การเข้าสู่ระบบด้วย Facebook

การเข้าสู่ระบบ Facebook สำหรับอุปกรณ์

หากคุณกำลังมองหาความช่วยเหลือสำหรับ Facebook Portal โปรดไปที่ศูนย์ช่วยเหลือ Portal

หากต้องการป้อนโค้ด Facebook สำหรับอุปกรณ์เพื่อเข้าสู่ระบบสมาร์ททีวี กล้อง เครื่องพิมพ์ และอุปกรณ์อื่นๆ โปรดไปที่หน้า Facebook สำหรับอุปกรณ์

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

เมื่อเข้าสู่ระบบอุปกรณ์แล้ว อุปกรณ์ของคุณจะแสดงโค้ดเป็นตัวอักษรและตัวเลข และแจ้งให้ผู้ใช้ป้อนโค้ดบนเว็บเพจบนคอมพิวเตอร์เดสก์ท็อปหรือสมาร์ทโฟน จากนั้นผู้ที่ใช้แอพหรือบริการสามารถให้สิทธิ์การอนุญาตได้ หลังจากแอพพลิเคชั่นของคุณได้รับสิทธิ์การอนุญาตแล้ว อุปกรณ์จะได้รับโทเค็นการเข้าถึงที่แอพใช้สร้างคำขอ API กราฟเพื่อระบุตัวตนบุคคลและรับข้อมูลเพื่อนำมาใช้ปรับประสบการณ์ที่ได้รับจากอุปกรณ์ให้เป็นส่วนบุคคล

หากคุณกำลังสร้างแอพ TV สำหรับ Apple TV หรือ Android TV หรือ Fire TV คุณควรใช้ Facebook SDK สำหรับ tvOS หรือ Facebook SDK สำหรับ Android

คู่มือนี้จะอธิบายถึงการผสานการทำงานด้วยตัวเองในส่วนของการเข้าสู่ระบบอุปกรณ์ โดยไม่ต้องใช้ SDK ข้างต้น

ประสบการณ์ผู้ใช้

แนวทางนี้อธิบายวิธีออกแบบประสบการณ์การเข้าสู่ระบบที่ชัดเจน ปลอดภัย และสอดคล้องกันระหว่างอุปกรณ์และการบริการต่างๆ

1. การกระตุ้นให้ดำเนินการ

ก่อนอื่น ให้พิจารณาว่าคุณต้องการขอให้ผู้ใช้เข้าสู่ระบบหรือเชื่อมต่อกับ Facebook ในส่วนใดของประสบการณ์ผู้ใช้ อุปกรณ์บางอย่างจะแสดงการเข้าสู่ระบบทันที ส่วนบางอุปกรณ์อาจแสดงในภายหลัง

หากต้องการให้ประสบการณ์ผู้ใช้สามารถใช้ได้ดี สอดคล้อง และเชื่อถือได้มากที่สุด ให้ออกแบบปุ่มให้ดูเหมือนปุ่มเข้าสู่ระบบด้วย Facebook อย่างเป็นทางการมากที่สุด

หากมองในแง่มุมการออกแบบภาพ นั่นหมายความว่าคุณควร

  1. เขียนที่ปุ่มว่า "เข้าสู่ระบบด้วย Facebook" หรือ "เชื่อมต่อกับ Facebook"
  2. ใช้สีขาวและน้ำเงินที่เป็นสีอย่างเป็นทางการของ Facebook: #1877F2
  3. หากอุปกรณ์ของคุณรองรับการแสดงผลแบบกราฟิก คุณยังสามารถใส่โลโก้ "f" อย่างเป็นทางการได้อีกด้วย โลโก้ควรเป็นสีขาวและน้ำเงินของ Facebook (#1877F2) ตามแนวทางปฏิบัติเกี่ยวกับแบรนด์ของ Facebook

อธิบายถึงข้อดีของการเข้าสู่ระบบในจุดที่เกี่ยวข้อง ตัวอย่างเช่น "ดูว่าเพื่อนของคุณดูอะไรอยู่" หรือ "ดูภาพถ่ายจากอัลบั้ม Facebook ของคุณ"

2. แสดงโค้ด

เมื่อผู้ใช้คลิกปุ่มกระตุ้นให้ดำเนินการ อุปกรณ์ของคุณจะเรียก API ของ Facebook ซึ่งส่งโค้ดกลับมา

ในอินเทอร์เฟซ ให้แจ้งผู้ใช้ว่าต้องไปที่เว็บไซต์และกรอกโค้ดด้วยข้อความนี้ “ขั้นต่อไป ให้ไปที่ facebook.com/device (http://facebook.com/device) บนเดสก์ท็อปหรือสมาร์ทโฟน แล้วกรอกโค้ดนี้" แสดงโค้ดทั้งหมดที่คุณได้รับจาก API การเข้าสู่ระบบบนอุปกรณ์ของ Facebook โค้ดนี้จะมีความยาวอักขระ 6-12 ตัว

คุณสามารถใส่ปุ่ม Close หรือ Cancel เพื่อให้ผู้ใช้ยกเลิกลำดับขั้นตอนการเข้าสู่ระบบบนอุปกรณ์ ซึ่งผู้ใช้จะกลับไปที่หน้าจอแรกสำหรับการเข้าสู่ระบบ

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

ระบบอาจสร้างโค้ด QR พร้อมกับโค้ดผู้ใช้ที่ฝังอยู่ใน URL ซึ่งสามารถทำได้โดยการเพิ่มพารามิเตอร์ user_code ลงใน URL:

https://www.facebook.com/device?user_code=<USER_CODE>

3. การอนุญาต

โฟลว์นี้คือโฟลว์ที่ผู้ใช้เห็นเมื่อไปที่ facebook.com/device จากเบราว์เซอร์บนเดสก์ท็อปหรือมือถือ ในขั้นแรก ผู้ใช้จะเห็นฟิลด์สำหรับข้อความที่สามารถกรอกโค้ดของตน

หลังจากผู้ใช้กรอกโค้ดและคลิก Continue ก็จะสามารถเลือกสิทธิ์การอนุญาตที่ต้องการให้ดังนี้

ผู้ใช้จะทราบว่าลำดับขั้นตอนการเข้าสู่ระบบเสร็จสิ้น เมื่อเห็นข้อความยืนยัน

4. ยืนยันการเข้าสู่ระบบสำเร็จ

คุณควรแสดงข้อความยืนยันบนอินเทอร์เฟซของอุปกรณ์ ทางที่ดีต้องมีชื่อและรูปโปรไฟล์ Facebook ของบุคคลนั้นๆ ด้วย

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

หลังจากที่ผู้ใช้คลิก Continue อุปกรณ์ของคุณจะแสดงประสบการณ์ที่ดีที่ปรับให้เป็นส่วนบุคคลแก่ผู้ใช้

5. ออกจากระบบหรือเลิกเชื่อมต่อ

ผู้ใช้ควรสามารถออกจากระบบอุปกรณ์ของคุณ และอุปกรณ์ไม่ควรเก็บการเชื่อมต่อกับ Facebook หากต้องการดำเนินการดังกล่าว โปรดให้ตัวเลือก Log out from Facebook หรือ Disconnect from Facebook ในเมนูของอุปกรณ์ของคุณ

เมื่อผู้ใช้เลือกตัวเลือกนี้ อุปกรณ์ควรลบโทเค็นการเข้าถึงที่เก็บออกจากหน่วยความจำ หากเก็บโทเค็นการเข้าถึงในฐานข้อมูลหรือพื้นที่เก็บข้อมูลในคลาวด์ คุณก็สามารถลบที่นั่นได้ คุณไม่จำเป็นต้องเรียก API เพื่อเลิกใช้งานโทเค็นการเข้าถึง

หลังจากที่ผู้ใช้ออกจากระบบ อุปกรณ์ควรแสดงปุ่มกระตุ้นให้ดำเนินการขั้นแรกในขั้นตอนที่ 1

การใช้การเข้าสู่ระบบสำหรับอุปกรณ์

การเข้าสู่ระบบ Facebook สำหรับอุปกรณ์นั้นใช้กับอุปกรณ์ที่เรียก HTTP โดยตรงทางอินเทอร์เน็ต การเรียก API และการตอบสนองต่อไปนี้เป็นสิ่งที่อุปกรณ์สามารถทำได้

1. เปิดใช้การเข้าสู่ระบบสำหรับอุปกรณ์

โหลด “แดชบอร์ดของแอพ” และเปลี่ยน “ผลิตภัณฑ์” > “การเข้าสู่ระบบ Facebook” > “การตั้งค่า” > “เข้าสู่ระบบจากอุปกรณ์” ให้เป็น "ใช่"

2. สร้างโค้ด

เมื่อผู้ใช้คลิกการกระตุ้นให้ดำเนินการ Connect to Facebook หรือ Log in with Facebook อุปกรณ์ควรทำ HTTP POST เป็น:

POST https://graph.facebook.com/v2.6/device/login
       access_token=<YOUR_APP_ID|CLIENT_TOKEN>
       scope=<COMMA_SEPARATED_PERMISSION_NAMES> // e.g. public_profile,user_likes
       redirect_uri=<VALID_OAUTH_REDIRECT_URL>

พารามิเตอร์ scope เป็นตัวเลือก และต้องประกอบด้วยรายการสิทธิ์การอนุญาตเข้าสู่ระบบ ซึ่งมีจุลภาคคั่นและได้รับอนุมัติให้ใช้ในการตรวจสอบการเข้าสู่ระบบ

คุณจะพบ CLIENT_TOKEN ในการตั้งค่าแอพ -> ขั้นสูง และควรรวมกับ ID ของแอพของคุณ (คั่นด้วยเครื่องหมาย Pipe |) เพื่อทำให้เกิด access_token ที่สมบูรณ์

redirect_uri เป็นพารามิเตอร์ที่ไม่บังคับ เมื่อคุณให้ URL ผู้ใช้จะถูกเปลี่ยนเส้นทางไปยัง URL ดังกล่าวหลังจากที่เข้าสู่ระบบเรียบร้อยแล้ว ซึ่งทำให้คุณสามารถนำผู้ใช้ดังกล่าวเข้าสู่ระบบไปยังเว็บไซต์ของแอพของคุณเพื่อจัดการบัญชีผู้ใช้เพิ่มเติม URL นี้จะต้องมี URL นำทาง OAuth ที่ถูกต้องตามที่กำหนดค่าไว้ในการตั้งค่าแอพ -> ขั้นสูง การตอบสนองจะอยู่ในรูปแบบนี้:

{
  "code": "92a2b2e351f2b0b3503b2de251132f47",
  "user_code": "A1NWZ9",
  "verification_uri": "https://www.facebook.com/device",
  "expires_in": 420,
  "interval": 5
}

การตอบสนองนี้หมายถึง:

  1. แสดงสตริง “A1NWZ9” บนอุปกรณ์ของคุณ
  2. แจ้งให้ผู้ใช้ไปที่ “facebook.com/device” และกรอกโค้ดนี้
  3. โค้ดจะหมดอายุใน 420 วินาที คุณควรยกเลิกลำดับขั้นตอนการเข้าสู่ระบบหลังจากนั้น หากคุณไม่ได้รับโทเค็นการเข้าถึง
  4. อุปกรณ์ควรตรวจสอบสถานะ API การเข้าสู่ระบบบนอุปกรณ์ทุก 5 วินาทีเพื่อดูว่าการอนุญาตสำเร็จหรือไม่

3. แสดงโค้ด

อุปกรณ์ควรแสดง user_code และแจ้งให้ผู้ใช้ไปที่ verification_uri เช่น facebook.com/device บนเดสก์ท็อปหรือสมาร์ทโฟน ดู "ประสบการณ์ผู้ใช้"

4. การตรวจสอบสถานะการอนุญาต

อุปกรณ์ของคุณควรตรวจสอบสถานะ API การเข้าสู่ระบบบนอุปกรณ์เพื่อดูว่าการอนุญาตแอพของคุณสำเร็จหรือไม่ คุณควรดำเนินการนี้ในช่วง interval ในการตอบสนองการเรียกใน "ขั้นตอนที่ 1" ซึ่งเป็นช่วงทุก 5 วินาที อุปกรณ์ควรตรวจสอบสถานะกับ:

POST https://graph.facebook.com/v2.6/device/login_status
       access_token=<YOUR_APP_ID|CLIENT_TOKEN>
       code=<LONG_CODE_FROM_STEP_1> // e.g. "92a2b2e351f2b0b3503b2de251132f47"

การตอบสนองต่อการเรียก API นี้ขึ้นอยู่กับว่าผู้ใช้อยู่ในขั้นตอนการอนุญาตใด คุณจะได้รับโทเค็นการเข้าถึงหรืออ็อบเจ็กต์ข้อผิดพลาดที่มีโค้ดย่อยที่จะแยกวิเคราะห์ ดังนี้

โค้ดย่อยข้อผิดพลาด ตัวอย่างการตอบสนอง ความหมาย

N/A

{"access_token": "ABCD...", "expires_in" : 5183996 }

ผู้ใช้อนุญาตอุปกรณ์ได้สำเร็จ ขณะนี้อุปกรณ์สามารถใช้ค่า access_token เพื่อเรียก API ที่ยืนยันตัวตนแล้ว

1349174

{"error":{"message":"This request requires the user to take a pending action","code":31,"error_subcode":1349174,"error_user_title":"Device Login Authorization Pending","error_user_msg":"User has not yet authorized your application. Continue polling."}}

ผู้ใช้ยังไม่ได้อนุญาตแอพพลิเคชั่นของคุณ ตรวจสอบสถานะต่อไปตามอัตราที่ระบุในการตอบสนองใน ขั้นตอนที่ 1

1349172

{"error":{"message":"User request limit reached","code":17,"error_subcode":1349172,"error_user_title":"OAuth Device Excessive Polling","error_user_msg":"Your device is polling too frequently. Space your requests with a minium interval of 5 seconds."}}

อุปกรณ์ตรวจสอบสถานะบ่อยเกินไป ชะลอการตรวจสอบสถานะให้อยู่ในช่วงเวลาที่ระบุในการเรียก API แรก

1349152

{"error":{"message":"The session has expired""code":463,"error_subcode":1349152, "error_user_title":"Activation Code Expired","error_user_msg":"The code you entered has expired. Please go back to your device for a new code and try again."}}

โค้ดอุปกรณ์หมดอายุแล้ว ยกเลิกลำดับขั้นตอนการเข้าสู่ระบบของอุปกรณ์ และส่งผู้ใช้กลับไปยังหน้าจอแรก

5. ยืนยันการเข้าสู่ระบบสำเร็จ

เมื่อคุณได้รับโทเค็นการเข้าถึง แสดงว่าผู้ใช้อนุญาตแอพพลิเคชั่นเรียบร้อยแล้ว คุณควรยังคงใช้โทเค็นการเข้าถึงนี้ต่อไปบนอุปกรณ์

เพื่อให้ผู้ใช้ทราบว่าลำดับขั้นตอนการเข้าสู่ระบบสำเร็จ อุปกรณ์ของคุณควรแสดงชื่อผู้ใช้และรูปโปรไฟล์ (หากเป็นไปได้) จนกว่าผู้ใช้จะคลิก Continue เมื่อต้องการรับชื่อและรูปโปรไฟล์ของผู้ใช้ ควรใช้อุปกรณ์ของคุณเรียก API กราฟมาตรฐาน:

GET https://graph.facebook.com/v2.3/me?
      fields=name,picture&amp;
      access_token=<USER_ACCESS_TOKEN>

คุณจะได้รับการตอบสนองในรูปแบบนี้:

{
  "name": "John Doe", 
  "picture": {
    "data": {
      "is_silhouette": false, 
      "url": "https://fbcdn.akamaihd.net/hmac...ile.jpg"
    }
  }, 
  "id": "2023462875238472"
}

แสดงชื่อและรูปโปรไฟล์ของผู้ใช้ จนกว่าผู้ใช้จะคลิก Continue บนอุปกรณ์

6. จัดเก็บโทเค็นการเข้าถึง

อุปกรณ์ควรยังคงใช้โทเค็นการเข้าถึงต่อไปเพื่อสร้างคำขออื่นไปยัง API กราฟ

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

หากโทเค็นใช้งานไม่ได้ อุปกรณ์ของคุณควรลบโทเค็นดังกล่าวออกจากหน่วยความจำ ผู้ที่ใช้อุปกรณ์ควรทำลำดับขั้นตอนการเข้าสู่ระบบบนอุปกรณ์อีกครั้งจากขั้นตอนที่ 1 เพื่อรับโทเค็นใหม่ที่ใช้งานได้

การแก้ไขข้อผิดพลาด

ฉันจะสร้างคำขอโฟลว์บนอุปกรณ์ทาง HTTP ได้หรือไม่
OAuth 2 ต้องใช้ TLS/HTTPS

ฉันจะสร้างคำขอโฟลว์บนอุปกรณ์ด้วยเมธอด GET ได้หรือไม่
คำขอโฟลว์บนอุปกรณ์ทั้งหมดควรเป็นคำขอ POST

ฉันจะรีเฟรชโทเค็นการเข้าถึงการเข้าสู่ระบบอุปกรณ์ได้หรือไม่
โทเค็นการเข้าถึงการเข้าสู่ระบบบนอุปกรณ์อาจใช้งานได้ไม่เกิน 60 วัน

หากโทเค็นใช้งานไม่ได้ อุปกรณ์ของคุณควรลบโทเค็นดังกล่าวออกจากหน่วยความจำ ผู้ที่ใช้อุปกรณ์ควรทำลำดับขั้นตอนการเข้าสู่ระบบบนอุปกรณ์อีกครั้งตามที่ระบุในขั้นตอนที่ 1 เพื่อรับโทเค็นใหม่ที่ใช้งานได้

ดูข้อมูลเพิ่มเติมเกี่ยวกับการรีเฟรชโทเค็นได้ใน "โทเค็นการเข้าถึง"

ฉันได้รับข้อผิดพลาด Invalid API method เมื่อสร้างคำขอ POST เป็นเพราะเหตุใด
หากคุณสร้างคำขอ POST และได้รับข้อผิดพลาดลักษณะนี้:

{"error":{"message":"Invalid API method","type":"OAuthException","code":3}}

คุณอาจต้องเปิดใช้งานการเข้าสู่ระบบจากอุปกรณ์ในแอพของคุณ

โหลด “แดชบอร์ดของแอพ” และตั้งค่า “ผลิตภัณฑ์” > “การเข้าสู่ระบบ Facebook” > “การตั้งค่า” > “เข้าสู่ระบบจากอุปกรณ์” ให้เป็น "ใช่"

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