內嵌註冊流程

Facebook JavaScript SDK 和 Facebook 登入允許您在您的網站或用戶端入口網站中內嵌註冊流程。

步驟 1：載入 Facebook JavaScript SDK

程式碼行載入 JavaScript SDK 前必須將 fbAsyncInit 函式附加於 window 物件，因為 SDK 會呼叫此函式，以設定 Facebook 登入資訊。

這項設定使用下列參數：

• appId — Meta 應用程式編號
• cookie — 啟用 Cookie，允許伺服器存取這個連線階段
• xfbml— 剖析頁面上的社群外掛程式
• version — 要使用的圖形 API 版本

範例

<script>
  window.fbAsyncInit = function () {
    // JavaScript SDK configuration and setup
    FB.init({
      appId:    'facebook-app-id', // Meta App ID
      cookie:   true, // enable cookies
      xfbml:    true, // parse social plugins on this page
      version:  'v19.0' //Graph API version
    });
  };
</script>

步驟 2：建立「商家專用 Facebook 登入」配置

• 在 https://developers.facebook.com/ 上的應用程式主控板中載入您的應用程式
• 新增商家專用 Facebook 登入產品
• 遵循設定用戶端 OAuth 設定的最佳作法，特別是有效的 OAuth 重新導向 URI 和 JavaScript SDK 允許網域等設定

步驟 3：設定「Facebook 登入」

Facebook 登入可讓您在自己的網站或入口網站上設置按鈕，以起始連線至 Facebook。商家可以使用這個登入流程，將其 Facebook 個人檔案與商家網路據點（即企業管理平台）建立關聯，以簡化啟用流程。

您應按照以下操作說明，自行選擇實作「Facebook 登入」按鈕的位置（平台入口網站、連結頁面等），以觸發內嵌註冊 oAuth 流程。

載入 JavaScript SDK 並使用正確資訊完成初始化之後，請設定 FB.login() 函式，以觸發內嵌註冊流程。

務必包含下列項目：

• response 回呼函式
• config_id 參數
• extras 物件，並使用：

  • setup 參數，以設定任何預先填入表單的資料

範例

<script>
  window.fbAsyncInit = function () {
    // JavaScript SDK configuration and setup
    FB.init({
      appId:    'your-facebook-app-id', // Facebook App ID
      cookie:   true, // enable cookies
      xfbml:    true, // parse social plugins on this page
      version:  'v19.0' //Graph API version
    });
  };

  // Load the JavaScript SDK asynchronously
  (function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

  // Facebook Login with JavaScript SDK
  function launchWhatsAppSignup() {
    // Conversion tracking code
    fbq && fbq('trackCustom', 'WhatsAppOnboardingStart', {appId: 'your-facebook-app-id', feature: 'whatsapp_embedded_signup'});
    
    // Launch Facebook login
    FB.login(function (response) {
      if (response.authResponse) {
        const code = response.authResponse.code;
        // The returned code must be transmitted to your backend, 
  // which will perform a server-to-server call from there to our servers for an access token
      } else {
        console.log('User cancelled login or did not fully authorize.');
      }
    }, {
      config_id: '<CONFIG_ID>', // configuration ID goes here
      response_type: 'code',    // must be set to 'code' for System User access token
      override_default_response_type: true, // when true, any response types passed in the "response_type" will take precedence over the default types
      extras: {
        setup: {
          ... // Prefilled data can go here
        }
      }
    });
  }
</script>

步驟 4（強烈建議）：實作預先填入資料和預先驗證電話號碼支援

我們的資料顯示，實作預先填入資料和預先驗證電話號碼支援的商家，可以達到較高的啟用率。

步驟 5：建立登入按鈕

在您的網站上建立用來啟動內嵌註冊流程的按鈕或連結。使用 onClick 函式來呼叫在步驟 3 設定的 launchWhatsAppSignup() 函式。

範例

<button onclick="launchWhatsAppSignup()" style="background-color: #1877f2; border: 0; border-radius: 4px; color: #fff; cursor: pointer; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; height: 40px; padding: 0 24px;">Login with Facebook</button>

步驟 6（選用）：舊版本支援

WhatsApp 內嵌註冊的現行版本為第 2 版

若要向您的顧客顯示第 1 版內嵌註冊，您可以指定以下登入配置。請注意，WhatsApp 內嵌註冊第 1 版需要具有進階存取權限的下列權限：

• business_management
• whatsapp_business_management
• whatsapp_business_messaging

{
  "scope": "business_management, whatsapp_business_management, whatsapp_business_messaging",
  "extras": {
    "feature": "whatsapp_embedded_signup",
    // Display original flow to user
    "version": 1,
    "setup": {
      ... // Prefilled data 
    }
  }
});

