WhatsApp嵌入式注册无法获取sessionInfoListener，返回非JSON响应

问题分析 #

你遇到的非JSON响应（data=cb=&code=<my_code_here>&origin=localhost=destination=）是Facebook OAuth登录流程的常规回调消息，并非WhatsApp嵌入式登录的sessionInfo事件消息。核心问题点：

• 代码存在语法错误，导致FB.login的配置参数未正确传递，Facebook无法识别这是WhatsApp嵌入式登录请求
• 重复绑定message事件监听，引发冗余消息触发

修复步骤 #

1. 修复语法错误 #

代码中多处参数缺少逗号，直接导致JS语法异常，影响参数传递：

• 在appId: <app_id>后添加逗号
• 在feature: "whatsapp_embedded_signup"后添加逗号
• 在config_id: <config_id>后添加逗号

2. 移除重复的事件监听 #

代码中两次调用window.addEventListener("message", sessionInfoListener);，会造成监听器重复绑定，建议仅在launchWhatsAppSignup函数内添加一次监听。

3. 优化消息过滤逻辑 #

在sessionInfoListener中提前过滤OAuth回调的非JSON消息，避免进入错误处理分支：

修正后的完整代码 #

const launchWhatsAppSignup = async () => {
    window.fbq &&
      fbq("trackCustom", "WhatsAppOnboardingStart", {
        appId: <app_id>,
        feature: "whatsapp_embedded_signup"
      });

    // 仅在此处添加一次事件监听
    window.addEventListener("message", sessionInfoListener);

    FB.login(
      response => {
        if (response.authResponse) {
          const code = response.authResponse.code;
        } else {
          console.log("User cancelled login or did not fully authorize.");
        }
      },
      {
        config_id: <config_id>,
        response_type: "code",
        override_default_response_type: true,
        extras: {
          sessionInfoVersion: 2,
          feature: "whatsapp_embedded_signup"
        }
      }
    );
  };


const sessionInfoListener = event => {
    if (event.origin !== "https://www.facebook.com") return;
    
    // 提前过滤OAuth回调的非JSON消息
    if (event.data.startsWith('data=')) return;
    
    try {
      const data = JSON.parse(event.data);
      if (data.type === "WA_EMBEDDED_SIGNUP") {
        // 用户完成嵌入式注册流程
        if (data.event === "FINISH") {
          const { phone_number_id, waba_id } = data.data;
          // 此处添加完成逻辑
        }
        // 用户取消嵌入式注册流程
        else {
          const { current_step } = data.data;
          // 此处添加取消逻辑
        }
      }
    } catch (err) {
      console.log("非JSON响应", event.data);
    }
  };

window.launchWhatsAppSignup = launchWhatsAppSignup;

额外检查点 #

• 确认config_id是WhatsApp嵌入式登录专属配置ID，可在Meta商务管理平台获取
• 确保你的域名已加入Facebook应用的有效OAuth跳转域名列表
• 检查浏览器控制台是否存在其他JS错误，影响流程执行

内容的提问来源于stack exchange，提问作者Filipe Dias