文档

嵌入式注册

更新时间:

本文为您介绍如何通过Meta官方提供的注册工具进行WhatsApp Business账号的注册。使用嵌入式注册(Embedded signup)可以大幅缩短您的注册时间,嵌入式注册简化了注册步骤,将注册的全部步骤整合到了单个流程内,从而使得注册时间可以由几天缩短至几分钟。

前提条件

在进行嵌入式注册前需要您完成以下操作:

  1. 注册阿里云账号并完成企业实名认证。更多信息,请参见注册阿里云账号企业实名认证

  2. 开通服务

  3. 准备需要提交申请ISV的审核资料,并联系您的客户经理进行提交。更多详细步骤,请参见ISV客户开通流程

操作步骤

重要

Facebook开始启用新版(版本2)嵌入式注册流程,您可以使用extras对象中的version参数(可选)来控制最终用户看到的嵌入式界面(流程)版本。

版本1用于初始嵌入式注册流程,版本2用于新版嵌入式注册流程。如果未指定版本(version),最终用户将看到新版嵌入式注册流程

如果您未指定版本或指定版本为2时(默认情况下为未指定版本),可以直接绑定WABA-ChatappBindWaba

请注意,Facebook最终将停止对版本1的支持。更多关于操作和信息,请参见Facebook官方文档指定流程版本

获取AppID-IsvGetAppId

在您获得ISV服务权限后,即可使用Facebook jssdk进行嵌入式操作,调用IsvGetAppId获取到操作必需的AppID信息,根据此信息可以拉起SDK进行嵌入式注册操作。

代码示例

const onRegisterButtonClick = ()=>{
  const { appId , configId } = this.state;
  // 初始化sdk
	window.fbq &&
      window.fbq("trackCustom", "WhatsAppOnboardingStart", {
        appId: appId,
        feature: "whatsapp_embedded_signup"
      });

  // sdk 回调函数
  const sessionInfoListener = event => {
    if (event.origin !== "https://www.facebook.com") return;
    try {
      const eventData = JSON.parse(event.data);
    
      console.log("[sessionInfoListener] Event Data", eventData, event.data);
      
      if (eventData.type === "WA_EMBEDDED_SIGNUP") {
        if (
          eventData.event === "FINISH" ||
          eventData.event === "FINISH_ONLY_WABA"
        ) {
          const { waba_id } = eventData.data;
          console.log(
            "[sessionInfoListener] waba_id",
            waba_id
          );
          //TODO 调用Chatapp提供的ChatappBindWaba接口,此接口调用成功会返回custSpaceId,后续和之前一致
          
        }
      }
    } catch {
      console.log("Non JSON Response", event.data);
    }
  };

  // 监听 message 事件
  window.addEventListener("message", sessionInfoListener);

  // 唤起SDK
  window.FB.login(
      response => {
        // 此处得到的accessToken不需要再调用Chatapp提供的ChatappEmbedSignUp接口(此接口已弃用)
        if (response.authResponse) {
          const accessToken = response?.authResponse?.accessToken;
        } else {
          console.log("User cancelled login or did not fully authorize.");
        }
      },
      {
        config_id: configId,
        // 从前面接口获取的configId
        response_type: "code",
        // response_type需要定义为code
        override_default_response_type: true,
        // 此参数需要定义为true
        extras: {
          feature: "whatsapp_embedded_signup",
          featureType:"only_waba_sharing",
          // only_waba_sharing 代表嵌入式可以不录入电话号码(现在Chatapp单独提供了新增电话号码接口 AddChatappPhoneNumber)
          // 如果需要在嵌入式时录入电话号码,就和之前保持一致即可
          version: 2,
          sessionInfoVersion: 2,
          // 两个版本需要定义为2
          setup: {}
        }
      }
    );
}

// Example Button
<button onclick="launchWhatsAppSignup()">Login with Facebook</button>;

Facebook嵌入式具体操作请参考嵌入式注册流程

接口文档

IsvGetAppId - 获取App ID

示例

正常返回示例(JSON格式)

{
  "RequestId": "744c4b5c79c9432497a075bdfca3***",
  "Code": "OK",
  "Message": "null",
  "AppId": "23hr3v",
  "ConfigId":"3548941223****"
}

嵌入式入口-ChatappEmbedSignUp (过时的接口)

说明

当前接口仅用于当您指定版本为1时可用。Facebook开始启用新版(版本2)嵌入式注册流程,您可以使用extras对象中的version参数(可选)来控制最终用户看到的嵌入式界面(流程)版本。可以跳过当前步骤,直接开始绑定WABA-ChatappBindWaba

通过Facebook jssdk进行嵌入式注册完成后会返回一个参数:inputToken, 将此参数传入当前接口(ChatappEmbedSignUp),以获得WABA列表信息。

接口文档

ChatappEmbedSignUp - 嵌入式入口

示例

正常返回示例(JSON格式):

{
  "RequestId": "90E63D28-E31D-1EB2-8939-A9486641****",
  "Code": "OK",
  "Message": "无",
  "Wabas": [
    {
      "Id": "2939933992*****",
      "Name": "Alibaba",
      "Currency": "USD",
      "AccountReviewStatus": "VERIFIED",
      "MessageTemplateNamespace": "alals-lsslls-slslsos-slsl"
    }
  ]
}

绑定WABA-ChatappBindWaba

嵌入式入口-ChatappEmbedSignUp返回的WABA信息传入当前接口,平台会将WABAID和您在阿里云的PID做关联并返回唯一标识:custSpaceId,在后续接口操作中需要此参数作为约束。

说明

嵌入式入口-ChatappEmbedSignUp接口返回多个WABA信息时,需要您选择绑定的WABA进行传参。

接口文档

ChatappBindWaba - 绑定waba

示例

正常返回示例(JSON格式):

{
  "RequestId": "90E63D28-E31D-1EB2-8939-A948664****",
  "Code": "OK",
  "Message": "无",
  "Data": {
    "CustSpaceId": "C02029392939939",
    "WabaId": "2939828282"
  }
}

查询WABA商业信息-QueryWabaBusinessInfo

通过调用当前接口,获取通过嵌入式授权的Facebook Business平台的WABA商业信息。

接口文档

QueryWabaBusinessInfo - 查询waba商业信息

示例

正常返回示例(JSON格式):

{
  "RequestId": "90E63D28-E31D-1EB2-8939-A948664****",
  "Code": "OK",
  "Message": "无",
  "Data": {
    "BusinessId": "192882828733",
    "BusinessName": "Alibaba",
    "VerificationStatus": "verified",
    "Vertical": "零售"
  }
}

  • 本页导读 (1)
文档反馈