企业登录身份验证

企业登录（通常也称为 Facebook 登录）是一个接入点，企业主可使用您放置于网站上的按钮，将他们在您平台上的企业连接至 Facebook 或 Instagram 主页。

企业登录位于您的平台界面（通常位于您网站的内部管理员面板），可触发企业登录流程。企业主可使用此流程将其 Facebook 个人主页与他们在您网站上的营业点相关联，从而启用 Facebook Business 扩展程序 (FBE) 功能。

FBE 安装期间，连接合作伙伴与客户企业的企业代表解决方案 (OBO) 便会建立。除客户商务管理平台管理员凭证（当前方法）外，这种解决方案还允许合作伙伴使用合作伙伴商务管理平台管理员系统的用户凭证获取 FBE 系统用户访问口令。

要求

您的应用可能必须先完成应用审核，才能获得以下权限：

• catalog_management — 仅在您的应用将启用目录功能时才需要。或者，如果您还想代表客户管理商家的广告，可以请求获取 ads_management 权限。
• business_creative_management - 适用于应用是利用 Draper API 的创意应用的情况。

设置登录流程

要设置登录流程，请查看以下选项：

• 通过网址加载企业登录 — 如果您不打算使用 JavaScript 版 Facebook 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 步：加载 JavaScript 版 Facebook 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 版本（编写此文档时的最新版本为 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