嵌入注册流程

您可以借助 Facebook JavaScript SDK 和 Facebook 登录将注册流程嵌入您的网站或客户门户网站。

第 1 步：加载 Facebook JavaScript SDK

由于 SDK 需要调用 fbAsyncInit 函数以设置 Facebook 登录信息，所以此函数必须附加到 window 对象中。之后，代码行才能加载出 JavaScript SDK。

完成此设置需要使用以下参数：

• appId — Meta 应用编号
• cookie — 启用 Cookie 以允许服务器访问此会话
• xfbml — 解析页面上的社交插件
• version — 使用的图谱 API 版本

示例

<script>
  window.fbAsyncInit = function () {
    // JavaScript SDK configuration and setup
    FB.init({
      appId:    'facebook-app-id', // Meta App ID
      cookie:   true, // enable cookies
      xfbml:    true, // parse social plugins on this page
      version:  'v19.0' //Graph API version
    });
  };
</script>

第 2 步：创建企业版 Facebook 登录的配置

• 前往 https://developers.facebook.com/，在应用面板中加载您的应用
• 添加产品企业版 Facebook 登录
• 遵循有关如何设置客户端 OAuth 设置的最佳实践，确切地说是有效 OAuth 重定向 URI 和 JavaScript SDK 允许使用的网域等设置

第 3 步：设置 Facebook 登录

Facebook 登录可让您在自己的网站或门户网站中放置一个按钮，以启动与 Facebook 的连接。公司可以使用此登录流程将 Facebook 个人主页与品牌形象（例如商务管理平台）关联起来，以便简化注册流程。

您可以使用下方说明触发嵌入式注册 OAuth 流程，以自行选择 Facebook 登录按钮的放置位置（例如平台门户网站、落地页等）。

加载完 JavaScript SDK，并使用正确信息启动此 SDK 后，请设置 FB.login() 函数，以触发嵌入式注册流程。

请务必包含以下内容：

• response 回调函数
• config_id 参数
• extras 对象包含以下内容：

  • 包含任何预填充表单数据的 setup 参数

示例

<script>
  window.fbAsyncInit = function () {
    // JavaScript SDK configuration and setup
    FB.init({
      appId:    'your-facebook-app-id', // Facebook App ID
      cookie:   true, // enable cookies
      xfbml:    true, // parse social plugins on this page
      version:  'v19.0' //Graph API version
    });
  };

  // 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'));

  // Facebook Login with JavaScript SDK
  function launchWhatsAppSignup() {
    // Conversion tracking code
    fbq && fbq('trackCustom', 'WhatsAppOnboardingStart', {appId: 'your-facebook-app-id', feature: 'whatsapp_embedded_signup'});
    
    // Launch Facebook login
    FB.login(function (response) {
      if (response.authResponse) {
        const code = response.authResponse.code;
        // The returned code must be transmitted to your backend, 
  // which will perform a server-to-server call from there to our servers for an access token
      } else {
        console.log('User cancelled login or did not fully authorize.');
      }
    }, {
      config_id: '<CONFIG_ID>', // configuration ID goes here
      response_type: 'code',    // must be set to 'code' for System User access token
      override_default_response_type: true, // when true, any response types passed in the "response_type" will take precedence over the default types
      extras: {
        setup: {
          ... // Prefilled data can go here
        }
      }
    });
  }
</script>

第 4 步（强烈推荐）：实现对预先填好的数据和已预先认证电话号码的支持

我们的数据显示，如果公司实现对预先填好的数据和已预先认证电话号码的支持，获得的注册率更高。

第 5 步：创建“登录”按钮

在您的网站中创建按钮或链接，以启动嵌入式注册流程。使用 onClick 函数调用在第 3 步中设置的 launchWhatsAppSignup() 函数。

示例

<button onclick="launchWhatsAppSignup()" style="background-color: #1877f2; border: 0; border-radius: 4px; color: #fff; cursor: pointer; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; height: 40px; padding: 0 24px;">Login with Facebook</button>

第 6 步（可选）：旧版本支持

WhatsApp 嵌入式注册的最新版本是版本 2

如要向客户显示嵌入式注册版本 1，您可以指定以下登录配置。请注意，WhatsApp 嵌入式注册版本 1 需要以下具有权限，并且是高级访问级别：

