使用MessengerExtensions无法获取当前线程PSID及分享流问题排查

Let's break down the core issues you're facing and walk through fixing them step by step.

1. Why getContext() Isn't Returning the PSID #

The most common reasons for getContext() failing to retrieve the thread PSID are:

• Invalid App ID: You're using INPUTED_APP_ID_HERE as a placeholder—replace this with your actual Facebook App ID (found in your App Dashboard under Settings > Basic).
• Unwhitelisted Domain: Your webview domain (https://webhookboi.herokuapp.com) must be added to your Facebook App's Messenger Platform > Settings > Whitelisted Domains. Without this, Messenger blocks access to context data.
• X-Frame-Options Limitations: While your backend sets X-Frame-Options: ALLOW-FROM, modern browsers often ignore the ALLOW-FROM directive. Replace it with a Content-Security-Policy header that allows Messenger domains for better compatibility.
• Timing Issues: Ensure you only call getContext() after the Messenger Extensions library is fully loaded (your code uses extAsyncInit correctly, but double-check there's no early execution).

2. Fixing Syntax & Logic Errors in Your Code #

Your schedule page has critical string syntax errors and missing UI elements—let's address those first.

Corrected Schedule Page HTML/JS #

<html>
<head>
  <title>Set your Schedule</title>
</head>
<body>
  <script>
    (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 = "//connect.facebook.com/en_US/messenger.Extensions.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'Messenger'));

    window.extAsyncInit = () => {
      // Verify context feature is supported first
      MessengerExtensions.getSupportedFeatures(
        function success(result) {
          if (result.supported_features.includes("context")) {
            // Replace with YOUR actual Facebook App ID
            const APP_ID = "YOUR_REAL_APP_ID";
            MessengerExtensions.getContext(APP_ID,
              function success(thread_context) {
                console.log("Context retrieved:", thread_context);
                document.getElementById("psid").value = thread_context.psid;
                document.getElementById("tid").value = thread_context.tid;
              },
              function error(err) {
                console.error("Failed to get context:", err);
                // Add fallback handling here (e.g., show error message to user)
              }
            );
          } else {
            console.error("Context feature not supported by this client");
          }
        },
        function error(err) {
          console.error("Failed to check supported features:", err);
        }
      );

      // Handle form submission
      document.getElementById('submitButton').addEventListener('click', () => {
        // Fix string concatenation using template literals
        const selectedDate = document.querySelector('input[name="dates"]:checked').value;
        const selectedTime = document.querySelector('input[name="times"]:checked').value;
        const selectedLocation = document.querySelector('input[name="locations"]:checked')?.value || "TBD";
        
        const messageToShare = {
          "text": `Your friend requested to watch on ${selectedDate} in the ${selectedTime} at ${selectedLocation}`
        };

        MessengerExtensions.beginShareFlow(
          function success(response) {
            if(response.is_sent === true){
              MessengerExtensions.requestCloseBrowser();
            } else {
              MessengerExtensions.requestCloseBrowser();
            }
          },
          function error(errorCode, errorMessage) {
            console.error("Share flow failed:", errorCode, errorMessage);
          },
          messageToShare,
          "current_thread"
        );
      });
    };
  </script>

  <form action="/schedulepostback" method="get">
    <input type="hidden" name="psid" id="psid"> <!-- Hidden to prevent user editing -->
    <input type="hidden" name="tid" id="tid">
    <h3>Date</h3>
    <input type="radio" name="dates" value="3 April" checked>3 April<br>
    <input type="radio" name="dates" value="4 April">4 April<br>
    <input type="radio" name="dates" value="5 April">5 April<br>
    <input type="radio" name="dates" value="6 April">6 April<br>
    <input type="radio" name="dates" value="7 April">7 April<br>
    <h3>Time</h3>
    <input type="radio" name="times" value="Daytime" checked>Daytime<br>
    <input type="radio" name="times" value="Evening">Evening<br>
    <h3>Location</h3> <!-- Added missing location inputs -->
    <input type="radio" name="locations" value="Downtown Cinema" checked>Downtown Cinema<br>
    <input type="radio" name="locations" value="Suburban Theater">Suburban Theater<br>
    <!-- Added missing submit button -->
    <button type="button" id="submitButton">Share Your Availability</button>
  </form>
</body>
</html>

Corrected Backend Route #

Update your /schedule route to use the more compatible Content-Security-Policy header instead of X-Frame-Options:

app.get('/schedule', (req, res, next) => {
  let referer = req.get('Referer');
  if (referer) {
    // Use Content-Security-Policy for better browser support
    res.setHeader('Content-Security-Policy', 'frame-ancestors https://www.messenger.com https://www.facebook.com');
    res.sendFile('public/schedule.html', {root: __dirname});
  } else {
    // Handle direct access (redirect or show error)
    res.status(403).send("Access denied: This page must be accessed via Messenger.");
  }
});

app.get('/schedulepostback', (req, res) => {
  let body = req.query;
  // Validate PSID exists before calling API
  if (!body.psid) {
    console.error("No PSID received in postback");
    return res.status(400).send("Invalid request: Missing PSID");
  }
  let response = {
    "text": `Great, you have agreed to watch on ${body.dates} in the ${body.times} at ${body.locations}`
  };
  res.status(200).send('Please close this window to return to the conversation thread.');
  callSendAPI(body.psid, response);
});

3. Additional Checks to Ensure Success #

• Test in Messenger: Always test your webview directly within the Messenger app (not a desktop browser) since some features only work in the native client.
• Debug Context Errors: Use the browser dev tools (in Messenger's webview) to check the console for specific error codes from getContext()—Facebook's docs list error codes and their fixes.
• Secure PSID Handling: Keep the PSID as a hidden input to prevent user tampering.

内容的提问来源于stack exchange，提问作者Squish