การเข้าสู่ระบบด้วย Facebook สำหรับเว็บที่มี JavaScript SDK

เอกสารนี้จะอธิบายให้คุณทราบถึงขั้นตอนในการนำการเข้าสู่ระบบด้วย Facebook ไปใช้กับ Facebook SDK สำหรับ JavaScript บนหน้าเว็บของคุณ

ก่อนเริ่มต้น

คุณจำเป็นต้องดำเนินการดังต่อไปนี้:

• บัญชีผู้พัฒนา Facebook
• แอพ Facebook ที่จดทะเบียนแล้ว และมีการกำหนดการตั้งค่าพื้นฐานแล้ว
• SDK สำหรับ Facebook Javascript

1. กรอก URL เปลี่ยนเส้นทางในแดชบอร์ดของแอพ

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

2. ตรวจสอบสถานะการเข้าสู่ระบบของผู้ใช้

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

ตัวอย่างการเรียก

FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
});

ตัวอย่างการตอบสนองของ JSON

{
    status: 'connected',
    authResponse: {
        accessToken: '{access-token}',
        expiresIn:'{unix-timestamp}',
        reauthorize_required_in:'{seconds-until-token-expires}',
        signedRequest:'{signed-parameter}',
        userID:'{user-id}'
    }
}

status ระบุสถานะการเข้าสู่ระบบของผู้ที่ใช้หน้าเว็บ status อาจเป็นอย่างใดอย่างหนึ่งต่อไปนี้:

หากสถานะเป็น connected พารามิเตอร์ authResponse ต่อไปนี้จะรวมอยู่ในการตอบกลับ:

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

3. นำผู้ใช้เข้าสู่ระบบ

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

การนำผู้ใช้เข้าสู่ระบบมี 2 วิธี ดังนี้:

• ปุ่มเข้าสู่ระบบด้วย Facebook
• กล่องการเข้าสู่ระบบจาก JavaScript SDK

ก. เข้าสู่ระบบด้วยปุ่มเข้าสู่ระบบ

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

ข. เข้าสู่ระบบด้วยกล่องการเข้าสู่ระบบ JavaScript SDK

หากต้องการใช้ปุ่มเข้าสู่ระบบของตัวเอง ให้เรียกใช้กล่องการเข้าสู่ระบบด้วยการเรียกไปยัง FB.login():

FB.login(function(response){
  // handle the response 
});

ขอสิทธิ์การอนุญาตเพิ่มเติม

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

ตัวอย่างการเรียก

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

FB.login(function(response) {
  // handle the response
}, {scope: 'public_profile,email'});

จัดการการตอบสนองของกล่องการเข้าสู่ระบบ

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

ตัวอย่างการเรียก

FB.login(function(response) {
  if (response.status === 'connected') {
    // Logged into your webpage and Facebook.
  } else {
    // The person is not logged into your webpage or we are unable to tell. 
  }
});

4. นำผู้ใช้ออกจากระบบ

คุณสามารถนำผู้ใช้ออกจากระบบหน้าเว็บได้โดยแนบฟังก์ชั่น JavaScript SDK FB.logout() ไปกับปุ่มหรือลิงก์

ตัวอย่างการเรียก

FB.logout(function(response) {
   // Person is now logged out
});

หมายเหตุ: การเรียกฟังก์ชั่นนี้อาจนำผู้ใช้ออกจากระบบ Facebook ด้วย

สถานการณ์ที่ควรพิจารณา

1. มีผู้เข้าสู่ระบบ Facebook แล้วเข้าสู่ระบบหน้าเว็บของคุณ เมื่อออกจากระบบจากแอพของคุณแล้ว ผู้ใช้ดังกล่าวยังคงเข้าสู่ระบบ Facebook อยู่
2. มีผู้เข้าสู่ระบบหน้าเว็บของคุณและ Facebook โดยเป็นส่วนหนึ่งของลำดับขั้นตอนการเข้าสู่ระบบของแอพของคุณ เมื่อออกจากระบบจากแอพของคุณแล้ว ผู้ใช้ดังกล่าวก็ออกจากระบบ Facebook ด้วย
3. มีผู้เข้าสู่ระบบหน้าเว็บอื่นและ Facebook โดยเป็นส่วนหนึ่งของลำดับขั้นตอนการเข้าสู่ระบบของหน้าเว็บอื่น แล้วจึงเข้าสู่ระบบหน้าเว็บของคุณ เมื่อออกจากระบบจากหน้าเว็บใดๆ แล้ว ผู้ใช้ดังกล่าวก็ออกจากระบบ Facebook ด้วย

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

ตัวอย่างโค้ดแบบเต็ม

โค้ดนี้จะโหลดและเริ่มต้น JavaScript SDK ในหน้า HTML ของคุณ แทนที่ {app-id} ด้วย ID ของแอพของคุณ และแทนที่ {api-version} ด้วย API กราฟเวอร์ชั่นที่จะใช้ ให้ระบุเวอร์ชั่นล่าสุด เว้นแต่ว่าคุณจะมีเหตุผลที่เจาะจงที่จะใช้เวอร์ชั่นที่เก่ากว่านั้น: v5.0.

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>

  function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
    console.log('statusChangeCallback');
    console.log(response);                   // The current login status of the person.
    if (response.status === 'connected') {   // Logged into your webpage and Facebook.
      testAPI();  
    } else {                                 // Not logged into your webpage or we are unable to tell.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this webpage.';
    }
  }


  function checkLoginState() {               // Called when a person is finished with the Login Button.
    FB.getLoginStatus(function(response) {   // See the onlogin handler
      statusChangeCallback(response);
    });
  }


  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{app-id}',
      cookie     : true,                     // Enable cookies to allow the server to access the session.
      xfbml      : true,                     // Parse social plugins on this webpage.
      version    : '{api-version}'           // Use this Graph API version for this call.
    });


    FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
      statusChangeCallback(response);        // Returns the login status.
    });
  };

  
  (function(d, s, id) {                      // Load the SDK asynchronously
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

 
  function testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.name + '!';
    });
  }

</script>


//  The JS SDK Login Button 

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>

<div id="status">
</div>

</body>
</html>

แหล่งข้อมูลเพิ่มเติม

• เอกสารประกอบปุ่มเข้าสู่ระบบ
• FB.login() ข้อมูลอ้างอิง
• FB.getLoginStatus() ข้อมูลอ้างอิง
• ข้อมูลอ้างอิงเกี่ยวกับ JavaScript SDK