• business_management
• whatsapp_business_management
• whatsapp_business_messaging

{
  "scope": "business_management, whatsapp_business_management, whatsapp_business_messaging",
  "extras": {
    "feature": "whatsapp_embedded_signup",
    // Display original flow to user
    "version": 1,
    "setup": {
      ... // Prefilled data 
    }
  }
});

第 7 步（可选）：会话记录

您现在可以在用户的嵌入式注册用户历程中获取用户详细信息。

该信息为以下任意一种：

• 用户在取消嵌入式注册流程时所处的步骤
• 用户的电话号码和 WABA 编号（如果用户已成功完成嵌入式注册流程）

{
  "config_id": "<CONFIG_ID>", // configuration ID goes here
  "response_type": "code",    // must be set to 'code' for System User access token
  "override_default_response_type": true, // when true, any response types passed in the "response_type" will take precedence over the default types
  "extras": {
    "feature": "whatsapp_embedded_signup",
    "sessionInfoVersion": 2  //  Receive Session Logging Info
  }
}

除了指明上述参数外，还要在您的平台上添加以下 JavaScript 代码：

const sessionInfoListener = (event) => {
  if (event.origin !== "https://www.facebook.com" && event.origin !== "https://web.facebook.com") {
    return;
  }
  
  try {
    const data = JSON.parse(event.data);
    if (data.type === 'WA_EMBEDDED_SIGNUP') {
      // if user finishes the Embedded Signup flow
      if (data.event === 'FINISH') {
        const {phone_number_id, waba_id} = data.data;
      }
      // if user cancels the Embedded Signup flow
      else {
       const{current_step} = data.data;
      }
    }
  } catch {
    // Don’t parse info that’s not a JSON
    console.log('Non JSON Response', event.data);
  }
};

window.addEventListener('message', sessionInfoListener);  

返回的有效负载

如果用户成功完成此流程，在返回的有效负载中，sessionInfo 对象将包含以下信息：

{
  data: {
    phone_number_id: "<PHONE-ID>",
    waba_id: "<WABA-ID>",
  },
  type: "WA_EMBEDDED_SIGNUP",
  event: "FINISH",
  version: 2
}

如果用户取消了此流程，在返回的有效负载中，sessionInfo 对象将包含以下信息：

{
  data: {
    current_step: "<Current Step ID>",
  },
  type: "WA_EMBEDDED_SIGNUP",
  event: "CANCEL",
  version: 2
}

您可以通过 currentStep 的值，详细了解用户何时取消了此流程：

第 8 步（可选）：绕过电话号码选择

如要向用户显示新版嵌入式注册流程，但无需他们输入或选择公司电话号码，您可以加入 featureType 对象属性，并将其设为 only_waba_sharing。此操作会移除新版流程中的电话号码输入或选择步骤。

然后，您可以使用 WhatsApp 管理工具为已注册的终端客户指定电话号码，或使用我们的电话号码注册和商业简介端点，以编程方式添加电话号码和商家主页（或为调用这些端点的已注册客户构建用户界面）。

{
  "config_id": "<CONFIG_ID>", // configuration ID goes here
  "response_type": "code",    // must be set to 'code' for System User access token
  "override_default_response_type": true, // when true, any response types passed in the "response_type" will take precedence over the default types
  "extras": {
    "featureType": "only_waba_sharing" // Bypass phone number selection
  }
}

如果使用会话记录，在用户完成此流程时，data.event 将设为 FINISH_ONLY_WABA。

公司完成注册流程后

企业完成嵌入式注册流程后，该流程会返回一个 authResponse 对象，其中包含 code 属性：

{
  "authResponse": {
    "userID": null,
    "expiresIn": null,
    "code": "<CODE_TO_BE_EXCHANGED>"
  },
  "status": "connected"
}

通过向我们的 GET /oauth/access_token 端点执行服务器到服务器调用，将此代码交换为业务集成工具系统用户访问口令。

GET https://graph.facebook.com/v17.0/oauth/access_token?
  client_id=<APP_ID>
  &client_secret=<APP_SECRET>
  &code=<CODE>

必要参数：

• client_id：您应用的编号
• client_secret：您唯一的应用密钥，显示在应用面板中。
• code：从上述登录对话框重定向接收的参数。