如何通過註冊工具進行WhatsAppBusiness帳號的註冊 - Chat App Message Service

本文為您介紹如何通過Meta官方提供的註冊工具進行WhatsApp Business帳號的註冊。使用嵌入式註冊（Embedded signup）可以大幅縮短您的註冊時間，嵌入式註冊簡化了註冊步驟，將註冊的全部步驟整合到了單個流程內，從而使得註冊時間可以由幾天縮短至幾分鐘。

前提條件

在進行嵌入式註冊前需要您完成以下操作：

註冊阿里雲帳號並完成企業實名認證。更多資訊，請參見阿里雲帳號註冊和企業認證。
已開通服務。
已經在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
                );
                
            }
        }
    } catch {
        console.log("Non JSON Response", event.data);
    }
};
// 監聽 message 事件
window.addEventListener("message", sessionInfoListener);
// 喚起SDK
window.FB.login(
    response => {
    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: "app_only_install",
        version: 4,
        sessionInfoVersion: 4,
        // 兩個版本需要定義為4
        setup: {
            solutionID: '<SOLUTION_ID>' // add solution ID here
        },
    }
}
);
}
// Example Button
<button onclick="launchWhatsAppSignup()">Login with Facebook</button>;

Facebook嵌入式具體操作請參考嵌入式註冊流程。

完成Meta應用管理授權

需要TP客戶在Meta 的應用管理頁面增加ads_read許可權，入口如下：

說明

具體操作步驟如圖，在第4步點擊申請許可權以後，按照Meta 應用管理彈出的頁面指導，走完申請授權全部流程，使得最後的結果是如5的結果所示，即可完成授權。

通知下級客戶

具體以Chat App頁面喚起的嵌入式註冊為例：

說明

給需要授權的WABA通道授權MML即可。

綁定WABA-ChatappBindWaba

通過Facebook JSSDK進行嵌入式註冊完成後，在監聽的message事件中，可以得到wabaId，將wabaId傳入ChatappBindWaba介面，平台會將wabaId和您在阿里雲的PID做關聯並返回唯一標識：custSpaceId，在後續介面操作中需要此參數作為約束。

介面文檔

綁定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": "零售"
  }
}