このトピックでは、Meta の埋め込み登録ツールを使用して WhatsApp ビジネスアカウントを登録する方法について説明します。埋め込み登録は、すべての登録ステップを単一のワークフローに統合し、登録時間を数日から数分に短縮します。
前提条件
埋め込み登録を使用する前に、次の項目を完了してください。
-
Alibaba Cloud アカウントを登録し、企業の本人確認を完了します。詳細については、「Alibaba Cloud アカウントの登録」および「企業の本人確認」をご参照ください。
-
WhatsApp のテックプロバイダーとして登録します。詳細については、WhatsApp の公式ドキュメント「テックプロバイダーになる」をご参照ください。
操作手順
Meta は、埋め込み登録フローの新しいバージョン (バージョン 2) を展開しています。`extras` オブジェクトのオプションの `version` パラメーターを使用して、エンドユーザーに表示される埋め込みインターフェイスのバージョンを制御できます。
バージョン 1 は初期の埋め込み登録フローで、バージョン 2 は新しいフローです。バージョンを指定しない場合、エンドユーザーには新しい埋め込み登録フローが表示されます。
バージョン 2 (デフォルト) を使用する場合、ChatappBindWaba 操作を直接呼び出すことができます。
Meta は最終的にバージョン 1 を非推奨にします。詳細については、Meta の公式ドキュメント「フローバージョンの指定」をご参照ください。
埋め込み登録の呼び出し
テックプロバイダーとして登録した後、Facebook SDK for JavaScript を使用して埋め込みフローを実装します。
コード例
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 から取得した config_id。
response_type: "code",
// response_type パラメーターは 'code' に設定する必要があります。
override_default_response_type: true,
// このパラメーターは true に設定する必要があります。
extras: {
feature: "app_only_install",
version: 4,
sessionInfoVersion: 4,
// 両方の version パラメーターを 4 に設定する必要があります。
setup: {
solutionID: '<SOLUTION_ID>' // ここにソリューション ID を追加します
},
}
}
);
}
// ボタンの例
<button onclick="launchWhatsAppSignup()">Login with Facebook</button>;詳細については、Meta のドキュメント「埋め込み登録フロー」をご参照ください。
Meta アプリ管理での権限付与
テックプロバイダーとして、Meta アプリダッシュボードで `ads_read` 権限を追加する必要があります。
権限をリクエストした後、Meta アプリ管理の画面の指示に従って権限付与フローを完了します。最終結果が後述する完了状態の表示と一致すると、権限付与は完了です。
Meta アプリダッシュボードの左側のナビゲーションウィンドウで、[権限と機能] を選択します。検索ボックスに `ads_read` と入力します。結果リストで ads_read 権限の行を見つけ、[アクション] 列の [高度なアクセスをリクエスト] をクリックします。画面の指示に従って申請を完了します。[アクセスレベル] に緑色の [高度なアクセス] タグが表示され、[ステータス] に [高度なアクセス権が付与されました] と表示されると、権限付与は成功です。
ユーザー向けのフローのトリガー
次の例は、Chat App ページから埋め込み登録をトリガーする方法を示しています。
権限付与が必要な WABA チャンネルに対して、メッセージメディアライブラリ (MML) の権限を付与してください。
Meta Business ログインウィンドウで、Meta Business Tools の利用規約と WhatsApp Marketing Messages API 利用規約を確認し、[続行] をクリックして、ご利用のアカウントを Alibaba Cloud シンガポールにバインドします。
WABA のバインド
Facebook SDK for JavaScript を使用して埋め込み登録を完了すると、メッセージイベントリスナーは `wabaId` を返します。この `wabaId` を `ChatappBindWaba` API に渡します。プラットフォームは `wabaId` をご利用の Alibaba Cloud アカウントの PID に関連付け、一意の識別子 `custSpaceId` を返します。この `custSpaceId` は、後続の API 呼び出しに含める必要があります。
API リファレンス
例
JSON 形式の成功応答の例：
{
"RequestId": "90E63D28-E31D-1EB2-8939-A948664****",
"Code": "OK",
"Message": "OK",
"Data": {
"CustSpaceId": "C0202939293****",
"WabaId": "29398*****"
}
}WABA ビジネス情報の照会
`QueryWabaBusinessInfo` 操作を呼び出して、埋め込み登録を通じて権限が付与されたアカウントの WABA ビジネス情報を Meta Business Platform から取得します。
API リファレンス
例
JSON 形式の成功応答の例：
{
"RequestId": "90E63D28-E31D-1EB2-8939-A948664****",
"Code": "OK",
"Message": "OK",
"Data": {
"BusinessId": "19288282****",
"BusinessName": "Alibaba****",
"VerificationStatus": "verified",
"Vertical": "Retail"
}
}