步驟 7（選用）：連線階段記錄

您現在可以在用戶進行內嵌註冊用戶歷程時，取得用戶的相關詳細資訊。

此詳細資訊為下列其中一項：

• 如果用戶取消了內嵌註冊流程，則可取得用戶在哪個步驟取消流程的相關資訊
• 如果用戶順利完成內嵌註冊流程，則可取得用戶的電話和 WABA 編號

{
  "config_id": "<CONFIG_ID>", // configuration ID goes here
  "response_type": "code",    // must be set to 'code' for System User access token
  "override_default_response_type": true, // when true, any response types passed in the "response_type" will take precedence over the default types
  "extras": {
    "feature": "whatsapp_embedded_signup",
    "sessionInfoVersion": 2  //  Receive Session Logging Info
  }
}

除了指定上述參數之外，也請在您的平台上加入此 JavaScript 程式碼：

const sessionInfoListener = (event) => {
  if (event.origin !== "https://www.facebook.com" && event.origin !== "https://web.facebook.com") {
    return;
  }
  
  try {
    const data = JSON.parse(event.data);
    if (data.type === 'WA_EMBEDDED_SIGNUP') {
      // if user finishes the Embedded Signup flow
      if (data.event === 'FINISH') {
        const {phone_number_id, waba_id} = data.data;
      }
      // if user cancels the Embedded Signup flow
      else {
       const{current_step} = data.data;
      }
    }
  } catch {
    // Don’t parse info that’s not a JSON
    console.log('Non JSON Response', event.data);
  }
};

window.addEventListener('message', sessionInfoListener);  

傳回的承載

如果用戶順利完成流程，傳回的承載會有包含以下資訊的 sessionInfo 物件：

{
  data: {
    phone_number_id: "<PHONE-ID>",
    waba_id: "<WABA-ID>",
  },
  type: "WA_EMBEDDED_SIGNUP",
  event: "FINISH",
  version: 2
}

如果用戶取消流程，傳回的承載會有包含以下資訊的 sessionInfo 物件：

{
  data: {
    current_step: "<Current Step ID>",
  },
  type: "WA_EMBEDDED_SIGNUP",
  event: "CANCEL",
  version: 2
}

您可以透過 currentStep 的值，取得有關用戶何時取消流程的更多詳細資訊：

步驟 8（選用）：略過選擇電話號碼

如果您向用戶顯示新的內嵌註冊流程，但不要求他們必須輸入或選擇商業電話號碼，則可以包含 featureType 物件屬性並設為 only_waba_sharing。這樣會移除新流程的電話號碼輸入／選擇部分。

之後，您可以使用 WhatsApp 管理工具，將電話號碼指派給已啟用的終端用戶端，或使用我們的電話號碼註冊和商業簡介端點，以程式設計方式新增號碼和商業簡介（或是為呼叫這些端點的已啟用用戶端建置用戶介面）。

{
  "config_id": "<CONFIG_ID>", // configuration ID goes here
  "response_type": "code",    // must be set to 'code' for System User access token
  "override_default_response_type": true, // when true, any response types passed in the "response_type" will take precedence over the default types
  "extras": {
    "featureType": "only_waba_sharing" // Bypass phone number selection
  }
}

如果使用連線階段記錄，當用戶完成流程時，data.event 會設為 FINISH_ONLY_WABA。

商家完成註冊流程之後

商家完成內嵌註冊流程後，流程會傳回包含 code 屬性的 authResponse 物件：

{
  "authResponse": {
    "userID": null,
    "expiresIn": null,
    "code": "<CODE_TO_BE_EXCHANGED>"
  },
  "status": "connected"
}

向我們的 GET /oauth/access_token 端點執行伺服器對伺服器呼叫，以使用此程式碼來交換企業整合工具系統用戶存取權杖。

GET https://graph.facebook.com/v17.0/oauth/access_token?
  client_id=<APP_ID>
  &client_secret=<APP_SECRET>
  &code=<CODE>

必要參數：

• client_id：應用程式的編號
• client_secret：您專屬的應用程式密鑰，顯示在應用程式主控板上。
• code：從上述登入對話方塊重新導向收到的參數。