企業登入驗證

企業登入（一般稱為 Facebook 登入）是一個進入點，讓公司負責人可以使用您網站上的按鈕，將他們在您平台上的企業連結至其 Facebook 或 Instagram 個人檔案。

企業登入位於您平台的介面（通常位於您網站上的內部管理員介面），並可觸發企業登入流程。公司負責人可以使用此流程來將其 Facebook 個人檔案與他們在您網站上的業務經營據點建立關聯，以及啟用 Facebook Business 擴充功能 (FBE) 功能。

FBE 安裝期間，系統會建立連結合作夥伴與用戶端企業的企業委託解決方案 (OBO)。這種委託關係讓合作夥伴除了可以透過用戶端企業管理平台管理員的憑證（現有方法）來獲取 FBE 系統用戶存取憑證之外，還可以使用合作夥伴企業管理平台管理員系統用戶的憑證。

必要條件

您的應用程式可能需要完成應用程式審查並獲取以下權限：

• catalog_management：僅在應用程式啟用目錄功能時需要。或者，如果您還希望代表客戶管理商家廣告，則可要求 ads_management 權限。
• business_creative_management：如果您的應用程式是使用 Draper API 的創意應用程式。

設定登入流程

如要設定登入流程，請考慮以下選項：

• 透過網址載入企業登入 — 如果您不打算使用 Facebook JavaScript SDK，此為建議選項。此選項會要求您透過網站上的按鈕，連結至每個企業的動態網址。

• 透過 Facebook SDK 載入企業登入 — Facebook SDK 可提供常用的用戶端功能。我們建議較為熟悉此 SDK 的開發人員使用此選項，因為它提供更加標準化的方法來啟動相同的流程。

透過網址載入企業登入

如要透過網址觸發企業登入，請在您的網站中放置一個可開啟網址的按鈕。

企業登入網址必須擁有以下查詢參數：

如果您的應用程式需要動態重新導向 URI，請在企業登入流程完成後，使用狀態參數將動態資訊傳回您的重新導向 URI。

在下方範例中，extras 查詢參數的格式已正確設定，並指定了 business_config 和 setup 物件。

網址範例

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 並將其託管在您的平台上，也可以向下拉選擇由 Facebook 託管的 SDK。我們建議使用由 Facebook 託管的 SDK。

第 2 步：將 fbAsyncInit 函數附加至 Window 物件，以完成 SDK 設定。

在載入 JavaScript SDK 前，fbAsyncInit 函數必須先附加至 window 物件。SDK 會呼叫函數以設定正確的 window.fbAsyncInit()。

此設定包括以下項目：

• appId：Facebook 應用程式編號。
• cookie：啟用 Cookie 以允許伺服器存取此連線階段。
• xfbml：剖析此頁面的社交附加程式。
• version：通知 SDK 使用哪一個 Graph API 版本（此文件編寫之時的最新版本為 v10.0 版）

載入 JavaScript SDK 前，請先將 fbAsyncInit 附加至 window 物件。

第 3 步：透過 FB.login() 函數啟動 FBE（亦稱為「企業登入」）。

載入 SDK 並使用正確資料完成初始化後，使用 SDK 載入 FB.login()。傳遞至 FB.login() 函數的重要參數如下：

1. 回應回呼函數
2. scope 和 extras 欄位的物件

詳情請查看 Facebook Business 擴充功能 API 物件和類型。

範例：

<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。

如要載入畫面，請新增可呼叫 launchFBE() 的按鈕或連結 onClick 函數：

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

手機

有關流動版 FBE 的執行程序，請參閱我們的流動版文件。

進一步了解以下主題

• 如何進行商業應用程式整合
• 了解 Facebook 登入
• 查看 FBE API 物件和類型
• 進一步了解應用程式審查和權限
• 如何解除安裝 FBE