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

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

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

คุณจำเป็นต้องมีรายการต่อไปนี้

บัญชีผู้พัฒนา Facebook
ID ของแอพ Facebook สำหรับเว็บไซต์

ตัวอย่างการเข้าสู่ระบบอัตโนมัติขั้นพื้นฐาน

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

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

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>

    <h2>Add Facebook Login to your webpage</h2>

      <!-- Set the element id for the JSON response -->
    
      <p id="profile"></p>

      <script>
  
        <!-- Add the Facebook SDK for Javascript -->
  
        (function(d, s, id){
                              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')
        );


        window.fbAsyncInit = function() {
            <!-- Initialize the SDK with your app and the Graph API version for your app -->
            FB.init({
                      appId            : '{your-facebook-app-id}',
                      xfbml            : true,
                      version          : '{the-graph-api-version-for-your-app}'
                    });
            <!-- If you are logged in, automatically get your name and email adress, your public profile information -->
            FB.login(function(response) {
                      if (response.authResponse) {
                           console.log('Welcome!  Fetching your information.... ');
                           FB.api('/me', {fields: 'name, email'}, function(response) {
                               document.getElementById("profile").innerHTML = "Good to see you, " + response.name + ". i see your email address is " + response.email
                           });
                      } else { 
                           <!-- If you are not logged in, the login dialog will open for you to login asking for permission to get your public profile and email -->
                           console.log('User cancelled login or did not fully authorize.'); }
            });
        };

      </script>

  </body>
</html>

1. เปิดใช้งาน JavaScript SDK สำหรับการเข้าสู่ระบบด้วย Facebook

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

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

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 อาจเป็นอย่างใดอย่างหนึ่งต่อไปนี้:

ประเภท `Status`	คำอธิบาย
`connected`	ผู้ใช้เข้าสู่ระบบ Facebook และเข้าสู่ระบบหน้าเว็บของคุณแล้ว
`not_authorized`	ผู้ใช้เข้าสู่ระบบ Facebook แต่ไม่ได้เข้าสู่ระบบหน้าเว็บของคุณ
`unknown`	ผู้ใช้ยังไม่ได้เข้าสู่ระบบ Facebook คุณจึงไม่ทราบว่าพวกเขาเข้าสู่ระบบหน้าเว็บของคุณหรือยัง หรือมีการเรียก FB.logout() ก่อน ดังนั้นจึงไม่สามารถเชื่อมต่อกับ Facebook ได้

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

พารามิเตอร์ `authResponse`	ค่า
`accessToken`	โทเค็นการเข้าถึงสำหรับผู้ที่ใช้หน้าเว็บ
`expiresIn`	การประทับเวลา UNIX เมื่อโทเค็นหมดอายุ เมื่อโทเค็นหมดอายุ ผู้ใช้จะต้องเข้าสู่ระบบใหม่อีกครั้ง
`reauthorize_required_in`	ระยะเวลาเวลาก่อนการเข้าสู่ระบบจะหมดอายุเป็นจำนวนวินาที และผู้ใช้จะต้องเข้าสู่ระบบใหม่อีกครั้ง
`signedRequest`	พารามิเตอร์ที่ลงนามซึ่งมีข้อมูลผู้ใช้ที่ใช้หน้าเว็บของคุณ
`userID`	ID ของผู้ที่ใช้หน้าเว็บ

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

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

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

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

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

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

ตัวกำหนดค่าปลั๊กอิน

Width

ขนาดของปุ่ม

large

ข้อความปุ่ม

continue_with

รูปร่างเลย์เอาท์ปุ่ม

default

เปิดใช้ปุ่มออกจากระบบ

รวมชื่อและรูปโปรไฟล์เมื่อผู้ใช้ได้เข้าสู่ Facebook [?]

รับรหัส

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

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

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

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

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

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

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

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. นำผู้ใช้ออกจากระบบ

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

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

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

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

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

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

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

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

โค้ดนี้จะโหลดและเริ่มต้น JavaScript SDK ในหน้า HTML ของคุณ โปรดแทนที่ {app-id} ด้วย ID ของแอพของคุณ และแทนที่ {api-version} ด้วย API กราฟเวอร์ชั่นที่จะใช้ ให้ระบุเวอร์ชั่นล่าสุด เว้นแต่ว่าคุณจะมีเหตุผลที่เจาะจงที่จะใช้เวอร์ชั่นที่เก่ากว่านั้น โดยเวอร์ชั่นล่าสุดคือ v21.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 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>

<!-- Load the JS SDK asynchronously -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
</body>
</html>

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

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

ตัวอย่างการเข้าสู่ระบบอัตโนมัติขั้นพื้นฐาน

1. เปิดใช้งาน JavaScript SDK สำหรับการเข้าสู่ระบบด้วย Facebook

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

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

ตัวอย่างการตอบกลับแบบ JSON

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

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

ตัวกำหนดค่าปลั๊กอิน

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

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

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

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

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

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

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

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

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

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