Barcelos Growth
Barcelos Growth

Reputation: 11

Facebook login boilerplate code is bugged

I have 2 problems with the code Meta gave for the Business Whatsapp API / embedded flow integration

I'm getting two errors:

  1. Uncaught ReferenceError: fbq is not defined launchWhatsAppSignup

  2. The call inside FB.login is not being waited - the I click the login, the dialog opens and immediately the code inside the fail callback is executed. This is the main problem since I can just comment the fbq line, but I need to read the login dialog response in order to access the token.

How to resolve the issue so that WhatsApp embedded signup can be implemented?.

The fbq should work since the SDK is being loaded, and the callback should be waited.

This is the HTML code of the button

<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>

And the JavaScript for that is as follows:

window.fbAsyncInit = function () {
  // JavaScript SDK configuration and setup
  console.log(facebookMetaData.metaAPPID);
  FB.init({
    appId: facebookMetaData.metaAPPID, // Meta 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: facebookMetaData.metaAPPID,
      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: facebookMetaData.configurationID, // 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
      //     }
      //   }
    },
  );
}

Upvotes: 1

Views: 100

Answers (0)

Related Questions