CODEWITHSUNDEEP
facebookfacebook-graph-apifacebook-appsfacebook-pagefacebook-messenger-bot
Nurzhan Nogerbek
Nurzhan Nogerbek

Reputation: 5246

How can I give the Facebook App access to the Facebook Page via the API?

As we all know, inside the Facebook for Developers interface, you can add Facebook Pages to a Facebook App as in the picture below and generate the Page Access Token.

enter image description here

I'm trying to do this programmatically via the API requests. Unfortunately, I did not find in the documentation of the request how to do this.

What have I done so far?

Question: What kind of API request should I use to add a Facebook Page to the Facebook App?

enter image description here

The list of my requests:

  1. I take Page ID and Page Access Token with this GET request cause this request returns the list of Facebook Pages that a person owns:

https://graph.facebook.com/v9.0/{user-id}/accounts?access_token={user-access-token}

  1. I set the Webhook in my Facebook App with this POST request:

https://graph.facebook.com/v9.0/{app-id}/subscriptions?access_token={app-access-token}&callback_url={url-address}&verify_token={verify-token}&object=page&include_values=true

It successfully works and I see this Webhook in the "Webhooks" block of the Dashboard interface.

  1. Then I make this POST request to set Webhook Subscriptions Fields:

https://graph.facebook.com/{page-id}/subscribed_apps?subscribed_fields=messages,messaging_postbacks,messaging_optins,message_deliveries,message_reads,messaging_payments,messaging_pre_checkouts,messaging_checkout_updates,messaging_account_linking,messaging_referrals,message_echoes,messaging_game_plays,standby,messaging_handovers,messaging_policy_enforcement,message_reactions,inbox_labels&access_token={page-access-token}

In this request, I use Page ID and Page Access Token from the first step.

Unfortunately, I have such an error message:

To subscribe to the messages field, one of these permissions is needed: pages_messaging

Upvotes: 2

Views: 2209

Answers (1)

Tair
Tair

Reputation: 1

I've been following down a similar rabbit hole. Indeed, Facebook documentation is confusing, but it ended up being pretty simple. Here is the modified Facebook Login example, which gets page access token and then adds necessary webhook subscriptions for page messaging. After you've run it, you will see the page is added to the App settings with the requested webhook subscriptions. Hope it helps 🤓

<!DOCTYPE html>
<html>
  <head>
    <title>Facebook Login JavaScript Example</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script>
      let page_access_token = null
      let page_id = null

      function statusChangeCallback(response) {
        // Called with the results from FB.getLoginStatus().
        console.log('statusChangeCallback')
        console.log(response) // The current login status of the person.
        if (response.status === 'connected') {
          // Logged into your webpage and Facebook.
          testAPI()
        } else {
          // Not logged into your webpage or we are unable to tell.
          document.getElementById('status').innerHTML =
            'Please log ' + 'into this webpage.'
        }
      }

      function checkLoginState() {
        // Called when a person is finished with the Login Button.
        FB.getLoginStatus(function (response) {
          // See the onlogin handler
          statusChangeCallback(response)
        })
      }

      window.fbAsyncInit = function () {
        FB.init({
          appId: 'YOUR_APP_ID',
          cookie: true, // Enable cookies to allow the server to access the session.
          xfbml: true, // Parse social plugins on this webpage.
          version: 'v12.0', // Use this Graph API version for this call.
        })

        FB.getLoginStatus(function (response) {
          // Called after the JS SDK has been initialized.
          statusChangeCallback(response) // Returns the login status.
        })
      }

      // add webhooks to page subscriptions
      function addPageSubscriptions() {
        FB.api(
          `/${page_id}/subscribed_apps`,
          'POST',
          {
            subscribed_fields: [
              'messages',
              // any other webhook event: https://developers.facebook.com/docs/messenger-platform/webhook/#events
            ],
            access_token: page_access_token,
          },
          function (response) {
            if (response && !response.error) {
              console.log({ response })
            } else {
              console.error(response.error)
            }
          },
        )
      }

      // pages I have access to
      function getPages() {
        FB.api('/me/accounts', function (response) {
          if (response && !response.error) {
            console.log({ response })
            page_access_token = response.data[0].access_token
            page_id = response.data[0].id

            addPageSubscriptions()
          } else {
            console.error(response.error)
          }
        })
      }

      function testAPI() {
        // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
        console.log('Welcome!  Fetching your information.... ')

        // Me
        FB.api('/me', function (response) {
          console.log('Successful login for: ' + response.name)
          document.getElementById('status').innerHTML =
            'Thanks for logging in, ' + response.name + '!'

          getPages()
        })
      }
    </script>

    <!-- The JS SDK Login Button -->
    <!-- IMPORTANT: Define the scopes for managing pages metadata and pages_messaging for the webhooks -->

    <fb:login-button
      scope="public_profile,email,pages_manage_metadata,pages_messaging"
      onlogin="checkLoginState();"
    >
    </fb:login-button>

    <div id="status"></div>

    <!-- Load the JS SDK asynchronously -->
    <script
      async
      defer
      crossorigin="anonymous"
      src="https://connect.facebook.net/en_US/sdk.js"
    ></script>
  </body>
</html>

Upvotes: 0

Related Questions