如何通过 API 让 Facebook 应用程序访问 Facebook 页面？答案

【问题标题】：How can I give the Facebook App access to the Facebook Page via the API?如何通过 API 让 Facebook 应用程序访问 Facebook 页面？
【发布时间】：2021-05-01 15:06:37
【问题描述】：

众所周知，在Facebook for Developers界面中，您可以如下图将Facebook Pages添加到Facebook App中并生成Page Access Token。

我正在尝试通过 API 请求以编程方式执行此操作。不幸的是，我没有在请求的文档中找到如何执行此操作。

到目前为止我做了什么？

我可以通过Facebook Login (Documentation) 获得User ID 和User Access Token。
我可以得到一个人拥有的Facebook Pages 的列表。在回复中，我有Page ID 和Page Access Token (Documentation)。
我的 Facebook 应用程序处于开发模式。该应用程序有App ID 和App Secret。有了这些值，我可以得到App Access Token (Documentation)。
我可以使用App ID 和App Access Token (Documentation) 将Webhook 设置为Facebook 应用程序。
我可以为我的 Facebook 应用 (Documentation) 设置 Webhook Subscriptions Fields。

问题：我应该使用哪种 API 请求将 Facebook 主页添加到 Facebook 应用程序？

我的请求清单：

我将 Page ID 和 Page Access Token 与此 GET 请求一起使用，因为此请求返回一个人拥有的 Facebook Pages 列表：

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

我在我的Facebook App 中设置了Webhook 与此POST 请求：

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

它成功运行，我在Dashboard 接口的“Webhook”块中看到了这个 Webhook。

然后我发出这个 POST 请求来设置 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}

在这个请求中，我从第一步开始使用Page ID 和Page Access Token。

不幸的是，我有这样一个错误信息：

要订阅消息字段，这些权限之一是需要：pages_messaging

【问题讨论】：

如果您已经能够生成页面访问令牌，那么您现在还期望发生什么？您认为在那里“添加”一个页面实际上还能做什么？
@CBroe 你好！正如我之前所说，我可以获得一个人拥有的 Facebook 页面列表。在回复中，我有Page Access Token，但这还不够。您需要将 Facebook 应用程序链接到 Facebook 页面。将来，通过 Facebook 应用程序，我想管理用户通过 Facebook Messenger 写入 Facebook 页面的所有对话。你有什么想法吗？
除了订阅 webhooks 更新之外，您还真的需要什么吗？
@CBroe 也许我不完全理解某些事情。在我的帖子中，您可以看到第一个屏幕截图。它是我的 Facebook 应用程序的“Facebook Messenger”产品中的“访问令牌”块。如您所见，它是空的。据我了解，这意味着我的 Facebook 应用程序与任何 Facebook 页面都没有任何联系。如果客户写信给我的 Facebook 页面，我的 Facebook 应用程序将不会知道。由于 Facebook 页面和 Facebook 应用程序之间没有联系。不是吗？如果我遗漏了什么，请纠正我。
“如果客户写信给我的 Facebook 页面，我的 Facebook 应用程序不会知道。” - 要通知您的应用程序，您需要订阅来自通过 webhook 的页面。以及如何通过 API 做到这一点，在您自己已经发布的最后两个文档链接中进行了说明。

标签： facebook facebook-graph-api facebook-apps facebook-page facebook-messenger-bot

【解决方案1】：

我一直在跟踪一个类似的兔子洞。事实上，Facebook 的文档令人困惑，但它最终变得非常简单。这是修改后的Facebook Login example，它获取页面访问令牌，然后为页面消息添加必要的 webhook 订阅。运行后，您将看到该页面已添加到带有请求的 webhook 订阅的应用程序设置中。希望对你有帮助?

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

【讨论】：