企業登入驗證

企業登入（通常稱為「Facebook 登入」）是一個進入點，可讓公司負責人使用您放置在網站上的按鈕，將他們在您平台上的業務連結到他們的 Facebook 或 Instagram 個人檔案。

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

安裝 FBE 期間，會建立連結合作夥伴和用戶端企業的企業代理者解決方案（OBO）。此解決方案允許合作夥伴透過用戶端企業管理平台管理員的憑證（目前的方法）取得 FBE 系統用戶存取權杖，也允許合作夥伴使用合作夥伴企業管理平台管理員系統用戶的憑證取得 FBE 系統用戶存取權杖。

必備條件

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

• catalog_management - 只有當您的應用程式將啟用目錄功能時，才要求此權限。如果您也想代表客戶管理商家廣告，則可改為要求 ads_management 權限。
• business_creative_management - 只有當您的應用程式是使用 draper API 的廣告創意應用程式時，才需要求此權限。

設定登入流程

若要設定登入流程，請審查下列選項：

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

• 透過 Facebook SDK 載入企業登入 - Facebook SDK 提供常見的用戶端功能。此選項提供可啟動相同流程的標準化方法，建議熟悉此選項的開發人員使用。

透過網址載入企業登入

若要透過網址觸發企業登入，請將可開啟網址的按鈕放在您的網站上。

企業登入網址必須具備這些查詢參數：

如果應用程式使用動態重新導向 URI，請使用 state 參數，在企業登入流程完成後將動態資訊傳回至重新導向 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 要使用的圖形 API 版本（本文件編寫時的最新版為 10.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