Facebook JavaScript SDK 和 Facebook 登入允許您在您的網站或用戶端入口網站中內嵌註冊流程。
請參閱基本設定,瞭解載入 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>
whatsapp_business_management
和 whatsapp_business_messaging
權限
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>
在您的網站上建立用來啟動內嵌註冊流程的按鈕或連結。使用 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>
WhatsApp 內嵌註冊的現行版本為第 2 版
WhatsApp 內嵌註冊第 1 版目前處於維護狀態,並將於 2023 年 10 月 31 日停用。
若要向您的顧客顯示第 1 版內嵌註冊,您可以指定以下登入配置。請注意,WhatsApp 內嵌註冊第 1 版需要具有進階存取權限的下列權限:
{ "scope": "business_management, whatsapp_business_management, whatsapp_business_messaging", "extras": { "feature": "whatsapp_embedded_signup", // Display original flow to user "version": 1, "setup": { ... // Prefilled data } } });
您現在可以在用戶進行內嵌註冊用戶歷程時,取得用戶的相關詳細資訊。
此詳細資訊為下列其中一項:
{ "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
的值,取得有關用戶何時取消流程的更多詳細資訊:
目前步驟編號 | 說明 |
---|---|
| 當用戶建立或選擇 Meta 商業帳號來管理 WhatsApp 訊息時 |
| 當用戶建立或選擇 WhatsApp Business 帳號時。如果用戶選擇現有的 WhatsApp Business 帳號,則可以選擇現有的 WhatsApp 電話個人檔案或建立新的個人檔案 |
| 當用戶建立 WhatsApp 電話個人檔案時 |
| 當用戶輸入電話號碼時 |
| 當用戶驗證電話號碼時 |
| 當用戶驗證權限時 |
如果您向用戶顯示新的內嵌註冊流程,但不要求他們必須輸入或選擇商業電話號碼,則可以包含 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
:從上述登入對話方塊重新導向收到的參數。