Chat App Message Service:埋め込みサインアップの実装

埋め込みサインアップを実装する

Tech Provider は、Facebook JS SDK を使用して埋め込み操作を実行できます。

サンプルコード

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] イベントデータ", 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: Chat App Message Service が提供する ChatappBindWaba API 操作を呼び出します。// この操作が呼び出されると、custSpaceId パラメーターの値が返されます。

            }
        }
    } catch {
        console.log("JSON 以外のレスポンス", event.data);
    }
};

// メッセージイベントをリッスンします。
window.addEventListener("message", sessionInfoListener);

// SDK を呼び出します。
window.FB.login(
    response => {
    // accessToken パラメーターの値を取得するために、Chat App Message Service が提供する ChatappEmbedSignUp 操作を呼び出す必要はありません。（ChatappEmbedSignUp 操作は廃止されました。）
    if (response.authResponse) {
        const accessToken = response?.authResponse?.accessToken;
    } else {
        console.log("ユーザーがログインをキャンセルしたか、完全に承認しませんでした。");
    }
},
{
    config_id: '<CONFIG_ID>',
    // Meta から取得した configId。
    response_type: "code",
    // response_type パラメーターを code に設定します。
    override_default_response_type: true,
    // override_default_response_type パラメーターを true に設定します。
    extras: {
        feature: "whatsapp_embedded_signup",
        // featureType:"only_waba_sharing",
        // only_waba_sharing パラメーターは、埋め込みサインアップの実装に電話番号が不要であることを指定します。（AddChatappPhoneNumber 操作は、電話番号を追加するために Chat App Message Service によって提供されます。）
        // 埋め込みサインアップ中に電話番号を入力する必要がある場合は、featureType パラメーターを only_waba_sharing に設定しないでください。
        version: 2,
        sessionInfoVersion: 3,
        // version パラメーターと sessionInfoVersion パラメーターを 3 に設定します。
        setup: {
            solutionID" '<SOLUTION_ID>' // ここにソリューション ID を追加します
        },
    }
}
);
}

// ボタンの例
<button onclick="launchWhatsAppSignup()">Facebook でログイン</button>;

埋め込みサインアップの実装方法の詳細については、Facebook のドキュメント Implementation を参照してください。

例

JSON 形式の正常なレスポンスの例

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