嵌入式注册

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

前提条件

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

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

  2. 开通服务

  3. 已经在WhatsApp注册成为技术提供商。注册技术服务商请访问WhatsApp 官方文档:成为技术提供商

操作步骤

重要

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

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

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

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

调用嵌入式注册

在您注册TP完成后,即可使用Facebook jssdk进行嵌入式操作。

代码示例

const onRegisterButtonClick = ()=>{
// const { appId , configId } = this.state;
// 初始化sdk
window.fbq &&
window.fbq("trackCustom", "WhatsAppOnboardingStart", {
           appId: <APP_ID>,
           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: '<CONFIG_ID>',
    // 从meta那边获取的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: 3,
        // 两个版本需要定义为3
        setup: {
            solutionID" '<SOLUTION_ID>' // add solution ID here
        },
    }
}
);
}

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

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

示例

正常返回示例(JSON格式)

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

绑定WABA-ChatappBindWaba

通过Facebook JSSDK进行嵌入式注册完成后,在监听的message事件中,可以得到wabaId,将wabaId传入ChatappBindWaba接口,平台会将wabaId和您在阿里云的PID做关联并返回唯一标识:custSpaceId,在后续接口操作中需要此参数作为约束。

接口文档

ChatappBindWaba - 绑定waba

示例

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

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

查询WABA商业信息-QueryWabaBusinessInfo

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

接口文档

QueryWabaBusinessInfo - 查询waba商业信息

示例

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

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