การยืนยันตัวตนสำหรับการเข้าสู่ระบบธุรกิจ

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

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

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

ข้อกำหนด

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

• catalog_management - เฉพาะในกรณีที่แอพของคุณจะเปิดใช้งานฟีเจอร์แค็ตตาล็อก หรือคุณสามารถส่งคำขอสิทธิ์การอนุญาต ads_management หากคุณต้องการจัดการโฆษณาของผู้ค้าในนามลูกค้าด้วยเช่นกัน
• business_creative_management - หากแอพของคุณเป็นแอพชิ้นงานโฆษณาที่ใช้ Draper API

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

หากต้องการตั้งค่าขั้นตอนการเข้าสู่ระบบ ให้ตรวจสอบตัวเลือกเหล่านี้

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

• โหลดการเข้าสู่ระบบธุรกิจผ่าน Facebook SDK - Facebook SDK มีฟังก์ชั่นการทำงานทั่วไปในฝั่งไคลเอ็นต์ เราแนะนำตัวเลือกนี้สำหรับผู้พัฒนาที่คุ้นเคยกับตัวเลือกนี้มากกว่า เนื่องจากมีวิธีการเปิดใช้กระบวนการเดียวกันนี้ที่มีมาตรฐานกว่า

โหลดการเข้าสู่ระบบธุรกิจผ่าน URL

หากต้องการเรียกใช้การเข้าสู่ระบบธุรกิจผ่าน URL ให้วางปุ่มบนเว็บไซต์ที่จะเปิด URL

URL สำหรับการเข้าสู่ระบบธุรกิจต้องมีพารามิเตอร์การสืบค้นเหล่านี้:

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

ในตัวอย่างด้านล่าง พารามิเตอร์การสืบค้น extras ได้รับการกำหนดรูปแบบอย่างเหมาะสมและระบุทั้งอ็อบเจ็กต์ business_config และ setup

ตัวอย่าง URL

https://facebook.com/dialog/oauth?
client_id=<FB_APP_ID>
&display=page
&redirect_uri="https://partner-site.com/redirectlanding"
&response_type=token
&scope=manage_business_extension
//   alternatively use catalog_management or ads_management
//   &scope=manage_business_extension,catalog_management,ads_management
&extras={
  "setup": {
    "external_business_id": "foo-123",
    "timezone": "America/Los_Angeles",
    "currency": "USD",
    "business_vertical": "APPOINTMENTS"
  },
  "business_config": {
    "business": {
      "name": "Foo Business"
    },
    "page_cta": {
      "enabled": true,
      "cta_button_text": "Book Now",
      "cta_button_url": "https://partner-site.com/foo-business",
      "below_button_text": "Powered by FBE Partner"
    },
    "page_card": {
      "enabled": true,
      "see_all_text": "See All",
      "see_all_url": "https://partner-site.com/foo-business",
      "cta_button_text": "Book"
    },
    "ig_cta": {
      "enabled": true,
      "cta_button_text": "Book Now",
      "cta_button_url": "https://partner-site.com/foo-business"
    },
    "messenger_menu": {
      "enabled": true,
      "cta_button_text": "Book Now",
      "cta_button_url": "https://partner-site.com/foo-business"
    },
    "thread_intent": {
      "enabled": true,
      "cta_button_url": "https://partner-site.com/foo-business"
    }
  },
  "repeat": false
}

โหลดการเข้าสู่ระบบธุรกิจผ่าน Facebook SDK

ขั้นตอนที่ 1 โหลด Facebook JavaScript SDK

คุณสามารถดาวน์โหลด SDK และโฮสต์บนแพลตฟอร์มของคุณ หรือดึง SDK ที่ Facebook โฮสต์ลงมา เราขอแนะนำให้ใช้ SDK ที่ Facebook โฮสต์

ขั้นตอนที่ 2 ใส่ฟังก์ชั่น fbAsyncInit ในอ็อบเจ็กต์ Window เพื่อตั้งค่า SDK

