การเข้าสู่ระบบสำหรับเกมบน Facebook

The Web Games on Facebook and Facebook Gameroom platforms are no longer available for new submissions. This documentation is intended solely for developers with existing games. To learn more, read our blog post.

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

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

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

แหล่งที่มาของการตรวจสอบ

มีวิธีจำนวนมากที่ผู้เล่นสามารถยืนยันตัวตนในครั้งแรก และมีหลายวิธีในการตรวจสอบยืนยันข้อมูลระบุตัวตนหลังจากการยืนยันตัวตนครั้งแรก

การตรวจสอบศูนย์รวมแอพ

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

ปุ่มเล่นทันทีในศูนย์รวมแอพ

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

ดูรายละเอียดเพิ่มเติมที่คำแนะนำเกี่ยวกับคำแนะนำเกี่ยวกับศูนย์รวมแอพ

การตรวจสอบบนแพลตฟอร์มอื่น

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

การตรวจจับสถานะการเข้าสู่ระบบ

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

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

ฝั่งเครื่องผู้รับบริการ โดยใช้วิธีการ FB.getLoginStatus()
ฝั่งเซิร์ฟเวอร์ โดยการถอดรหัส signed_request

การใช้ Facebook SDK สำหรับ JavaScript

โดยการเรียก FB.getLoginStatus() เมื่อโหลดเอกสาร คุณสามารถมั่นใจได้ว่าผู้เล่นจะมีการเข้าสู่ระบบโดยทันทีเมื่อโหลดเกม จากนั้น คุณสามารถใช้ FB.api() เพื่อเข้าถึงเกมของผู้เล่นผ่าน ID ผู้ใช้ และเพื่อเรียกคืนข้อมูลที่ใช้สำหรับการปรับให้เข้ากับบุคคล เช่น ชื่อผู้เล่น รูปโปรไฟล์ และรายชื่อเพื่อน

FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
    // the user is logged in and has authenticated your
    // app, and response.authResponse supplies
    // the user's ID, a valid access token, a signed
    // request, and the time the access token 
    // and signed request each expire
    var uid = response.authResponse.userID;
    var accessToken = response.authResponse.accessToken;
  } else if (response.status === 'not_authorized') {
    // the user is logged in to Facebook, 
    // but has not authenticated your app
  } else {
    // the user isn't logged in to Facebook.
  }
 });

หากผู้เล่นไม่ได้เข้าสู่ระบบ คุณสามารถเรียก FB.login(...) เพื่อแสดงเวอร์ชั่นเสริมของกล่องการเข้าสู่ระบบที่ด้านบนของหน้าจอเริ่มต้นของเกมของคุณ การเรียกกลับของข้อความโต้ตอบนี้ควรเป็นวิธีการเรียกเดียวกับที่คุณใช้เมื่อเรียก FB.getLoginStatus

การใช้คำขอที่ลงชื่อ

เมื่อมีการโหลดเกมของคุณบน Facebook.com ระบบจะส่งคำขอ HTTP POST ไปยัง URL ของเว็บเกมบน Facebook ที่คุณระบุไว้ คำขอ POST นี้จะมีพารามิเตอร์บางอย่าง เช่น พารามิเตอร์ signed_request ที่คุณสามารถใช้ในการตรวจสอบ

signed_request คือ base64url ที่เข้ารหัสและลงชื่อด้วยเวอร์ชั่น HMAC ของข้อมูลลับของแอพที่ยึดตามข้อมูลจำเพาะ OAuth 2.0

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

แยกคำขอที่ลงชื่อเป็นสองส่วนด้วยเครื่องหมาย '.' (เช่น 238fsdfsd.oijdoifjsidf899)
ถอดรหัสส่วนแรก ซึ่งได้แก่ลายเซ็นที่เข้ารหัสจาก base64url
ถอดรหัสส่วนที่สอง ซึ่งได้แก่ข้อมูลเพย์โหลดจาก base64url และจากนั้นถอดรหัสอ็อบเจ็กต์ JSON ที่เป็นผลที่ตามมา

ขั้นตอนเหล่านี้สามารถใช้ได้ในภาษาการเขียนโปรแกรมแบบสมัยใหม่ ด้านล่างนี้คือตัวอย่างใน PHP

function parse_signed_request($signed_request) {
  list($encoded_sig, $payload) = explode('.', $signed_request, 2); 

  $secret = "appsecret"; // Use your app secret here

  // decode the data
  $sig = base64_url_decode($encoded_sig);
  $data = json_decode(base64_url_decode($payload), true);

  // confirm the signature
  $expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
  if ($sig !== $expected_sig) {
    error_log('Bad Signed JSON signature!');
    return null;
  }

  return $data;
}

function base64_url_decode($input) {
  return base64_decode(strtr($input, '-_', '+/'));
}

การกระทำนี้จะสร้างอ็อบเจ็กต์ JSON ที่มีลักษณะเช่นนี้

{
   "oauth_token": "{user-access-token}",
   "algorithm": "HMAC-SHA256",
   "expires": 1291840400,
   "issued_at": 1291836800,
   "user_id": "218471"
}

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

การตรวจสอบครั้งแรก

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

Happy Acres ซึ่งใช้พื้นหลังที่กำหนดเองในการเข้าสู่ระบบ

การเข้าสู่ระบบฝั่งเครื่องผู้รับบริการผ่าน JS SDK

เวอร์ชั่น JavaScript ของกล่องการเข้าสู่ระบบซึ่งไม่ซ้ำกับเกมใดๆ บน Facebook จะได้รับการเรียกในโหมด async ภายใน iframe ซึ่งหมายความว่าจะปรากฏเป็นป๊อปอัพเสริมเหนือส่วนที่เหลือของเนื้อหาเกม มากกว่าที่จะเป็นหน้าต่างเบราว์เซอร์ป๊อปอัพที่แยกต่างหาก

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

เป็นผลให้คุณสามารถใช้ FB.getLoginStatus() ในการตรวจสอบว่าผู้เล่นปัจจุบันของคุณมีการตรวจสอบเกมของคุณก่อนหรือไม่ และหากไม่ ระบบจะแสดงกล่องการเข้าสู่ระบบที่ด้านบนของเนื้อหาเกมของคุณทันทีโดยการเรียก FB.login() โดยไม่ต้องแสดงปุ่ม 'เข้าสู่ระบบ'

ดูตัวอย่างที่ด้านล่าง

// Place following code after FB.init call.

function onLogin(response) {
  if (response.status == 'connected') {
    FB.api('/me?fields=first_name', function(data) {
      var welcomeBlock = document.getElementById('fb-welcome');
      welcomeBlock.innerHTML = 'Hello, ' + data.first_name + '!';
    });
  }
}

FB.getLoginStatus(function(response) {
  // Check login status on load, and if the user is
  // already logged in, go directly to the welcome message.
  if (response.status == 'connected') {
    onLogin(response);
  } else {
    // Otherwise, show Login dialog first.
    FB.login(function(response) {
      onLogin(response);
    }, {scope: 'email'});
  }
});

ขั้นตอนถัดไป

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

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

ดูหลักปฏิบัติที่ดีที่สุดสำหรับเกมบน Facebook สำหรับเคล็ดลับเพิ่มเติมเกี่ยวกับการใช้การเข้าสู่ระบบสำหรับเกมบน Facebook อย่างมีประสิทธิภาพในเกมของคุณ