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

user_4332480 0
Viewed 767

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?

  • I can get the User ID and User Access Token via Facebook Login (Documentation).
  • I can get the list of Facebook Pages that a person owns. In the response, I have the Page ID and the Page Access Token (Documentation).
  • I have the Facebook app that is in development mode. That app has App ID and App Secret. With these values, I can get the App Access Token (Documentation).
  • I can set Webhook to the Facebook App with App ID and App Access Token (Documentation).
  • I can set the Webhook Subscriptions Fields for my Facebook App (Documentation).

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

facebook-messenger-bot facebook-apps facebook-page facebook-graph-api facebook
1 Answers

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>

user_54487430
Related