ก่อนโหลด JavaScript SDK จะต้องมีฟังก์ชั่น fbAsyncInit อยู่ในอ็อบเจ็กต์ window SDK จะเรียกใช้ฟังก์ชั่นนี้เพื่อตั้งค่าการเรียกใช้ window.fbAsyncInit() ที่เหมาะสม

การตั้งค่านี้ประกอบด้วย:

• appId: ID ของแอพ Facebook
• cookie: เปิดใช้งานคุกกี้เพื่อให้เซิร์ฟเวอร์เข้าถึงเซสชั่นนี้ได้
• xfbml: แยกวิเคราะห์โซเชียลปลั๊กอินในเพจนี้
• version: แจ้ง SDK ว่าจะใช้ API กราฟเวอร์ชั่นใด (เอกสารนี้เขียนขึ้นในขณะที่เวอร์ชั่น 10.0 เป็นรุ่นล่าสุด)

ก่อนโหลด JavaScript SDK ให้ใส่ fbAsyncInit ในอ็อบเจ็กต์ window

ขั้นตอนที่ 3 เปิดใช้ FBE ผ่านฟังก์ชั่น FB.login() (หรือที่เรียกว่า "การเข้าสู่ระบบธุรกิจ")

หลังจากโหลด SDK และเริ่มต้นการทำงานโดยใช้ข้อมูลที่เหมาะสมแล้ว ให้ใช้ SDK เพื่อโหลด FB.login() พารามิเตอร์ที่สำคัญที่จะส่งไปยังฟังก์ชั่น FB.login() ได้แก่

1. ฟังก์ชั่นการเรียกการตอบกลับ
2. อ็อบเจ็กต์สำหรับช่อง scope และ extras

โปรดดูรายละเอียดในหัวข้ออ็อบเจ็กต์และประเภทของ API ส่วนขยาย Facebook Business

ตัวอย่าง:

<script>
    window.fbAsyncInit = function() {
    //2. FB JavaScript SDK configuration and setup
        FB.init({
            appId      : '<app_id>', // FB App ID
            cookie     : true,  // enable cookies to allow the server to access the session
            xfbml      : true,  // parse social plugins on this page
            version    : 'v4.0' // uses graph api version v4.0
        });
    };

    //1. Load the JavaScript SDK asynchronously
    (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'));

     //3. Facebook login with JavaScript SDK
    function launchFBE() {
        FB.login(function (response) {
            if (response.authResponse) {
                // returns a User Access Token with scopes requested
                const accessToken = response.authResponse.accessToken;
                const message = {
                    'success':true,
                    'access_token':accessToken,
                };
                // store access token for later  
            } else {
              console.log('User cancelled login or did not fully authorize.');
            }
        }, {
            scope: 'catalog_management,manage_business_extension',
          // refer to the extras object table for details
            extras: {
                "setup":{
                  "external_business_id":"<external_business_id>",
                  "timezone":"America\/Los_Angeles",
                  "currency":"USD",
                  "business_vertical":"ECOMMERCE"
                },
                "business_config":{
                  "business":{
                     "name":"<business_name>"
                  },
                  "ig_cta": {
                    "enabled": true,
                    "cta_button_text": "Book Now",
                    "cta_button_url": "https://partner-site.com/foo-business"
                  }
                },
                "repeat":false
            }
        });
    }
</script>

ขั้นตอนที่ 4 สร้างปุ่มหรือลิงก์เพื่อเปิดใช้ FBE

หากต้องการโหลดหน้าจอ ให้เพิ่มปุ่มหรือลิงก์ฟังก์ชั่น onClick ที่เรียกใช้ launchFBE() ดังนี้

<button onclick="launchFBE()"> Launch FBE Workflow </button>

มือถือ

สำหรับการใช้ FBE บนมือถือ โปรดดูเอกสารสำหรับมือถือของเรา

เรียนรู้เพิ่มเติม

• วิธีการผสานการทำงานของแอพธุรกิจ
• เรียนรู้เกี่ยวกับการเข้าสู่ระบบด้วย Facebook
• โปรดดูอ็อบเจ็กต์และประเภทของ API FBE
• โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับการตรวจสอบแอพและสิทธิ์การอนุญาต
• วิธีถอนการติดตั้ง FBE